Android ViewPager製作新手導航頁(動態載入)_Android

我們來講個老生常談的話題，估計大家都用過的—>ViewPager，用它來做新手導航頁面，雖然這次也是講這個，但是和以往的用法可能有些不同，大家都看到標題進來的，應該知道的是：動態載入指標。

什麼叫動態載入呢，是不是感覺很高大上呢，其實呢就是動態去載入指標的數量的，而不是在布局檔案中寫死。希望看了這篇文章大家對ViewPager有新的認識。

看到這個效果大家應該都很不屑吧，今天講這個就是為了讓大家有新的認識。好了，好好聽，開始了。

這個動態載入就是為了動態載入下面的灰色圓點指標和紅色圓點指標，大家有沒有注意到當我滑動的時候（即切換頁面的時候）紅色圓點會跟著移動。沒錯。

第一步：

在布局檔案中添加ViewPager,並添加灰色圓點和紅色圓點的布局，先來想想都用什麼布局呢，首先三個灰色圓點可以用線性布局，一個紅色圓點可以採用相對布局（原因：其實紅色圓點就是覆蓋在灰色圓點上）

 <RelativeLayout    android:id="@+id/rl"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:layout_centerHorizontal="true"    android:layout_marginBottom="30dp" >    <!--灰色圓點的布局-->    <LinearLayout      android:id="@+id/ll"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:orientation="horizontal" >    </LinearLayout>      </RelativeLayout>

第二步：

在onCreate方法中聲明ViewPager和灰色圓點和紅色圓點布局的樣本（原因：因為我們需要動態載入圓點），並為ViewPager添加適配器和監聽器。

  //ViwePager  private ViewPager viewPager;  //存放三個灰色圓點的線性布局  private LinearLayout ll;  //用來存放紅色圓點和灰色圓點的相對布局  private RelativeLayout rl;  //初始化組件  private void initView() {    viewPager = (ViewPager)   findViewById(R.id.viewPager);    imageViews = new ArrayList<ImageView>();    ll = (LinearLayout) findViewById(R.id.ll);    rl = (RelativeLayout) findViewById(R.id.rl);    btn = (Button) findViewById(R.id.btn);  //為ViewPager添加適配器  viewPager.setAdapter(new MyAdapter());  viewPager.setOnPageChangeListener();

第三步：

將三個圖片加到ViewPager的適配器中。

註：為了在滑動的時候不重複建立圖片執行個體，所以我們可以先將需要載入的資源的放在一個集合中，當每次滑動需要載入的時候就從集合中取出即可，這樣節省了系統資源。

//導航頁資源  private int[] images = new int[]{    R.drawable.guide_1,    R.drawable.guide_2,    R.drawable.guide_3,  };  //用來存放導航圖片執行個體（保證唯一性，滑動的時候不重複建立）  private List<ImageView> imageViews;    //初始化導航頁面    for (int i = 0; i < images.length; i++) {      ImageView iv = new ImageView(MainActivity.this);      iv.setImageResource(images[i]);      imageViews.add(iv);    }    //PagerAdapter有四個方法  class MyAdapter extends PagerAdapter {    //返回導航頁的個數    @Override    public int getCount() {      return images.length;    }    //判斷是否由對象產生    @Override    public boolean isViewFromObject(View view,Object object) {      return view == object;    }    //載入頁面    //ViewGroup:父控制項指ViewPager    //position:當前子控制項在父控制項中的位置    @Override    public Object instantiateItem(ViewGroup container, int position) {      ImageView iv = imageViews.get(position);      container.addView(iv);      return iv;    }    //移除頁面    @Override    public void destroyItem(ViewGroup container, int position, Object object) {      container.removeView((View) object);    }  }

第四步：

重要的部分來了，這一步是動態將灰色圓點和紅色圓點添加進來，並讓紅色圓點隨著滑動也跟著一起滑動。

首先動態添加灰色圓點和紅色圓點：

for (int i = 0; i < images.length; i++) {      ImageView iv = new ImageView(MainActivity.this);      iv.setImageResource(images[i]);      imageViews.add(iv);      //動態載入灰色圓點      ImageView gray_Iv = new ImageView(this);      gray_Iv.setImageResource(R.drawable.grar_circle);      LinearLayout.LayoutParams layoutParams =           new LayoutParams(LayoutParams.WRAP_CONTENT,              LayoutParams.WRAP_CONTENT);      //從第二個開始有邊距      if (i > 0) {        layoutParams.leftMargin = 20;  //注意單位是px      }      gray_Iv.setLayoutParams(layoutParams);      ll.addView(gray_Iv);    }    //添加紅色圓點    red_Iv = new ImageView(this);    red_Iv.setImageResource(R.drawable.red_circle);    rl.addView(red_Iv);

註：灰色圓點是從第二個開始有左邊距的，為組件動態設定邊距的話使用布局的LayoutParams（衣服），記住三個灰色圓點使用的是哪個布局就採用那種布局的LayoutParams來進行設定。

下面就是讓紅色圓點隨著ViewPager滑動也跟著一起滑動：

//任何一個組件都可以得到視圖樹    red_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {      //視圖完成繪製的時候調用      @Override      public void onGlobalLayout() {        left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();        System.out.println(left);        //移除視圖樹的監聽        red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);      }    });    //導航頁滑動的時候調用      //positionOffset:滑動的百分比（[0,1}）      @Override      public void onPageScrolled(int position, float positionOffset, int arg2) {        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();        layoutParams.leftMargin = (int) (left * positionOffset + position * left);        red_Iv.setLayoutParams(layoutParams);      }

註：這裡需要明白一個概念–>視圖樹，為什麼要明白這個呢，因為我們是動態將灰色圓點添加進去，不知道這個視圖什麼才能繪製好，所以需要監聽到整個視圖的繪製狀態，任何一個組件都可以拿到視圖樹，對視圖樹的繪製進行監聽。這樣就可以得到灰色圓點之間的距離，大家又會問一開始添加灰色圓點的時候不是設定了左邊距嗎？？？是的，但是這個單位是px，而現在是dp不能直接設定。

灰色圓點之間的距離：

left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
public void onPageScrolled(int position, float positionOffset, int arg2)中參數positionOffset指滑動的百分比（範圍[0-1））

現在就可以知道紅色圓點需要滑動多少了。

      //導航頁滑動的時候調用      //positionOffset:滑動的百分比([0,1))      @Override      public void onPageScrolled(int position, float positionOffset, int arg2) {        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();        layoutParams.leftMargin = (int) (left * positionOffset + position * left);        red_Iv.setLayoutParams(layoutParams);      }

第五步：

新手導航頁，一般移動到最後一頁的時候會有個按鈕跳到主介面。這個只需要在導航頁被選擇的時候設定一下即可

//導航頁被選擇的時候調用      @Override      public void onPageSelected(int position) {        //滑動到最後一頁，顯示按鈕        if (position == images.length - 1) {          btn.setVisibility(View.VISIBLE);        //不是最後一頁，不顯示按鈕        }else {          btn.setVisibility(View.GONE);        }      }

核心代碼：

布局檔案：

<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.example.viewpager.MainActivity" >  <android.support.v4.view.ViewPager    android:id="@+id/viewPager"    android:layout_width="match_parent"    android:layout_height="match_parent" >  </android.support.v4.view.ViewPager>  <RelativeLayout    android:id="@+id/rl"    android:layout_width="wrap_content"    android:layout_height="wrap_content"    android:layout_alignParentBottom="true"    android:layout_centerHorizontal="true"    android:layout_marginBottom="30dp" >    <!--灰色圓點的布局-->    <LinearLayout      android:id="@+id/ll"      android:layout_width="wrap_content"      android:layout_height="wrap_content"      android:orientation="horizontal" >    </LinearLayout>  </RelativeLayout>  <Button     android:layout_width="wrap_content"    android:id="@+id/btn"    android:layout_alignParentBottom="true"    android:layout_centerHorizontal="true"    android:layout_marginBottom="50dp"     android:layout_height="wrap_content"    android:text="體驗"    android:visibility="gone"    /></RelativeLayout>

MainActivity.java

public class MainActivity extends Activity {  //ViwePager  private ViewPager viewPager;  private Button btn;  //導航頁資源  private int[] images = new int[]{    R.drawable.guide_1,    R.drawable.guide_2,    R.drawable.guide_3,  };  //圓點與圓點之間的邊距  private int left;  //用來存放導航圖片執行個體（保證唯一性，滑動的時候不重複建立）  private List<ImageView> imageViews;  //存放三個灰色圓點的線性布局  private LinearLayout ll;  //用來存放紅色圓點和灰色圓點的相對布局  private RelativeLayout rl;  //紅色圓點ImageView  private ImageView red_Iv;  @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    initView();    //初始化導航頁面和灰色圓點    for (int i = 0; i < images.length; i++) {      ImageView iv = new ImageView(MainActivity.this);      iv.setImageResource(images[i]);      imageViews.add(iv);      //動態載入灰色圓點      ImageView gray_Iv = new ImageView(this);      gray_Iv.setImageResource(R.drawable.grar_circle);      LinearLayout.LayoutParams layoutParams =           new LayoutParams(LayoutParams.WRAP_CONTENT,              LayoutParams.WRAP_CONTENT);      //從第二個開始有邊距      if (i > 0) {        layoutParams.leftMargin = 20;  //注意單位是px      }      gray_Iv.setLayoutParams(layoutParams);      ll.addView(gray_Iv);    }    red_Iv = new ImageView(this);    red_Iv.setImageResource(R.drawable.red_circle);    rl.addView(red_Iv);    //任何一個組件都可以得到視圖樹    red_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {      //視圖完成繪製的時候調用      @Override      public void onGlobalLayout() {        left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();        System.out.println(left);        //移除視圖樹的監聽        red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);      }    });    //為ViewPager添加適配器    viewPager.setAdapter(new MyAdapter());    viewPager.setOnPageChangeListener(new OnPageChangeListener() {      //導航頁被選擇的時候調用      @Override      public void onPageSelected(int position) {        if (position == images.length - 1) {          btn.setVisibility(View.VISIBLE);        }else {          btn.setVisibility(View.GONE);        }      }      //導航頁滑動的時候調用      //positionOffset:滑動的百分比（[0,1}）      @Override      public void onPageScrolled(int position, float positionOffset, int arg2) {        RelativeLayout.LayoutParams layoutParams = (RelativeLayout.LayoutParams) red_Iv.getLayoutParams();        layoutParams.leftMargin = (int) (left * positionOffset + position * left);        red_Iv.setLayoutParams(layoutParams);      }      //導航頁滑動的狀態改變的時候調用      @Override      public void onPageScrollStateChanged(int arg0) {      }    });  }  //初始化組件  private void initView() {    viewPager = (ViewPager) findViewById(R.id.viewPager);    imageViews = new ArrayList<ImageView>();    ll = (LinearLayout) findViewById(R.id.ll);    rl = (RelativeLayout) findViewById(R.id.rl);    btn = (Button) findViewById(R.id.btn);  }  //PagerAdapter有四個方法  class MyAdapter extends PagerAdapter {    //返回導航頁的個數    @Override    public int getCount() {      return images.length;    }    //判斷是否由對象產生    @Override    public boolean isViewFromObject(View view,Object object) {      return view == object;    }    //載入頁面    //ViewGroup:父控制項指ViewPager    //position:當前子控制項在父控制項中的位置    @Override    public Object instantiateItem(ViewGroup container, int position) {      ImageView iv = imageViews.get(position);      container.addView(iv);      return iv;    }    //移除頁面    @Override    public void destroyItem(ViewGroup container, int position, Object object) {      container.removeView((View) object);    }  }}

大家趕緊試試吧。會有不同的認識。

以上就是本文的全部內容，希望對大家學習Android軟體編程有所協助。