自定义ViewPager 实现广告条效果

现在很多APP的顶部都有一个广告条，支持自动以及手动播放，并且有点击功能。这种风格可以算是当下APP的一种常见风格，所以自定义一个类似的ViewPager就显得很重要了，可以反复使用的。现在小编就按自己的思路讲解一下，并且贡献出源码（大神请飘过，本人小菜一枚）。

第一部分：布局文件

（1）新建一个相对布局的布局文件（activity_main.xml）；

（2）添加一个ViewPager，并且更具需求设置好相应的属性；

（3）新建一个线性布局，目的是在该布局内摆放一个TextView 和 一个线性布局；其中TextView是用来显示标题，LinearLayout是用来显示小点点的；

代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent" android:layout_height="match_parent">
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpager"
        android:layout_width="match_parent"
        android:layout_height="180dp" />


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/viewpager"
        android:background="#44000000"
        android:orientation="vertical"
        android:padding="5dp">


        <TextView
            android:id="@+id/tv_title"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:padding="3dp"
            android:text="好好学习"
            android:textColor="#ffffff" />


        <LinearLayout
            android:id="@+id/ll_point_group"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:orientation="horizontal" />


    </LinearLayout>
</RelativeLayout>

二、逻辑代码

（1）对相应控件进行实例化（简单的就不做过多说明了）；

（2）初始化两个数组，分别存储图片资源和标题资源；

（3）新建一个集合存储图片信息；

（3）设置ViewPager的适配器（新建一个类继承OnPageChangeListener），并且把图片信息集合传到适配器类；

（4）设置TextView的文字信息；

（5）关于下面小点点的操作（需要选择器）；

代码：

package dhua.fc.com.viewpager1;


import android.os.Handler;
import android.os.Message;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;


import java.security.KeyStore;
import java.util.ArrayList;




public class MainActivity extends AppCompatActivity {
    private static final String TAG = MainActivity.class.getSimpleName();
    private ViewPager viewpager;
    private TextView tv_title;
    private LinearLayout ll_point_group;
    //ListView的使用
    //1.在布局文件中定义ListView
    //2.在代码中实例化ListView
    //3.准备数据
    //4.设置适配器-item布局-绑定数据


    private ArrayList<ImageView> imageViews;


    // 图片资源ID
    private final int[] imageIds = {
            R.drawable.a,
            R.drawable.b,
            R.drawable.c,
            R.drawable.d,
            R.drawable.e };
    private int preposition = 0;
    // 图片标题集合
    private final String[] imageDescriptions = {
            "学习使我快乐",
            "学习艰辛，请各位兄弟多多指教",
            "Android我只会皮毛",
            "大神请飘过",
            "再见"
    };
    private Handler handler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            int item = viewpager.getCurrentItem()+1;
            viewpager.setCurrentItem(item);
            handler.sendEmptyMessageDelayed(0,4000);
        }
    };
    //是否已经滚动
    private boolean isDragging = false;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        viewpager = (ViewPager) findViewById(R.id.viewpager);
        tv_title = (TextView) findViewById(R.id.tv_title);
        ll_point_group = (LinearLayout) findViewById(R.id.ll_point_group);
        //ViewPager的使用
        //1.在布局文件中定义ViewPager
        //2.在代码中实例化ViewPager
        //3.准备数据
        imageViews = new ArrayList<>();
        for (int i = 0 ;i < imageIds.length;i++) {


            ImageView imageView = new ImageView(this);
            imageView.setBackgroundResource(imageIds[i]);


            //添加到集合中
            imageViews.add(imageView);


            //添加点
            ImageView point =  new ImageView(this);
            point.setBackgroundResource(R.drawable.point_selector);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(8,8);
            if (i==0){
                point.setEnabled(true);
            }else{
                point.setEnabled(false);
                params.leftMargin = 8;
            }


            point.setLayoutParams(params);


            ll_point_group.addView(point);
        }
            viewpager.setAdapter(new MyPagerAdapter());
            //设置监听页面的改变
            viewpager.addOnPageChangeListener(new MyOnPageChangeListener());
            int item = Integer.MAX_VALUE/2 - Integer.MAX_VALUE/2%imageViews.size();//要保证是images的整数倍
            viewpager.setCurrentItem(item);
            handler.sendEmptyMessageDelayed(0,3000);
    }


    class MyOnPageChangeListener implements ViewPager.OnPageChangeListener{


        /**
         * 当页面滚动时回调这个方法
         * @param position 当前页面的位置
         * @param positionOffset 滑动页面的百分比
         * @param positionOffsetPixels 在屏幕上滑动的像素
         */
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {


        }


        /**
         * 当某个页面被选中了的时候回调
         * @param position 被选中页面的位置
         */
        @Override
        public void onPageSelected(int position) {


            int realPosition = position % imageViews.size();


            //设置对应文本信息
            tv_title.setText(imageDescriptions[realPosition]);
            //把上一个高亮设置默认-灰色
            ll_point_group.getChildAt(preposition).setEnabled(false);
            //当前设置为高亮
            ll_point_group.getChildAt(realPosition).setEnabled(true);


            preposition = realPosition;
        }


        /**
         * 当页面滚动状态变化的时候回调的方法
         * 静止--->滑动
         * 滑动--->静止
         * 静止--->拖拽
         * @param state
         */
        @Override
        public void onPageScrollStateChanged(int state) {
            if(state == viewpager.SCROLL_STATE_DRAGGING){
                isDragging =true;
            }else if(state == viewpager.SCROLL_STATE_SETTLING){


            }else if(state == viewpager.SCROLL_STATE_IDLE&&isDragging){
                isDragging = false;
                handler.removeCallbacksAndMessages(null);
                handler.sendEmptyMessageDelayed(0,4000);
            }
        }
    }


    class MyPagerAdapter extends PagerAdapter{
        @Override
        public int getCount() {
            return Integer.MAX_VALUE;
        }


        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            int realPosition = position % imageViews.size();
            ImageView imageView = imageViews.get(realPosition);
            container.addView(imageView);


            imageView.setOnTouchListener(new View.OnTouchListener() {
                @Override
                public boolean onTouch(View v, MotionEvent event) {
                    switch (event.getAction()){
                        case MotionEvent.ACTION_DOWN://手指按下
                            handler.removeCallbacksAndMessages(null);
                            break;
                        case MotionEvent.ACTION_MOVE://手指在这个控件上移动
                            break;
                        case MotionEvent.ACTION_UP://手指离开
                            handler.sendEmptyMessageDelayed(0,4000);
                            break;
                    }
                    return false;
                }
            });
            imageView.setTag(position);
            imageView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    int position = (int) v.getTag()%imageViews.size();
                    String text = imageDescriptions[position];
                    Toast.makeText(MainActivity.this,text,Toast.LENGTH_SHORT).show();
                }
            });
            return imageView;
        }


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


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

希望可以帮到各位：获取源码可以关注微信公众号尚安卓，回复ViewPager源码；或者点击打开链接 点击打开链接 点击打开链接