Android中ViewPager組件的基本用法及實現圖片切換的示例

2020-01-02 06:58:52

字體：大中小

來源：轉載

供稿：網友

ViewPager是android-support-v4.jar包里的組件。在布局文件里標簽需要連包名一起

寫全稱<android.support.v4.view.ViewPager />

基本用法

ViewPager的基本用法我概括為三步

第一步在主布局文件里放一個ViewPager組件

第二步為每個頁面建立布局文件，把界面寫好

第三步在主Activity里獲取ViewPager組件，并為它設定Adapter。

Adapter詳細講講，ViewPager對應的Adapter繼承自PagerAdapter，

也是android.support.v4.view包里的，繼承類需要實現四個方法：

int getCount():返回頁面數目
Object instantiateItem(ViewGroup,int position):創建position位置的頁面視圖，加入到ViewGroup中，并返回該視圖的Key。Key可以是該視圖，也可以是其他唯一與該視圖對應的對象：
boolean isViewFromObject(View,Object)：判斷Object所代表的Key是否對應指定的View。
void destroyItem(ViewGroup,int position,Object)：從ViewGroup里刪除position位置的View。

我們先用LayoutInflater將前面為每個頁面建立的界面加載進來，并放在一個ArrayList之類的容器里面。然后在PagerAdapter的這四個方法里，我們操作的，就是與這些頁面對應的View。

使用ViewPager組件實現圖片切換
上面說的這些步驟可能聽起來挺空洞的，下面我們來看這個使用ViewPager組件實現圖片切換的實例：
在很多App中，尤其是第一次安裝啟動后，都會出現幾個圖片進行一些app的介紹和說明，圖片可以隨著滑動而切換。

我們這里利用 ViewPager組件來演示如何實現這一點。

1、創建一個app工程，默認創建一個主 Activity

2、設置該Activity的布局文件activity_main.xml內容如下：

<?xml version="1.0" encoding="utf-8"?><FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:orientation="vertical" >     <android.support.v4.view.ViewPager     android:id="@+id/viewPager"     android:layout_width="match_parent"     android:layout_height="wrap_content" />       <RelativeLayout     android:layout_width="match_parent"     android:layout_height="wrap_content"    android:orientation="vertical" >       <LinearLayout       android:id="@+id/tagView"       android:layout_width="match_parent"       android:layout_height="wrap_content"       android:layout_alignParentBottom="true"      android:layout_marginBottom="20dp"       android:gravity="center_horizontal"       android:orientation="horizontal" >     </LinearLayout>   </RelativeLayout>  </FrameLayout>

因為我們希望再切換圖片上，能有一些點點形狀的圖標（或者數字）顯示當前圖片。所以這里的activity采用了FrameLayout布局（可以實現view重疊放置）。

第一個控件就是ViewPager （注意ViewPager 是在support.v4包中的，新的andorid中并沒有移植該組件）。

第二個控件是放置一個RelativeLayout，其中放置一個LinearLayout（位于屏幕的底部位置），該LinearLayout采用水平布局，用來放置小的圖標。

3、準備圖片

準備5張用于切換顯示的圖片，如 pic1.jpg、pic2.jpg、pic3.jpg、pic4.jpg、pic5.jpg，再準備兩個小圖標圖片page_current.png、page_not_current.png。

將這些圖片放到drawable-hdpi目錄下（或相應尺寸的drawable目錄下）。

4、編寫activity的代碼

package com.example.showviewpager; import java.util.ArrayList; import android.app.Activity;import android.os.Bundle;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.Menu;import android.view.MenuItem;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.ImageView.ScaleType;import android.widget.LinearLayout;import android.widget.LinearLayout.LayoutParams; public class MainActivity extends Activity {   private static final int VIEW_NUM = 5;  private ViewPager viewPager;  private ImageView[] tagImageViews = new ImageView[VIEW_NUM];   @Override  protected void onCreate(Bundle savedInstanceState) {    super.onCreate(savedInstanceState);    setContentView(R.layout.activity_main);    addTagImage();    initViewPager();  }   private void addTagImage() {    LinearLayout layout = (LinearLayout)findViewById(R.id.tagView);    LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(     LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);    params.setMargins(15, 0, 0, 0);    for (int i = 0; i < VIEW_NUM; i++) {      ImageView tagImageView = new ImageView(this);      tagImageView.setLayoutParams(params);      tagImageViews[i] = tagImageView;      if (i == 0) {        tagImageView.setBackgroundResource(R.drawable.page_current);      } else {        tagImageView.setBackgroundResource(R.drawable.page_not_current);      }       layout.addView(tagImageView);    }  }     private void initViewPager() {    viewPager = (ViewPager) findViewById(R.id.viewPager);    viewPager.setAdapter(new MyAdapter());    viewPager.setOnPageChangeListener(new OnPageChangeListener() {      @Override      public void onPageSelected(int arg0) {        for (int i = 0; i < tagImageViews.length; i++) {          if (i == arg0 % VIEW_NUM) {            tagImageViews[i].setBackgroundResource(R.drawable.page_current);          } else {            tagImageViews[i].setBackgroundResource(R.drawable.page_not_current);          }        }      }             @Override      public void onPageScrolled(int arg0, float arg1, int arg2) {               }             @Override      public void onPageScrollStateChanged(int arg0) {               }    });    viewPager.setCurrentItem(0);  }     class MyAdapter extends PagerAdapter{    private ArrayList<View> viewList;    public MyAdapter(){      viewList = new ArrayList<View>();      viewList.add(createPagerImageView(R.drawable.pic1));      viewList.add(createPagerImageView(R.drawable.pic2));      viewList.add(createPagerImageView(R.drawable.pic3));      viewList.add(createPagerImageView(R.drawable.pic4));      viewList.add(createPagerImageView(R.drawable.pic5));    }         private View createPagerImageView(int resid){      LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.MATCH_PARENT);      LinearLayout layout = new LinearLayout(MainActivity.this);      layout.setLayoutParams(params);      layout.setOrientation(LinearLayout.VERTICAL);      ImageView imageView = new ImageView(MainActivity.this);      imageView.setLayoutParams(params);      imageView.setScaleType(ScaleType.CENTER_CROP);      imageView.setImageResource(resid);      layout.addView(imageView);      return layout;    }         @Override    public int getCount() {      return Integer.MAX_VALUE;    }     @Override    public boolean isViewFromObject(View arg0, Object arg1) {      return arg0 == arg1;    }         @Override    public Object instantiateItem(ViewGroup container, int position) {      ((ViewPager) container).addView(viewList.get(position % VIEW_NUM),0);      return viewList.get(position % VIEW_NUM);    }     @Override    public void destroyItem(View container, int position, Object object) {      ((ViewPager) container).removeView(viewList          .get(position % VIEW_NUM));    }       }   @Override  public boolean onCreateOptionsMenu(Menu menu) {    getMenuInflater().inflate(R.menu.main, menu);    return true;  }   @Override  public boolean onOptionsItemSelected(MenuItem item) {    int id = item.getItemId();    if (id == R.id.action_settings) {      return true;    }    return super.onOptionsItemSelected(item);  }}

5、如果需要不顯示activity的標題欄，可修改manifest中的activity中的配置,設置樣式為：

android:theme="@android:style/Theme.Black.NoTitleBar"

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"  package="com.example.showviewpager"  android:versionCode="1"  android:versionName="1.0" >   <uses-sdk    android:minSdkVersion="16"    android:targetSdkVersion="21" />   <application    android:allowBackup="true"    android:icon="@drawable/ic_launcher"    android:label="@string/app_name"    android:theme="@style/AppTheme" >    <activity      android:name=".MainActivity"      android:label="@string/app_name"      android:theme="@android:style/Theme.Black.NoTitleBar" >      <intent-filter>        <action android:name="android.intent.action.MAIN" />        <category android:name="android.intent.category.LAUNCHER" />      </intent-filter>    </activity>  </application> </manifest>

其它配置文件、代碼等都是采用eclipse創建的默認設置。

上一篇：實例講解Android中ViewPager組件的一些進階使用技巧

下一篇：詳解Android中ViewPager的PagerTabStrip子控件的用法