Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> android ViewPager頁面左右滑動切換

android ViewPager頁面左右滑動切換

編輯:關於Android編程

 

我們日常生活中用到的微博,QQ,微信等app在進行頁面左右滑動的時候,很多都可以用ViewPager來實現。可以說,ViewPager在android開發中十分常見並且特別實用。

Viewpager在android.support.v4.view這個軟件包中, android.support.v4.view.jar是谷歌官方給我們提供的一個兼容低版本安卓設備的軟件包,裡面包囊了只有在安卓3.0以上可以使用的api。所以低版本開發時必須加入android-support-v4.jar,並且在XML文件使用ViewPager使用時以android.support.v4.view.ViewPager加入ViewPager。同時,該軟件包還提供了一個PagerTitleStrip來顯示每一個頁卡的標題。

使用ViewPager實現頁面滑動切換的方法和ListView差不多,同樣也需要一個適配器,PagerAdapter,並且同樣的也要重寫其中的方法來實現。接下來我來說一下具體實現ViewPager的步驟。

 

1,在XML布局文件中加入ViewPager,以及它相對的標題PagerTitleStrip。

 

2,接下來我們要添加三個頁卡布局文件。具體內容可以自己添加,我為了方便每張頁卡上只是用了一張圖片作為背景。

3,為ViewPager添加一個適配器,這裡我寫了一個子類繼承PagerAdapter。在子類中我們最重要的是要重寫以下四個方法:

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

    當然,如果想要更多更具體的功能,我們還可以重寫其中的其他方法,但是以上四個方法是最必要的也是必須要重寫實現的。

    以下是該部分代碼:

     
     1 package com.example.android_viewpage;
     2 
     3 import java.util.List;
     4 
     5 import android.content.Context;
     6 import android.support.v4.view.PagerAdapter;
     7 import android.support.v4.view.ViewPager;
     8 import android.view.View;
     9 
    10 public class MyAdapter extends PagerAdapter {
    11     private List list;
    12     private List titlelist;
    13 
    14     public MyAdapter(List titlelist, List list) {
    15         this.titlelist = titlelist;
    16         this.list = list;
    17     }
    18     //這裡獲得當前頁卡的標題
    19     @Override
    20     public CharSequence getPageTitle(int position) {
    21         return titlelist.get(position);
    22     }
    23     @Override
    24     public Object instantiateItem(View container, int position) {
    25         ((ViewPager) container).addView(list.get(position));
    26         return list.get(position);
    27     }
    28     //銷毀頁卡
    29     @Override
    30     public void destroyItem(View container, int position, Object object) {
    31         ((ViewPager) container).removeView(list.get(position));
    32     }
    33     //得到所有頁卡的個數
    34     @Override
    35     public int getCount() {
    36         return list.size();
    37     }
    38     //判斷當前顯示頁卡是否匹配
    39     @Override
    40     public boolean isViewFromObject(View arg0, Object arg1) {
    41         return arg0 == arg1;
    42     }
    43 
    44 }
     

    4,最後在MainActivity中將你想要的頁卡和標題分別存放在List中,然後將定義好的適配器供ViewPager使用就可以了。

    以下是該部分代碼:

     
     1 package com.example.android_viewpage;
     2 
     3 import java.util.ArrayList;
     4 import java.util.List;
     5 import android.app.Activity;
     6 import android.os.Bundle;
     7 import android.support.v4.view.PagerTabStrip;
     8 import android.support.v4.view.PagerTitleStrip;
     9 import android.support.v4.view.ViewPager;
    10 import android.view.LayoutInflater;
    11 import android.view.View;
    12 
    13 public class MainActivity extends Activity {
    14     private ViewPager viewPager;
    15     private PagerTitleStrip pagerTitleStrip;
    16     private MyAdapter adapter;
    17     private List list;
    18     private List titlelist;
    19 
    20     @Override
    21     protected void onCreate(Bundle savedInstanceState) {
    22         super.onCreate(savedInstanceState);
    23         setContentView(R.layout.activity_main);
    24         viewPager = (ViewPager) findViewById(R.id.viewrpager);
    25         pagerTitleStrip = (PagerTitleStrip) findViewById(R.id.pagertitle);
    26         list = new ArrayList();
    27         list.add(LayoutInflater.from(this).inflate(R.layout.view1, null));
    28         list.add(LayoutInflater.from(this).inflate(R.layout.view2, null));
    29         list.add(LayoutInflater.from(this).inflate(R.layout.view3, null));
    30         titlelist = new ArrayList();
    31         titlelist.add(第一頁);
    32         titlelist.add(第二頁);
    33         titlelist.add(第三頁);
    34         adapter = new MyAdapter(titlelist, list);
    35         viewPager.setAdapter(adapter);
    36     }
    37 
    38 }
     

     

    但是我發現當我在滑動的時候標題的位置也跟著在一起移動,我想讓頁面在滑動的時候,標題不移動,但是要顯示出不同的狀態來。這裡我簡要的弄了一個類似微信的切換風格,在頁卡滑動的時候讓下方的按鈕標題不同但顯示出當前的狀態,同時要求在點擊下方的按鈕時,也讓頁面切換到相對的狀態下。

    相比上面那個程序,這個主要的是設置了按鈕的監聽事件和頁面滑動的監聽事件。

    其中頁面滑動的監聽事件是setOnPageChangeListener()。它有onPageSelected(),onPageScrolled(),onPageScrollStateChanged()三個方法,我這裡只是對onPageSelected()方法進行了重寫。

    以下是MainActivity部分的代碼:

     
      1 package com.example.viewpagertest;
      2 
      3 import java.util.ArrayList;
      4 import java.util.List;
      5 
      6 import android.R.integer;
      7 import android.app.Activity;
      8 import android.os.Bundle;
      9 import android.support.v4.view.ViewPager;
     10 import android.support.v4.view.ViewPager.OnPageChangeListener;
     11 import android.view.LayoutInflater;
     12 import android.view.View;
     13 import android.view.View.OnClickListener;
     14 import android.view.Window;
     15 import android.widget.ImageButton;
     16 import android.widget.LinearLayout;
     17 
     18 public class MainActivity extends Activity implements OnClickListener {
     19 
     20     private List mPage;
     21     private MyPagerAdapter adapter;
     22     private ViewPager viewPager;
     23 
     24     private ImageButton weixinImg;
     25     private ImageButton friendImg;
     26     private ImageButton addressImg;
     27     private ImageButton settingImg;
     28     private LinearLayout weixin;
     29     private LinearLayout friend;
     30     private LinearLayout address;
     31     private LinearLayout setting;
     32 
     33     private static final int WEIXIN_STATE = 0;
     34     private static final int FRIEND_STATE = 1;
     35     private static final int ADDRESS_STATE = 2;
     36     private static final int SETTING_STATE = 3;
     37 
     38     @Override
     39     protected void onCreate(Bundle savedInstanceState) {
     40         super.onCreate(savedInstanceState);
     41         requestWindowFeature(Window.FEATURE_NO_TITLE);
     42         setContentView(R.layout.activity_main);
     43         intiView();
     44         getClickEvent();
     45     }
     46 
     47 
     48 
     49     private void intiView() {
     50 
     51         // 呈現頁面滑動效果
     52         viewPager = (ViewPager) findViewById(R.id.viewpage);
     53         mPage = new ArrayList();
     54         mPage.add(LayoutInflater.from(this).inflate(R.layout.pageone, null));
     55         mPage.add(LayoutInflater.from(this).inflate(R.layout.pagetwo, null));
     56         mPage.add(LayoutInflater.from(this).inflate(R.layout.pagethree, null));
     57         mPage.add(LayoutInflater.from(this).inflate(R.layout.pagefour, null));
     58         adapter = new MyPagerAdapter(mPage);
     59         viewPager.setAdapter(adapter);
     60 
     61         //加載控件
     62         weixinImg = (ImageButton) findViewById(R.id.id_weixin_img);
     63         friendImg = (ImageButton) findViewById(R.id.id_frd_img);
     64         addressImg = (ImageButton) findViewById(R.id.id_address_img);
     65         settingImg = (ImageButton) findViewById(R.id.id_settint_img);
     66 
     67         weixin = (LinearLayout) findViewById(R.id.id_weixin);
     68         friend = (LinearLayout) findViewById(R.id.id_frd);
     69         address = (LinearLayout) findViewById(R.id.id_address);
     70         setting = (LinearLayout) findViewById(R.id.id_setting);
     71 
     72     }
     73     /**
     74      *          按鈕的點擊事件:當點擊按鈕時,先讓所有的按鈕變成暗色,
     75      *          然後將所點擊的按鈕設置成亮色,並轉到按鈕所屬頁面
     76      */
     77     @Override
     78     public void onClick(View v) {
     79         setImg();
     80         switch (v.getId()) {
     81         case R.id.id_weixin:
     82             viewPager.setCurrentItem(WEIXIN_STATE);
     83             weixinImg.setImageResource(R.drawable.tab_weixin_pressed);
     84             break;
     85 
     86         case R.id.id_frd:
     87             viewPager.setCurrentItem(FRIEND_STATE);
     88             friendImg.setImageResource(R.drawable.tab_find_frd_pressed);
     89             break;
     90 
     91         case R.id.id_address:
     92             viewPager.setCurrentItem(ADDRESS_STATE);
     93             addressImg.setImageResource(R.drawable.tab_address_pressed);
     94             break;
     95 
     96         case R.id.id_setting:
     97             viewPager.setCurrentItem(SETTING_STATE);
     98             settingImg.setImageResource(R.drawable.tab_settings_pressed);
     99             break;
    100 
    101         }
    102 
    103     }
    104     private void getClickEvent() {
    105         weixin.setOnClickListener(this);
    106         friend.setOnClickListener(this);
    107         address.setOnClickListener(this);
    108         setting.setOnClickListener(this);
    109 /**
    110  *   頁面滑動的監聽事件:滑動頁面時,先將所有按鈕變成暗色
    111  *   再把頁面所屬的按鈕變成亮色,表示所屬頁面
    112  */
    113         viewPager.setOnPageChangeListener(new OnPageChangeListener() {
    114 
    115             @Override
    116             public void onPageSelected(int arg0) {
    117                 setImg();
    118                 switch (arg0) {
    119                 case WEIXIN_STATE:
    120                     weixinImg.setImageResource(R.drawable.tab_weixin_pressed);
    121                     break;
    122                 case FRIEND_STATE:
    123                     friendImg.setImageResource(R.drawable.tab_find_frd_pressed);
    124                     break;
    125                 case ADDRESS_STATE:
    126                     addressImg.setImageResource(R.drawable.tab_address_pressed);
    127                     break;
    128                 case SETTING_STATE:
    129                     settingImg
    130                             .setImageResource(R.drawable.tab_settings_pressed);
    131                     break;
    132 
    133                 }
    134             }
    135 
    136             @Override
    137             public void onPageScrolled(int arg0, float arg1, int arg2) {
    138 
    139             }
    140 
    141             @Override
    142             public void onPageScrollStateChanged(int arg0) {
    143 
    144             }
    145         });
    146 
    147     }
    148      //在點擊按鈕或者活動頁面的時候,讓所有按鈕變成暗色
    149     private void setImg() {
    150         weixinImg.setImageResource(R.drawable.tab_weixin_normal);
    151         friendImg.setImageResource(R.drawable.tab_find_frd_normal);
    152         addressImg.setImageResource(R.drawable.tab_address_normal);
    153         settingImg.setImageResource(R.drawable.tab_settings_normal);
    154 
    155     }
    156 
    157 }
     

     

     


     

     

     


  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved