轉載請註明出處(萬分感謝!):
http://blog.csdn.net/javazejian/article/details/52138962
關聯文章:
ViewPager 從入門到帶你擼個啓動頁之ViewPager基礎入門(一)
ViewPager 從入門到帶你擼個啓動頁之Fragment+ViewPager(二)
ViewPager 從入門到帶你擼個啓動頁之實戰啓動頁(三)
ViewPager 從入門到帶你擼個啓動頁之實戰PageTransformer切換動畫特效(四)
一、ViewPager的基本用法
1.ViewPager概述
ViewPager是android擴展包v4包中的類,這個類可以讓我們左右切換當前的view。我們先來聊聊ViewPager的幾個相關知識點:
- ViewPager類直接繼承了ViewGroup類,因此它一個容器類,可以添加其他的view類
- ViewPager類需要一個PagerAdapter適配器類給它提供數據(這點跟ListView一樣需要數據適配器Adater)
- ViewPager經常和Fragment一起使用,並且官方還提供了專門的FragmentPagerAdapter和FragmentStatePagerAdapter類供Fragment中的ViewPager使用
2.ViewPager使用案例
我們只需在xml佈局文件中添加如下代碼:
activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
</android.support.v4.view.ViewPager>
</RelativeLayout>
tab.xml(作爲ViewPager的子佈局):
<?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:background="@color/colorAccent"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Tab1"
/>
</LinearLayout>
然後這裏我們先創建4個要在ViewPager中顯示的界面,代碼如下:
ArrayList<View> viewContainter = new ArrayList<View>();
View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
//viewContainter添加view
viewContainter.add(view1);
viewContainter.add(view2);
viewContainter.add(view3);
viewContainter.add(view4);
有了數據後我們就要創建數據適配器了,我們創建一個數據適配器MyPagerAdapter繼承自PagerAdapter,在PagerAdapter我們必須重寫以下幾個方法:
int getCount()
getCount():返回可以滑動的VIew的個數void destroyItem(ViewGroup container, int position,Object object)
從當前container中刪除指定位置的View- Object instantiateItem(ViewGroup container, int position)
將當前視圖添加到container中並返回當前View視圖 - boolean isViewFromObject(View arg0, Object arg1)
該函數用來判斷instantiateItem(ViewGroup, int)函數所返回來的Object與一個頁面視圖是否是代表的同一個視圖,官方建議直接返回arg0 == arg1即可。
下面我們給出MyPagerAdapters完整代碼:
/**
* ViewPager的數據適配器
*/
class MyPagerAdapters extends PagerAdapter{
//返回可以滑動的VIew的個數
@Override
public int getCount() {
return viewContainter.size();
}
//滑動切換的時候銷燬當前的組件
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
((ViewPager) container).removeView(viewContainter.get(position));
}
//將當前視圖添加到container中並返回當前View視圖
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainter.get(position));
return viewContainter.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
最後我們只要把MyPagerAdapters適配器設置給ViewPager即可:
pager = (ViewPager) this.findViewById(R.id.viewpager);
pager.setAdapter(new MyPagerAdapters());
MainActivity完整代碼如下:
package com.zejian.viewpager;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
public class MainActivity extends Activity {
ViewPager pager = null;
PagerTabStrip tabStrip = null;
ArrayList<View> viewContainter = new ArrayList<View>();
@SuppressLint("ResourceAsColor")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager) this.findViewById(R.id.viewpager);
View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
//viewpager開始添加view
viewContainter.add(view1);
viewContainter.add(view2);
viewContainter.add(view3);
viewContainter.add(view4);
//設置Adapter
pager.setAdapter(new MyPagerAdapters());
}
/**
* ViewPager的數據適配器
*/
class MyPagerAdapters extends PagerAdapter{
//返回可以滑動的VIew的個數
@Override
public int getCount() {
return viewContainter.size();
}
//滑動切換的時候銷燬當前的組件
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
((ViewPager) container).removeView(viewContainter.get(position));
}
//將當前視圖添加到container中並返回當前View視圖
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainter.get(position));
return viewContainter.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
}
}
運行代碼結果如下:
到此,最簡單的ViewPager使用方式已經介紹完啦。
3.PagerTitleStrip類和PagerTabStrip類
我們在編寫ViewPager的應用時,還會使用到兩個組件類分別是PagerTitleStrip類和PagerTabStrip類,PagerTitleStrip類直接繼承自ViewGroup類,用於設置每頁的標題,而PagerTabStrip類繼承PagerTitleStrip類用於控制Tab選擇時指示條樣式或者標題樣式,這兩個類也都是容器類。但是有一點我們需要特別需要注意,在定義XML的layout的時候,這兩個類必須是ViewPager標籤的子標籤,不然會出錯。由於PagerTabStrip類繼承PagerTitleStrip類,因此PagerTabStrip拓展了PagerTitleStrip類功能,所以這裏我們僅演示PagerTabStrip用法。
首先我們在activity_main.xml文件中添加PagerTabStrip控件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<android.support.v4.view.PagerTabStrip
android:id="@+id/tabstrip"
android:layout_width="wrap_content"
android:layout_height="50dip"
android:gravity="center" />
</android.support.v4.view.ViewPager>
</RelativeLayout>
接着我們在MainActivity.java文件中創建標題數據:
ArrayList<String> titleContainer = new ArrayList<String>();
//頁籤項
titleContainer.add("今日頭條");
titleContainer.add("今天熱點");
titleContainer.add("今日財經");
titleContainer.add("今日軍事");
想要爲每個標籤頁添加標題,我們必須重寫PagerAdapter類中的getPageTitle方法,然後根據位置position從集合數據中獲取對應的title返回即可,該方法實現如下:
@Override
public CharSequence getPageTitle(int position) {
return titleContainer.get(position);
}
接下來我們來通過PagerTabStrip控件改變每個Tab的下橫線指示線的style。代碼如下:
tabStrip = (PagerTabStrip) this.findViewById(R.id.tabstrip);
//取消tab下面的長橫線
tabStrip.setDrawFullUnderline(false);
//設置tab的背景色
tabStrip.setBackgroundResource(R.color.bg);
//設置當前tab頁籤的下劃線顏色
tabStrip.setTabIndicatorColorResource(R.color.red);
tabStrip.setTextSpacing(400);
到此標題和指示器都設置完成,下面我們給出改版後的MainActivity代碼:
package com.zejian.viewpager;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.PagerTabStrip;
import android.support.v4.view.ViewPager;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
public class MainActivity extends Activity {
ViewPager pager = null;
PagerTabStrip tabStrip = null;
ArrayList<View> viewContainter = new ArrayList<View>();
ArrayList<String> titleContainer = new ArrayList<String>();
@SuppressLint("ResourceAsColor")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
pager = (ViewPager) this.findViewById(R.id.viewpager);
tabStrip = (PagerTabStrip) this.findViewById(R.id.tabstrip);
//取消tab下面的長橫線
tabStrip.setDrawFullUnderline(false);
//設置tab的背景色
tabStrip.setBackgroundResource(R.color.bg);
//設置當前tab頁籤的下劃線顏色
tabStrip.setTabIndicatorColorResource(R.color.red);
tabStrip.setTextSpacing(400);
View view1 = LayoutInflater.from(this).inflate(R.layout.tab1, null);
View view2 = LayoutInflater.from(this).inflate(R.layout.tab2, null);
View view3 = LayoutInflater.from(this).inflate(R.layout.tab3, null);
View view4 = LayoutInflater.from(this).inflate(R.layout.tab4, null);
//viewpager開始添加view
viewContainter.add(view1);
viewContainter.add(view2);
viewContainter.add(view3);
viewContainter.add(view4);
//頁籤項
titleContainer.add("今日頭條");
titleContainer.add("今天熱點");
titleContainer.add("今日財經");
titleContainer.add("今日軍事");
pager.setAdapter(new MyPagerAdapters());
}
/**
* ViewPager的數據適配器
*/
class MyPagerAdapters extends PagerAdapter{
//返回可以滑動的VIew的個數
@Override
public int getCount() {
return viewContainter.size();
}
//滑動切換的時候銷燬當前的組件
@Override
public void destroyItem(ViewGroup container, int position,
Object object) {
((ViewPager) container).removeView(viewContainter.get(position));
}
//將當前視圖添加到container中並返回當前View視圖
@Override
public Object instantiateItem(ViewGroup container, int position) {
((ViewPager) container).addView(viewContainter.get(position));
return viewContainter.get(position);
}
@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}
@Override
public CharSequence getPageTitle(int position) {
return titleContainer.get(position);
}
}
}
最後我們來運行一下看看效果:
效果算一般吧,實際上在我們開發中很少會使用到PagerTabStrip與PagerTitleStrip,因爲他們實現的標題欄效果很不好,不能指定一個頁面一次顯示一個,或者全部顯示,而且標題還跟着界面滑動。因此實際應用中並不建議使用。我們更多的是去自定義指示器,這樣的話效果也會更好,好了,到此,本篇到此告一段落。
ViewPager 從入門到帶你擼個啓動頁之ViewPager基礎入門(一)
ViewPager 從入門到帶你擼個啓動頁之Fragment+ViewPager(二)