android ViewPager具體解釋

標籤：des   android   style   blog   http   io   color   ar   os   

    Viewpager 在android介面布局中屬於經常使用類型 ，它能夠做導航，頁面菜單，進入軟體是的歡迎介面 等等。比方今最流行的幾款手機軟體  ，QQ,，微博 等 ，其主介面 都用到了ViewPager，所以學好它，勢在必得 ，在這裡總結了下，

    先用圖解 ：

                  

    這是一個仿微博介面的xml布局 ，他們之間的關係常常搞混淆，怕記不住 ，總結了幾句話：ViewPager裡面含介面，它的改變控制（title）Imageview的變化，Textview控制頁面，並間接控制Title（imageview）。

   而要做一個完整的denon，其過程例如以下：

1，在xml檔案了定義Viewpager，和各種控制項。

2，在代碼裡得到各種控制項，並進行對應的淺處理。

3，為Viewpager設定適配器，還有監聽器，其它控制項也設定對應的監聽器。

   記錄一個小demo：

 

package com.example.viewpagerdemo;import java.util.ArrayList;import java.util.List;import android.app.Activity;import android.graphics.BitmapFactory;import android.graphics.Matrix;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.util.DisplayMetrics;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.animation.Animation;import android.view.animation.TranslateAnimation;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.TextView;import android.widget.Toast;public class WeiBoActivity extends Activity {private ViewPager viewPager;//頁卡內容private ImageView imageView;// 動繪圖片private TextView textView1,textView2,textView3;private List<View> views;// Tab頁面列表private int offset = 0;// 動繪圖片位移量private int currIndex = 0;// 當前頁卡編號private int bmpW;// 動繪圖片寬度private View view1,view2,view3;//各個頁卡@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.weibo);InitImageView();InitTextView();InitViewPager();}private void InitViewPager() {viewPager=(ViewPager) findViewById(R.id.vPager);views=new ArrayList<View>();LayoutInflater inflater=getLayoutInflater();view1=inflater.inflate(R.layout.lay1, null);view2=inflater.inflate(R.layout.lay2, null);view3=inflater.inflate(R.layout.lay3, null);views.add(view1);views.add(view2);views.add(view3);viewPager.setAdapter(new MyViewPagerAdapter(views));viewPager.setCurrentItem(0);viewPager.setOnPageChangeListener(new MyOnPageChangeListener());} /**  *  初始化頭標  */private void InitTextView() {textView1 = (TextView) findViewById(R.id.text1);textView2 = (TextView) findViewById(R.id.text2);textView3 = (TextView) findViewById(R.id.text3);textView1.setOnClickListener(new MyOnClickListener(0));textView2.setOnClickListener(new MyOnClickListener(1));textView3.setOnClickListener(new MyOnClickListener(2));}/** 2      * 初始化動畫，這個就是頁卡滑動時，以下的橫線也滑動的效果，在這裡須要計算一些資料 3 */private void InitImageView() {imageView= (ImageView) findViewById(R.id.cursor);bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a).getWidth();// 擷取圖片寬度DisplayMetrics dm = new DisplayMetrics();getWindowManager().getDefaultDisplay().getMetrics(dm);int screenW = dm.widthPixels;// 擷取解析度寬度offset = (screenW / 3 - bmpW) / 2;// 計算位移量Matrix matrix = new Matrix();matrix.postTranslate(offset, 0);imageView.setImageMatrix(matrix);// 設定動畫初始位置}<img src="http://img.my.csdn.net/uploads/201211/10/1352554452_1685.jpg" alt="">/**  *      * 頭標點擊監聽 3 */private class MyOnClickListener implements OnClickListener{        private int index=0;        public MyOnClickListener(int i){        index=i;        }public void onClick(View v) {viewPager.setCurrentItem(index);}}public class MyViewPagerAdapter extends PagerAdapter{private List<View> mListViews;public MyViewPagerAdapter(List<View> mListViews) {this.mListViews = mListViews;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mListViews.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) { container.addView(mListViews.get(position), 0); return mListViews.get(position);}@Overridepublic int getCount() {return  mListViews.size();}@Overridepublic boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}}    public class MyOnPageChangeListener implements OnPageChangeListener{    int one = offset * 2 + bmpW;// 頁卡1 -> 頁卡2 位移量int two = one * 2;// 頁卡1 -> 頁卡3 位移量public void onPageScrollStateChanged(int arg0) {}public void onPageScrolled(int arg0, float arg1, int arg2) {}public void onPageSelected(int arg0) {/*兩種方法，這個是一種，以下另一種，顯然這個比較麻煩Animation animation = null;switch (arg0) {case 0:if (currIndex == 1) {animation = new TranslateAnimation(one, 0, 0, 0);} else if (currIndex == 2) {animation = new TranslateAnimation(two, 0, 0, 0);}break;case 1:if (currIndex == 0) {animation = new TranslateAnimation(offset, one, 0, 0);} else if (currIndex == 2) {animation = new TranslateAnimation(two, one, 0, 0);}break;case 2:if (currIndex == 0) {animation = new TranslateAnimation(offset, two, 0, 0);} else if (currIndex == 1) {animation = new TranslateAnimation(one, two, 0, 0);}break;}*/Animation animation = new TranslateAnimation(one*currIndex, one*arg0, 0, 0);//顯然這個比較簡潔，僅僅有一行代碼。currIndex = arg0;animation.setFillAfter(true);// True:圖片停在動畫結束位置animation.setDuration(300);imageView.startAnimation(animation);Toast.makeText(WeiBoActivity.this, "您選擇了"+ viewPager.getCurrentItem()+"頁卡", Toast.LENGTH_SHORT).show();}        }}

  它的布局檔案：

 <?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="fill_parent"    android:orientation="vertical" >    <LinearLayout        android:id="@+id/linearLayout1"        android:layout_width="fill_parent"        android:layout_height="40.0dip"        android:background="#FFFFFF" >        <TextView            android:id="@+id/text1"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text=" @我"            android:textColor="#000000"            android:textSize="20.0dip" />        <TextView            android:id="@+id/text2"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="評論"            android:textColor="#000000"            android:textSize="20.0dip" />        <TextView            android:id="@+id/text3"            android:layout_width="fill_parent"            android:layout_height="fill_parent"            android:layout_weight="1.0"            android:gravity="center"            android:text="私信"            android:textColor="#000000"            android:textSize="20.0dip" />    </LinearLayout>    <ImageView        android:id="@+id/cursor"        android:layout_width="fill_parent"        android:layout_height="wrap_content"        android:scaleType="matrix"        android:src="@drawable/a" />    <android.support.v4.view.ViewPager        android:id="@+id/vPager"        android:layout_width="wrap_content"        android:layout_height="0dp"        android:layout_gravity="center"        android:layout_weight="1.0"        android:background="#000000"        android:flipInterval="30"        android:persistentDrawingCache="animation" /></LinearLayout>

   效果例如以下：

                                                           

    

android ViewPager具體解釋