打造好用的App首页轮播图~~

最新推荐文章于 2022-07-27 19:05:29 发布
最新推荐文章于 2022-07-27 19:05:29 发布
阅读量3.8k 收藏 2
点赞数 2
分类专栏： 安卓 文章标签： app viewpager 控件 android
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/katherine_qj/article/details/53259074
版权

我们在项目中首页经常会有一个轮播图模块
是利用viewpager实现的 每次都要重新写一遍所有的逻辑没有复用的效果
所以就把这个东西封装好来达到复用的效果使用起来也特别简单
这篇博客会先给一个简单使用的例子之后再分析实现的过程
虽然写的很烂
看到后面应该会有一点点东西的
吧~

先看一个效果图：
这里写图片描述

好单调~~~~不过能看到
就是个基本的轮播图
和别的控件配合起来就会很好多
我已经封装好了
先说说怎么用

第一步：

在git上把我写好的这个类下载下来Git_ViewPagerClass
git上是一个完整的例子啊

在你的项目里面加入这个类就是这个ViewPagerClass ~~~~我一般就直接复制了因为别的我也不会
然后项目结构就大概是这样：
这里写图片描述

第二步：

在你要使用的xml文件中直接使用这个类：
这里写图片描述

因为我的包名是com.example.katherine_qj.viewpagerdemo
所以控件的名字是这样
那你的肯定就是你的包名加类名这样子
我也
不知道我说的清楚不

大概就是在xml中引用你项目中的这个类~~~
ViewPagerClass

第三步：

这里写图片描述

很清楚吧
就是实例化viewPager之后给他暴露出来的setViewPagerViews( )方法中传入一个list集合就好了
集合里面是你要轮播的图片 底部指示物会根据你添加的图片自动生成相应的个数
~~

如果你只是想使用一个现成的轮播图 以上就可以了

—————————————————————

以下
来分析一下这个轮播图是如何封装的：

我想把我大概的思路写一下
首先想一下写一个轮播图需要什么？

需要装图片
需要小圆点显示播放到哪一张了
还需要把viewpager和小圆点联系起来
跑的时候图片轮播小圆点也要动

所以我们先画一张图这样子
这里写图片描述

我们第一步就是要把这些小控件组在一起
把他们都放到RelativeLayout中

第二步 我们采用线程的方式让他们跑起来
这样分为两步就清楚很多

这个类的创建思路我先画图表示出来

是怎么把控件放在一起的
这里写图片描述

看一下这部分的代码

  • 这是初始化viewpager和小圆点部分 可以看到就是把viewpager和linearLayout放到Relativelayout中

 public void initViewPager() {
        viewPager = new ViewPager(getContext());
        LayoutParams viewPagerLp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        addView(viewPager,viewPagerLp);
    }
   /* 初始化LinearLayout*/
    public void initLinearLayout(){
        viewDots = new LinearLayout(getContext());
        LayoutParams viewDotsLp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        viewDotsLp.addRule(ALIGN_PARENT_BOTTOM);
        viewDotsLp.bottomMargin = dpTopx(5);
        viewDots.setGravity(gravity);
        addView(viewDots,viewDotsLp);
    }
  • 这是我们为Viewpager构造的适配器
    继承自pagerAdapter重载了四个方法 方法的解释代码中都有
class ViewPagerAdapter extends PagerAdapter{
    /*以下四个方法是必须被重载的*/
        @Override
        public int getCount() {
           if (views==null){
               return 0;
           }
            return views.size();
        }
         /*
        该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key
        与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
        /*为即将展示页做操作*/
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            if (views.get(position).getParent()!=null){
                ((ViewGroup)views.get(position).getParent()).removeView(views.get(position));
            }
            container.addView(views.get(position));
            return views.get(position);
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView(views.get(position));
        }
    }
  • 根据图片数量生成圆点 圆点的两种样式可以 自己设置放在drawable文件夹下
 /*根据图片数量生成圆点*/
    private void addDots(int size){
        dots = new ArrayList<ImageView>();
        for (int i = 0; i < size; i++) {
            ImageView dot = new ImageView(getContext());
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    dpTopx(dotsRedio), dpTopx(dotsRedio));
            params.setMargins(dpTopx(dotsSpacing), 0, dpTopx(dotsSpacing), 0);
            dot.setLayoutParams(params);
            if (i == 0) {
                dot.setBackgroundResource(R.drawable.dot_focused);
            } else {
                dot.setBackgroundResource(R.drawable.dot_normal);
            }
            dots.add(dot);
            viewDots.addView(dot);
        }
    }
  • 下面就是我们暴露出来的一个方法 传入一个图片集合我们 在里面通过 设置适配生成圆点 设置滑动事件等把之前的准备联系在一起
 public void setViewPagerViews(List<View> views){
        this.views = views;
        addDots(views.size());
        viewPager.setAdapter(new ViewPagerAdapter());
        /*滑动的时候要改变圆点的颜色*/
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int positiona) {
             position = positiona;
                for (int i = 0; i < dots.size(); i++) {
                    if (position == i) {
                        dots.get(i).setBackgroundResource(
                                R.drawable.dot_focused);
                    } else {
                        dots.get(i)
                                .setBackgroundResource(R.drawable.dot_normal);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                    case MotionEvent.ACTION_MOVE:
                        isContinue = false;
                        break;
                    case MotionEvent.ACTION_UP:
                        isContinue = true;
                        break;
                    default:
                        isContinue = true;
                        break;
                }
                return false;
            }
        });
        new Thread(this).start();
    }
  • 最后可以看见有一个线程开始执行的语句 那就是当我们都设置好 了之后就可以通过线程让他轮播起来
 @Override
    public void run() {
        while (isAlive) {
            if (isContinue) {
                pagerHandler.sendEmptyMessage(position);
                position = (position + 1) % views.size();
                try {
                    Thread.sleep(changeTime);
                } catch (InterruptedException e) {
                }
            }
        }
    }

    Handler pagerHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            viewPager.setCurrentItem(msg.what);
           /* setCurrentItem(int index)方法主要用来制定初始化的页面。
            例如加入3个页面通过setCurrentItem(0)制定第一个页面为当前页面*/
            super.handleMessage(msg);
        }
    };

以上就是实现过程
还有一些小细节

可以看一下我这个类全部的代码

package com.example.katherine_qj.viewpagerdemo;

import android.content.Context;
import android.os.Handler;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.text.Layout;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.MotionEvent;
import android.view.View;

import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by Katherine-qj on 2016/11/20.
 */

public class ViewPagerClass extends RelativeLayout implements Runnable {
    /*定义初始变量*/
    /*定义关于ViewPager初始变量*/
    private ViewPager viewPager;
    private List<View> views;
    /*定义关于小圆点的初始变量*/
    private LinearLayout viewDots;
    private List<ImageView> dots;
    private int dotsSpacing = 2;
    private int dotsRedio = 15;
    /*定于关于轮播的初始变量*/
    private int position = 0;
    private boolean isContinue = true;
    private boolean isAlive = true;
    private  int gravity = Gravity.RIGHT;
    private  int changeTime = 1500;



    public ViewPagerClass(Context context) {
        this(context, null);
    }

    public ViewPagerClass(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public ViewPagerClass(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        initViewPager();
        initLinearLayout();
    }
    /*初始化viewPager*/
    public void initViewPager() {
        viewPager = new ViewPager(getContext());
        LayoutParams viewPagerLp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);
        addView(viewPager,viewPagerLp);
    }
   /* 初始化LinearLayout*/
    public void initLinearLayout(){
        viewDots = new LinearLayout(getContext());
        LayoutParams viewDotsLp = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT);
        viewDotsLp.addRule(ALIGN_PARENT_BOTTOM);
        viewDotsLp.bottomMargin = dpTopx(5);
        viewDots.setGravity(gravity);
        addView(viewDots,viewDotsLp);
    }
    /*为viewPager构造适配器*/
    class ViewPagerAdapter extends PagerAdapter{
    /*以下四个方法是必须被重载的*/
        @Override
        public int getCount() {
           if (views==null){
               return 0;
           }
            return views.size();
        }
         /*
        该函数用来判断instantiateItem(ViewGroup, int)函数所返回来的Key
        与一个页面视图是否是代表的同一个视图(即它俩是否是对应的，对应的表示同一个View)
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view==object;
        }
        /*为即将展示页做操作*/
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            if (views.get(position).getParent()!=null){
                ((ViewGroup)views.get(position).getParent()).removeView(views.get(position));
            }
            container.addView(views.get(position));
            return views.get(position);
        }

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


    /*根据图片数量生成圆点*/
    private void addDots(int size){
        dots = new ArrayList<ImageView>();
        for (int i = 0; i < size; i++) {
            ImageView dot = new ImageView(getContext());
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                    dpTopx(dotsRedio), dpTopx(dotsRedio));
            params.setMargins(dpTopx(dotsSpacing), 0, dpTopx(dotsSpacing), 0);
            dot.setLayoutParams(params);
            if (i == 0) {
                dot.setBackgroundResource(R.drawable.dot_focused);
            } else {
                dot.setBackgroundResource(R.drawable.dot_normal);
            }
            dots.add(dot);
            viewDots.addView(dot);
        }
    }
    public void setViewPagerViews(List<View> views){
        this.views = views;
        addDots(views.size());
        viewPager.setAdapter(new ViewPagerAdapter());
        /*滑动的时候要改变圆点的颜色*/
        viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int positiona) {
             position = positiona;
                for (int i = 0; i < dots.size(); i++) {
                    if (position == i) {
                        dots.get(i).setBackgroundResource(
                                R.drawable.dot_focused);
                    } else {
                        dots.get(i)
                                .setBackgroundResource(R.drawable.dot_normal);
                    }
                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
        viewPager.setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                switch (event.getAction()) {
                    case MotionEvent.ACTION_DOWN:
                    case MotionEvent.ACTION_MOVE:
                        isContinue = false;
                        break;
                    case MotionEvent.ACTION_UP:
                        isContinue = true;
                        break;
                    default:
                        isContinue = true;
                        break;
                }
                return false;
            }
        });
        new Thread(this).start();


    }
    @Override
    public void run() {
        while (isAlive) {
            if (isContinue) {
                pagerHandler.sendEmptyMessage(position);
                position = (position + 1) % views.size();
                try {
                    Thread.sleep(changeTime);
                } catch (InterruptedException e) {
                }
            }
        }
    }

    Handler pagerHandler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            viewPager.setCurrentItem(msg.what);
           /* setCurrentItem(int index)方法主要用来制定初始化的页面。
            例如加入3个页面通过setCurrentItem(0)制定第一个页面为当前页面*/
            super.handleMessage(msg);
        }
    };
    private int dpTopx(int dp) {
        float scale = getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }
    /*当调到其他页面时 调用stop停止线程*/
    public void stop() {
        isAlive = false;
    }
}

好久好久都没写博客了~~~~~~~~~~~~~~~~~
要坚持坚持

Milliejee
关注
专栏目录
微信小程序自定义轮播图(常用四种效果)
09-26
在`Caiyuanzi-plugins_app`这个压缩包中，可能包含了自定义轮播图插件或者示例代码。你可以解压后查看具体实现，学习如何在实际项目中应用这些效果。通过研究和实践，不仅可以掌握轮播图的常见用法，还能提升对微信...
Android自定义控件之应用程序首页轮播图
热门推荐
GeneralAndroid的专栏
09-28 1万+
现在基本上大多数的Android应用程序的首页都有轮播图，就是像下图这样的（此图为转载的一篇博文中的图，拿来直接用了）： 像这样的组件我相信大多数的应用程序都会使用到，本文就是自定义一个这样的组件，可以动态设置图片的张数。下面就开始本次的自定义之旅吧，首先看一下自定义控件的的布局文件： <RelativeLayout xmlns:android="http://schemas.and
Android Studio 图片轮播——导航页面（Viewpager）
GHZ2443063059的博客
12-21 2487
图片轮播——导航页面（Viewpager） 功能展示： 首先需要一个主页面，包含着控件，N个需要展示的页面，主页面的java，以及ViewPager的适配器； 展示的页面：可以用ImageView和TextView配合 主页面： <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="h
Android 首页轮播图实现
YDDUONG的博客
03-28 2669
先看一下效果：（图片是有指示器的，只是被上层的视图挡住了，这里不需要这个东西） 参考：https://github.com/zhpanvip/BannerViewPager 详细的API可以看这个：https://zhuanlan.zhihu.com/p/80802091 开始使用，添加依赖： allprojects { repositories { ... mav...
Android UI 基础知识
清晨的博客
11-17 4742
01Android UI 1.1UI 用户界面（User Interface，简称 UI，亦称使用者界面）是系统和用户之间进行交互和信息交换 的媒介，它实现信息的内部形式与人类可以接受形式之间的转换。 软件设计可分为两个部分：编码设计与UI设计。 1.2 Android UI Android应用界面包含用户可查看并与之交互的所有内容。Android 提供丰富多样的预置 UI 组 件，例如结构化布局对象和 UI 控件，您可以利用这些组件为您的应用构建图形界面。Android 还 提供其他界面模块，用于构
【Android】[3]如何制作引导页轮播图
midnight_time的博客
06-28 1708
前言 运行效果： 源码地址： https://github.com/littlecurl/AppProjects 进去找AndroidGuide或者AndroidGuide.zip进行下载 简单介绍： 今天介绍的是一款由国人开源的第三方库，GitHub地址：https://github.com/youth5201314/banner，我看到的时候，star已经8000+了，每当看到这种国人开源库...
Ionic + Angular.js实现图片轮播的方法示例
10-19
通过自定义样式，我们可以打造出具有独特视觉效果的轮播。当然，实际应用中的图片轮播通常会包含动态加载图片、分页指示器、自动播放等功能，这可以通过配置`options`对象和添加额外的控制器逻辑来实现。这个简单的...
android轮播图的例子简单
07-07
在Android开发中，轮播图（Carousel）是一...通过不断扩展和优化，可以打造出符合项目需求的个性化轮播图组件。在ShuffViewDemo这个项目中，可能已经包含了上述步骤的完整实现，你可以通过查看源代码进一步学习和理解。
app轮播特效 商品详情特效
11-12
在移动应用开发中，"app轮播特效"和"商品详情特效"是提升用户体验和吸引用户注意力的关键元素。轮播图通常用于展示广告、促销活动或热门产品，而商品详情页则是用户了解产品特性和进行购买决策的重要界面。这两部分...
app主页静态模板.rar
07-03
4. **组件库**：静态模板通常包含一系列预设的UI组件，如按钮、表单、卡片、轮播图等。这些组件是模块化的，可以方便地复用和组合，提高开发效率。 5. **图片和图形**：高质量的图片和图形能增强视觉吸引力，提升...
uniapp开发微信小程序-3.页面制作、组件与轮播
最强的森的博客
04-18 1769
uniapp开发微信小程序-3.页面制作、组件与轮播 1.页面搭建 uniapp中页面的搭建与微信小程序雷同，都是div换成view即可。其他标签都与html相同： css的使用也相同。 做个首页： 2.将复用模块组件化 以banner为例。 （1）新建组件 在项目中新建文件夹component用于存放组件，在里边新建一个组件： 起名为banner，其中内容与普通页面一致： 接下来将banner的内容放到组件中： （2）引入组件 在项目主文件中引入该文件，并用Vue.component声明该文件为
03 uni-app框架学习：轮播图组件的使用
diaobang0776的博客
03-27 2338
1.轮播图组件的使用 参照官方文档 2.在页面上加入这个组件 3.在页面中引去css样式 并编写样式 ps:upx单位是什么 简单来说 就相当于小程序中的rpx 是一个自适应的单位 会根据屏幕宽度自动调整 转载于:https://www.cnblogs.com/wordblog/p/10606280.html...
Android底部导航栏加图片轮播功能实现
代码敌敌畏的博客
11-30 1582
Android底部导航栏加图片轮播功能实现 前言：最近无聊接了个安卓耍耍（主要是同学不好拒绝嘿嘿嘿。。。）下面附上效果图： 其实as就有这个自带的功能可以直接创建带底部导航栏的页面，本人上面做了修改大家可以参考。。。废话不多说了上代码 1、先写xml文件 创建activity_main.xml <?xml version="1.0" encoding="utf-8"?>...
大图轮播导航 android,Android大图轮播-学习笔记
weixin_35223575的博客
05-26 180
Android大图轮播-学习笔记图片轮播组合控件如：图片可以轮播，现在我们可以一点一点开发ViewPager框架首先明确大框架是ViewPager然后整个布局是RelativeLayout，其中ViewPager布满整个布局，之下是一个线性布局线性布局中有文字和小点两种View，CiewPager是V4包下的，布局文件如下：定义Adapter填充ViewPager定义一个MyAdapter继承Pa...
Android kotlin 实现视频图片一起轮播功能
彬sir哥的博客
12-14 6123
ViewPager/RecyclerView+BRVAH3.0.6+androidx/Banner2.1.0
uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果
07-27 5687
代码】uniapp上下滑屏切换支持视频和图片轮播实现，类似抖音效果。
Android利用本地图片制作轮播图
qq_52211982的博客
12-20 1802
使用本地的一些图片制作轮播图
HTML5实现webApp中图片轮播的效果（一）之基本使用
wangchaoqi1985的博客
06-16 9740
最近开始用h5做一款BBS类的webapp，做好后嵌入公司的其他几个Android或ios应用中，这差不多算是混编开发了吧 在我看来，原生app和webapp各有优缺点，原生应用赢在稳定性好、
实现APP中轮播图的展示
perseveranceTTT的博客
11-09 1585
广告栏控件convenibanner
Android实战：打造带下拉刷新、自动加载的APP首页
"本文将指导如何在Android平台上创建一个APP首页，包括实现下拉刷新和自动加载功能。将使用LRecyclerView库、ConvenientBanner库、Glide库、OkHttp与OkGo库，以及其他辅助库来构建这个功能丰富的界面。" 在Android...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值