Android之ViewPager（引導介面）（一），androidviewpager

Android之ViewPager（引導介面）（一），androidviewpager

雖然我們無法改變人生，但可以改變人生觀。雖然我們無法改變環境，但我們可以改變心境。

本講內容：ViewPager控制項的用法

與LisstView類似，也需要一個適配器，他就是PagerAdapter。

使用步驟：

一、在住布局檔案裡加入

<android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent" /><!-- 注意這個組件是用來顯示左右滑動的介面的,如果不載入xml布局檔案,他是不會顯示內容的。   -->

二、載入要顯示的頁卡

LayoutInflater lf = getLayoutInflater().from(this);          view1 = lf.inflate(R.layout.layout1, null);          view2 = lf.inflate(R.layout.layout2, null);          view3 = lf.inflate(R.layout.layout3, null);            viewList = new ArrayList<View>();// 將要分頁顯示的View裝入數組中           viewList.add(view1);          viewList.add(view2);          viewList.add(view3);  

三、需要一個適配器

樣本一：

        

下面是res/layout/activity_main.xml 布局檔案：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="wrap_content"    android:layout_height="wrap_content" >    <android.support.v4.view.ViewPager        android:id="@+id/viewPager"        android:layout_width="match_parent"        android:layout_height="match_parent" /><!-- 注意這個組件是用來顯示左右滑動的介面的,如果不載入xml布局檔案,他是不會顯示內容的。   -->    <LinearLayout        android:id="@+id/layout1"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_alignParentBottom="true"        android:layout_centerHorizontal="true"        android:layout_marginBottom="25dp"        android:orientation="horizontal" >        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />        <ImageView            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:layout_gravity="center_vertical"            android:clickable="true"            android:padding="20dp"            android:src="@drawable/point" />    </LinearLayout></RelativeLayout>

下面是res/drawable/paint.xml 檔案：

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

下面是ViewPagerAdapter.java檔案：

當你實現一個PagerAdapter,你必須至少覆蓋以下4個方法:

• instantiateItem(ViewGroup, int)、destroyItem(ViewGroup, int, Object)
• getCount()、isViewFromObject(View, Object)

//ViewPager適配器，用來綁定資料和viewpublic class ViewPagerAdapter extends PagerAdapter{////介面列表private ArrayList<View> views;public ViewPagerAdapter(ArrayList<View> views){this.views=views;}//獲得當前頁卡的數量  public int getCount() {if(views!=null){return views.size();}return 0;}//執行個體化(初始化)頁卡public Object instantiateItem(View container, int position) { ((ViewPager) container).addView(views.get(position), 0);//添加頁卡    return views.get(position);}//銷毀頁卡public void destroyItem(View container, int position, Object object) {((ViewPager)container).removeView(views.get(position));//刪除頁卡   }//判斷是否由對象產生介面public boolean isViewFromObject(View arg0, Object arg1) {return (arg0==arg1);//官方提示這樣寫 }}

下面是MainActivity.java主介面檔案：

public class MainActivity extends Activity implements OnClickListener,OnPageChangeListener{private ViewPager viewPager;// 定義ViewPager對象private ViewPagerAdapter vpAdapter;// 定義ViewPager適配器private ArrayList<View> views;// 定義一個ArrayList來存放View// 引導圖片資源private static final int[] pics = { R.drawable.guide1, R.drawable.guide2,R.drawable.guide3, R.drawable.guide4 };// 底部小點的圖片private ImageView[] points;// 記錄當前選中位置private int currentIndex;protected void onCreate(Bundle savedInstanceState) {requestWindowFeature(Window.FEATURE_NO_TITLE);super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initData();}// 初始化組件private void initView() {// 執行個體化ArrayList對象views = new ArrayList<View>();// 執行個體化ViewPagerviewPager = (ViewPager) findViewById(R.id.viewPager);// 執行個體化ViewPager適配器vpAdapter = new ViewPagerAdapter(views);}// 初始化資料private void initData() {// 定義一個布局並設定參數LinearLayout.LayoutParams mParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.MATCH_PARENT);//初始化引導圖片列表for(int i=0;i<pics.length;i++){ImageView iv=new ImageView(this);iv.setLayoutParams(mParams);iv.setImageResource(pics[i]);views.add(iv);}//設定資料viewPager.setAdapter(vpAdapter);//設定監聽viewPager.setOnPageChangeListener(this);//初始化底部小點initPoint();}//初始化底部小點private void initPoint() {LinearLayout layout1=(LinearLayout) findViewById(R.id.layout1);points = new ImageView[pics.length];//迴圈取得小點圖片for(int i=0;i<pics.length;i++){//得到一個LinearLayout下面的每一個子項目points[i]=(ImageView) layout1.getChildAt(i);//獲得第i個控制項！<span style="color: rgb(51, 51, 51); font-family: 'Microsoft Yahei'; font-size: 14px; line-height: 28px; white-space: pre-wrap;">getChildAt裡面的參數就是布局裡面層次的索引</span>//預設都設為灰色points[i].setEnabled(true);//給每個小點設定監聽points[i].setOnClickListener(this);//設定位置tag，方便取出與當前位置對應points[i].setTag(i);}//設定當面預設的位置currentIndex=0;//設定為白色，即選中狀態points[currentIndex].setEnabled(false);}//當滑動狀態改變時調用public void onPageScrollStateChanged(int arg0) {}//當前頁面被滑動時調用public void onPageScrolled(int arg0, float arg1, int arg2) {}//當新的頁面被選中時調用public void onPageSelected(int position) {//設定底部小點選中狀態setCurDot(position);}//通過點擊事件來切換當前的頁面public void onClick(View v) {int position=(Integer) v.getTag();setCurView(position);setCurDot(position);}//設定當前頁面的位置private void setCurView(int position) {if(position<0||position>=pics.length){return;}viewPager.setCurrentItem(position);}//設定當前的小點的位置private void setCurDot(int position) {if(position<0||position>pics.length-1||currentIndex==position){return;}points[position].setEnabled(false);points[currentIndex].setEnabled(true);currentIndex=position;}}

Take your time and enjoy it