The chanelview from yanxuwen

chanelview's Introduction

ChanelView

废话不多说，请看效果图。

Chanel App效果图	我实现的效果

实现原理介绍

采用的是竖行的ViewPage 来实现的，相信大家都知道怎么弄，然后就是在ViewPage的transformPage方法里面,里面要怎么样的效果都可以自行修改。

 mVerticalViewPager.setPageTransformer(false, new ViewPager.PageTransformer() {
            @Override
            public void transformPage(View view, float position) {
                int pageHeight = view.getHeight();
                ImageView iv_picture=view.findViewById(R.id.iv_picture);
                if (position < 1) {
                    view.setTranslationY(mOffset * position);
                    //移动文字
                    if (position >= 0) {
                        TextView tv_title2=(TextView) view.findViewById(R.id.tv_title2);
                        TextView tv_sign=(TextView)view. findViewById(R.id.tv_sign);
                        RelativeLayout layout_live_content=(RelativeLayout) view.findViewById(R.id.layout_live_content);

                        tv_title2.setAlpha((1-position));
                        iv_picture.setScaleX((float) ((1-position)*0.2+1));
                        iv_picture.setScaleY((float) ((1-position)*0.2+1));

                        float live_content_offset;
                        //如果在最后一个，则移动到底部50dp
                        if(tv_sign.getText().toString().trim().equals((list.size() -1))){
                            live_content_offset = pageHeight - MainActivity.this.getResources().getDimension(R.dimen.DIMEN_120DP);
                        } else {
                            live_content_offset = pageHeight -  MainActivity.this.getResources().getDimension(R.dimen.DIMEN_300DP);
                        }
                        layout_live_content.setTranslationY(live_content_offset * (1 - position));
                    }
                } else { // (1,+Infinity]
                    view.setTranslationY(-pageHeight * (position - 1) + (mOffset + (position - 1) * (-mOffset / 2)));
                }
            }
        });