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，所以我们在布局中需要转换为dp
		width = 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;

//重写ScrollView

public 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 为目前滑动的高度 
	 */
	@Override
	protected 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;

	@Override
	protected 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，所以我们在布局中需要转换为dp
		width = 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() {
			
			@Override
			public 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));
				}
			}
		});
	}

	@Override
	public 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" >

    <ImageView
        android:id="@+id/topIv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_launcher" />

    <com.yqy.cmd.NotifyingScrollView
        android:id="@+id/mySv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true" >

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

            <View
                android:id="@+id/view"
                android:layout_width="match_parent"
                android:layout_height="80dp" />

            <LinearLayout
                android: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>

看下运行效果（比较丑）