Android UI之ViewPage实现当前视图放大左右视图露边及点击事件跳转

胖胖的熊

已于 2023-10-13 22:27:41 修改

阅读量212

点赞数

分类专栏： android-util 文章标签： ui android

于 2022-09-16 17:21:59 首次发布

本文链接：https://blog.csdn.net/ZJQ990909/article/details/126894456

版权

android-util 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一丶概述

一直想写个自己用的APP，将日常关注网站展现在一个app，方便个人兴趣阅读学习，刚好大舅也有一个给学生推荐课程定向学习的需求，这里介绍一个市场常见的展示效果：ViewPage实现当前视图放大左右视图露边及点击事件跳转。

二丶效果图

三丶需求分析

1.ViewPage滑动展示推荐课程

2.展示效果：当前视图放大，左右视频露边

3.点击跳转到相应网站（视频）学习

四丶具体实现

1.github淘宝

搜索ViewPage，点赞多的效果通常都会让人惊喜，远远满足功能需求

GitHub - rubensousa/ViewPagerCards: ViewPager cards inspired by Duolingo

这里直接采用了第二个链接的效果，UI略加改变，数据略加改变再加上点击事件就能达到需求。

2.一个类实现展示效果

ShadowTransformer.Java

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 we're going backwards, onPageScrolled receives the last position
        // instead of the current one
        if (goingLeft) {
            realCurrentPosition = position + 1;
            nextPosition = position;
            realOffset = 1 - positionOffset;
        } else {
            nextPosition = position + 1;
            realCurrentPosition = position;
            realOffset = positionOffset;
        }
 
        // Avoid crash on overscroll
        if (nextPosition > mAdapter.getCount() - 1
                || realCurrentPosition > mAdapter.getCount() - 1) {
            return;
        }
 
        CardView currentCard = mAdapter.getCardViewAt(realCurrentPosition);
 
        // This might be null if a fragment is being used
        // and the views weren't created yet
        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);
 
        // We might be scrolling fast enough so that the next (or previous) card
        // was already destroyed or a fragment might not have been created yet
        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) {
 
    }
}

这里具体实现当前视图放大，左右视频露边效果

3.cardAdapter接口专递position

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

接口主要传递position，当前视图确认

viewPage添加效果只需要在Activity传入要相应效果的mVadmViewPage和adapter

4.CardPagerAdapter绑定布局及数据，实现点击事件，图片加载，及webView跳转

public class CardPagerAdapter extends PagerAdapter implements CardAdapter {
 
    private Context mContext;
    private List<CardItem> mCardList;
 
    private View[] mViews;
 
    private float mBaseElevation;
 
    public CardPagerAdapter(Context context, List<CardItem> mCardList) {
        this.mContext = context;
        this.mCardList = mCardList;
        initView();
    }
 
    private void initView() {
        mViews = new View[mCardList.size()];
        LayoutInflater inflater = LayoutInflater.from(mContext);
        for (int index = 0, len = mCardList.size(); index < len; index++) {
            mViews[index] = inflater.inflate(R.layout.card_adapter, null, false);
        }
    }
 
    @Override
    public float getBaseElevation() {
        return mBaseElevation;
    }
 
    @Override
    public CardView getCardViewAt(int position) {
        return (CardView) mViews[position];
    }
 
    @Override
    public int getCount() {
        return mCardList.size();
    }
 
    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        return arg0 == arg1;
    }
 
    @Override
    public int getItemPosition(Object object) {
        return super.getItemPosition(object);
    }
 
    @Override
    public void destroyItem(ViewGroup arg0, int arg1, Object arg2) {
        int position = arg1 % mCardList.size();
        arg0.removeView(mViews[position]);
    }
 
    @Override
    public Object instantiateItem(ViewGroup arg0, int arg1) {
        int position = arg1 % mCardList.size();
        ImageView view = (ImageView) mViews[position].findViewById(R.id.img_cardview);
        String url = mCardList.get(position).getImagUrl();
        if (null != url && !url.equals("")) {
            Picasso.with(mContext)
                    .load(url)
                    .fit()
                    .into(view);
        }
        try {
            if (mViews[position].getParent() == null) {
                arg0.addView(mViews[position], 0);
            } else {
                ((ViewGroup) mViews[position].getParent()).removeAllViews();
 
                arg0.addView(mViews[position], 0);
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
 
        CardView cardView = (CardView)  mViews[position].findViewById(R.id.cardView);
        TextView titleTextView = (TextView)  mViews[position].findViewById(R.id.titleTextView);
        TextView contentTextView = (TextView)  mViews[position].findViewById(R.id.contentTextView);
        titleTextView.setText(mCardList.get(position).getTitle());
        contentTextView.setText("选课人数"+ "\n" +mCardList.get(position).getPeopleNum());
 
        if (mBaseElevation == 0) {
            mBaseElevation = cardView.getCardElevation();
        }
 
        cardView.setMaxCardElevation(mBaseElevation * MAX_ELEVATION_FACTOR);
 
        setOnClickListener(mViews[position].findViewById(R.id.cardView), position);
        return mViews[position];
    }
 
    @Override
    public void restoreState(Parcelable arg0, ClassLoader arg1) {
    }
 
    @Override
    public Parcelable saveState() {
        return null;
    }
 
    private void setOnClickListener(View view, final int index) {
        View.OnClickListener listener = new View.OnClickListener() {
 
            @Override
            public void onClick(View v) {
                if (!StringUtils.isEmpty(mCardList.get(index).getWebUrl())){
                    WebViewActivity.startWebViewActivity(mContext, mCardList.get(index).getWebUrl());
                }
            }
        };
        view.setOnClickListener(listener);
    }
 
}

5.造数据

cardItem对应需要展现的数据，图片url，跳转url，课程名称，报名人数

public class CardItem {
 
    private String webUrl;
    private String imagUrl;
    private String title;
    private String peopleNum;
 
    public String getImagUrl() {
        return imagUrl;
    }
 
    public void setImagUrl(String imagUrl) {
        this.imagUrl = imagUrl;
    }
 
    public String getWebUrl() {
        return webUrl;
    }
 
    public void setWebUrl(String webUrl) {
        this.webUrl = webUrl;
    }
 
    public String getTitle() {
        return title;
    }
 
    public void setTitle(String title) {
        this.title = title;
    }
 
    public String getPeopleNum() {
        return peopleNum;
    }
 
    public void setPeopleNum(String peopleNum) {
        this.peopleNum = peopleNum;
    }
}

6.指定网络页面数据（学堂在线网易公开课等，可按自己喜好配置）

public class CardArray extends AbsBaseEntity{
    private List<CardItem> mCardItems;
 
    public List<CardItem> getmCardItems() {
        return mCardItems;
    }
 
    public void setmCardItems(List<CardItem> mCardItems) {
        this.mCardItems = mCardItems;
    }
 
    @Override
    public void parseData() {
        mCardItems = new ArrayList<>();
        CardItem cardItem1 = new CardItem();
        cardItem1.setImagUrl("http://www.xuetangx.com/asset-v1:AFEU+20180116001+2018_T1+type@asset+block@11.jpg");
        cardItem1.setWebUrl("http://www.xuetangx.com/courses/course-v1:AFEU+20180116001+2018_T1/about");
        cardItem1.setPeopleNum("20000+");
        cardItem1.setTitle("航空电机学");
        mCardItems.add(cardItem1);
 
        CardItem cardItem2 = new CardItem();
        cardItem2.setImagUrl("http://www.xuetangx.com/asset-v1:AFEU+20180131001+2018_T2+type@asset+block@%E8%AF%BE%E7%A8%8B%E9%A6%96%E9%A1%B5.jpg");
        cardItem2.setWebUrl("http://www.xuetangx.com/courses/course-v1:AFEU+20180131001+2018_T2/about");
        cardItem2.setPeopleNum("20000+");
        cardItem2.setTitle("飞机推进系统原理");
        mCardItems.add(cardItem2);
 
        CardItem cardItem3 = new CardItem();
        cardItem3.setImagUrl("http://www.xuetangx.com/asset-v1:SEU+20171205001+sp+type@asset+block@%E5%86%9B%E4%BA%8B.jpg");
        cardItem3.setWebUrl("http://www.xuetangx.com/courses/course-v1:SEU+20171205001+2018_T1/about");
        cardItem3.setPeopleNum("20000+");
        cardItem3.setTitle("军事理论");
        mCardItems.add(cardItem3);
 
        CardItem cardItem4 = new CardItem();
        cardItem4.setImagUrl("http://img5.cache.netease.com/video/2014/7/15/2014071515340993d92.jpg");
        cardItem4.setWebUrl("http://open.163.com/special/opencourse/aspacetimeodyssey.html");
        cardItem4.setPeopleNum("20000+");
        cardItem4.setTitle("宇宙时空之旅");
        mCardItems.add(cardItem4);
 
    }
}

7.ViewPagerCardsActivity

 @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.view_pager_cards_activity);
        mViewPager = (ViewPager) findViewById(R.id.viewPager);
        CardArray cardArray = new CardArray();
        cardArray.parseData();
        mCardAdapter = new CardPagerAdapter(this,cardArray.getmCardItems());
        mCardShadowTransformer = new ShadowTransformer(mViewPager, mCardAdapter);
        mViewPager.setAdapter(mCardAdapter);
        mViewPager.setPageTransformer(false, mCardShadowTransformer);
        mViewPager.setOffscreenPageLimit(3);
        mCardShadowTransformer.enableScaling(true);
    }

源码下载：

GitHub - JinBoy23520/CoderToDeveloperByTCLer: TCL雏鹰飞翔计划 · Android 篇