Android ViewPager制作新手導(dǎo)航頁(動態(tài)加載)

更新時間：2016年05月20日 17:28:53 作者：TheMrNice

這篇文章主要為大家詳細介紹了Android ViewPager制作新手導(dǎo)航頁，了解什么是動態(tài)加載指示器，感興趣的小伙伴們可以參考一下

我們來講個老生常談的話題，估計大家都用過的—>ViewPager，用它來做新手導(dǎo)航頁面，雖然這次也是講這個，但是和以往的用法可能有些不同，大家都看到標(biāo)題進來的，應(yīng)該知道的是：動態(tài)加載指示器。

什么叫動態(tài)加載呢，是不是感覺很高大上呢，其實呢就是動態(tài)的去加載指示器的數(shù)量的，而不是在布局文件中寫死。希望看了這篇文章大家對ViewPager有新的認識。

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

這個動態(tài)加載就是為了動態(tài)的加載下面的灰色圓點指示器和紅色圓點指示器，大家有沒有注意到當(dāng)我滑動的時候（即切換頁面的時候）紅色圓點會跟著移動。沒錯。

第一步：

在布局文件中添加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和灰色圓點和紅色圓點布局的示例（原因：因為我們需要動態(tài)加載圓點），并為ViewPager添加適配器和監(jiān)聽器。

  //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的適配器中。

注：為了在滑動的時候不重復(fù)創(chuàng)建圖片實例，所以我們可以先將需要加載的資源的放在一個集合中，當(dāng)每次滑動需要加載的時候就從集合中取出即可，這樣節(jié)省了系統(tǒng)資源。

//導(dǎo)航頁資源
  private int[] images = new int[]{
    R.drawable.guide_1,
    R.drawable.guide_2,
    R.drawable.guide_3,
  };
  //用來存放導(dǎo)航圖片實例（保證唯一性，滑動的時候不重復(fù)創(chuàng)建）
  private List<ImageView> imageViews;
    //初始化導(dǎo)航頁面
    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 {
    //返回導(dǎo)航頁的個數(shù)
    @Override
    public int getCount() {
      return images.length;
    }
    //判斷是否由對象生成
    @Override
    public boolean isViewFromObject(View view,Object object) {
      return view == object;
    }
    //加載頁面
    //ViewGroup:父控件指ViewPager
    //position:當(dāng)前子控件在父控件中的位置
    @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);
    }
  }

第四步：

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

首先動態(tài)的添加灰色圓點和紅色圓點：

for (int i = 0; i < images.length; i++) {
      ImageView iv = new ImageView(MainActivity.this);
      iv.setImageResource(images[i]);
      imageViews.add(iv);
      //動態(tài)加載灰色圓點
      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);

注：灰色圓點是從第二個開始有左邊距的，為組件動態(tài)的設(shè)置邊距的話使用布局的LayoutParams（衣服），記住三個灰色圓點使用的是哪個布局就采用那種布局的LayoutParams來進行設(shè)置。

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

//任何一個組件都可以得到視圖樹
    red_Iv.getViewTreeObserver().addOnGlobalLayoutListener(new OnGlobalLayoutListener() {
      //視圖完成繪制的時候調(diào)用
      @Override
      public void onGlobalLayout() {
        left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
        System.out.println(left);
        //移除視圖樹的監(jiān)聽
        red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
      }
    });
    //導(dǎo)航頁滑動的時候調(diào)用
      //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);
      }

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

灰色圓點之間的距離：

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

現(xiàn)在就可以知道紅色圓點需要滑動多少了。

      //導(dǎo)航頁滑動的時候調(diào)用
      //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);
      }

第五步：

新手導(dǎo)航頁，一般移動到最后一頁的時候會有個按鈕跳到主界面。這個只需要在導(dǎo)航頁被選擇的時候設(shè)置一下即可

//導(dǎo)航頁被選擇的時候調(diào)用
      @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;
  //導(dǎo)航頁資源
  private int[] images = new int[]{
    R.drawable.guide_1,
    R.drawable.guide_2,
    R.drawable.guide_3,
  };
  //圓點與圓點之間的邊距
  private int left;
  //用來存放導(dǎo)航圖片實例（保證唯一性，滑動的時候不重復(fù)創(chuàng)建）
  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();
    //初始化導(dǎo)航頁面和灰色圓點
    for (int i = 0; i < images.length; i++) {
      ImageView iv = new ImageView(MainActivity.this);
      iv.setImageResource(images[i]);
      imageViews.add(iv);
      //動態(tài)加載灰色圓點
      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() {
      //視圖完成繪制的時候調(diào)用
      @Override
      public void onGlobalLayout() {
        left = ll.getChildAt(1).getLeft() - ll.getChildAt(0).getLeft();
        System.out.println(left);
        //移除視圖樹的監(jiān)聽
        red_Iv.getViewTreeObserver().removeGlobalOnLayoutListener(this);
      }
    });
    //為ViewPager添加適配器
    viewPager.setAdapter(new MyAdapter());
    viewPager.setOnPageChangeListener(new OnPageChangeListener() {
      //導(dǎo)航頁被選擇的時候調(diào)用
      @Override
      public void onPageSelected(int position) {
        if (position == images.length - 1) {
          btn.setVisibility(View.VISIBLE);
        }else {
          btn.setVisibility(View.GONE);
        }
      }
      //導(dǎo)航頁滑動的時候調(diào)用
      //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);
      }
      //導(dǎo)航頁滑動的狀態(tài)改變的時候調(diào)用
      @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 {
    //返回導(dǎo)航頁的個數(shù)
    @Override
    public int getCount() {
      return images.length;
    }
    //判斷是否由對象生成
    @Override
    public boolean isViewFromObject(View view,Object object) {
      return view == object;
    }
    //加載頁面
    //ViewGroup:父控件指ViewPager
    //position:當(dāng)前子控件在父控件中的位置
    @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);
    }
  }
}

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

以上就是本文的全部內(nèi)容，希望對大家學(xué)習(xí)Android軟件編程有所幫助。

您可能感興趣的文章: