Android常用控件之ViewPager的使用

ViewPager可以實現多個頁面進行切換,提高用戶體驗

 

先看下效果

 

實現上是有左右滑動效果的,並不是跟幻燈片一樣,隻是我把三張圖片合成gif格式的圖片而已;因為沒法直接錄制設備上的操作效果,隻能截圖再合成,就成瞭上面的效果,將就著吧。

 

 

定義佈局文件

 

[html]  

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

<LinearLayout xmlns:android="https://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="wrap_content"  

        android:layout_height="wrap_content"  

        android:layout_gravity="center" >  

  

        <android.support.v4.view.PagerTitleStrip  

            android:id="@+id/pagertitle"  

            android:layout_width="wrap_content"  

            android:layout_height="wrap_content"  

            android:layout_gravity="top" />  

    </android.support.v4.view.ViewPager>  

  

</LinearLayout>  

 

其中ViewPager是頁面,PagerTitleStrip是標題

 

其中一個頁面的佈局

 

[html] 

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

<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"  

    android:layout_width="match_parent"  

    android:layout_height="match_parent"  

    android:background="#f00"  

    android:orientation="vertical" >  

  

    <ImageView  

        android:id="@+id/image1"  

        android:layout_width="match_parent"  

        android:layout_height="wrap_content"  

        android:background="@drawable/image1"  

        android:contentDescription="@string/page1" />  

  

</LinearLayout>  

 

其它頁面類似的。

 

Activity代碼

 

[java] 

package com.example.viewpagerdemo;  

  

import java.util.ArrayList;  

import java.util.List;  

  

import android.app.Activity;  

import android.os.Bundle;  

import android.support.v4.view.PagerAdapter;  

import android.support.v4.view.ViewPager;  

import android.view.LayoutInflater;  

import android.view.View;  

  

public class MainActivity extends Activity {  

  

    private ViewPager viewPager = null;  

    private ArrayList<String> titles;  

  

    @Override  

    protected void onCreate(Bundle savedInstanceState) {  

        super.onCreate(savedInstanceState);  

        setContentView(R.layout.main);  

        viewPager = (ViewPager) findViewById(R.id.viewpager);  

  

        // 把要顯示的View裝入數組  

        LayoutInflater li = LayoutInflater.from(this);  

        View view1 = li.inflate(R.layout.pager1, null);  

        View view2 = li.inflate(R.layout.pager2, null);  

        View view3 = li.inflate(R.layout.pager3, null);  

  

        // 添加頁面  

        final ArrayList<View> views = new ArrayList<View>();  

        views.add(view1);  

        views.add(view2);  

        views.add(view3);  

  

        // 添加標題  

        titles = new ArrayList<String>();  

        titles.add("tab1");  

        titles.add("tab2");  

        titles.add("tab3");  

  

        picViewPagerAdapter pagerAdapter = new picViewPagerAdapter(views);  

        viewPager.setAdapter(pagerAdapter);  

    }  

  

    /** 

     * 為ViewPager添加適配器 

     * @author Administrator 

     * 

     */  

    class picViewPagerAdapter extends PagerAdapter {  

  

        private List<View> listViews;  

  

        public picViewPagerAdapter(List<View> list) {  

            listViews = list;  

        }  

  

        @Override  

        public int getCount() {  

            // TODO Auto-generated method stub  

            return listViews.size();  

        }  

  

        @Override  

        public boolean isViewFromObject(View arg0, Object arg1) {  

            // TODO Auto-generated method stub  

            return arg0 == arg1;  

        }  

  

        @Override  

        public void destroyItem(View container, int position, Object object) {  

            ((ViewPager) container).removeView(listViews.get(position));  

        }  

  

        @Override  

        public CharSequence getPageTitle(int position) {  

            return titles.get(position);  

        }  

  

        @Override  

        public Object instantiateItem(View container, int position) {  

            ((ViewPager) container).addView(listViews.get(position));  

            return listViews.get(position);  

        }  

    }  

}  

其中需要實現PagerAdapter類,這個類實現瞭頁面的裝載和r卸載功能。

發佈留言