Android 使用ViewPager 做的半吊子的图片轮播

Android 使用ViewPager 做的半吊子的图片轮播

效果图

虽然不咋样，但是最起码的功能是实现了,下面我们来一步步的实现它。

界面

下面我们来分析一下界面的构成

1. 整体的布局: 因为我们要做出这种，一层叠加一层的效果，就目前开来只有 FrameLayout 布局能够做出来的。
2. 下面的小点：明显的我们这里用的是RadioButton控件来做的。
3. 黑色的边框: 为了更好的显示图片轮播的区域，我们用 shape xml 文件，为我们的图片轮播添加了一个边框。
4. ui的主体:因为我们的图片是要进行轮播的，我们这里用了ViewPager作为了该界面的主体。

<?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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.it.studyimagerecycle.MainActivity">
	<!--用于实现 一层一层效果的帧布局，通过background属性设置了一圈边框-->
    <FrameLayout
        android:id="@+id/img_cycle"
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:background="@drawable/cycleimg_border">
		<!--用来实现图片轮播的主体-->
        <android.support.v4.view.ViewPager
            android:id="@+id/img_cycle_viewpager"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_margin="2dp">

        </android.support.v4.view.ViewPager>
		<!--图片轮播下方的小点，因为比较懒就在布局文件中直接写死了，其实可以再代码中根据要轮播的数量进行生成-->
        <RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_margin="2dp"
            android:gravity="center"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/dot1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:checked="true" />

            <RadioButton
                android:id="@+id/dot2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

            <RadioButton
                android:id="@+id/dot3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </RadioGroup>
    </FrameLayout>
</RelativeLayout>

代码

代码的分析

• 我们是要可以滑动的，这一点需要用ViewPager来实现，有ViewPager就要有我们自己实现PagerAdapter
• 我们需要生成 在ViewPager上显示的图片，所以我们要通过代码来生成一些ImageView控件。
• 而且我们需要间隔一定的时间来进行图片的切换。
• 而且随着图片的自动切换，我们下面的RadioButton也要跟着选中
• 为了更好的用户体验，我们的RadioButton不能手动的选中

成员变量

private RadioButton rb1, rb2, rb3;
private ViewPager imageViewPager;
private List<RadioButton> radiobuttionList;// 图片轮播的点的集合
private List<Integer> drawIdList; //图片id的集合
private List<ImageView> imageViewList; //要在ViewPager上显示的内容
private int pageIndex = 0; //viewpagr页面的索引
private int countDown = 3; //切换页面的倒计时

一些初始化方法

/*
* 获取我们需要的view
* */
private void initFindView() {
    rb1 = (RadioButton) this.findViewById(R.id.dot1);
    rb2 = (RadioButton) this.findViewById(R.id.dot2);
    rb3 = (RadioButton) this.findViewById(R.id.dot3);
	
    imageViewPager = (ViewPager) this.findViewById(R.id.img_cycle_viewpager);
}

/*
* 将屏幕上的点整合起来
* */
private void initDots() {
    radiobuttionList = new ArrayList<RadioButton>();
    radiobuttionList.add(rb1);
    radiobuttionList.add(rb2);
    radiobuttionList.add(rb3);
  
	//使RadioButton不能手动选中
    for (RadioButton rb : radiobuttionList) {
        rb.setClickable(false);
    }
}

/*
* 初始化要加载的图片
* */
private void initImage() {
    this.drawIdList = new ArrayList<Integer>();
    drawIdList.add(R.drawable.grape);
    drawIdList.add(R.drawable.strawberry);
    drawIdList.add(R.drawable.watermelon);
}

/*
* 初始化ViewPage所需要的ImageView
* */
private void initImageView() {
    imageViewList = new ArrayList<ImageView>();
    for (int i = 0; i < 3; i++) {
        //初始化ImageView的属性
        ImageView imageView = new ImageView(this);
      	//设置ImageView的属性，使ImageView的大小是填充父窗体的
        ViewGroup.LayoutParams lp = new ViewGroup.LayoutParams(-1, -1);
        //让ImageView应用这些属性
      	imageView.setLayoutParams(lp);
      	//使ImageView的图像填充
        imageView.setScaleType(ImageView.ScaleType.FIT_XY);
		
        this.imageViewList.add(imageView);
    }
}

//在onCrate方法中调用这些初始化
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    initFindView();
    initDots();
    initImage();
    initImageView();
  	//设置ViewPager page改变的监听
    this.imageViewPager.addOnPageChangeListener(this);
    //为ViewPager设置Adapter
  	this.imageViewPager.setAdapter(new MyPagerAdapter(this, imageViewList, drawIdList));
	//开启线程，一定时间后切换图片
    new Thread(this).start();
}

PagerAdapter

package com.example.it.studyimagerecycle;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import com.bumptech.glide.Glide;

import java.util.List;

public class MyPagerAdapter extends PagerAdapter {

    private final Context context; //上下文环境
    private final List<Integer> imgList; //在ViewPager中显示的集合
    private final List<ImageView> imageViewList; //图片资源Id的集合

    public MyPagerAdapter(Context context, List<ImageView> imageViewList, List<Integer> imageIdList) {
        this.context = context;
        this.imgList = imageIdList;
        this.imageViewList = imageViewList;
    }

    //释放占用的资源
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(this.imageViewList.get(position));
    }

    //获取可滑动页面的数量
    @Override
    public int getCount() {
        return imageViewList.size();
    }

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

    /*
    * 实例化item
    * */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        ImageView imageView = this.imageViewList.get(position);

        int id = this.imgList.get(position);

        //加载出指定的图片，这里使用Glide这个开源项目，图片压缩
        Glide.with(this.context).load(id).into(imageView);

        container.addView(imageView);
        
        return imageView;
    }
}

ViewPager页面改变的事件

因为代码是写在Activity中的，我们要让Activity实现 ViewPager.OnPageChangeListener 接口。

@Override
public void onPageScrolled(int position, float positi
}

/*
* 页面被选中的时候触发
* 我们要在这个页面中处理，当我们手动滑动页面的时候要处理的业务逻辑
* */
@Override
public void onPageSelected(int position) {
 	//获取应该是选中状态的RadioButton
    RadioButton radioButton = radiobuttionList.get(position);
  	//设置radioButton为选中状态
    radioButton.setChecked(true);
    //重置倒计时
    this.countDown = 3;
    //重新设置pageIndex
    this.pageIndex = position;
}
@Override
public void onPageScrollStateChanged(int state) {
}

子线程更新选中的页面

/*
* 倒计时进行图片的切换
* */
@Override
public void run() {
  	//进行图片转换的前提是我们的Activity的资源没有被回收。
    while (MainActivity.this.isDestroyed() == false) {
      	//让线程睡眠一秒，实现倒计时功能
        SystemClock.sleep(1000l);
      	//倒计时减去
        countDown--;
      	//如果倒计时结束那么进行页面的转换
        if (countDown == 0) {
          	//设置该被选中的Page的索引，为原来的所以+1
            this.pageIndex++;
          	//如果是我们的page已经是最后一个了，那么我么的第一个page应该被选中
            if (pageIndex == this.radiobuttionList.size())
                this.pageIndex = 0;
          	//更新ui
            runOnUiThread(new Runnable() {
                @Override
                public void run() {
                    //设置选中项
                    imageViewPager.setCurrentItem(pageIndex);
                }
            });
        }
    }
}

总结

经过以上的这些步骤，我们的图片轮播的效果已经实现了，因为本人水平原因，写的代码。。。，请大家凑活着看吧。

源码下载: https://git.oschina.net/ShareKnowledge/StudyImageCycle