Android進階之繪製-自定義View完全掌握(二)

• 2020 年 1 月 20 日
• 筆記

這是自定義View系列的第二篇部落格，我們繼續來學習關於自定義View的知識。 今天我們來實現一下廣告條案例。 我們要實現的是這樣的一個效果。

要想實現這樣的效果，我們可以藉助ViewPager控制項，然後加上自定義的一些控制項即可完成。那麼現在就開始吧。 新建一個android項目。 修改activity_main.xml文件。

<?xml version="1.0" encoding="utf-8"?>  <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:app="http://schemas.android.com/apk/res-auto"      xmlns:tools="http://schemas.android.com/tools"      android:layout_width="match_parent"      android:layout_height="match_parent"      tools:context="com.itcast.test0429.MainActivity">        <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="復仇者聯盟4"              android:textColor="#ffffff" />            <LinearLayout              android:id="@+id/ll_point_group"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:gravity="center_horizontal"              android:orientation="horizontal">            </LinearLayout>      </LinearLayout>    </RelativeLayout>

然後修改MainActivity的程式碼。

package com.itcast.test0429;    import android.os.Bundle;  import android.support.v4.view.PagerAdapter;  import android.support.v4.view.ViewPager;  import android.support.v7.app.AppCompatActivity;  import android.util.Log;  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 butterknife.BindInt;  import butterknife.BindView;  import butterknife.ButterKnife;    public class MainActivity extends AppCompatActivity {        private static final String TAG = MainActivity.class.getSimpleName();      @BindView(R.id.viewpager)      ViewPager viewpager;      @BindView(R.id.tv_title)      TextView tvTitle;      @BindView(R.id.ll_point_group)      LinearLayout llPointGroup;        private ArrayList<ImageView> imageViews;        //圖片資源ID      private final int[] imageIds = {              R.drawable.b1,              R.drawable.b2,              R.drawable.b3      };        //圖片標題集合      private final String[] imageDescriptions = {              "標題一",              "標題二",              "標題三"      };        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          ButterKnife.bind(this);            imageViews = new ArrayList<>();          for(int i = 0;i < imageIds.length;i++){              ImageView imageView = new ImageView(this);              imageView.setBackgroundResource(imageIds[i]);                //添加到集合中              imageViews.add(imageView);          }            //設置適配器          viewpager.setAdapter(new MyAdapter());      }        class MyAdapter extends PagerAdapter{            /**           * 得到圖片的總數           * @return           */          @Override          public int getCount() {              return imageViews.size();          }            /**           * 相當於getView方法           * @param container ViewPager自身           * @param position  當前實例化頁面的位置           * @return           */          @Override          public Object instantiateItem(ViewGroup container, int position) {              ImageView imageView = imageViews.get(position);              container.addView(imageView);//添加到ViewPager中              Log.e(TAG,"instantiateItem==" + position + ",---imageView==" + imageView);              return imageView;          }            /**           * 比較view和object是否同一個實例           * @param view  頁面           * @param object    instantiateItem方法返回的結果           * @return           */          @Override          public boolean isViewFromObject(View view, Object object) {              return view == object;          }            /**           * 釋放資源           * @param container ViewPager           * @param position  要釋放的位置           * @param object    要釋放的頁面           */          @Override          public void destroyItem(ViewGroup container, int position, Object object) {              Log.e(TAG,"destroyItem==" + position + ",---object==" + object);              container.removeView((View) object);          }      }  }

需要注意的就是PageAdapter的使用，每個方法我都寫了注釋，大家應該能理解吧。ViewPager在運行之後總共會初始化兩個頁面，最多初始化三個，隨著頁面的增多，ViewPager會自動銷毀前面的頁面進而提供給後面的頁面使用，這是ViewPage的內容優化，我們可以來驗證一下，我在初始化和銷毀的方法中都列印了日誌。現在，我們來運行項目。

我們看看日誌情況。

只列印了兩次初始化資訊，說明ViewPager只初始化了兩個頁面。 我們向左滑動ViewPager來切換頁面，此時觀察日誌資訊。

會發現在創建了三個實例後，第一個頁面的實例就被銷毀了，這就證實了剛才的結論。 這樣我們第一階段的編碼就完成了，接下來我們實現添加指示點，並根據頁面改變設置文本。 而指示點有多種實現方式，可以通過圖片來顯示，也可以自己繪製指示點顯示，我這種用的是第二種方式。貼出MainActivity的程式碼。

package com.itcast.test0429;    import android.os.Bundle;  import android.support.v4.view.PagerAdapter;  import android.support.v4.view.ViewPager;  import android.support.v7.app.AppCompatActivity;  import android.util.Log;  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 butterknife.BindView;  import butterknife.ButterKnife;  import butterknife.OnClick;  import butterknife.OnPageChange;    public class MainActivity extends AppCompatActivity {        private static final String TAG = MainActivity.class.getSimpleName();      @BindView(R.id.viewpager)      ViewPager viewpager;      @BindView(R.id.tv_title)      TextView tvTitle;      @BindView(R.id.ll_point_group)      LinearLayout llPointGroup;        private ArrayList<ImageView> imageViews;        //圖片資源ID      private final int[] imageIds = {              R.drawable.b1,              R.drawable.b2,              R.drawable.b3,              R.drawable.b1,              R.drawable.b2,              R.drawable.b3      };        /**       * 上一次高亮顯示的位置       */      private int prePosition = 0;        //圖片標題集合      private final String[] imageDescriptions = {              "標題一",              "標題二",              "標題三",              "標題四",              "標題五",              "標題六"      };        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          ButterKnife.bind(this);            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);                llPointGroup.addView(point);          }            //設置適配器          viewpager.setAdapter(new MyAdapter());            tvTitle.setText(imageDescriptions[prePosition]);            //設置監聽ViewPager頁面的改變          viewpager.addOnPageChangeListener(new 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) {                  //設置對應頁面的文本資訊                  tvTitle.setText(imageDescriptions[position]);                  //把上一個高亮的設置為默認-灰色                  llPointGroup.getChildAt(prePosition).setEnabled(false);                  //當前設置為高亮-紅色                  llPointGroup.getChildAt(position).setEnabled(true);                    prePosition = position;              }                /**               * 當頁面滾動狀態變化的時候回調此方法               * 靜止-》滑動               * 滑動--》靜止               * 靜止---》拖拽               * @param state               */              @Override              public void onPageScrollStateChanged(int state) {                }          });      }        class MyAdapter extends PagerAdapter {            /**           * 得到圖片的總數           *           * @return           */          @Override          public int getCount() {              return imageViews.size();          }            /**           * 相當於getView方法           *           * @param container ViewPager自身           * @param position  當前實例化頁面的位置           * @return           */          @Override          public Object instantiateItem(ViewGroup container, int position) {              ImageView imageView = imageViews.get(position);              container.addView(imageView);//添加到ViewPager中              Log.e(TAG, "instantiateItem==" + position + ",---imageView==" + imageView);              return imageView;          }            /**           * 比較view和object是否同一個實例           *           * @param view   頁面           * @param object instantiateItem方法返回的結果           * @return           */          @Override          public boolean isViewFromObject(View view, Object object) {              return view == object;          }            /**           * 釋放資源           *           * @param container ViewPager           * @param position  要釋放的位置           * @param object    要釋放的頁面           */          @Override          public void destroyItem(ViewGroup container, int position, Object object) {              Log.e(TAG, "destroyItem==" + position + ",---object==" + object);              container.removeView((View) object);          }      }  }

指示點我是用xml文件繪製的，point_selecotr.xml文件程式碼如下。

<?xml version="1.0" encoding="utf-8"?>  <selector xmlns:android="http://schemas.android.com/apk/res/android">      <item android:state_enabled="false" android:drawable="@drawable/point_normal"/>      <item android:state_enabled="true" android:drawable="@drawable/point_press"/>  </selector>

point_normal.xml文件程式碼如下。

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

point_press.xml文件程式碼如下。

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

我們運行項目，預覽效果。

這個時候，指示點和文本標題的內容都隨著我們的滑動而改變，這樣，我們的目的就達到了。 我們來實現第三階段的需求，支援左右無限滑動。 怎麼才能實現這個需求呢？滑動的頁面數量是由適配器的getCount方法決定的，所以，我們在getCount方法里直接返回Integer.MAX_VALUE，這是int的最大值，這個數量已經非常龐大了，可以說近似於無限滑動，但是設置如此大的數量，而我們的數據又沒有這麼多，那麼在滑動頁面的時候肯定會產生索引越界的問題，所以，為了避免這樣的問題產生，我們就必須把有頁面位置的地方全部取模處理，讓其保持在我們的有限數據範圍內，這樣就能夠實現我們的需求了。那麼我們來修改MainActivity的程式碼。

package com.itcast.test0429;    import android.os.Bundle;  import android.support.v4.view.PagerAdapter;  import android.support.v4.view.ViewPager;  import android.support.v7.app.AppCompatActivity;  import android.util.Log;  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 butterknife.BindView;  import butterknife.ButterKnife;  import butterknife.OnClick;  import butterknife.OnPageChange;    public class MainActivity extends AppCompatActivity {        private static final String TAG = MainActivity.class.getSimpleName();      @BindView(R.id.viewpager)      ViewPager viewpager;      @BindView(R.id.tv_title)      TextView tvTitle;      @BindView(R.id.ll_point_group)      LinearLayout llPointGroup;        private ArrayList<ImageView> imageViews;        //圖片資源ID      private final int[] imageIds = {              R.drawable.b1,              R.drawable.b2,              R.drawable.b3,              R.drawable.b1,              R.drawable.b2,              R.drawable.b3      };        /**       * 上一次高亮顯示的位置       */      private int prePosition = 0;        //圖片標題集合      private final String[] imageDescriptions = {              "標題一",              "標題二",              "標題三",              "標題四",              "標題五",              "標題六"      };        @Override      protected void onCreate(Bundle savedInstanceState) {          super.onCreate(savedInstanceState);          setContentView(R.layout.activity_main);          ButterKnife.bind(this);            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);                llPointGroup.addView(point);          }            //設置適配器          viewpager.setAdapter(new MyAdapter());            tvTitle.setText(imageDescriptions[prePosition]);            //設置監聽ViewPager頁面的改變          viewpager.addOnPageChangeListener(new 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();                    //設置對應頁面的文本資訊                  tvTitle.setText(imageDescriptions[realPosition]);                  //把上一個高亮的設置為默認-灰色                  llPointGroup.getChildAt(prePosition).setEnabled(false);                  //當前設置為高亮-紅色                  llPointGroup.getChildAt(realPosition).setEnabled(true);                    prePosition = realPosition;              }                /**               * 當頁面滾動狀態變化的時候回調此方法               * 靜止-》滑動               * 滑動--》靜止               * 靜止---》拖拽               * @param state               */              @Override              public void onPageScrollStateChanged(int state) {                }          });      }        class MyAdapter extends PagerAdapter {            /**           * 得到圖片的總數           *           * @return           */          @Override          public int getCount() {              return Integer.MAX_VALUE;          }            /**           * 相當於getView方法           *           * @param container ViewPager自身           * @param position  當前實例化頁面的位置           * @return           */          @Override          public Object instantiateItem(ViewGroup container, int position) {                int realPosition = position % imageViews.size();                ImageView imageView = imageViews.get(realPosition);              container.addView(imageView);//添加到ViewPager中              Log.e(TAG, "instantiateItem==" + position + ",---imageView==" + imageView);              return imageView;          }            /**           * 比較view和object是否同一個實例           *           * @param view   頁面           * @param object instantiateItem方法返回的結果           * @return           */          @Override          public boolean isViewFromObject(View view, Object object) {              return view == object;          }            /**           * 釋放資源           *           * @param container ViewPager           * @param position  要釋放的位置           * @param object    要釋放的頁面           */          @Override          public void destroyItem(ViewGroup container, int position, Object object) {              Log.e(TAG, "destroyItem==" + position + ",---object==" + object);              container.removeView((View) object);          }      }  }

這樣就可以了，我們來運行一下項目。

乍一看，好像是沒什麼問題了，但是，這個程式是有bug的，只是這樣我們沒有測試出來，我再操作一遍。

發現問題了沒有，我在最開始進入程式的時候，右滑是不是滑不動？因為ViewPager默認從0開始，所以左邊已經沒有其它頁面了，故你無法右滑，那怎麼解決這個問題呢？找到了問題的原因，那就可以有解決辦法，既然左邊沒有頁面，那就讓它有頁面不就得了？我們把第一張圖定位到中間位置，那麼它的左邊和右邊就都會擁有數量龐大的頁面。雖然頁面很多，但也不是滑不完的，假如有一個用戶，他就是閑得慌，他就拚命地滑，結果，把左邊或者右邊的所有頁面都滑完了，這種情況我們只能說這個人他真的是閑得慌了，總之，按照正常情況，如此多的頁面時足夠用戶滑動了。 原理我們知道了，如何通過編碼實現呢？很簡單，只需要ViewPager設置適配器之後加上如下程式碼即可。

 //設置中間位置  int item = Integer.MAX_VALUE / 2 - Integer.MAX_VALUE / 2 % imageViews.size();//要保證imageViews的整數倍  viewpager.setCurrentItem(item);

現在運行項目，預覽效果。

這樣問題就解決了。整個案例也就結束了，這只是ViewPager使用的一小部分，這個程式還可以加上很多的功能，比如自動播放，然後點擊跳轉等等，由於篇幅有限，我就不一一實現了，感興趣的可以自己嘗試著寫一寫。 源碼已上傳至GitHub