快捷導(dǎo)航

Android 中使用 ViewPager實(shí)現(xiàn)屏幕頁面切換和頁面輪播效果

更新時(shí)間：2016年12月02日 14:49:03 作者：潘侯爺

ViewPager是谷歌官方給我們提供的一個兼容低版本安卓設(shè)備的軟件包，里面包囊了只有在安卓3.0以上可以使用的api。下面我們就展示下ViewPager可以實(shí)現(xiàn)的兩種簡單效果，感興趣的朋友一起看看吧

之前關(guān)于如何實(shí)現(xiàn)屏幕頁面切換，寫過一篇博文《Android中使用ViewFlipper實(shí)現(xiàn)屏幕切換》，相比ViewFlipper，ViewPager更適用復(fù)雜的視圖切換，而且Viewpager有自己的adapter，這也讓其適應(yīng)復(fù)雜對象，實(shí)現(xiàn)數(shù)據(jù)的動態(tài)加載。

ViewPager是谷歌官方給我們提供的一個兼容低版本安卓設(shè)備的軟件包，里面包囊了只有在安卓3.0以上可以使用的api。而viewpager就是其中之一，利用它，我們可以做很多事情，從最簡單的導(dǎo)航，到頁面菜單等等。

下面我們就展示下ViewPager可以實(shí)現(xiàn)的兩種簡單效果：

第一種：屏幕的頁面的切換（與ViewFlipper的實(shí)現(xiàn)效果類似）

實(shí)現(xiàn)效果如下（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.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:gravity="center"
android:id="@+id/vp">
<android.support.v4.view.PagerTabStrip
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tap">
</android.support.v4.view.PagerTabStrip>
</android.support.v4.view.ViewPager>
</LinearLayout>

注意事項(xiàng):

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

<2、API中說：在布局xml把PagerTabStrip當(dāng)做ViewPager的一個子標(biāo)簽來用，不能拿出來，不然還是會報(bào)錯

<3、在PagerTabStrip標(biāo)簽中可以用屬性android:layout_gravity=TOP|BOTTOM來指定title的位置

<4、如果要顯示出PagerTabStrip某一頁的title，需要在ViewPager的adapter中實(shí)現(xiàn)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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:src="@mipmap/a1"
android:scaleType="centerCrop"
android:id="@+id/iv1" />
</LinearLayout>

第三步：Java中Activity的實(shí)現(xiàn)代碼ViewPagerDemo.java（這里未設(shè)置pagerTabStrip的屬性）：

在Activity里實(shí)例化ViewPager組件，并設(shè)置它的Adapter（就是PagerAdapter，方法與ListView一樣的）

實(shí)現(xiàn)一個PagerAdapter，覆蓋以下方法：

instantiateItem(ViewGroup, int)//用來實(shí)例化頁卡

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

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

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

getPageTitle(int position)//設(shè)置標(biāo)簽顯示的標(biāo)題

設(shè)置指示標(biāo)簽的屬性

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<>();
//顯示效果中每個視圖的標(biāo)題
String[] titles={"一號美女","二號美女","三號美女","四號美女"};
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_layout);
vp= (ViewPager) findViewById(R.id.vp);
initView();//調(diào)用初始化視圖方法
vp.setAdapter(new MyAdapter());//設(shè)置適配器
}
//初始化視圖的方法（通過布局填充器獲取用于滑動的視圖并存入對應(yīng)的的集合）
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{
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
//重寫銷毀滑動視圖布局（將子視圖移出視圖存儲集合（ViewGroup））
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
//重寫初始化滑動視圖布局（從視圖集合中取出對應(yīng)視圖，添加到ViewGroup）
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v =views.get(position);
container.addView(v);
return v;
}
@Override
public CharSequence getPageTitle(int position) {
return titles[position];
}
}
}

第二種：頁面輪播效果視圖（程序首次啟動的引導(dǎo)頁實(shí)現(xiàn)）

實(shí)現(xiàn)效果如下（3張視圖滑動引導(dǎo)）：

開始代碼前注釋：

1、本次未實(shí)現(xiàn)循環(huán)輪播效果；2、導(dǎo)航原點(diǎn)資源圖片注解：default_holo為未選中狀態(tài)，touched_holo為選中后實(shí)心狀態(tài)。（也可自己用Shape繪制）

第一步：在layout布局文件里加入主布局文件viewpager_layout.xml

主布局為FrameLayout，在ViewPager（這里因?yàn)榇嬖趯?dǎo)航原點(diǎn)，不設(shè)置PagerTabStrip）上嵌套包含3個導(dǎo)航原點(diǎn)（由滑動視圖數(shù)量決定）的linearLayout布局（本次設(shè)置該布局位于底部）：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns: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.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/vp">
</android.support.v4.view.ViewPager>
<LinearLayout
android:id="@+id/point_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:orientation="horizontal">
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo"/>
<ImageView
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:src="@mipmap/default_holo" />
<ImageView
android: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">
<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="centerCrop"
android:src="@mipmap/genie"/>
</LinearLayout>

第三步：Java中Activity的實(shí)現(xiàn)代碼MainActivity.java

通過實(shí)現(xiàn)OnPageChangeListener接口實(shí)現(xiàn)在視圖切換時(shí)導(dǎo)航原點(diǎn)狀態(tài)的變化），其中關(guān)于OnPageChangeListener中方法的詳細(xì)解釋，請參考博文

《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<>();
//實(shí)例化存儲imageView（導(dǎo)航原點(diǎn)）的集合
ArrayList<ImageView> imageViews = new ArrayList<>();
int currImage;//記錄當(dāng)前頁（導(dǎo)航原點(diǎn)）
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
vp= (ViewPager) findViewById(R.id.vp);
initView();//調(diào)用初始化視圖方法
initPoint();//調(diào)用初始化導(dǎo)航原點(diǎn)的方法
vp.addOnPageChangeListener(this);
vp.setAdapter(new MyAdapter());
}
/*將point_layout中包含的imageView（導(dǎo)航原點(diǎn)）添加到imageViewS集合中
*并設(shè)置layout1（第一視圖）的導(dǎo)航原點(diǎn)（對應(yīng)集合0下標(biāo)）的圖片
* 為touched_holo（觸摸狀態(tài)的圖片）
*/
private void initPoint() {
point_layout= (LinearLayout) findViewById(R.id.point_layout);
int counnt = point_layout.getChildCount();//獲取point數(shù)量
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的方法，這里不做具體實(shí)現(xiàn)
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
//設(shè)置滑動到對應(yīng)位置的視圖后，導(dǎo)航原點(diǎn)的不同狀態(tài)（圖片）
@Override
public 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的方法，這里不做具體實(shí)現(xiàn)
@Override
public void onPageScrollStateChanged(int state) {
}
class MyAdapter extends PagerAdapter {
@Override
public int getCount() {
return views.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view==object;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView(views.get(position));
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View v = views.get(position);
container.addView(v);
return v;
}
}
}

至此，本次的ViewPager實(shí)現(xiàn)示例所需代碼已完成，當(dāng)然這只是ViewPager最簡單的功能，后續(xù)還會更新一些ViewPager的高級用法，歡迎小伙伴們繼續(xù)支持。

以上所述是小編給大家介紹的Android 中使用 ViewPager實(shí)現(xiàn)屏幕頁面切換和頁面輪播效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: