Android的ViewPager(轮播图)的实现

最新推荐文章于 2024-04-08 01:28:12 发布
最新推荐文章于 2024-04-08 01:28:12 发布
阅读量641 收藏 1
点赞数
文章标签： android android-studio androidx
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hc982918683/article/details/134552192
版权
  1. 本文使用了ViewPager(androidx.viewpager.widget.ViewPager)来实现轮播图的功能

一、思路

 我们想要实现一个轮播图的功能，首先能想到的是使用ViewPager来实现。

  1. 就是使得ViewPager实现启动页来无限的轮播图片
  2. 启动一个定时器来完成自动的轮播效果。

二、代码布局

  • 效果图

  • 主界面布局XML
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:clipChildren="false"
    android:layerType="software"
    tools:ignore="MissingDefaultResource,ResourceName">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:clipChildren="false"
        android:layout_centerHorizontal="true"
        android:layout_marginHorizontal="60dp"
        android:layout_above="@+id/ll">
    </androidx.viewpager.widget.ViewPager>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginTop="10dp"
        android:orientation="vertical"
        android:visibility="visible">

        <TextView
            android:id="@+id/tv_filename"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="2dp"
            android:text=""
            android:textColor="@android:color/white" />

        <LinearLayout
            android:id="@+id/points"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center_horizontal"
            android:orientation="horizontal">
        </LinearLayout>

        <RelativeLayout
            android:id="@+id/ll_download"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <com.inroad.ui.widgets.InroadBtn_Medium
                android:id="@+id/btn_download"
                android:layout_width="120dp"
                android:layout_height="40dp"
                android:layout_marginTop="10dp"
                android:layout_centerHorizontal="true"
                android:gravity="center"
                android:visibility="invisible"
                android:text="@string/download_txt"/>
        </RelativeLayout>
    </LinearLayout>

</RelativeLayout>
  • 主dialog代码逻辑
private Context context;
    private DisplayMetrics display;

    private TextView fileName;
    private LinearLayout linearLayout;
    private InroadBtn_Medium btn_download;
    private ViewPager viewPager;

    private List<PanelFileBean> fileBeans;

    //设置圆点View
    private View view_point;
    private LinearLayout.LayoutParams layoutParams;

    //指示器标志位置
    private int pointIndex = 0;

    //自动轮播
    private Handler mHandler = new Handler();
    private int delayMillis = 5000;

    @Override
    public void setDialogType() {
        isFullWidth = true;
        heightOffset = 200;
        widthOffset = 30;
    }

    public InroadViewpagerDialog builder() {
        return this;
    }

    public InroadViewpagerDialog setPanelFileBean(List<PanelFileBean> panelFileBeans) {
        this.fileBeans = panelFileBeans;
        return this;
    }

    @Override
    public void initDialogWidth(WindowManager.LayoutParams wl, DisplayMetrics dm) {
        wl.width = (int) (dm.widthPixels * 1.0);
        wl.height = (int) (dm.heightPixels * 0.6);
    }

    public InroadViewpagerDialog(Context context) {
        this.context = context;
        display = new DisplayMetrics();
        WindowManager windowManager = (WindowManager) context.getSystemService(Context.WINDOW_SERVICE);
        windowManager.getDefaultDisplay().getMetrics(display);
    }

    @SuppressLint("MissingInflatedId")
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = LayoutInflater.from(context).inflate(R.layout.dialog_viewpager, null);
        getDialog().getWindow().setBackgroundDrawableResource(android.R.color.transparent);

        fileName = (TextView) view.findViewById(R.id.tv_filename);
        linearLayout = (LinearLayout) view.findViewById(R.id.points);
        viewPager = view.findViewById(R.id.viewpager);
        btn_download = view.findViewById(R.id.btn_download);
        RelativeLayout rl_download = view.findViewById(R.id.ll_download);

        rl_download.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                if (View.INVISIBLE == btn_download.getVisibility()) {
                    dismiss();
                }
            }
        });

        initViewData();

        return view;
    }

    public void show() {
        super.show(((AppCompatActivity) context).getSupportFragmentManager(), context.getClass().getSimpleName());
    }

    /**
     * 初始化view，赋值
     */
    private void initViewData() {
        initBtnDownload();

        for (PanelFileBean bean : fileBeans) { //设置圆点
            view_point = new View(context);
            layoutParams = new LinearLayout.LayoutParams(30, 30);
            layoutParams.leftMargin = 20;
            view_point.setBackgroundResource(R.drawable.point_selector);
            view_point.setLayoutParams(layoutParams);
            view_point.setEnabled(false);
            view_point.setTag(bean);
            linearLayout.addView(view_point);
        }
        linearLayout.getChildAt(pointIndex).setEnabled(true);

        fileName.setText(fileBeans.get(pointIndex).datavaluetitle);

        MeetingViewPagerAdapter meetingViewPagerAdapter = new MeetingViewPagerAdapter(context, fileBeans);
        viewPager.setAdapter(meetingViewPagerAdapter);
        viewPager.setPageTransformer(false, new ScaleTransformer());
        viewPager.setPageMargin(10);
        viewPager.setOffscreenPageLimit(fileBeans.size());
        viewPager.setCurrentItem(pointIndex, true);
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(final int position) {
                int newPosition = position % fileBeans.size();
                fileName.setText(fileBeans.get(newPosition).datavaluetitle);
                linearLayout.getChildAt(pointIndex).setEnabled(false);
                linearLayout.getChildAt(newPosition).setEnabled(true);
                pointIndex = newPosition;

                initBtnDownload();
            }

            @Override
            public void onPageScrollStateChanged(int state) {
                //当页面空闲状态被改变的时候
                if (state == ViewPager.SCROLL_STATE_IDLE) {
                    mHandler.postDelayed(runnable, delayMillis);//延时，自动轮播
                } else {
                    mHandler.removeCallbacks(runnable);//触摸页面，停止自动轮播
                }
            }
        });
    }

    /**
     * 下载按钮逻辑
     */
    private void initBtnDownload() {
        btn_download.setVisibility(View.INVISIBLE);
        if (!fileBeans.get(pointIndex).datavalue.endsWith(".png")
                && !fileBeans.get(pointIndex).datavalue.endsWith(".jpg")
                && !fileBeans.get(pointIndex).datavalue.endsWith(".jpeg")) {
            btn_download.setVisibility(View.VISIBLE);
        }
        btn_download.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                downloadFile(fileBeans.get(pointIndex));
            }
        });
    }

    /**
     * 文件下载
     *
     * @param bean
     */
    private void downloadFile(PanelFileBean bean) {
        //String suffix = FileUtils.getFileSuffix(fileBeans.get(newPosition).url); //获取扩展名
        String suffix = "";
        String fileName = FileUtils.getFileName(FileUtils.PATH_FILE, FileUtils.getStandardFileName(bean.datavaluetitle), suffix); //获取名称
        DownloadUtils.DownloadFile(bean.datavalue, fileName, suffix, null);
    }

    /**
     * 自动轮播图方法，实现无限轮播
     */
    private final Runnable runnable = new Runnable() {
        @Override
        public void run() {
            //获得轮播图当前的位置
            int currentPosition = viewPager.getCurrentItem();
            currentPosition++;
            viewPager.setCurrentItem(currentPosition, true);
            mHandler.postDelayed(runnable, delayMillis);
        }
    };

    @Override
    public void onResume() {
        super.onResume();
        mHandler.postDelayed(runnable, delayMillis);
    }

    @Override
    public void onPause() {
        super.onPause();
        mHandler.removeCallbacks(runnable);
    }
  • 指示器布局代码-drawable
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:shape="oval"
    tools:ignore="ResourceName">
    <corners android:radius="0.5dp" />
    <solid android:color="#428EFF" />
</shape>

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:shape="oval"
    tools:ignore="ResourceName">
    <corners android:radius="0.5dp" />
    <solid android:color="#AAFFFFFF" />
</shape>
  • 整合-实现效果布局代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:tools="http://schemas.android.com/tools" xmlns:android="http://schemas.android.com/apk/res/android" tools:ignore="ResourceName">
    <item android:drawable="@drawable/v_point_down" android:state_enabled="true" />
    <item android:drawable="@drawable/v_point_up" android:state_enabled="false" />
</selector>

三、ViewPager的适配器

public class MeetingViewPagerAdapter extends PagerAdapter {
    private List<PanelFileBean> panelFileBeans;
    private Context context;
    private LayoutInflater inflater;

    public MeetingViewPagerAdapter(Context context, List<PanelFileBean> list) {
        this.context = context;
        this.panelFileBeans = list;
        inflater = LayoutInflater.from(context);
    }

    @Override
    public int getCount() {
        //return panelFileBeans.size();
        return Integer.MAX_VALUE; // 无限轮播
    }

    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }

    @Override
    public Object instantiateItem(ViewGroup container, final int position) {
        View view = inflater.inflate(R.layout.item_viewpager, container, false);
        ImageView iv_open = (ImageView) view.findViewById(R.id.iv_open);
        iv_open.setVisibility(View.GONE);

        final int Position = position % panelFileBeans.size();

        ImageView imageView = (ImageView) view.findViewById(R.id.iv);
        imageView.setEnabled(false);
        imageView.setScaleType(ImageView.ScaleType.CENTER_INSIDE);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                InroadPictureDialog inroadPictureDialog = new InroadPictureDialog(context).builder();
                inroadPictureDialog.setData(panelFileBeans.get(Position));
                inroadPictureDialog.show();
            }
        });

        if (!TextUtils.isEmpty(panelFileBeans.get(Position).datavalue)) {
            String fileName = panelFileBeans.get(Position).datavalue.substring(panelFileBeans.get(Position).datavalue.lastIndexOf(".") + 1);
            switch (fileName) {
                case "png":
                case "jpg":
                case "jpeg":
                    imageView.setEnabled(true);
                    iv_open.setVisibility(View.VISIBLE);
                    imageView.setScaleType(ImageView.ScaleType.CENTER_CROP);
                    Glide.with(context).load(panelFileBeans.get(Position).datavalue).error(R.drawable.picture).placeholder(R.drawable.picture).into(imageView);
                    break;
                case "mp4":
                case "flv":
                case "avi":
                    imageView.setImageResource(R.drawable.file_vedio);
                    break;
                case "mp3":
                    imageView.setImageResource(R.drawable.file_mp3);
                    break;
                case "doc":
                case "docx":
                    imageView.setImageResource(R.drawable.file_word);
                    break;
                case "ppt":
                case "pptx":
                    imageView.setImageResource(R.drawable.file_ppt);
                    break;
                case "xls":
                case "xlsx":
                    imageView.setImageResource(R.drawable.file_excel);
                    break;
                case "pdf":
                    imageView.setImageResource(R.drawable.file_pdf);
                    break;
                case "txt":
                    imageView.setImageResource(R.drawable.file_txt);
                    break;
                default:
                    break;
            }
        }
        container.addView(view);
        return view;
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView((View) object);
    }

}
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@color/inroad_expand_color"
    android:orientation="vertical"
    tools:ignore="ResourceName">

    <ImageView
        android:id="@+id/iv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />

    <ImageView
        android:id="@+id/iv_open"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_alignParentEnd="true"
        android:scaleType="centerCrop"
        android:src="@drawable/icon_vp_open" />
</RelativeLayout>

四、PageTransformer

public class ScaleTransformer implements ViewPager.PageTransformer {
    private static final float MIN_SCALE = 0.85f;
    private static final float MIN_ALPHA = 0.5f;

    @Override
    public void transformPage(View page, float position) {
        if (position < -1 || position > 1) {
            page.setAlpha(MIN_ALPHA);
            page.setScaleX(MIN_SCALE);
            page.setScaleY(MIN_SCALE);
        } else if (position <= 1) {
            float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
            float scaleX;
            if (position < 0) {
                scaleX = 1 + 0.15f * position;
            } else {
                scaleX = 1 - 0.15f * position;
            }
            page.setScaleX(scaleX);
            page.setScaleY(scaleX);
            page.setAlpha(MIN_ALPHA + (scaleFactor - MIN_SCALE) / (1 - MIN_SCALE) * (1 - MIN_ALPHA));
        }
    }
}
二十八载
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android ViewPager+轮播图
2401_84121980的博客
04-14 625
最后为了帮助大家深刻理解Android相关知识点的原理以及面试相关知识，这里放上相关的我搜集整理的24套腾讯、字节跳动、阿里、百度2019-2021面试真题解析，我把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包知识脉络 + 诸多细节。还有高级架构技术进阶脑图、Android开发面试专题资料帮助大家学习提升进阶，也节省大家在网上搜索资料的时间来学习，也可以分享给身边好友一起学习。
Android使用ViewPager实现图片轮播系列之二：自动轮播
最新发布
2401_84123077的博客
04-22 280
总而言之，Android开发行业变化太快，作为技术人员就要保持终生学习的态度，让学习力成为核心竞争力，所谓“活到老学到老”只有不断的学习，不断的提升自己，才能跟紧行业的步伐，才能不被时代所淘汰。在这里我分享一份自己收录整理上述技术体系图相关的几十套腾讯、头条、阿里、美团等公司20年的面试题，把技术点整理成了视频和PDF（实际上比预期多花了不少精力），包含知识脉络 + 诸多细节，由于篇幅有限，这里以图片的形式给大家展示一部分。
Android开发-轮播图的详细实现
热门推荐
GYongJia的博客
04-28 3万+
实现不添加任何依赖自己实现轮播图，使用ViewPager和布局容器来实现轮播的功能 综合了网上几位博主的文章，这里提供最直接最明了的实现。 实现效果如下，这里只是简单的实现，以后有机会再改进，也欢迎大家来指导我。 1. 万事先改布局呗，activity_main.xml： <FrameLayout xmlns:android="http://schemas.android.com/...
Android 小控件
ppss177的博客
07-06 501
以滑动的方式显示view或fragment，ViewPager2通过Adapter显示Views或Fragments。
android 新闻轮播,]Android 仿网易新闻 ViewPager 实现图片自动轮播
weixin_29358811的博客
05-29 299
前言新闻 App 首页最上方一般会循环播放热点图片，如下图所示。本文主要介绍了利用 ViewPager 实现轮播图片，图片下方加上小圆点指示器标记当前位置，并利用 Timer+Handler 实现了自动轮播播放。xml 布局FrameLayout里面包含了ViewPager和LinearLayout，ViewPager 显示图片，LinearLayout是小圆点指示器区域，标记现在滑到哪张图片。查...
玩Android项目开发2-----首页（使用ViewPager自定义banner轮播图）
qq_33235287的博客
02-13 665
在上一节《玩Android项目开发------首页（ViewPager+BottomNavigationBar实现导航栏）》中，实现了基本框架的搭建，现在就从首页，也就是MainFragment开始实现功能的填充。 1、Fragment的MVP框架搭建 在之前，我们都是使用Activity作为View层，那么本项目中，涉及到Fragment的使用，因为Fragment也是属于View层，因此先将B...
Android 轮播图实现（新手易懂）
weixin_44241851的博客
05-01 1万+
Android 轮播图效果展示设计思路与代码讲解注意事项 源码 效果展示 可以自动播放，也可以手动滑动 设计思路与代码讲解 首先使用ViewPager实现滑动的效果，然后在适配器里面设置图片，接着写下面的point，如过展示的时当前的图片，point变颜色表示被选中 写界面 <?xml version="1.0" encoding="utf-8"?> <RelativeLa...
Android ViewPager实现轮播图效果
08-31
在Android开发中，实现动态轮播图效果通常采用ViewPager组件，它可以提供平滑的左右滑动体验，常用于展示广告、图片轮播等场景。本文将详细介绍如何使用Android的ViewPager和PagerAdapter来创建一个轮播图。 首先，...
Android 使用ViewPager实现轮播图效果
08-30
Android 使用ViewPager实现轮播图效果 Android 中的 ViewPager 是一个非常常用的控件，它可以用来实现轮播图效果。在本文中，我们将通过实例代码来讲解如何使用 ViewPager 实现轮播图效果，并且介绍了适配器和各个...
Android ViewPager实现图片轮播效果
09-01
在Android中，图片轮播主要是通过结合ViewPager和Handler来完成的。ViewPager本身可以方便地切换不同页面，而Handler则用于定期更新界面，改变ViewPager的currentItem属性，使其自动向后翻页。实现步骤如下： 1. **...
Android:ViewPager轮播图
07-10
本项目名为"Android:ViewPager轮播图"，它实现了自定义的ViewPager，具有无限自动轮播、点击事件处理、长按暂停及手指抬起恢复自动轮播等功能。以下将详细介绍这些知识点。 1. **ViewPager组件**： ViewPager是...
collectionview 显示中间大，两边小，展示图片或者内容
04-02
用swift开发的功能，解决了中间大，两边小的功能！滑动的图片！
Android使用ViewPager加载图片和轮播视频
08-31
主要为大家详细介绍了Android使用ViewPager加载图片和轮播视频，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Android TabLayout 使用进阶（含源码），2024年最新基于设计的研究是什么
2401_84150302的博客
04-08 385
i < num;i++) {
Android ViewPager的无限循环与自动滚动实现
rainmonth的专栏
09-26 7404
本文简要描述了Android中ViewPager两个常用功能——自动滚动和无限循环的具体实现思路，如有不当出处，欢迎指正。
Android顶部banner轮播图的两种实现（ViewPager+ViewPagerIndicator/banner）
scorpio的博客
10-26 6900
一、第一种方式：ViewPager+ViewPagerIndicator1、在gradle文件中，加入ViewPagerIndicator的依赖，我是以jar的形式添加 2、在布局文件中，写好布局： 3、在fragment中实例化： 4、为ViewPager添加适配器、为ViewPagerIndicator绑定ViewPager 5、编写ViewPager的适配器，继承自PagerAdapt
ViewPager 实现 GallerView 效果,  显示左右两边
chen930724的专栏
01-05 1万+
正常情况下, ViewPager  一页只能显示一项数据,  但是如果需求是,  除了小显示本页数据, 还有包 左右两半的数据 也都露出一点来呢? 这该怎么处理? 后面在网上了搜了一下, 发现有不少这样得到文章, 这里自己也写一篇总结一下. 其实 主要就是用到 View 的 android:clipChildren 属性. 简单来说这个属性,  就是 父View
Android ViewPager轮播图刷新notifyDataSetChanged无效
05-19
3. 适配器没有正确实现getItemPosition()方法：这个方法会告诉ViewPager哪些视图需要刷新。如果你没有正确地实现这个方法，ViewPager就不会刷新视图。 4. ViewPager没有正确设置监听器：当数据发生变化时，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值