0. 序言

• 本想節(jié)省時間在項目中使用輪播圖框架，無奈找了一些都不是很滿意。
• 我需要的只是一個普通效果的輪播圖而已。
• 自己動手豐衣足食。

1. 效果圖

自適應大小無限循環(huán)的輪播圖

2. 需求

輪播圖需求分析.png

3. 代碼實現(xiàn)

• Activity：

  public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener {

    //logt快捷鍵自動生成
    private static final String TAG = "MainActivity";
    //數(shù)據(jù)源
    private int[] images = {R.drawable.ic_vp_02, R.drawable.ic_vp_03, R.drawable.ic_vp_05};
    //存放ImageView對象的集合
    private List<ImageView> mImageViewList = new ArrayList<>();
    //標題
    private int[] titles = {R.string.tv_02, R.string.tv_03, R.string.tv_05};
    //輪播圖的自動切換
    private Handler mHandler = new Handler();
    //判斷是否在切換
    private boolean isSwitch;
    //輪播圖
    private MyViewPager mViewPager;
    //指示器的容器
    private LinearLayout mLayout;
    //標題
    private TextView mTitle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //初始化布局
        initView();
        //初始化圖片
        initImages();
        //初始化vp
        initViewPager();
        //初始化點
        initPoints();
        //讓輪播圖初始化時顯示第一張
        mViewPager.setCurrentItem(1, false);
        // 設置輪播圖第一張的標題顯示
        mTitle.setText(titles[0]);
        //傳入MainActivity對象和數(shù)據(jù)給ViewPager
        mViewPager.setActivity(this, titles);
        //輪播圖開啟切換
        startSwitch();
    }

    private void initView() {
        mViewPager = (MyViewPager) findViewById(R.id.bt_main_vp);
        mLayout = (LinearLayout) findViewById(R.id.ll_point_container);
        mTitle = (TextView) findViewById(R.id.tv_title);
    }

    private void initViewPager() {
        /**
         * ① 讓輪播圖自適應大小指的是自適應高度
         * ② 獲取屏幕的寬，屏幕的寬就是viewpager的寬
         * ③ 屏幕寬/vp應有的高度 = 圖片的寬/圖片的高
         * ④ 有了寬和高，利用layoutParams動態(tài)設置vp的寬和高即可
         */
        DisplayMetrics displayMetrics = getResources().getDisplayMetrics();
        int widthPixels = displayMetrics.widthPixels;
        int height = widthPixels * 460 / 1226;
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, height);
        mViewPager.setLayoutParams(params);

        MyPagerAdapter myPagerAdapter = new MyPagerAdapter(mImageViewList);
        mViewPager.setAdapter(myPagerAdapter);

        mViewPager.addOnPageChangeListener(this);
    }

    /**
     * 初始化輪播圖的圖片并自適應大小
     */
    private void initImages() {
        int size = images.length;
        /**
         * 要想實現(xiàn)無限輪播，在輪播圖左右各添加一張圖片，右邊添加的是第一張圖片，左邊添加的是最后一張圖片
         * 給人的感覺是從最后一張輪播到了第一張，實際上是往右面添加了一張，左邊同理
         */
        for (int i = -1; i < size + 1; i++) {
            ImageView imageView = new ImageView(this);
            // 第一個ImageView顯示數(shù)據(jù)源最后一張圖片
            if (i == -1) {
                imageView.setImageResource(images[size - 1]);
            } else if (i == size) {
                //最后一個ImageView顯示數(shù)據(jù)源第一張圖片
                imageView.setImageResource(images[0]);
            } else {
                imageView.setImageResource(images[i]);
            }
            mImageViewList.add(imageView);
        }
    }

    /**
     * 初始化點
     */
    private void initPoints() {
        //清空容器里面的布局
        mLayout.removeAllViews();
        for (int i = 0; i < images.length; i++) {
            //小圓點
            View view = new View(this);
            //設置背景顏色
            view.setBackgroundResource(R.drawable.point_gray_bg);
            //小圓點布局參數(shù)
            LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(10, 10);
            //右邊距
            layoutParams.rightMargin = 10;
            //添加布局
            mLayout.addView(view, layoutParams);
        }
        //讓第一個點的背景為紅色
        mLayout.getChildAt(0).setBackgroundResource(R.drawable.point_red_bg);
    }

    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

    }

    @Override
    public void onPageSelected(int position) {
        //動態(tài)設置標題內(nèi)容
        //修正標題下標：初始化
        int pageIndex = 0;
        //數(shù)據(jù)長度
        int size = titles.length;
        //加載第一張ImageView,實際標題是數(shù)據(jù)源最后一個
        if (position == 0) {
            pageIndex = size - 1;
            //切換導致最后一個頁面
            mViewPager.setCurrentItem(size, false);
            //position為最后一個ImageView,實際標題是數(shù)據(jù)源第一個
        } else if (position == size + 1) {
            pageIndex = 0;
            //切換到第一個頁面
            mViewPager.setCurrentItem(1, false);
        } else {
            pageIndex = position - 1;
        }
        mTitle.setText(titles[pageIndex]);
        //切換點
        int childCount = mLayout.getChildCount();
        for (int i = 0; i < childCount; i++) {
            View view = mLayout.getChildAt(i);
            //點根據(jù)標題走即可，因為數(shù)據(jù)的數(shù)量一致
            if (pageIndex == i) {
                //選中
                view.setBackgroundResource(R.drawable.point_red_bg);
            } else {
                //未選中
                view.setBackgroundResource(R.drawable.point_gray_bg);
            }
        }
    }

    @Override
    public void onPageScrollStateChanged(int state) {

    }

    /**
     * 開始切換
     */
    public void startSwitch() {
        if (!isSwitch) {
            mHandler.postDelayed(new SwitchTask(), 3000);
        }
    }

    /**
     * 停止切換
     */
    public void stopSwitch() {
        mHandler.removeCallbacksAndMessages(null);
        isSwitch = false;
    }

    /**
     * 切換的任務
     */
    private class SwitchTask implements Runnable {

        @Override
        public void run() {
            //切換邏輯
            int currentItem = mViewPager.getCurrentItem();
            if (currentItem == mImageViewList.size() - 1) {
                currentItem = 0;
            } else {
                currentItem++;
            }
            mViewPager.setCurrentItem(currentItem);
            mHandler.postDelayed(this, 3000);
        }
    }

    /**
     *  防止資源泄漏
     */
    @Override
    protected void onPause() {
        super.onPause();
        stopSwitch();
    }
}

• PagerAdapter：

/**
 * Created by FuKaiqiang on 2018-05-01.
 * 輪播圖的適配器
 */

public class MyPagerAdapter extends PagerAdapter {

    private List<ImageView> mImageViewList;

    public MyPagerAdapter(List<ImageView> imageViewList) {
        mImageViewList = imageViewList;
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        View view = mImageViewList.get(position);
        container.addView(view);
        return view;
    }

    @Override
    public int getCount() {
        return mImageViewList != null ? mImageViewList.size() : 0;
    }

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

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

• 自定義ViewPager：

/**
 * Created by FuKaiqiang on 2018-05-02.
 */

public class MyViewPager extends ViewPager {

    private MainActivity mActivity;
    private int mStartX;
    private int mStartY;
    private int[] titles;

    public MyViewPager(Context context) {
        super(context);
    }

    public MyViewPager(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public void setActivity(MainActivity mainActivity, int[] titles) {
        mActivity = mainActivity;
        this.titles = titles;
    }

    @Override
    public boolean dispatchTouchEvent(MotionEvent ev) {
        switch (ev.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mStartX = (int) ev.getX();
                mStartY = (int) ev.getY();
                //停止輪播圖的切換
                mActivity.stopSwitch();
                break;
            case MotionEvent.ACTION_MOVE:
                break;
            case MotionEvent.ACTION_UP:
                int upX = (int) ev.getX();
                int upY = (int) ev.getY();
                if (mStartX == upX && mStartY == upY) {
                    int currentItem = getCurrentItem();
                    Toast.makeText(mActivity, titles[currentItem-1], Toast.LENGTH_SHORT).show();
                }
                //恢復輪播圖的切換
                mActivity.startSwitch();
                break;
        }
        return super.dispatchTouchEvent(ev);
    }
}

• layout：

<?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="wrap_content"
    >

    <com.example.testscreen.MyViewPager
        android:id="@+id/bt_main_vp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.example.testscreen.MyViewPager>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@id/bt_main_vp"
        android:background="#bf0d0202">

        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="5dp"
            android:textColor="#fff"
            android:textSize="15sp"
            />

        <LinearLayout
            android:id="@+id/ll_point_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_centerVertical="true"
            android:orientation="horizontal">
        </LinearLayout>
    </RelativeLayout>

</RelativeLayout>

• shape:

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

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

4. 下載地址：

鏈接：https://pan.baidu.com/s/1pUuCHN8TJXa_E2x9LX87eA 密碼：0yku

5. 后續(xù)

如果大家喜歡這篇文章，歡迎點贊；如果想看更多前端移動端后端Java或Python方面的技術，歡迎關注！