本文将更進一步, 在很多實際的應用場景中我們需要一個更複雜的場景,比如說需要在一個菜單選項中內建多個tab來集中顯示資訊。這個時候 viewpager就派上用場了。
本例中我們将通過slidingmenu + viewpager+fragment 實作帶tab的slidingmenu。先看看具體的效果。
實作步驟跟上一篇大體相同,這裡着重說需要修改的地方
首先我們需要添加一個pageradapter來自動适配tab裡面的fragment ,就像listview中的baseadapter差不多,隻是需要實作的方法有一些差別。
package com.example.slidingmenuviewpagertest.adapter;
import java.util.list;
import com.example.slidingmenuviewpagertest.entity.contentbean;
import com.example.slidingmenuviewpagertest.fragment.testcontentfragment;
import android.support.v4.app.fragment;
import android.support.v4.app.fragmentmanager;
import android.support.v4.app.fragmentpageradapter;
public class contentfragmentpageradapter extends fragmentpageradapter {
private list<contentbean> list;
public contentfragmentpageradapter(fragmentmanager fm) {
super(fm);
}
public contentfragmentpageradapter(fragmentmanager fm,list<contentbean> list) {
this.list = list;
@override
public fragment getitem(int arg0) {
return testcontentfragment.newinstance(list.get(arg0).getcontent());
public int getcount() {
// todo auto-generated method stub
return list.size();
public charsequence getpagetitle(int position) {
return list.get(position).gettitle();
}
然後在首頁fragment 中初始化viewpager
package com.example.slidingmenuviewpagertest.fragment;
import java.util.arraylist;
import android.os.bundle;
import android.support.v4.view.viewpager;
import android.view.layoutinflater;
import android.view.view;
import android.view.viewgroup;
import com.example.slidingmenuviewpagertest.r;
import com.example.slidingmenuviewpagertest.adapter.contentfragmentpageradapter;
public class homefragment extends fragment {
private viewpager mviewpager;
private static final string[] titles = {"one","two","three","four","five"};
private list<contentbean> list = new arraylist<contentbean>();
private contentfragmentpageradapter madapter;
public homefragment(){}
public view oncreateview(layoutinflater inflater, viewgroup container,
bundle savedinstancestate) {
view rootview = inflater.inflate(r.layout.fragment_home, container, false);
initdata();
findview(rootview);
return rootview;
private void initdata() {
for(int i=0;i<titles.length;i++){
contentbean cb = new contentbean();
cb.settitle(titles[i]);
cb.setcontent(titles[i]+"_"+(i+1));
list.add(cb);
}
private void findview(view rootview) {
mviewpager = (viewpager) rootview.findviewbyid(r.id.mviewpager);
madapter = new contentfragmentpageradapter(getactivity().getsupportfragmentmanager(),list);
mviewpager.setadapter(madapter);
public void onstart() {
if(madapter!=null){
madapter.notifydatasetchanged();
super.onstart();
viewpager中的fragment
import android.util.log;
import android.widget.textview;
public class testcontentfragment extends fragment {
private static final string tag = testcontentfragment.class.getsimplename();
private string title = "hello";
public static testcontentfragment newinstance(string s) {
testcontentfragment newfragment = new testcontentfragment();
bundle bundle = new bundle();
bundle.putstring("title", s);
newfragment.setarguments(bundle);
return newfragment;
public void oncreate(bundle savedinstancestate) {
log.d(tag, "testcontentfragment-----oncreate");
bundle args = getarguments();
if(args!=null){
title = args.getstring("title");
super.oncreate(savedinstancestate);
view rootview = inflater.inflate(r.layout.fragment_test_content, container, false);
findview(rootview);
return rootview;
textview txtlabel = (textview) rootview.findviewbyid(r.id.txtlabel);
txtlabel.settext(title);
testcontentfragment 布局檔案 fragment_test_content.xml
<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<textview
android:id="@+id/txtlabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerinparent="true"
android:text="pages view"
android:textsize="16dp" />
<imageview
android:layout_below="@id/txtlabel"
android:layout_centerhorizontal="true"
android:layout_margintop="10dp"
android:src="@drawable/ic_launcher" />
</relativelayout>
首頁fragment 布局檔案 fragment_home.xml
<android.support.v4.view.viewpager
android:id="@+id/mviewpager"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<android.support.v4.view.pagertabstrip
android:id="@+id/pagertab"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top"/>
<!-- <android.support.v4.view.pagertitlestrip
android:id="@+id/mpagertitlestrip"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="top" /> -->
</android.support.v4.view.viewpager>
主activity跟之前沒有變化
package com.example.slidingmenuviewpagertest;
import android.annotation.suppresslint;
import android.support.v4.app.fragmenttransaction;
import android.view.menu;
import android.view.menuitem;
import com.example.slidingmenuviewpagertest.fragment.communityfragment;
import com.example.slidingmenuviewpagertest.fragment.findpeoplefragment;
import com.example.slidingmenuviewpagertest.fragment.homefragment;
import com.example.slidingmenuviewpagertest.fragment.menufragment;
import com.example.slidingmenuviewpagertest.fragment.menufragment.slmenulistonitemclicklistener;
import com.example.slidingmenuviewpagertest.fragment.pagesfragment;
import com.example.slidingmenuviewpagertest.fragment.photosfragment;
import com.example.slidingmenuviewpagertest.fragment.whatshotfragment;
import com.jeremyfeinstein.slidingmenu.lib.slidingmenu;
import com.jeremyfeinstein.slidingmenu.lib.app.slidingfragmentactivity;
public class mainactivity extends slidingfragmentactivity implements slmenulistonitemclicklistener{
private slidingmenu mslidingmenu;
@suppresslint("newapi")
settitle("home");
// settitle(r.string.sliding_title);
setcontentview(r.layout.frame_content);
//set the behind view
setbehindcontentview(r.layout.frame_menu);
// customize the slidingmenu
mslidingmenu = getslidingmenu();
// mslidingmenu.setsecondarymenu(r.layout.frame_menu); 設定右側菜單的布局檔案
// mslidingmenu.setshadowwidth(5);
// mslidingmenu.setbehindoffset(100);
mslidingmenu.setshadowdrawable(r.drawable.drawer_shadow);//設定陰影圖檔
mslidingmenu.setshadowwidthres(r.dimen.shadow_width); //設定陰影圖檔的寬度
mslidingmenu.setbehindoffsetres(r.dimen.slidingmenu_offset); //slidingmenu劃出時首頁面顯示的剩餘寬度
mslidingmenu.setfadedegree(0.35f);
//設定slidingmenu 的手勢模式
//touchmode_fullscreen 全屏模式,在整個content頁面中,滑動,可以打開slidingmenu
//touchmode_margin 邊緣模式,在content頁面中,如果想打開slidingmenu,你需要在螢幕邊緣滑動才可以打開slidingmenu
//touchmode_none 不能通過手勢打開slidingmenu
mslidingmenu.settouchmodeabove(slidingmenu.touchmode_margin);
//設定 slidingmenu 内容
fragmenttransaction fragmenttransaction = getsupportfragmentmanager().begintransaction();
menufragment menufragment = new menufragment();
fragmenttransaction.replace(r.id.menu, menufragment);
fragmenttransaction.replace(r.id.content, new homefragment());
fragmenttransaction.commit();
//使用左上方icon可點,這樣在onoptionsitemselected裡面才可以監聽到r.id.home
getactionbar().setdisplayhomeasupenabled(true);
public boolean oncreateoptionsmenu(menu menu) {
// inflate the menu; this adds items to the action bar if it is present.
getmenuinflater().inflate(r.menu.main, menu);
return true;
public boolean onoptionsitemselected(menuitem item) {
switch (item.getitemid()) {
case android.r.id.home:
toggle(); //動态判斷自動關閉或開啟slidingmenu
// getslidingmenu().showmenu();//顯示slidingmenu
// getslidingmenu().showcontent();//顯示内容
return true;
return super.onoptionsitemselected(item);
public void selectitem(int position, string title) {
// update the main content by replacing fragments
fragment fragment = null;
switch (position) {
case 0:
fragment = new homefragment();
break;
case 1:
fragment = new findpeoplefragment();
case 2:
fragment = new photosfragment();
case 3:
fragment = new communityfragment();
case 4:
fragment = new pagesfragment();
case 5:
fragment = new whatshotfragment();
default:
}
if (fragment != null) {
fragmentmanager fragmentmanager = getsupportfragmentmanager();
fragmentmanager.begintransaction()
.replace(r.id.content, fragment).commit();
// update selected item and title, then close the drawer
settitle(title);
mslidingmenu.showcontent();
} else {
// error in creating fragment
log.e("mainactivity", "error in creating fragment");