Android 中使用 ViewPager實現螢幕頁面切換和頁面輪播效果_Android

之前關於如何?螢幕頁面切換，寫過一篇博文《Android中使用ViewFlipper實現螢幕切換》，相比ViewFlipper，ViewPager更適用複雜的視圖切換，而且Viewpager有自己的adapter，這也讓其適應複雜物件，實現資料的動態載入。

ViewPager是Google官方給我們提供的一個相容低版本安卓裝置的軟體包，裡麵包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一，利用它，我們可以做很多事情，從最簡單的導航，到頁面菜單等等。

下面我們就展示下ViewPager可以實現的兩種簡單效果：

第一種：螢幕的頁面的切換（與ViewFlipper的實現效果類似）

實現效果如下（4張視圖（layout））：

第一步：在layout布局檔案裡加入主布局檔案viewpager_layout.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><android.support.v4.view.ViewPagerandroid:layout_width="match_parent"android:layout_height="match_parent"android:layout_gravity="center"android:gravity="center"android:id="@+id/vp"><android.support.v4.view.PagerTabStripandroid:layout_width="match_parent"android:layout_height="wrap_content"android:id="@+id/tap"></android.support.v4.view.PagerTabStrip></android.support.v4.view.ViewPager></LinearLayout>

注意事項:

<1、這裡ViewPager和PagerTabStrip都要把包名寫全了，不然會ClassNotFound

<2、API中說：在布局xml把PagerTabStrip當做ViewPager的一個子標籤來用，不能拿出來，不然還是會報錯

<3、在PagerTabStrip標籤中可以用屬性android:layout_gravity=TOP|BOTTOM來指定title的位置

<4、如果要顯示出PagerTabStrip某一頁的title，需要在ViewPager的adapter中實現getPageTitle(int)

第二步：在layout中建立要展示切換的視圖檔案（樣本中共四個layout1/2/3/4.xml，這裡寫一個典型）：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:src="@mipmap/a1"android:scaleType="centerCrop"android:id="@+id/iv1" /></LinearLayout>

第三步：Java中Activity的實現代碼ViewPagerDemo.java（這裡未設定pagerTabStrip的屬性）：

在Activity裡執行個體化ViewPager組件，並設定它的Adapter（就是PagerAdapter，方法與ListView一樣的）

實現一個PagerAdapter，覆蓋以下方法：

instantiateItem(ViewGroup, int)//用來執行個體化頁卡

destroyItem(ViewGroup, int, Object)//刪除頁卡

getCount() //返回頁卡的數量

isViewFromObject(View, Object)//判斷兩個對象是否相等

getPageTitle(int position)//設定標籤顯示的標題

設定指示標籤的屬性

pagerTabStrip.setTabIndicatorColor();//指標的顏色

pagerTabStrip.setBackgroundColor();//背影色

pagerTabStrip.setTextColor(Color.WHITE);//字型顏色

import android.os.Bundle;import android.support.annotation.Nullable;import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.view.View;import android.view.ViewGroup;import java.util.ArrayList;/*** Created by panchengjia on 2016/12/1.*/public class ViewPagerDemo extends AppCompatActivity {private ViewPager vp;//聲明儲存ViewPager下子視圖的集合ArrayList<View> views = new ArrayList<>();//顯示效果中每個視圖的標題String[] titles={"一號美女","二號美女","三號美女","四號美女"};@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.viewpager_layout);vp= (ViewPager) findViewById(R.id.vp);initView();//調用初始化視圖方法vp.setAdapter(new MyAdapter());//設定適配器}//初始化視圖的方法（通過布局填充器擷取用於滑動的視圖並存入對應的的集合）private void initView() {View v1 = getLayoutInflater().inflate(R.layout.layout1,null);View v2 = getLayoutInflater().inflate(R.layout.layout2,null);View v3 = getLayoutInflater().inflate(R.layout.layout3,null);View v4 = getLayoutInflater().inflate(R.layout.layout4,null);views.add(v1);views.add(v2);views.add(v3);views.add(v4);}class MyAdapter extends PagerAdapter{@Overridepublic int getCount() {return views.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}//重寫銷毀滑動視圖布局（將子視圖移出視圖儲存集合（ViewGroup））@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(views.get(position));}//重寫初始化滑動視圖布局（從視圖集合中取出對應視圖，添加到ViewGroup）@Overridepublic Object instantiateItem(ViewGroup container, int position) {View v =views.get(position);container.addView(v);return v;}@Overridepublic CharSequence getPageTitle(int position) {return titles[position];}}}

第二種：頁面輪播效果視圖（程式初次開機的引導頁實現）

實現效果如下（3張視圖滑動引導）：

開始代碼前注釋：

1、本次未實現迴圈輪播效果；2、導航原點資源圖片註解：default_holo為未選中狀態，touched_holo為選中後實心狀態。（也可自己用Shape繪製）

第一步：在layout布局檔案裡加入主布局檔案viewpager_layout.xml

主布局為FrameLayout，在ViewPager（這裡因為存在導航原點，不設定PagerTabStrip）上嵌套包含3個導航原點（由滑動視圖數量決定）的linearLayout布局（本次設定該布局位於底部）：

<?xml version="1.0" encoding="utf-8"?><FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:id="@+id/activity_main"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.example.administrator.myapplication11.MainActivity"><android.support.v4.view.ViewPagerandroid:layout_width="match_parent"android:layout_height="match_parent"android:id="@+id/vp"></android.support.v4.view.ViewPager><LinearLayoutandroid:id="@+id/point_layout"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="bottom"android:orientation="horizontal"><ImageViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:src="@mipmap/default_holo"/><ImageViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:src="@mipmap/default_holo" /><ImageViewandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:src="@mipmap/default_holo"android:id="@+id/imageView" /></LinearLayout></FrameLayout>

第二步：Layout中用於滑動切換的視圖（樣本中共三個layout1/2/3.xml，這裡寫一個典型）與第一種相同

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="match_parent"android:layout_height="match_parent"><ImageViewandroid:layout_width="match_parent"android:layout_height="match_parent"android:scaleType="centerCrop"android:src="@mipmap/genie"/></LinearLayout>

第三步：Java中Activity的實現代碼MainActivity.java

通過實現OnPageChangeListener介面實現在視圖切換時導航原點狀態的變化），其中關於OnPageChangeListener中方法的詳細解釋，請參考博文

《ViewPager的setOnPageChangeListener方法詳解》這裡不做贅述：

import android.support.v4.view.PagerAdapter;import android.support.v4.view.ViewPager;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.view.ViewGroup;import android.widget.ImageView;import android.widget.LinearLayout;import java.util.ArrayList;/*** Created by panchengjia on 2016/11/30.*/public class MainActivity extends AppCompatActivity implements ViewPager.OnPageChangeListener{private ViewPager vp;private LinearLayout point_layout;ArrayList<View> views =new ArrayList<>();//執行個體化儲存imageView（導航原點）的集合ArrayList<ImageView> imageViews = new ArrayList<>();int currImage;//記錄當前頁（導航原點）@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);vp= (ViewPager) findViewById(R.id.vp);initView();//調用初始化視圖方法initPoint();//調用初始化導航原點的方法vp.addOnPageChangeListener(this);vp.setAdapter(new MyAdapter());}/*將point_layout中包含的imageView（導航原點）添加到imageViewS集合中*並設定layout1（第一視圖）的導航原點（對應集合0下標）的圖片* 為touched_holo（觸摸狀態的圖片）*/private void initPoint() {point_layout= (LinearLayout) findViewById(R.id.point_layout);int counnt = point_layout.getChildCount();//擷取point數量for (int i=0;i<counnt;i++){imageViews.add((ImageView) point_layout.getChildAt(i));}imageViews.get(0).setImageResource(R.mipmap.touched_holo);}private void initView() {View v1=getLayoutInflater().inflate(R.layout.layout1,null);View v2=getLayoutInflater().inflate(R.layout.layout2,null);View v3=getLayoutInflater().inflate(R.layout.layout3,null);views.add(v1);views.add(v2);views.add(v3);}//OnPageChangeListener的方法，這裡不做具體實現@Overridepublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}//設定滑動到對應位置的視圖後，導航原點的不同狀態（圖片）@Overridepublic void onPageSelected(int position) {ImageView preView = imageViews.get(currImage);preView.setImageResource(R.mipmap.default_holo);ImageView currView = imageViews.get(position);currView.setImageResource(R.mipmap.touched_holo);currImage = position;}//OnPageChangeListener的方法，這裡不做具體實現@Overridepublic void onPageScrollStateChanged(int state) {}class MyAdapter extends PagerAdapter {@Overridepublic int getCount() {return views.size();}@Overridepublic boolean isViewFromObject(View view, Object object) {return view==object;}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(views.get(position));}@Overridepublic Object instantiateItem(ViewGroup container, int position) {View v = views.get(position);container.addView(v);return v;}}}

至此，本次的ViewPager實現樣本所需代碼已完成，當然這隻是ViewPager最簡單的功能，後續還會更新一些ViewPager的進階用法，歡迎小夥伴們繼續支援。

以上所述是小編給大家介紹的Android 中使用 ViewPager實現螢幕頁面切換和頁面輪播效果，希望對大家有所協助，如果大家有任何疑問請給我留言，小編會及時回複大家的。在此也非常感謝大家對雲棲社區網站的支援！