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<String> list;

    private Context mContext;

    private LayoutInflater mInflater;

    public ItemAdapter(List<String> 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<String> 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<String>();
        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页面导入自定义控件

<com.example.app3.ZoomListView
        android:id="@+id/zoomListView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

headview加入一个Image控件

<ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:background="@drawable/q"
        android:id="@+id/layout_header_image"/>

item加入一个TextView控件

<TextView
        android:id="@+id/item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="15dp" />

5.values下创建一个dimen文件

<resources>
    <dimen name="size_default_height">500px</dimen>
</resources>
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值