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

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

 

 

 


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

发现在滑动的过程中可以发现以下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>

看下运行效果（比较丑）


 


最后大喊一声，开源万岁！！！