Android 自定义viewpager 三张图片在同一屏幕轮播的效果

最新推荐文章于 2024-04-11 16:00:24 发布
最新推荐文章于 2024-04-11 16:00:24 发布
阅读量1k 收藏 2
点赞数
文章标签： 移动开发 java

github：https://github.com/nickeyCode/RoundImageViewPager

说实话不知道怎么描述这个效果，在网页上见得跟多，公司要求做这个效果得时候不知道怎么用文字描述找不到对应的dome只好自己写。

先上图

大概效果就是这个。主要用的的知识点就是viewpager的自定义动画。

项目目录：

roundimg是圆形图片，继承ImageView的，上网好多可以搜索得到

viewpager主要分成三部分

一是viewpager本身，设置adapter，绑定监听器等。

二是adapter，继承PagerAdapter，用法跟listview的差不多。

三是动画类，继承PageTransformer。

首先看看最核心的动画类（能做到这个效果就是根据对应的动画变动）

HeadViewPagerTransformer.Java

public class HeadViewPagerTransformer implements PageTransformer{
    private static final float MIN_SCALE = 0.75f; 
    //主要是设置在不同位置上的VIEW的活动动画
    @Override
    public void transformPage(View view, float position) {
        // TODO Auto-generated method stub
         int pageWidth = view.getWidth();  
          
            if (position < -1) { // [-Infinity,-1)   
                view.setAlpha(0);  
            }
            else if (position <= 0) { // [-1,0]  
                view.setAlpha(1);  
                view.setTranslationX(0);  
                float x = -1.0f * (2f / 3f) * pageWidth * position;
                view.setTranslationX(x);  
                float scaleFactor = MIN_SCALE + (2 - MIN_SCALE) * (1 - Math.abs(position)); 
                view.setScaleX(scaleFactor);  
                view.setScaleY(scaleFactor); 
            } else if (position <= 1) { // (0,1]  
                view.setAlpha(1);  
                float x = -1.0f * (2f / 3f) * pageWidth * position;
                view.setTranslationX(x);  
                float scaleFactor = MIN_SCALE + (2 - MIN_SCALE) * (1 - Math.abs(position));  
                view.setScaleX(scaleFactor);  
                view.setScaleY(scaleFactor);  
      
            }
    }

}

因为在这个类中，viewpager中view都有对应的位置编号，在正中间显示的view位置是0

在左边的view位置是-1，在右边的view位置是1.（相当于一个坐标轴）

只要viewpager发生滑动，就会调用tansFromPager（）；position之说以是float类型，是因为如果发生滑动，位置就会有对应的变化，而变化精确到0.0001.

在函数中使用if-else来设定在不同位置区间中的view的动画变化；

if (position < -1) { // [-Infinity,-1)     
   view.setAlpha(0);    
}

这是负无穷到-1的区间，当然，如果你的viewpager缓存的view只有三个的话，这个就没有作用了，因为最多只有三个view，多出来就销毁了。

else if (position <= 0) { // [-1,0]  
                view.setAlpha(1);  
                view.setTranslationX(0);  
                float x = -1.0f * (2f / 3f) * pageWidth * position;
                view.setTranslationX(x);  
                float scaleFactor = MIN_SCALE + (2 - MIN_SCALE) * (1 - Math.abs(position)); 
                view.setScaleX(scaleFactor);  
                view.setScaleY(scaleFactor); }

这是-1到0的区间，就是左边的view到中间或中间的view到左边的动画效果，这里主要是做了两个动画变化，一是大小，二是位置。

这两个变化公式是根据位置的变化与动画数值的关系，解二元一次方程求出来的（初中数学知识。。。。）

具体方式就是balbalblabalbalb。。。。。（不多说）

同理

else if (position <= 1) { // (0,1]  
                view.setAlpha(1);  
                float x = -1.0f * (2f / 3f) * pageWidth * position;
                view.setTranslationX(x);  
                float scaleFactor = MIN_SCALE + (2 - MIN_SCALE) * (1 - Math.abs(position));  }

0到1的区间一样。在实际动画设计的过程中，公式是需要变动的。

剩下的都是普通的viewpager使用，设置adapter  （HeadViewPagerAdapter.java）

public class HeadViewPagerAdapter extends PagerAdapter {

    private Context mContext;
    private List<MyImageView> mList;
    
    public HeadViewPagerAdapter(Context context,List<MyImageView> list){
        this.mContext = context;
        this.mList = list;
    }
    
    @Override
    public int getCount() {
        // TODO Auto-generated method stub
        return mList.size();
    }

    @Override
    public boolean isViewFromObject(View arg0, Object arg1) {
        // TODO Auto-generated method stub
        return arg0 == arg1;
    }
    //当缓存view的数量超过上限时，会销毁最先的一个
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        // TODO Auto-generated method stub
        //Log.d("remove", mImageViews[position].hashCode() + "");
        container.removeView(mList.get(position));
    }
    //添加View
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        // TODO Auto-generated method stub
        container.addView(mList.get(position),0);
        return mList.get(position);
    }

}

还有就是对应的绑定：HeadViewPager.java

public class HeadViewPager extends FrameLayout {

    private Context mContext;
    private ViewPager mViewPager;
    private List<Integer> mImageIds;
    private List<MyImageView> mImageViews;
    private ViewGroup mViewGroup;
    private List<ImageView> tips;
    private int tipsChoseImgId;
    private int tipsUnchoseImgId;
    
    public HeadViewPager(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        // TODO Auto-generated constructor stub
        creatView(context);
    }

    public HeadViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
        // TODO Auto-generated constructor stub
        creatView(context);
    }

    public HeadViewPager(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
        creatView(context);
    }
    
    public HeadViewPager(Context context,List<MyImageView> imgageList) {
        super(context);
        // TODO Auto-generated constructor stub
        creatView(context,imgageList);
    }
    
    public void creatView(Context context){
        this.mContext = context;
        LayoutInflater.from(context).inflate(R.layout.head_view_pager, this);
        mViewPager = (ViewPager)findViewById(R.id.viewpager);
        mViewGroup = (ViewGroup)findViewById(R.id.viewgroup);
        mImageViews = new ArrayList<MyImageView>();
        mImageIds = new ArrayList<Integer>();
        tips = new ArrayList<ImageView>();
        tipsChoseImgId = R.drawable.img_bg_chose;
        tipsUnchoseImgId = R.drawable.img_bg_unchose;
        build();
    }
    
    public void creatView(Context context,List<MyImageView> imgageList){
        this.mContext = context;
        LayoutInflater.from(context).inflate(R.layout.head_view_pager, this);
        mViewPager = (ViewPager)findViewById(R.id.viewpager);
        mViewGroup = (ViewGroup)findViewById(R.id.viewgroup);
        mImageViews = imgageList;
        mImageIds = new ArrayList<Integer>();
        tips = new ArrayList<ImageView>();
        tipsChoseImgId = R.drawable.img_bg_chose;
        tipsUnchoseImgId = R.drawable.img_bg_unchose;
        build();
    }
    
    public void build(){
        buildTips();
        mViewPager.setAdapter(new HeadViewPagerAdapter(mContext,mImageViews));
        //设置默认显示页面为第0页
        mViewPager.setCurrentItem(0);
        //设置选择页面时的动画
        mViewPager.setPageTransformer(true, new HeadViewPagerTransformer());
        //设置缓存View的个数，默认是3个，这表示缓存了5个
        mViewPager.setOffscreenPageLimit(4);
        //页面发生改变的监听器
        mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
            //选择发生改变
            @Override
            public void onPageSelected(int arg0) {
                // TODO Auto-generated method stub
                changeTips(arg0);
            }
            //有滑动操作
            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {
                // TODO Auto-generated method stub
                
            }
            //滑动操作或选择改变
            @Override
            public void onPageScrollStateChanged(int arg0) {
                // TODO Auto-generated method stub
                
            }
        });
        
    }
    //初始化底部导航圆点条
    public void buildTips(){
        for (int i = 0 ; i < mImageViews.size() ; i ++){
            ImageView imageView = new ImageView(mContext);  
            imageView.setLayoutParams(new LayoutParams(10,10));   
            if(i == 0){  
                imageView.setBackgroundResource(tipsChoseImgId);  
            }else{  
                imageView.setBackgroundResource(tipsUnchoseImgId);  
            }  
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(new ViewGroup.LayoutParams(12,12));  
            layoutParams.leftMargin = 5;  
            layoutParams.rightMargin = 5;  
            tips.add(imageView); 
            mViewGroup.addView(imageView, layoutParams);  
        }
    }
    //当选定的页面发生改变时，导航条也对应改变
    public void changeTips(int index){
        for (int i = 0 ; i < tips.size() ; i ++){  
            if(i == index){  
                tips.get(i).setBackgroundResource(tipsChoseImgId);  
            }else{  
                tips.get(i).setBackgroundResource(tipsUnchoseImgId);  
            }  
        }
    }

    public Context getmContext() {
        return mContext;
    }

    public void setmContext(Context mContext) {
        this.mContext = mContext;
    }

    public ViewPager getmViewPager() {
        return mViewPager;
    }

    public void setmViewPager(ViewPager mViewPager) {
        this.mViewPager = mViewPager;
    }

    public List<MyImageView> getmImageViews() {
        return mImageViews;
    }
    //改变图片队列时，要更新整个viewPager
    public void setmImageViews(List<MyImageView> mImageViews) {
        this.mImageViews = mImageViews;
        this.mViewPager.notify();
        this.mViewPager.setCurrentItem(0);
        
    }

    public ViewGroup getmViewGroup() {
        return mViewGroup;
    }

    public void setmViewGroup(ViewGroup mViewGroup) {
        this.mViewGroup = mViewGroup;
    }

    public int getTipsChoseImgId() {
        return tipsChoseImgId;
    }

    public void setTipsChoseImgId(int tipsChoseImgId) {
        this.tipsChoseImgId = tipsChoseImgId;
    }

    public int getTipsUnchoseImgId() {
        return tipsUnchoseImgId;
    }

    public void setTipsUnchoseImgId(int tipsUnchoseImgId) {
        this.tipsUnchoseImgId = tipsUnchoseImgId;
    }    
}

样例项目资源：

http://download.csdn.NET/detail/nickey_1314/8932807

点击打开链接

weixin_34087301
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
RoundImageViewPager:自定义viewpager 多张图片在同一屏幕轮播的效果
05-19
自定义viewpager 多张图片在同一屏幕轮播的效果 viewpager主要分成三部分 一是viewpager本身，设置adapter，绑定监听器等。 二是adapter，继承PagerAdapter，用法跟listview的差不多。 三是动画类，继承...
android实现Materia Design风格APP（四）：ViewPager同时显示3个item及设置切换动画
wozuihaole的博客
04-12 838
1.实现viewpager同时显示三个item，这个效果实现起来还挺简单的。 只需要设置viewPager.setOffscreenPageLimit(3); 让viewpager可以显示3个item，并设置viewPager.setPageMargin(50);让每个item间有点间隔的效果 。在xml布局中设置viewpager和他的父控件的clipChildren属性为false就好了。 ...
Android 最完善的自定义Banner轮播图之一，带给你最全面的体验（三）
shenggaofei的博客
12-23 3343
Android 最完善的自定义Banner轮播图之一，带给你最全面的体验 Android 最完善的自定义Banner轮播图之一，带给你最全面的体验（三） https://github.com/bingoogolapple/BGABanner-Android 1.使用BGABanner-Android来实现一屏三页效果（显示三页banner图片，中间大两边小的缩放效果） 其他的效果在上面...
Android中ViewPager支持一屏多个View、切换动画以及无限滚动
HyperionChen
08-16 4766
1. 首先看一下最终的效果图2. 需求拆解第一眼看见上面的效果，是不是有些朋友觉得这个效果很酷，有的高手会觉得这个效果很简单。笔者昨天刚拿到需求的时候，最开始也是觉得这个很简单，可是越分析越发现好像实现出来并不是那么容易。单个的效果可能很简单，但是这么多的效果叠在一起，可能就比较复杂了。我简单得将这个效果任务拆解一下： 一屏要展示3个View，支持左右滑动 屏幕中间两侧的View移向中间时，会有一个
ViewPager实现一个无限轮播的轮播图， 将数据绑定自定义的view
qq_42890648的博客
02-03 561
上一节我们已经写好了自定义的view并且成功运行了，这一节我们把数据绑定进自定义的view 首先我们给自定义view中的几个控件设定好id并且在自定义的java类中进行声明和绑定 package com.example.viewpager.views; import android.content.Context; import android.util.AttributeSet; import android.view.LayoutInflater; ...
Android 实现图片轮播的三种方法，Android面试回忆录
2401_84149845的博客
04-06 889
本文讲解了我对Android开发现状的一些看法，也许有些人会觉得我的观点不对，但我认为没有绝对的对与错，一切交给时间去证明吧！愿与各位坚守的同胞们互相学习，共同进步！《互联网大厂面试真题解析、进阶开发核心学习笔记、全套讲解视频、实战项目源码讲义》点击传送门即可获取！2179261)][外链图片转存中…(img-RnkWjqmT-1712352179261)]既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点，真正体系化！
自定义viewpager 三张图片在同一屏幕轮播的效果
07-25
总结一下，实现“自定义viewpager 三张图片在同一屏幕轮播的效果”涉及以下关键点： 1. 自定义ViewPager子类，修改`onMeasure()`和`onPageScrolled()`方法。 2. 创建自定义PagerAdapter，处理三张图片的数据。 3. ...
Android使用ViewPager简单实现图片轮播效果
08-08
在Android开发中，`ViewPager` 是一个非常常用的组件，它允许用户通过左右滑动来浏览多个页面，非常适合用来实现图片轮播或者广告展示的效果。在这个示例中，我们将深入探讨如何利用`ViewPager`来创建一个简单的图片...
android图片轮播
03-14
在Android开发中，图片轮播是一种常见的用户界面组件，它通常用于展示一组图片或广告，让用户在有限的空间内浏览多张图片。实现Android图片轮播功能涉及到多个知识点，包括UI设计、图片加载优化、动画处理等。下面...
浅谈Viewpager和轮播图的冲突解决方法
08-30
因此，我们需要自定义Viewpager或轮播图，以便在适当的时候阻止事件冒泡到父视图。 以下是解决冲突的示例代码： ```java public class CustomViewPager extends ViewPager { private int downX; private int ...
android层叠式卡片横向轮播,Draggable Card-可拖动层叠卡片轮播的实现
weixin_32638607的博客
05-26 797
今天分享一个层叠卡片的拖动效果，好，现在开始一步一步来看是怎么实现的，定的是三张图片。1、第一步当然是创建三个图片，首先从最小的一张开始创建到顶部最大一张。来看一下效果图： 代码也很简单，实现一个for循环创建便可。for (int i = 0; i < DEFAULT_NUMBER; i++) {SwipeImageView *swipeV = [[SwipeImageView alloc...
Android 使用ViewPager实现view轮播效果，单个item分页样式，多个item分页样式，横向listview
最新发布
2301_79655438的博客
04-11 957
目前已经更新的部分资料：一个人可以走的很快，但一群人才能走的更远。不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人，都欢迎扫码加入我们的的圈子（技术交流、学习资源、职场吐槽、大厂内推、面试辅导），让我们一起学习成长！[外链图片转存中…(img-18OVTMYR-1712822410336)][外链图片转存中…(img-ktFE9dHO-1712822410337)]一个人可以走的很快，但一群人才能走的更远。
Android使用ViewPager实现左右循环滑动及轮播效果
xlhb的专栏
03-28 656
Android使用ViewPager实现左右循环滑动及轮播效果 ViewPager是一个常用的android组件，不过通常我们使用ViewPager的时候不能实现左右无限循环滑动，在滑到边界的时候会看到一个不能翻页的动画，可能影响用户体验。此外，某些区域性的ViewPager（例如展示广告或者公告之类的ViewPager），可能需要自动轮播的效果，即用户在不用滑动的情况下就能够看
android 卡片重叠轮播显示
lizhong
10-15 1328
android 卡片重叠轮播显示
Android：ViewPager2制作一个一屏多Item的轮播图
Dacaiji_的博客
04-18 5584
具体思路是利用clipToPadding属性和clipChildren属性 给ViewPager2设置一个内边距padding，添加clipToPadding属性，然后设置clipChildren，让父布局不要限制子View，设置padding后，padding部分的滑动事件不会被内部的RecyclerView收到，所以这里setOnTounchListener，直接交给rv。 viewPager2 = ViewPager2(context).also { it.setPadd
Android 实现图片轮播的三种方法，移动开发平台
m0_66145114的博客
01-28 3683
} @Override public void handleMessage(Message msg) { super.handleMessage(msg); Log.d(LOG_TAG, "receive message " + msg.what); MainActivity activity = weakReference.get(); if (activity==null){ //Activity已经回收，无需再处理UI了 return ; } //检查消息队列并移除未发送的消息，这主要是避免在复杂环境
android轮播图三张图片,GitHub - Liquidlkw/XBanner: 【图片轮播】支持图片无限轮播，支持AndroidX、自定义指示点、显示提示文字、切换动画、自定义布局，一屏显示多个...
weixin_42395426的博客
06-02 606
XBanner主要功能：支持一屏显示多个支持根据服务端返回的数据动态设置广告条的总页数支持大于等于1页时的无限循环自动轮播、手指按下暂停轮播、抬起手指开始轮播支持自定义状态指示点位置 左 、中 、右支持自定义状态指示点支持监听 item 点击事件支持设置图片轮播间隔支持指示器背景的修改及隐藏/显示支持显示提示性文字功能支持图片切换动画,目前支持10种切换动画，亦可设置自定义动画效果支持设置图片切...
android viewpager自定义画廊效果
06-02
要实现自定义画廊效果，可以通过继承ViewPager类，重写其onInterceptTouchEvent()和onTouchEvent()方法，并在onDraw()方法中绘制自定义效果。 以下是一个简单的实现步骤： 1. 继承ViewPager类，重写onInterceptTouchEvent()和onTouchEvent()方法，用于捕捉和处理触摸事件。 ```java public class GalleryViewPager extends ViewPager { private float mLastMotionX; private int mTouchSlop; public GalleryViewPager(Context context) { super(context); init(); } public GalleryViewPager(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { ViewConfiguration config = ViewConfiguration.get(getContext()); mTouchSlop = config.getScaledTouchSlop(); } @Override public boolean onInterceptTouchEvent(MotionEvent ev) { final int action = ev.getAction(); if ((action == MotionEvent.ACTION_MOVE) && (Math.abs(mLastMotionX - ev.getX()) > mTouchSlop)) { return true; } mLastMotionX = ev.getX(); return super.onInterceptTouchEvent(ev); } @Override public boolean onTouchEvent(MotionEvent ev) { return super.onTouchEvent(ev); } } ``` 2. 在onDraw()方法中绘制自定义效果。例如，可以绘制一个圆形的选中框，并将当前选中的页面放大。 ```java public class GalleryViewPager extends ViewPager { // ... private Paint mPaint; private RectF mRectF; private float mRadius; // 当前选中的页面索引 private int mCurrentPageIndex = 0; public GalleryViewPager(Context context) { super(context); init(); } public GalleryViewPager(Context context, AttributeSet attrs) { super(context, attrs); init(); } private void init() { // ... mPaint = new Paint(); mPaint.setAntiAlias(true); mPaint.setStyle(Paint.Style.STROKE); mPaint.setStrokeWidth(4); mPaint.setColor(Color.WHITE); mRadius = 100; mRectF = new RectF(); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); if (getChildCount() <= 0) { return; } // 绘制圆形选中框 float cx = getWidth() / 2f; float cy = getHeight() / 2f; float x = cx - mRadius; float y = cy - mRadius; mRectF.set(x, y, x + 2 * mRadius, y + 2 * mRadius); canvas.drawOval(mRectF, mPaint); // 放大当前选中的页面 View currentPage = getChildAt(mCurrentPageIndex); float currentScale = 1.2f; float scale = (currentPage.getWidth() * currentScale) / currentPage.getWidth(); currentPage.setScaleX(scale); currentPage.setScaleY(scale); } // ... } ``` 3. 在onPageSelected()方法中更新当前选中的页面索引，并调用invalidate()方法强制重绘。 ```java public class GalleryViewPager extends ViewPager { // ... @Override public void onPageSelected(int position) { mCurrentPageIndex = position; invalidate(); super.onPageSelected(position); } // ... } ``` 最后，使用自定义的GalleryViewPager代替原来的ViewPager即可。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值