1、概述
viewpager，顧名思義實作控件的滾動功能，是support-v4的包中類，使用前要先導包。使用的時候跟listview有點相似，需要設定對應的擴充卡，通常有倆大類
【pageadapter】
【fragmentpageradapter/fragmentstatepageradapter】
fragment有着自己的生命周期，谷歌官方也推薦使用viewpage+fragment的形式，一般簡單的也可以使用viewpage+pageadapter形式
這裡用這倆種擴充卡來搭個架構學習使用一下，先上使用fragmentpageradapter的效果圖
1、fragmentpageradapter/fragmentstatepageradapter
在使用fragmentpageradapter時我們首先要實作它的倆個方法，如下
//初始化adapter這裡使用fragmentpageradapter
madpter = new fragmentpageradapter(getsupportfragmentmanager()) {
@override
public fragment getitem(int position) {
return mfragments.get(position);
}
public int getcount() {
return mfragments.size();
};
方法一目了然，getcount()傳回的是viewpager頁面的數量，getitem()傳回的是要顯示的fragent對象。
從這裡看到我們管理的對象是不同的fragment對應不同的布局
2、pageadapter
使用pageradapter，至少必須重寫下面的四個方法
【 instantiateitem(viewgroup, int)】
傳回值：傳回一個代表新增視圖頁面的object
【public void destroyitem (viewgroup container, int position, object object)】
該方法實作的功能是移除一個給定位置的頁面。擴充卡有責任從容器中删除這個視圖。這是為了確定在finishupdate(viewgroup)傳回時視圖能夠被移除。
【 public int getcount()】
傳回目前有效視圖的個數。
【isviewfromobject(view, object)】
功能：該函數用來判斷instantiateitem(viewgroup, int)函數所傳回來的key與一個頁面視圖是否是代表的同一個視圖(即它倆是否是對應的，對應的表示同一個view)
傳回值：如果對應的是同一個view，傳回true，否則傳回false。
3、viewpager+fragment demo代碼實作
主要目錄結構如下
主布局檔案activity_main.xml如下
<?xml version="1.0" encoding="utf-8"?>
<linearlayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">
<include layout="@layout/topbar_layout"/>
<android.support.v4.view.viewpager
android:id="@+id/id_viewpager"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</android.support.v4.view.viewpager>
<include layout="@layout/bottom"/>
</linearlayout>
可以看出這裡通過include包含一頭一尾，中間是v4包中的viewpager
bottom.xml代碼如下
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginbottom="5dp"
android:background="@color/mainpage_mycrircle_leftview_item_auth_name"
>
<linearlayout
android:id="@+id/id_tab_mycircle"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<!-- android:clickable="false" 是為了防止imagebutton截取了觸摸事件 ，這裡事件要給它的上一級linearlayout-->
<imagebutton
android:id="@+id/id_tab_mycirlceimg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:clickable="false"
android:src="@drawable/mainpage_tab_mycircle_selected"/>
<textview
android:text="我的圈子"
/>
</linearlayout>
android:id="@+id/id_tab_discovery"
android:id="@+id/id_tab_discovery_img"
android:src="@drawable/mainpage_tab_discovery_normal"/>
android:text="發現"
android:id="@+id/id_tab_message"
android:id="@+id/id_tab_message_img"
android:src="@drawable/mainpage_tab_message_normal"/>
android:text="消息"
android:id="@+id/id_tab_setting"
android:id="@+id/id_tab_setting_img"
android:src="@drawable/mainpage_tab_setting_normal"/>
android:text="個人中心"
通過權重這裡也可以使用radiogroup來做這個底部
然後是mainactivity處理邏輯函數
package com.elvis.gachatest;
import android.os.bundle;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentpageradapter;
import android.support.v4.view.viewpager;
import android.support.v7.app.appcompatactivity;
import android.view.view;
import android.widget.imagebutton;
import android.widget.linearlayout;
import java.util.arraylist;
import java.util.list;
public class mainactivity extends appcompatactivity implements view.onclicklistener {
//定義控件
private viewpager mviewpager;
private fragmentpageradapter madpter;
private list<fragment> mfragments = new arraylist<>();
//四個tab每個tab都有一個按鈕
private linearlayout mtabmycircle;
private linearlayout mtabmydiscovery;
private linearlayout mtabmymsg;
private linearlayout mtabmycenter;
//四個按鈕
private imagebutton mycircleimg;
private imagebutton mydiscoveryimg;
private imagebutton mymsgimg;
private imagebutton mycenterimg;
@override
public void oncreate(bundle savedinstancestate) {
super.oncreate(savedinstancestate);
setcontentview(r.layout.activity_main);
initviews();//初始化控件
initevent();//監聽邏輯事件
initviewpages();//初始化viewpager
}
private void initviews() {
mviewpager = (viewpager) findviewbyid(r.id.id_viewpager);
//初始化四個布局
mtabmycircle = (linearlayout) findviewbyid(r.id.id_tab_mycircle);
mtabmydiscovery = (linearlayout) findviewbyid(r.id.id_tab_discovery);
mtabmymsg = (linearlayout) findviewbyid(r.id.id_tab_message);
mtabmycenter = (linearlayout) findviewbyid(r.id.id_tab_setting);
//初始化四個按鈕
mycircleimg = (imagebutton) findviewbyid(r.id.id_tab_mycirlceimg);
mydiscoveryimg = (imagebutton) findviewbyid(r.id.id_tab_discovery_img);
mymsgimg = (imagebutton) findviewbyid(r.id.id_tab_message_img);
mycenterimg = (imagebutton) findviewbyid(r.id.id_tab_setting_img);
private void initviewpages() {
fragment01 tab01 = new fragment01();
fragment02 tab02 = new fragment02();
fragment03 tab03 = new fragment03();
fragment04 tab04 = new fragment04();
mfragments.add(tab01);
mfragments.add(tab02);
mfragments.add(tab03);
mfragments.add(tab04);
//初始化adapter這裡使用fragmentpageradapter
mviewpager.setadapter(madpter);
private void initevent() {
//設定監聽器
mycircleimg.setonclicklistener(this);
mydiscoveryimg.setonclicklistener(this);
mymsgimg.setonclicklistener(this);
mycenterimg.setonclicklistener(this);
mviewpager.addonpagechangelistener(new viewpager.onpagechangelistener() {
public void onpagescrolled(int position, float positionoffset, int positionoffsetpixels) {
public void onpageselected(int position) {
//當viewpager滑動的時候
int currentpage = mviewpager.getcurrentitem();
switch (currentpage) {
case 0:
resetimg();
mycircleimg.setimageresource(r.drawable.mainpage_tab_mycircle_selected);
break;
case 1:
mydiscoveryimg.setimageresource(r.drawable.mainpage_tab_discovery_selected);
case 2:
mymsgimg.setimageresource(r.drawable.mainpage_tab_message_selected);
case 3:
mycenterimg.setimageresource(r.drawable.mainpage_tab_setting_selected);
default:
}
public void onpagescrollstatechanged(int state) {
});
private void resetimg() {
mycircleimg.setimageresource(r.drawable.mainpage_tab_mycircle_normal);
mydiscoveryimg.setimageresource(r.drawable.mainpage_tab_discovery_normal);
mymsgimg.setimageresource(r.drawable.mainpage_tab_message_normal);
mycenterimg.setimageresource(r.drawable.mainpage_tab_setting_normal);
public void onclick(view v) {
switch (v.getid()) {
case r.id.id_tab_mycirlceimg:
mviewpager.setcurrentitem(0);
resetimg();
mycircleimg.setimageresource(r.drawable.mainpage_tab_mycircle_selected);
break;
case r.id.id_tab_discovery_img:
mviewpager.setcurrentitem(1);
mydiscoveryimg.setimageresource(r.drawable.mainpage_tab_discovery_selected);
case r.id.id_tab_message_img:
mviewpager.setcurrentitem(2);
mymsgimg.setimageresource(r.drawable.mainpage_tab_message_selected);
case r.id.id_tab_setting_img:
mviewpager.setcurrentitem(3);
mycenterimg.setimageresource(r.drawable.mainpage_tab_setting_selected);
default:
}
}
這裡要注意使用fragment時統統使用v4包下的fragment，否則會出錯
要是使用pageadapter方式核心代碼如下
private void initviewpages() {
//初始化四個布局
layoutinflater mlayoutinflater = layoutinflater.from(this);
view tab1 = mlayoutinflater.inflate(r.layout.tab01, null);
view tab2 = mlayoutinflater.inflate(r.layout.tab02, null);
view tab3 = mlayoutinflater.inflate(r.layout.tab03, null);
view tab4 = mlayoutinflater.inflate(r.layout.tab04, null);
//加入到list中
mviews.add(tab1);
mviews.add(tab2);
mviews.add(tab3);
mviews.add(tab4);
//初始化viewpager擴充卡
mpageradapter = new pageradapter() {
@override
public void destroyitem(viewgroup container, int position, object object) {
//從container中删除指定position的view
container.removeview(mviews.get(position));
}
public object instantiateitem(viewgroup container, int position) {
//将目前視圖添加到view中
view view = mviews.get(position);
container.addview(view);
//傳回目前視圖
return view;
public int getcount() {
//傳回要滑動的view個數
return mviews.size();
public boolean isviewfromobject(view view, object object) {
return view == object;
};
//設定adapter
mviewpager.setadapter(mpageradapter);
}
轉自：http://blog.csdn.net/xsf50717/article/details/49764521