android 仿QQ五毛特效之查看红包领取详情界面

这篇是15年写的没有审核成功，今天看到，重新发布了下，没想到发布成功了~~！

首先我们看下上下滑动的效果

从左到右依次为往上滑动的截图

发现在滑动的过程中可以发现以下3点：

1、发起者的部分进行了缩放，我们一般缩放的对象的为图片

2、然后在qq的这个界面发起者的部分不可点击没有点击事件

3、手指上下滑动多少，界面就回滑动多少

我们继续分析这样的布局滑动无非就是ScrollView 之类的自定义类

根据我们发现的几点可以分析出以下3点：

1、发起者部分可能在ScrollView布局中因为它看起来像是可以滑动

2、发起者部分应该是画的图片

3、根据发现的第3点可以否定上面第一点，原因是：如果在滑动的过程中发起者的部分进行缩放了，那么滑动的距离应该比手机滑动的要多

根据以上分析我们可以猜想出这个钱包领取详情几面的布局

最大的布局为RelativeLayout

第一个child为发起者的图片部分不用填写属性

第二个child为全屏的ScrollView 同样不用写属性

这样我们看到ScrollView 覆盖在发起者图片部分上方

然后ScrollView的布局组成部分为

第一个child为一个与发起者图片部分同等大小的透明的View

第二个就是下方的列表ListView等

发起者部分的宽度为屏幕的宽度，我们可以根据一定的比例宽：高=3 设置发起者部分,ScrollView中透明部分宽高

       //屏幕的宽高单位为px，所以我们在布局中需要转换为dpwidth = ScreenUtils.getScreenWidth(this);height = ScreenUtils.getScreenHeight(this);

    /** * 获得屏幕宽度 *  */  public static int getScreenWidth(Context context) {  WindowManager wm = (WindowManager) context  .getSystemService(Context.WINDOW_SERVICE);  DisplayMetrics outMetrics = new DisplayMetrics();  wm.getDefaultDisplay().getMetrics(outMetrics);  int width = outMetrics.widthPixels;  return width;  }  /** * 获得屏幕高度 */  public static int getScreenHeight(Context context) {  WindowManager wm = (WindowManager) context  .getSystemService(Context.WINDOW_SERVICE);  DisplayMetrics outMetrics = new DisplayMetrics();  wm.getDefaultDisplay().getMetrics(outMetrics);  int height = outMetrics.heightPixels;  return height;  }

需要写一个自定义的ScrollView 来获取滚动的高度


import android.content.Context;
import android.util.AttributeSet;
import android.widget.ScrollView;//重写ScrollViewpublic class NotifyingScrollView extends ScrollView {/*** @author Cyril Mottier*/public interface OnScrollChangedListener {void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt);}private OnScrollChangedListener mOnScrollChangedListener;public NotifyingScrollView(Context context) {super(context);}public NotifyingScrollView(Context context, AttributeSet attrs) {super(context, attrs);}public NotifyingScrollView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}/*** t 为目前滑动的高度 */@Overrideprotected void onScrollChanged(int l, int t, int oldl, int oldt) {super.onScrollChanged(l, t, oldl, oldt);if (mOnScrollChangedListener != null) {mOnScrollChangedListener.onScrollChanged(this, l, t, oldl, oldt);}}public void setOnScrollChangedListener(OnScrollChangedListener listener) {mOnScrollChangedListener = listener;}}

MainActivity代码

package com.yqy.cmd;import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup.LayoutParams;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.ScrollView;import com.yqy.cmd.NotifyingScrollView.OnScrollChangedListener;public class MainActivity extends Activity {private ImageView topIv;private NotifyingScrollView mySv;private View view;private LinearLayout myLl;private int width;private int height;private int allowHeight;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);topIv = (ImageView) findViewById(R.id.topIv);mySv = (NotifyingScrollView) findViewById(R.id.mySv);view = findViewById(R.id.view);myLl = (LinearLayout) findViewById(R.id.myLl);//屏幕的宽高单位为px，所以我们在布局中需要转换为dpwidth = ScreenUtils.getScreenWidth(this);height = ScreenUtils.getScreenHeight(this);allowHeight = Utils.px2dip(this, height) / 3;topIv.setLayoutParams(new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, Utils.px2dip(this, height) / 3));view.setLayoutParams(new LinearLayout.LayoutParams(LayoutParams.MATCH_PARENT, Utils.px2dip(this, height) / 3));mySv.setOnScrollChangedListener(new OnScrollChangedListener() {@Overridepublic void onScrollChanged(ScrollView who, int l, int t, int oldl, int oldt) {if(t < allowHeight){int height = allowHeight - t;topIv.setLayoutParams(new RelativeLayout.LayoutParams(height*3, height));}}});}@Overridepublic boolean onCreateOptionsMenu(Menu menu) {getMenuInflater().inflate(R.menu.main, menu);return true;}}

activity_main布局

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:background="@android:color/holo_red_light"tools:context=".MainActivity"tools:ignore="NewApi" ><ImageViewandroid:id="@+id/topIv"android:layout_width="match_parent"android:layout_height="wrap_content"android:background="@drawable/ic_launcher" /><com.yqy.cmd.NotifyingScrollViewandroid:id="@+id/mySv"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_alignParentLeft="true"android:layout_alignParentTop="true" ><LinearLayoutandroid:layout_width="match_parent"android:layout_height="wrap_content"android:orientation="vertical" ><Viewandroid:id="@+id/view"android:layout_width="match_parent"android:layout_height="80dp" /><LinearLayoutandroid:id="@+id/myLl"android:layout_width="match_parent"android:layout_height="1000dp"android:background="@android:color/white"android:orientation="vertical" ></LinearLayout></LinearLayout></com.yqy.cmd.NotifyingScrollView></RelativeLayout>

看下运行效果（比较丑）