美文网首页android开发杂识Android安卓 精品收藏
一分钟实现ViewPager卡片ViewPagerCards

一分钟实现ViewPager卡片ViewPagerCards

作者: 小怪兽打葫芦娃 | 来源:发表于2017-06-07 21:04 被阅读2550次

    Android程序员面试宝典

    自定义控件

    联网

    工具

    数据库

    源码分析相关面试题

    Activity相关面试题

    Service相关面试题

    与XMPP相关面试题

    与性能优化相关面试题

    与登录相关面试题

    与开发相关面试题

    与人事相关面试题

    配套视频 :

    http://www.toutiao.com/i6430935144185463297/

    </img>

    </img>

    使用步骤:

    第一步:初始化ViewPager:

    <android.support.v4.view.ViewPager
            android:id="@+id/viewPager"
            android:layout_width="match_parent"
            android:layout_height="330dp"
            android:layout_gravity="bottom"
            android:clipToPadding="false"
            android:overScrollMode="never"
            android:paddingBottom="30dp"
            android:paddingEnd="@dimen/card_padding"
            android:paddingLeft="@dimen/card_padding"
            android:paddingRight="@dimen/card_padding"
            android:paddingStart="@dimen/card_padding" />
    

    第二步:设置setPageTransformer:

    public class ShadowTransformer implements ViewPager.OnPageChangeListener, ViewPager.PageTransformer {
    
        private ViewPager mViewPager;
        private CardAdapter mAdapter;
        private float mLastOffset;
        private boolean mScalingEnabled;
    
    public ShadowTransformer(ViewPager viewPager, CardAdapter adapter) {
            mViewPager = viewPager;
            viewPager.addOnPageChangeListener(this);
            mAdapter = adapter;
        }
    
     public void enableScaling(boolean enable) {
          if (mScalingEnabled && !enable) {
                // shrink main card
             CardView currentCard = mAdapter.getCardViewAt(mViewPager.getCurrentItem());
                if (currentCard != null) {
                    currentCard.animate().scaleY(1);
                    currentCard.animate().scaleX(1);
              }
            }else if(!mScalingEnabled && enable){
                // grow main card
             CardView currentCard = mAdapter.getCardViewAt(mViewPager.getCurrentItem());
                if (currentCard != null) {
                    currentCard.animate().scaleY(1.1f);
                    currentCard.animate().scaleX(1.1f);
                }
            }
    
            mScalingEnabled = enable;
        }
    
        @Override
        public void transformPage(View page, float position) {
    
        }
    
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            int realCurrentPosition;
            int nextPosition;
            float baseElevation = mAdapter.getBaseElevation();
            float realOffset;
            boolean goingLeft = mLastOffset > positionOffset;
            if (goingLeft) {
                realCurrentPosition = position + 1;
                nextPosition = position;
                realOffset = 1 - positionOffset;
            } else {
                nextPosition = position + 1;
                realCurrentPosition = position;
                realOffset = positionOffset;
            }
            if (nextPosition > mAdapter.getCount() - 1
                    || realCurrentPosition > mAdapter.getCount() - 1) {
                return;
            }
            CardView currentCard = mAdapter.getCardViewAt(realCurrentPosition);
            if (currentCard != null) {
                if (mScalingEnabled) {
                    currentCard.setScaleX((float) (1 + 0.1 * (1 - realOffset)));
                    currentCard.setScaleY((float) (1 + 0.1 * (1 - realOffset)));
                }
                currentCard.setCardElevation((baseElevation + baseElevation
                        * (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (1 - realOffset)));
            }
            CardView nextCard = mAdapter.getCardViewAt(nextPosition);
            if (nextCard != null) {
                if (mScalingEnabled) {
                    nextCard.setScaleX((float) (1 + 0.1 * (realOffset)));
                    nextCard.setScaleY((float) (1 + 0.1 * (realOffset)));
                }
                nextCard.setCardElevation((baseElevation + baseElevation
                        * (CardAdapter.MAX_ELEVATION_FACTOR - 1) * (realOffset)));
            }
            mLastOffset = positionOffset;
        }
    
        @Override
        public void onPageSelected(int position) {
    
        }
    
        @Override
        public void onPageScrollStateChanged(int state) {
    
        }
    }
    

    第三步:设置setAdapter:

    public class CardFragmentPagerAdapter extends FragmentStatePagerAdapter implements CardAdapter {
    
        private List<CardFragment> mFragments;
        private float mBaseElevation;
    
        public CardFragmentPagerAdapter(FragmentManager fm, float baseElevation) {
            super(fm);
            mFragments = new ArrayList<>();
            mBaseElevation = baseElevation;
    
            for(int i = 0; i< 5; i++){
                addCardFragment(new CardFragment());
            }
        }
    
        @Override
        public float getBaseElevation() {
            return mBaseElevation;
        }
    
        @Override
        public CardView getCardViewAt(int position) {
            return mFragments.get(position).getCardView();
        }
    
        @Override
        public int getCount() {
            return mFragments.size();
        }
    
        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }
    
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            Object fragment = super.instantiateItem(container, position);
            mFragments.set(position, (CardFragment) fragment);
            return fragment;
        }
    
        public void addCardFragment(CardFragment fragment) {
            mFragments.add(fragment);
        }
    
    }
    

    第四步:设置CardAdapter:

    public interface CardAdapter {
    
        int MAX_ELEVATION_FACTOR = 8;
    
        float getBaseElevation();
    
        CardView getCardViewAt(int position);
    
        int getCount();
    }
    

    第五步:实现:

    mViewPager.setAdapter(mFragmentCardAdapter);
    mViewPager.setPageTransformer(false, mFragmentCardShadowTransformer);
    
    • 欢迎关注微信公众号、长期为您推荐优秀博文、开源项目、视频

    • 微信公众号名称:Android干货程序员

    相关文章

      网友评论

      • 567dacd0f6dd:楼主,你好,那种向QQ音乐听歌界面3个Item,第1个和第3个都向中间第2个滑动,会平移加渐变但是中间第2个界面不动的效果是怎么实现的

      本文标题:一分钟实现ViewPager卡片ViewPagerCards

      本文链接:https://www.haomeiwen.com/subject/nibafxtx.html