Android 使用ViewPager 做的半吊子的图片轮播
效果图
虽然不咋样，但是最起码的功能是实现了,下面我们来一步步的实现它。
界面
下面我们来分析一下界面的构成
- 整体的布局: 因为我们要做出这种，一层叠加一层的效果，就目前开来只有
FrameLayout布局能够做出来的。- 下面的小点：明显的我们这里用的是
RadioButton控件来做的。- 黑色的边框: 为了更好的显示图片轮播的区域，我们用
shapexml 文件，为我们的图片轮播添加了一个边框。- 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