Android控件八：ViewPager實現自動輪播

效果圖：

代碼實現：
佈局文件

<?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=".MainActivity">

   <RelativeLayout
       android:layout_width="match_parent"
       android:layout_height="200dp">
       <!--存放圖片的ViewPager-->
       <android.support.v4.view.ViewPager
           android:id="@+id/viewpager"
           android:layout_width="match_parent"
           android:layout_height="match_parent" />

       <LinearLayout
           android:layout_width="match_parent"
           android:layout_height="40dp"
           android:layout_alignParentBottom="true"
           android:background="#66000000"
           android:gravity="center_horizontal"
           android:orientation="vertical"
           android:padding="5dp">

           <!--標題-->
           <TextView
               android:id="@+id/tv_desc"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:singleLine="true"
               android:text="標題"
               android:textColor="@android:color/white" />
           <!--存放小圓點的容器-->
           <LinearLayout
               android:id="@+id/ll_point_container"
               android:layout_width="wrap_content"
               android:layout_height="wrap_content"
               android:layout_marginTop="5dp"
               android:orientation="horizontal" />
       </LinearLayout>
   </RelativeLayout>

</RelativeLayout>

MainActivity.java

public class Main2Activity extends Activity implements ViewPager.OnPageChangeListener {

   private ViewPager viewPager;
   private int[] imageResIds;
   private ArrayList<ImageView> imageViewList;
   private LinearLayout ll_point_container;
   private String[] contentDescs;
   private TextView tv_desc;
   private int previousSelectedPosition = 0;
   boolean isRunning = false;
   private Timer timer;
   private @SuppressLint("HandlerLeak")
   Handler handler;
   MyRunnable runnable = new MyRunnable();

   @RequiresApi(api = Build.VERSION_CODES.M)
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main2);
       viewPager = (ViewPager) findViewById(R.id.viewpager);
       // 設置頁面更新監聽
       viewPager.addOnPageChangeListener(this);
       ll_point_container = (LinearLayout) findViewById(R.id.ll_point_container);
       tv_desc = (TextView) findViewById(R.id.tv_desc);

       // Model數據
       initData();
       // Controller 控制器
       initAdapter();
       // 開啓輪詢
       startLooper2();
   }

   @SuppressLint("HandlerLeak")
   private void startLooper2() {
       handler = new Handler();
       handler.postDelayed(runnable,3000);
    }

   class MyRunnable implements Runnable{
       @Override
       public void run() {
           viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
           handler.postDelayed(runnable,3000);
       }
   }

   private void startLooper() {
       new Thread() {
           @Override
           public void run() {
               isRunning = true;
               while (isRunning) {
                   try {
                       Thread.sleep(2000);
                   } catch (InterruptedException e) {
                       e.printStackTrace();
                   }
                   // 往下跳一位
                   runOnUiThread(new Runnable() {

                       @Override
                       public void run() {
                           viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);
                       }
                   });
               }
           }
       }.start();
   }

   /**
    * 初始化要顯示的數據
    */
   private void initData() {
       // 圖片資源id數組
       imageResIds = new int[]{R.drawable.aa, R.drawable.bb, R.drawable.cc, R.drawable.dd, R.drawable.ee};
       // 文本描述
       contentDescs = new String[]{
               "我是第零張圖片",
               "我是第一張圖片",
               "我是第二張圖片",
               "我是第三張圖片",
               "我是第四張圖片"
       };

       // 初始化要展示的5個ImageView
       imageViewList = new ArrayList<ImageView>();
       ImageView imageView;
       View pointView;
       LinearLayout.LayoutParams layoutParams;
       for (int i = 0; i < imageResIds.length; i++) {
           // 初始化要顯示的圖片對象
           imageView = new ImageView(this);
           imageView.setBackgroundResource(imageResIds[i]);
           imageViewList.add(imageView);

           // 加小白點, 指示器
           pointView = new View(this);
           pointView.setBackgroundResource(R.drawable.ic_launcher_background);
           layoutParams = new LinearLayout.LayoutParams(5, 5);
           if (i != 0) {
               layoutParams.leftMargin = 10;
           }
           // 設置默認所有都不可用
           pointView.setEnabled(false);
           ll_point_container.addView(pointView, layoutParams);
       }
   }

   @RequiresApi(api = Build.VERSION_CODES.M)
   private void initAdapter() {
       ll_point_container.getChildAt(0).setEnabled(true);
       ll_point_container.getChildAt(previousSelectedPosition).setBackgroundColor(Color.WHITE);
       tv_desc.setText(contentDescs[0]);
       previousSelectedPosition = 0;

       // 設置適配器
       viewPager.setAdapter(new MyAdapter());
       //設置界面切換動畫
       viewPager.setPageTransformer(true, (ViewPager.PageTransformer) new DepthPageTransformer());
       // 默認設置到中間的某個位置
       int pos = Integer.MAX_VALUE / 2 - (Integer.MAX_VALUE / 2 % imageViewList.size());
       // 2147483647 / 2 = 1073741823 - (1073741823 % 5)
       // 設置到某個位置
       viewPager.setCurrentItem(pos);
   }

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

       // 3. 指定複用的判斷邏輯, 固定寫法
       @Override
       public boolean isViewFromObject(View view, Object object) {
           // 當劃到新的條目, 又返回來, view是否可以被複用.
           // 返回判斷規則
           return view == object;
       }

       // 1. 返回要顯示的條目內容, 創建條目
       @Override
       public Object instantiateItem(ViewGroup container, int position) {
           System.out.println("instantiateItem初始化: " + position);
           // container: 容器: ViewPager
           // position: 當前要顯示條目的位置 0 -> 4
// newPosition = position % 5
           int newPosition = position % imageViewList.size();

           ImageView imageView = imageViewList.get(newPosition);
           // a. 把View對象添加到container中
           container.addView(imageView);
           // b. 把View對象返回給框架, 適配器
           // 必須重寫, 否則報異常
           return imageView;
       }

       // 2. 銷燬條目
       @Override
       public void destroyItem(ViewGroup container, int position, Object object) {
           // object 要銷燬的對象
           container.removeView((View) object);
       }
   }

   @Override
   public void onPageScrolled(int position, float positionOffset,
                              int positionOffsetPixels) {
       // 滾動時調用
   }

   @Override
   public void onPageSelected(int position) {
       // 新的條目被選中時調用
       int newPosition = position % imageViewList.size();

       //設置文本
       tv_desc.setText(contentDescs[newPosition]);

       // 把之前的禁用, 把最新的啓用, 更新指示器
       ll_point_container.getChildAt(previousSelectedPosition).setEnabled(false);
       ll_point_container.getChildAt(previousSelectedPosition).setBackgroundResource(R.drawable.ic_launcher_background);
       ll_point_container.getChildAt(newPosition).setEnabled(true);
       ll_point_container.getChildAt(newPosition).setBackgroundColor(Color.WHITE);

       // 記錄之前的位置
       previousSelectedPosition = newPosition;
   }

   @Override
   public void onPageScrollStateChanged(int state) {
       // 滾動狀態變化時調用
   }

   @Override
   protected void onDestroy() {
       super.onDestroy();
       isRunning = false;
   }
}

切換動畫

public class DepthPageTransformer implements ViewPager.PageTransformer {
   private static final float MIN_SCALE = 0.75f;

   @Override
   public void transformPage(View view, float position) {
       int pageWidth = view.getWidth();

       if (position < -1) { // [-Infinity,-1)
           // This page is way off-screen to the left.
           view.setAlpha(0);

       } else if (position <= 0) { // [-1,0]
           // Use the default slide transition when moving to the left page
           view.setAlpha(1);
           view.setTranslationX(0);
           view.setScaleX(1);
           view.setScaleY(1);

       } else if (position <= 1) { // (0,1]
           // Fade the page out.
           view.setAlpha(1 - position);

           // Counteract the default slide transition
           view.setTranslationX(pageWidth * -position);

           // Scale the page down (between MIN_SCALE and 1)
           float scaleFactor = MIN_SCALE
                   + (1 - MIN_SCALE) * (1 - Math.abs(position));
           view.setScaleX(scaleFactor);
           view.setScaleY(scaleFactor);

       } else { // (1,+Infinity]
           // This page is way off-screen to the right.
           view.setAlpha(0);
       }
   }
}

其它

小紅點的移動

引言
當我們滑動頁面時，小紅點也是隨着滑動的。如何控制小紅點的移動呢？
此時，同樣要監聽ViewPager的滑動了。我們知道，ViewPager的滑動監聽，有三個
回調方法，監聽哪個方法呢？在哪個方法中，來控制小紅點的移動距離呢？
好! 這裏我們通過監聽:

 onPageScrolled(int position, float positionOffset,int positionOffsetPixels)

參數說明：
Position：頁面滑動的索引
positionOffset：頁面滑動的百分比
positionOffsetPixels：頁面滑動的像素

實現思路
計算小紅點的移動距離，首先監聽ViewPager的滑動事件：
setOnPageChangeListener
onPageScrolled(int position, float positionOffset,int positionOffsetPixels)
計算當前小紅點根據移動的百分百，更改它的位置

小紅點移動原理：

獲取第一個小灰點的左邊距離
containerGrayPoint.getChildAt(0).getLeft()
獲取第二個小灰點的左邊距離
containerGrayPoint.getChildAt(1).getLeft()
兩點之間的距離 = 第二點的左邊距離 - 第一個點的左邊距離
containerGrayPoint.getChildAt(1).getLeft()- llContainer.getChildAt(0).getLeft();
根據移動的百分百，計算小紅點當前移動之後的左邊距
根據當前的ViewPager移動的索引*小紅點移動的距離 + 小紅點移動距離 * 滑動百分比

代碼實現：
佈局中：

<RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="20dp">

        <LinearLayout
            android:id="@+id/container_gray_point"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <!--在代碼中動態的添加灰色的點-->
        </LinearLayout>
        <!--紅色的點-->
        <View
            android:id="@+id/red_point"
            android:layout_width="10dp"
            android:layout_height="10dp"
            android:background="@drawable/point_red_bg"/>
    </RelativeLayout>

Java中：

//動態的創建灰色的點
    private void initGrayPoint() {
        for (int resId : imgs) {
            View view = new View(this);
            view.setBackgroundResource(R.drawable.point_gray_bg);
            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(10,10);
            params.rightMargin = 20;//設置右邊距
            containerGrayPoint.addView(view,params);
        }
    }
	
	//小灰點之間的寬度
    private int width;

    //position:當前滑動頁面的下標    positionOffset：頁面的滑動比率    positionOffsetPixels：頁面滑動的實際像素
    @Override
    public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
        MyLogger.i(TAG,"position:"+position+",positionOffset:"+positionOffset+",positionOffsetPixels:"+positionOffsetPixels);

        if(width == 0){
            width = containerGrayPoint.getChildAt(1).getLeft() - containerGrayPoint.getChildAt(0).getLeft();
            MyLogger.i(TAG,"width:"+width);
        }

        //修改小紅點與相對佈局的左邊距
        RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) redPoint.getLayoutParams();
        params.leftMargin = (int)(position*width + width*positionOffset);
        redPoint.setLayoutParams(params);
    }

shape：

<?xml version="1.0" encoding="UTF-8"?>

	<shape android:shape="oval" xmlns:android="http://schemas.android.com/apk/res/android">

	<solid android:color="#666"/>

</shape>

Android控件八：ViewPager實現自動輪播

其它

Android控件十：沉浸式狀態欄

Android控件三：LRecyclerView實現下拉刷新和上拉加載更多

Android控件七：視圖-圖片-文字切換器ViewAnimator

Android控件一：基本控件

Android控件五：自動垂直水平輪播ViewFlipper

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結