android之自动轮播的ViewPager

Android之自动轮播的ViewPager

1、前言

看到其他APP的自动轮播的ViewPager时，感觉效果挺炫酷的，所以今天自己动手一试，效果挺好，为此记录一番。同时记录下来给广大码农，欢迎大家的批评指正，有不足之处还请留言。

2、说明

我在项目中用到了butterknife框架，一个很实用的框架，我们不用再手动的findViewById，不用手动的添加控件的点击事件，在android studio里面可以一键生成，极大缩减了我们的代码量，再也不用做这种搬砖的事啦。在此，我推荐一篇博客，有意要学习的可以去看看：butterknife的使用，若是使用该框架，只需在module的build.gradle的dependencies节点下添加如下：

compile 'com.jakewharton:butterknife:7.0.1'

3、实现

相关的代码的说明我写在了代码的注释中，若有不懂的，可以留言

1.Mainactivity

package com.example.minhuawang.loopviewpager;
import android.os.Bundle;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;
import java.util.List;
import java.util.Timer;
import java.util.TimerTask;
import java.util.logging.Handler;

import butterknife.Bind;
import butterknife.ButterKnife;

public class MainActivity extends AppCompatActivity {

    @Bind(R.id.viewpager)
    ViewPager viewpager;
    @Bind(R.id.tv_desc)
    TextView tvDesc;
    @Bind(R.id.ll_point)
    LinearLayout llPoint;
    private int[] images;
    private List<ImageView> imageViewList;
    private String[] desc;
    private android.os.Handler handler = new android.os.Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            viewpager.setCurrentItem(viewpager.getCurrentItem()+1);
        }
    };


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ButterKnife.bind(this);

        initUI();

        initData();

        initAdapter();

        autoRoll();
    }

    /**
     * 自动滚动
     */
    private void autoRoll() {
        Timer timer = new Timer();
        TimerTask task = new TimerTask() {
            @Override
            public void run() {
                //发消息更新UI
                Message msg = Message.obtain();
                handler.sendMessage(msg);
            }
        };
        timer.scheduleAtFixedRate(task,2000,4000);
    }

    private void initUI() {
       viewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
           @Override
           public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
               //滚动是调用
           }
           @Override
           public void onPageSelected(int position) {
               int newPosition = position%imageViewList.size();
               //新的条目选中是调用
               for (int i = 0;i<desc.length;i++){
                   llPoint.getChildAt(i).setEnabled(false);
               }
               llPoint.getChildAt(newPosition).setEnabled(true);
               tvDesc.setText(desc[newPosition]);
           }
           @Override
           public void onPageScrollStateChanged(int state) {
               //滚动状态发生改变的时候
           }
       });
    }

    private void initAdapter() {
        llPoint.getChildAt(0).setEnabled(true);
        tvDesc.setText(desc[0]);
        viewpager.setAdapter(new MyAdapter());

        //保证向右滑动
        viewpager.setCurrentItem(1025);
    }

    private void initData() {
        desc = new String[]{"狂拽炫酷吊炸天", "狂拽炫酷吊炸天","狂拽炫酷吊炸天","狂拽炫酷吊炸天","狂拽炫酷吊炸天"};
        imageViewList = new ArrayList<ImageView>();
        images = new int[]{R.mipmap.a,R.mipmap.b,R.mipmap.c,R.mipmap.d,R.mipmap.e};
        ImageView image;
        View point;
        for(int i = 0;i< images.length;i++){
            image = new ImageView(this);
            image.setBackgroundResource(images[i]);
            imageViewList.add(image);
            //添加小白点,指示器
            point = new View(this);
            point.setEnabled(false);
            point.setBackgroundResource(R.drawable.selector_bg_point);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
            params.leftMargin = 14;
            llPoint.addView(point,params);

        }
    }

    private class MyAdapter extends PagerAdapter{


        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }

        //当滑到新的条目，有返回，是否可以复用
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        //返回要显示的内容
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            // container 当前的viewPager
            //把View对象添加到容器中
            int newPosition = position % imageViewList.size();//循环公式
            ImageView image = imageViewList.get(newPosition);
            container.addView(image);
            //把view 对象返回给框架，适配器
            return image;//必须重写，否则报错
        }

        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            container.removeView((View) object);//固定写法
        }
    }
}

2.布局文件

<?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"
    tools:context="com.example.minhuawang.loopviewpager.MainActivity">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="160dp">

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

        <LinearLayout
            android:layout_alignParentBottom="true"
            android:layout_width="match_parent"
            android:background="#33000000"
            android:orientation="vertical"
            android:padding="5dp"
            android:layout_height="40dp">
            <TextView
                android:id="@+id/tv_desc"
                android:layout_width="match_parent"
                android:gravity="center_horizontal"
                android:layout_height="wrap_content"
                android:maxLines="1"
                android:textColor="@android:color/white"/>

            <LinearLayout
                android:id="@+id/ll_point"
                android:orientation="horizontal"
                android:gravity="center_horizontal"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">



            </LinearLayout>

        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

3.相关资源文件

selector_bg_point.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_enabled="true" android:drawable="@drawable/shape_bg_point_enable"/>

    <item android:state_enabled="false" android:drawable="@drawable/shape_bg_point_disable"/>
</selector>

shape_bg_point_enable.xml

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

    <corners android:radius="8dp"/>
    <solid android:color="#FFFFFF"/>


</shape>

shape_bg_point_disable.xml

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

    <corners android:radius="8dp"/>
    <solid android:color="@android:color/darker_gray"/>


</shape>