使用ViewPager实现自动轮播

很多APP中都实现了类似引导页的自动轮播，不由得想到昨天的引导页上修改一下代码实现轮播。其实大体上只需要添加一个线程循环执行就可以了。

项目已同步至：https://github.com/nanchen2251/viewpagerDemo

同样的先上图

直接上代码，注释都全的，我想这样更有利于理解。

先改了Adapter

package com.example.nanchen.taketurnplaydemo;
 
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
 
import java.util.List;
 
/**
 * Created by 南尘 on 2016/7/10.
 */
public class GuidePageAdapter extends PagerAdapter {
 
    private List<View> viewList;
 
    public GuidePageAdapter(List<View> viewList) {
        this.viewList = viewList;
    }
 
    /**
     * @return 返回页面的个数
     */
    @Override
    public int getCount() {
        if (viewList != null){
//            return viewList.size();
            //第一处修改，设置轮播最大值，等于无限循环
            return Integer.MAX_VALUE;
        }
        return 0;
    }
 
    /**
     * 判断对象是否生成界面
     * @param view
     * @param object
     * @return
     */
    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
 
    /**
     * 初始化position位置的界面
     * @param container
     * @param position
     * @return
     */
    @Override
    public Object instantiateItem(ViewGroup container, int position) {
 
        //第二处修改，当前要显示的数据索引为集合长度
        int newPosition = position % viewList.size();
        container.addView(viewList.get(newPosition));
        return viewList.get(newPosition);
 
//        container.addView(viewList.get(position));
//        return viewList.get(position);
    }
 
 
    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
 
        //第三处修改，移除的索引为集合的长度
        int newPosition = position % viewList.size();
        container.removeView(viewList.get(newPosition));
 
//        container.removeView(viewList.get(position));
    }
}

在看Activity

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

　　package com.example.nanchen.taketurnplaydemo;
 
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
 
import java.util.ArrayList;
import java.util.List;
 
/**
 * 实现首次启动的引导页面
 */
public class GuideActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{
 
    private ViewPager vp;
    private int []imageIdArray;//图片资源的数组
    private List<View> viewList;//图片资源的集合
    private ViewGroup vg;//放置圆点
 
    //实例化原点View
    private ImageView iv_point;
    private ImageView []ivPointArray;
 
    private boolean isLooper;
 
    //最后一页的按钮
    private ImageButton ib_start;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_guide);
 
        ib_start = (ImageButton) findViewById(R.id.guide_ib_start);
        ib_start.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                startActivity(new Intent(GuideActivity.this,MainActivity.class));
                finish();
            }
        });
 
 
 
        //加载ViewPager
        initViewPager();
 
        //加载底部圆点
        initPoint();
 
        //修改添加设置ViewPager的当前页，为了保证左右轮播
        vp.setCurrentItem(0);
 
 
        //开启一个线程，用于循环
        new Thread(new Runnable() {
            @Override
            public void run() {
                isLooper = true;
                while (isLooper){
                    try {
                        Thread.sleep(2000);
                    } catch (InterruptedException e) {
                        e.printStackTrace();
                    }
 
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            //这里是设置当前页的下一页
                            vp.setCurrentItem(vp.getCurrentItem() + 1);
                        }
                    });
                }
            }
        }).start();
    }<br><br>/**
     * 加载底部圆点
     */
    private void initPoint() {
        //这里实例化LinearLayout
        vg = (ViewGroup) findViewById(R.id.guide_ll_point);
        //根据ViewPager的item数量实例化数组
        ivPointArray = new ImageView[viewList.size()];
        //循环新建底部圆点ImageView，将生成的ImageView保存到数组中
        int size = viewList.size();
        for (int i = 0;i<size;i++){
            iv_point = new ImageView(this);
            iv_point.setLayoutParams(new ViewGroup.LayoutParams(20,20));
            iv_point.setPadding(30,0,30,0);//left,top,right,bottom
            ivPointArray[i] = iv_point;
            //第一个页面需要设置为选中状态，这里采用两张不同的图片
            if (i == 0){
                iv_point.setBackgroundResource(R.mipmap.full_holo);
            }else{
                iv_point.setBackgroundResource(R.mipmap.empty_holo);
            }
            //将数组中的ImageView加入到ViewGroup
            vg.addView(ivPointArray[i]);
        }
 
 
 
    }
 
    /**
     * 加载图片ViewPager
     */
    private void initViewPager() {
        vp = (ViewPager) findViewById(R.id.guide_vp);
        //实例化图片资源
        imageIdArray = new int[]{R.mipmap.guide1,R.mipmap.guide2,R.mipmap.guide3};
        viewList = new ArrayList<>();
        //获取一个Layout参数，设置为全屏
        LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);
 
        //循环创建View并加入到集合中
        int len = imageIdArray.length;
        for (int i = 0;i<len;i++){
            //new ImageView并设置全屏和图片资源
            ImageView imageView = new ImageView(this);
            imageView.setLayoutParams(params);
            imageView.setBackgroundResource(imageIdArray[i]);
 
            //将ImageView加入到集合中
            viewList.add(imageView);
        }
 
        //View集合初始化好后，设置Adapter
        vp.setAdapter(new GuidePageAdapter(viewList));
        //设置滑动监听
        vp.setOnPageChangeListener(this);
    }
 
 
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
 
    }
 
    /**
     * 滑动后的监听
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
 
        //修改全部的position长度
        int newPosition = position % viewList.size();
 
        //循环设置当前页的标记图
        int length = imageIdArray.length;
        for (int i = 0;i<length;i++){
            ivPointArray[newPosition].setBackgroundResource(R.mipmap.full_holo);
            if (newPosition != i){
                ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);
            }
        }
 
//        //循环设置当前页的标记图
//        int length = imageIdArray.length;
//        for (int i = 0;i<length;i++){
//            ivPointArray[position].setBackgroundResource(R.mipmap.full_holo);
//            if (position != i){
//                ivPointArray[i].setBackgroundResource(R.mipmap.empty_holo);
//            }
//        }
 
        //判断是否是最后一页，若是则显示按钮
//        if (position == imageIdArray.length - 1){
//            ib_start.setVisibility(View.VISIBLE);
//        }else {
//            ib_start.setVisibility(View.GONE);
//        }
    }
 
 
    @Override
    public void onPageScrollStateChanged(int state) {
 
    }<br><br>　　　　@Override
    protected void onDestroy() {<br>　　　　// 注意结束的时候关闭线程
　　　　isLooper = false;
    }}

在Activity中值得一提的是，我们在实际的安卓开发中会经常用到更新UI，以前我们通常使用的都是Handler，这里就提供了另外的一种实现方式runOnUiThread(),需要一个实现Runnable接口的实现类作为参数，

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="match_parent"
    tools:context=".GuideActivity">
 
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="200dp">
 
            <android.support.v4.view.ViewPager
                android:id="@+id/guide_vp"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
            </android.support.v4.view.ViewPager>
 
            <LinearLayout
                android:id="@+id/guide_ll_point"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal"
                android:layout_alignParentBottom="true"
                android:paddingBottom="10dp"
                android:gravity="center_horizontal">
            </LinearLayout>
 
            <ImageButton
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/guide_ib_start"
                android:src="@mipmap/btn_start"
                android:layout_centerHorizontal="true"
                android:layout_above="@+id/guide_ll_point"
                android:background="@null"
                android:visibility="gone"/>
    </RelativeLayout>
 
</RelativeLayout>