Android开发丶使用RxJava来完成自动轮播图

其他 2018-10-07 00:40:02 阅读次数: 0

轮播图也是一个很常见的功能了，通常都置于App首页，每隔几秒就会切换下一张图片，等轮播完毕，则又会从第一张周而复始。这篇博文对该功能的实现做下归纳和整理。

首先看下效果图

接下来看一下实现步骤

1.分析下界面，由可滑动的viewpager，标题textview，图片ImageView，右下角的小圆点（由LinearLayout线性布局包裹），包裹文字和圆点布局的透明黑色的布局。因此我们先来画xml布局文件,其中包裹圆点的linearlayout为空，我们之后在代码中添加圆点。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:background="@drawable/icon_banner_default"
    tools:context=".MainActivity">

    <android.support.v4.view.ViewPager
        android:id="@+id/main_vp"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:gravity="center_vertical"
        android:padding="8dp"
        android:background="#7F000000"
        >

        <TextView
            android:id="@+id/main_tv"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:text="今天天气不错啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:textColor="#ffffff"
            />

        <LinearLayout
            android:id="@+id/main_layout"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:orientation="horizontal" />

    </LinearLayout>
</RelativeLayout>

2.先新建数据的bean，里面有每个页面的图片pic和标题title

package com.fantasychong.bannertest0907;

import java.io.Serializable;

/*
 *Crated by yedona on 2018/9/7
 */
public class BannerBean implements Serializable {
    private int pic;
    private String title;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public BannerBean(int pic, String title) {
        this.pic = pic;
        this.title = title;
    }

    public int getPic() {
        return pic;
    }

    public void setPic(int pic) {
        this.pic = pic;
    }
}

3.新建用于适配viewpager的继承于PagerAdapter的自定义adapter。

首先生成三个方法

@Override
public int getCount() {
    if(bannerList!= null){
        return Integer.MAX_VALUE;
    }
    return 0;
}

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

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

分析代码，getCount()用于设置返回个数，因为我们要滑到最后一张后还要返回第一张从而无限循环，所以这里设为Integer整形的最大值Inter.MAX_VALUE。其余两个方法是固定写法。

手动重写instantiateItem()方法，这个方法我们设置每个页面的图片赋值。

扫描二维码关注公众号，回复： 3449753 查看本文章 
@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    final int newPosition= position% bannerList.size();
    ImageView imageView= new ImageView(context);
    imageView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    imageView.setImageResource(bannerList.get(newPosition).getPic());
    container.addView(imageView);
    return imageView;
}

然后我们通过接口回调来设置每张图片的点击事件。

首先写一个interface。

public interface OnBannerClickListener{
    void onBannerClick(BannerBean bean);
}

接下来写setOnBannerClickListener方法。

public void setOnBannerClickListener(OnBannerClickListener listener){
    this.onBannerClickListener= listener;
}

然后在instantiateItem中调用这个listener。

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
    final int newPosition= position% bannerList.size();
    ImageView imageView= new ImageView(context);
    imageView.setLayoutParams(new LinearLayout.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT));
    imageView.setScaleType(ImageView.ScaleType.FIT_XY);
    imageView.setImageResource(bannerList.get(newPosition).getPic());

    imageView.setOnClickListener(new OnClickListener(){
         public void onClick(View view){
               if(onBannerClickListener!= null){
                     onBannerClickListener.onBannerClick(bannerList.get(newPosition));
               }
         }
    });
    container.addView(imageView);
    return imageView;
}

4.接下来我们打开MainActivity.class，首先进行初始化控件。

/**
 * 初始化控件
 */
private void initView() {
    layout = findViewById(R.id.main_layout);
    vp = findViewById(R.id.main_vp);
    tv = findViewById(R.id.main_tv);
}

5.接下来初始化图片和标题数据

/**
 * 初始化图片数据
 */
private void initPicList() {
    BannerBean bean = new BannerBean(R.mipmap.ic_launcher, "我看过沙漠下暴雨，看过大海亲吻鲨鱼");
    picList.add(bean);
    BannerBean bean1 = new BannerBean(R.mipmap.ic_launcher_round, "看过黄昏追逐黎明，没看过你");
    picList.add(bean1);
    BannerBean bean2 = new BannerBean(R.drawable.ic_launcher_background, "我听过空境的回忆，雨水浇绿孤山岭");
    picList.add(bean2);
    BannerBean bean3 = new BannerBean(R.drawable.ic_launcher_foreground, "听过被诅咒的秘密，没听过你");
    picList.add(bean3);
}

6.给标题默认设置第一条数据

//textview默认设置标题数组的第一条数据
tv.setText(picList.get(0).getTitle());

7.设置自定义adapter适配器。

//设置adapter
adapter = new MainAdapter(MainActivity.this, picList, tv);
vp.setAdapter(adapter);

8.通过接口回调设置imageview图片的点击事件。

adapter.setOnBannerClickListener(new MainAdapter.OnBannerClickListener() {
    @Override
    public void onBannerClick(BannerBean bean) {
        Toast.makeText(MainActivity.this, bean.getTitle(), Toast.LENGTH_SHORT).show();
    }
});

9.初始化右下角的圆点指示器。

/**
 * 初始化右边圆点指示器
 */
private void initPoint() {
    layout.removeAllViews();
    if (picList.size() != 1) {
        for (int i = 0; i < picList.size(); i++) {
            View pointView = new View(this);
            int width = (int) (getResources().getDisplayMetrics().density * 6 + 0.5f);
            int height = (int) (getResources().getDisplayMetrics().density * 6 + 0.5f);
            int leftMargin = (int) (getResources().getDisplayMetrics().density * 6 + 0.5f);
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(width, height);
            layoutParams.leftMargin = leftMargin;
            pointView.setLayoutParams(layoutParams);
            if (i == 0) {
                pointView.setBackgroundResource(R.drawable.oval_point_white);
            } else {
                pointView.setBackgroundResource(R.drawable.oval_point_gray);
            }
            layout.addView(pointView);
        }
        adapter.notifyDataSetChanged();
        vp.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {

            }

            @Override
            public void onPageSelected(int position) {
                int newPosition = position % picList.size();
                tv.setText(picList.get(newPosition).getTitle());
                for (int i = 0; i < layout.getChildCount(); i++) {
                    View currentPoint = layout.getChildAt(i);
                    currentPoint.setBackgroundResource(i == newPosition ? R.drawable.oval_point_white : R.drawable.oval_point_gray);

                }
            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });
    }
}

该方法是比较重要的一环，接下来做下分析。

1)首先，如果图片只有一张时，将不显示圆点布局。图片有多张，将显示图片相等数量的圆点布局。

2)新建圆点背景文件，选中为白色，未选中为灰色。

oval_point_white.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ffffff"/>
</shape>

oval_point_gray.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#aaaaaa"/>
</shape>

3)按图片数量新建等量的View，默认第一个圆点为白色即选中状态。

for (int i = 0; i < picList.size(); i++) {
    View pointView = new View(this);
    int width = (int) (getResources().getDisplayMetrics().density * 6 + 0.5f);
    int height = (int) (getResources().getDisplayMetrics().density * 6 + 0.5f);
    int leftMargin = (int) (getResources().getDisplayMetrics().density * 6 + 0.5f);
    LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(width, height);
    layoutParams.leftMargin = leftMargin;
    pointView.setLayoutParams(layoutParams);
    if (i == 0) {
        pointView.setBackgroundResource(R.drawable.oval_point_white);
    } else {
        pointView.setBackgroundResource(R.drawable.oval_point_gray);
    }
    layout.addView(pointView);
}
adapter.notifyDataSetChanged();

4)设置viewpager的滑动监听。生成三个方法，仅在onPageSelected方法中做处理

@Override
public void onPageSelected(int position) {
    int newPosition = position % picList.size();
    tv.setText(picList.get(newPosition).getTitle());
    for (int i = 0; i < layout.getChildCount(); i++) {
        View currentPoint = layout.getChildAt(i);
        currentPoint.setBackgroundResource(i == newPosition ? R.drawable.oval_point_white : R.drawable.oval_point_gray);
    }
}

该方法中，因为小圆点的position会随时改动，并且切换到最后一个圆点会重新回到第一个圆点依次循环，因而设置newPosition为

int newPosition = position % picList.size();

滑动到一个位置，就把对应位置的title赋到标题TextView上。

tv.setText(picList.get(newPosition).getTitle());

每滑动一个新位置，就给圆点设置白色，其余均为灰色。

for (int i = 0; i < layout.getChildCount(); i++) {
    View currentPoint = layout.getChildAt(i);
    currentPoint.setBackgroundResource(i == newPosition ? R.drawable.oval_point_white : R.drawable.oval_point_gray);
}

10.现在已经可以正常显示图片和标题了，手动滑动可以切换。接下来我们给它加入自动轮播功能。

这里想到RxJava的interval的定时输出功能，我们可以每隔三秒让viewpager自动切换一次。

/**
 * 启动自动轮播
 */
private void AutoSwitch() {
    disposable = Flowable.interval(3, TimeUnit.SECONDS)
            .subscribeOn(Schedulers.io())
            .observeOn(AndroidSchedulers.mainThread())
            .doOnNext(new Consumer<Long>() {
                @Override
                public void accept(Long aLong) throws Exception {
                    Log.d("chongtimer", aLong + "");
                    vp.setCurrentItem(vp.getCurrentItem() + 1);
                }
            })
            .subscribe();
}

11.别忘了在onDestroy()方法中dispose掉disposable，否则即使退出应用了，还是会持续输出的。

@Override
protected void onDestroy() {
    super.onDestroy();
    if (disposable != null) {
        disposable.dispose();
    }
}

至此全部完成，Demo附上！

资源下载

猜你喜欢

转载自blog.csdn.net/u014078990/article/details/82499869
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
【转】spring中对控制反转和依赖注入的理解
tms webcore 安装和使用
java程序员进阶相关书籍
SpringMVC接受请求参数、
如何保存训练好的机器学习模型
MyEclipse、Eclipse设置项目JDK的三个地方
商超行业微信小程序开发定制一般多少钱 （行业技术人员解读）
Markdown编辑器语言——30分钟入门到到精通
Linux系统下MongoDB的简单安装与基本操作
Power Strings
每日归档
更多
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022