Android 视差特效（仿QQ我的资料实现图片）
一、引入：本人不会截取动图，所以直接上代码了，实现起来也比较简单。
我的CSDN直接上代码，你们复制实现效果就行，我的简书总结了部分理论，目前正在更新，简书链接简书传送门
二、正题
1.首先自定义一个View
public class ZoomListView extends ListView {
private static final String TAG = "ZoomListView";
//ImageView的初始的高度
private int mImageViewHeight;
private ImageView mImageView;
public ZoomListView(Context context) {
this(context, null);
}
public ZoomListView(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ZoomListView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
/**
* 初始化一些必要的条件
*/
private void init() {
//获取mIageView的初始高度
mImageViewHeight =getContext().getResources().getDimensionPixelSize(R.dimen.size_default_height);
Log.e(TAG, "mImageViewHeight:" + mImageViewHeight);
}
/**
* 设置ImageView
*
* @param imageView
*/
public void setImageView(ImageView imageView) {
this.mImageView = imageView;
}
/**
* 步骤2：实现下拉图片大
*
* @param deltaY Y轴上超出的距离
* @param deltaX X轴上超出的距离
*/
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
//当deltaY的时候表示向下过度滑动
if (deltaY < 0 ) {
/* int imageViewHeight = mImageView.getHeight() - deltaY;
mImageView.getLayoutParams().height = imageViewHeight;
//重新绘制ImageView
mImageView.requestLayout();*/
int newHeight = mImageView.getHeight() + Math.abs(deltaY);
if(newHeight<800){
mImageView.getLayoutParams().height=newHeight;
mImageView.requestLayout();
}
}
//当deltaY>0的时候表示上拉过度
else
{
if (mImageView.getHeight() > mImageViewHeight) {
mImageView.getLayoutParams().height = mImageView.getHeight()
- deltaY;
// 重新绘制，或者叫重新摆放
mImageView.requestLayout();
}
}
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}
/**
* 步骤3：实现图片
* *@param l
* @param t
* @param oldl
* @param oldt
*/
@Override
protected void onScrollChanged(int l, int t, int oldl, int oldt) {
//得到mImageView的父布局，这里明显是headview
View parent = (View) mImageView.getParent();
//实际内容的上边界到父布局上边界的距离
int top = parent.getTop();
if (top < 0 && mImageView.getHeight() > mImageViewHeight) {
//计算图片的高度
int imageViewHeight = mImageView.getHeight() + top;
mImageView.getLayoutParams().height = imageViewHeight;
//重新布局
parent.layout(parent.getLeft(), 0, parent.getRight(), parent.getHeight());
mImageView.requestLayout();
}
super.onScrollChanged(l, t, oldl, oldt);
}
/**
* 步骤3：实现松手回弹动画
*
* @param ev
* @return
*/
@Override
public boolean onTouchEvent(MotionEvent ev) {
if(ev.getAction()==MotionEvent.ACTION_MOVE){
}
//这里我们只需要实现UP事件
if (ev.getAction() == MotionEvent.ACTION_UP) {
Log.w(TAG, "UP");
//情动回弹动画
ResetAnimation animation = new ResetAnimation(mImageView);
animation.setDuration(300);
mImageView.startAnimation(animation);
}
return super.onTouchEvent(ev);
}
/**
* 自定义一个会弹动画
*/
class ResetAnimation extends Animation {
private ImageView imageView;
//高度差
private int dHeight;
//图片拉升以后的高度
private int orginHeight;
public ResetAnimation(ImageView imageView) {
this.imageView = imageView;
orginHeight=this.imageView.getHeight();
dHeight = orginHeight - mImageViewHeight;
Log.w(TAG, "dHeight：" + dHeight);
}
/**
* 这个方法是为一个自定义动画需要重写的方法
*
* @param interpolatedTime 动画时间0~1.0
* @param t
*/
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
Log.w(TAG, "applyTransformation");
Log.w(TAG, "interpolatedTime：" + interpolatedTime);
//设置图片的大小
//计算图片的高度
int imageViewHeight = (int) (orginHeight - dHeight * interpolatedTime);
mImageView.getLayoutParams().height = imageViewHeight;
mImageView.requestLayout();
super.applyTransformation(interpolatedTime, t);
}
}
}
2.适配器：
public class ItemAdapter extends BaseAdapter {
private List list;
private Context mContext;
private LayoutInflater mInflater;
public ItemAdapter(List list, Context mContext) {
super();
this.list = list;
this.mContext = mContext;
mInflater = LayoutInflater.from(mContext);
}
@Override
public int getCount() {
// TODO Auto-generated method stub
return list.size();
}
@Override
public Object getItem(int position) {
// TODO Auto-generated method stub
return list.get(position);
}
@Override
public long getItemId(int position) {
// TODO Auto-generated method stub
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
ViewHolder mViewHoder = null;
if (convertView == null) {
mViewHoder = new ViewHolder();
convertView = mInflater.inflate(R.layout.item, null);
mViewHoder.item = (TextView) convertView.findViewById(R.id.item);
convertView.setTag(mViewHoder);
} else {
mViewHoder = (ViewHolder) convertView.getTag();
}
mViewHoder.item.setText(getItem(position).toString());
return convertView;
}
class ViewHolder {
TextView item;
}
}
3.主页面：
public class MainActivity extends AppCompatActivity {
private ZoomListView zoomListView;
private ImageView imageView;
private List list;
private ItemAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initViews();
initData();
}
private void initData() {
// TODO Auto-generated method stub
for (int i = 0; i < 20; i++) {
list.add("测试数据" + i);
}
adapter.notifyDataSetChanged();
}
private void initViews() {
// TODO Auto-generated method stub
list = new ArrayList();
adapter = new ItemAdapter(list, this);
zoomListView = (ZoomListView) findViewById(R.id.zoomListView);
// 加载布局文件
View header = View.inflate(MainActivity.this, R.layout.headview,
null);
imageView = (ImageView) header.findViewById(R.id.layout_header_image);
// 将ImageView传递给ListView
zoomListView.setImageView(imageView);
// 给ListView添加头文件
zoomListView.addHeaderView(header);
// 设置适配器
zoomListView.setAdapter(adapter);
}
}
4.3个布局
activity_main页面导入自定义控件
headview加入一个Image控件
item加入一个TextView控件
5.values下创建一个dimen文件
500px