轮播图的实现

功能描述：

• 实现一个广告轮播

功能分析：

1. 滑动的切换图片
2. 滑动时圆形点的切换
3. 滑动文本的切换
4. 无限滑动

- 布局界面activity_main.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="com.cdw.carousel.MainActivity">

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

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

            </android.support.v4.view.ViewPager>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:padding="5dp"
                android:layout_alignParentBottom="true"
                android:orientation="vertical"
                android:background="#33000000">
                <TextView
                    android:id="@+id/tv_title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="图片的title"
                    android:textColor="@android:color/white"
                    android:layout_gravity="center_horizontal"/>

                <LinearLayout
                    android:id="@+id/point_container"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="5dp"
                    android:orientation="horizontal">
                </LinearLayout>
            </LinearLayout>
        </RelativeLayout>
    </RelativeLayout>

• 在drawable中创建point_normal.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <corners android:radius="5dp"/>
    <solid android:color="@android:color/white"/>
</shape>

• 在drawable中创建point_selected.xml

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

    <corners android:radius="5dp"/>
    <solid android:color="#ffff0000"/>
</shape>

• 创建MainActivity.java

package com.cdw.carousel;

import android.os.Bundle;
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;

public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    private ViewPager mPager;
    private LinearLayout mPointContainer;
    private TextView mTvTitle;

    private List<ImageView> mListDatas;

    int[] imgs = {
            R.drawable.icon_1,
            R.drawable.icon_2,
            R.drawable.icon_3,
            R.drawable.icon_4,
            R.drawable.icon_5
    };
    String[] title = {
            "第一张图片",
            "第二张图片",
            "第三张图片",
            "第四张图片",
            "第五张图片"
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mPager = (ViewPager) findViewById(R.id.pager);
        mPointContainer = (LinearLayout) findViewById(R.id.point_container);
        mTvTitle = (TextView) findViewById(R.id.tv_title);

        //初始化数据

        mListDatas = new ArrayList<>();
        for (int i = 0; i < imgs.length; i++) {
            //给集合添加ImageView
            ImageView iv = new ImageView(this);
            iv.setImageResource(imgs[i]);
            iv.setScaleType(ImageView.ScaleType.FIT_XY);

            mListDatas.add(iv);

            //添加点
            View point = new View(this);
            point.setBackgroundResource(R.drawable.point_normal);

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10, 10);

            if (i != 0) {
                params.leftMargin = 10;
            } else {
                point.setBackgroundResource(R.drawable.point_selected);

                mTvTitle.setText(title[0]);
            }
            mPointContainer.addView(point, params);


        }

        //设置数据的方式
        mPager.setAdapter(new MyAdapter());

        //设置监听器
        mPager.addOnPageChangeListener(this);

        //设置默认选中的item
        int middle = Integer.MAX_VALUE / 2;
        int extra = middle % mListDatas.size();
        int item = middle - extra;
        mPager.setCurrentItem(item);
    }

    class MyAdapter extends PagerAdapter {

        /**
         * @return 页面的数量
         */
        @Override
        public int getCount() {
            if (mListDatas != null) {
//                return mListDatas.size();
                return Integer.MAX_VALUE;
            }
            return 0;
        }

        /**
         * 标记方法，用来判断缓存标记
         *
         * @param view   显示的view
         * @param object 标记
         * @return 有缓存返回ture
         */
        @Override
        public boolean isViewFromObject(View view, Object object) {
            return view == object;
        }

        /**
         * 初始化item
         *
         * @param container
         * @param position  要加载的位置
         * @return 添加要显示的view
         */
        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            position = position % mListDatas.size();

            ImageView iv = mListDatas.get(position);

            mPager.addView(iv);

            return iv;
        }

        /**
         * 销毁item条目
         *
         * @param container
         * @param position
         * @param object    标记
         */
        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            position = position % mListDatas.size();

            ImageView iv = mListDatas.get(position);
            mPager.removeView(iv);
        }
    }

    /**
     * 当viewpager滚动时的回调
     *
     * @param position             当前选中的位置
     * @param positionOffset       滑动的百分比
     * @param positionOffsetPixels 偏移的距离，滑动的像素
     */
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    /**
     * 当viewpager的某个页面选中时的回调
     *
     * @param position
     */
    @Override
    public void onPageSelected(int position) {
        position = position % mListDatas.size();

        //设置选中点的样式
        int count = mPointContainer.getChildCount();
        for (int i = 0; i < count; i++) {
            View view = mPointContainer.getChildAt(i);
//            if (position == i) {
//                view.setBackgroundResource(R.drawable.point_selected);
//            } else {
//                view.setBackgroundResource(R.drawable.point_normal);
//            }
            view.setBackgroundResource(position == i ? R.drawable.point_selected : R.drawable
                    .point_normal);
        }
            mTvTitle.setText(title[position]);
    }

    /**
     * viewpager滑动状态改变时的回调
     *
     * @param state
     */
    @Override
    public void onPageScrollStateChanged(int state) {
    }
}

实现效果

- 项目链接：https://github.com/ChenDongWei/Android/tree/557de7ae57695817eed0097ee7d1eb7bac177e36/carousel