利用ViewPager+Fragment+slidingmenu側(cè)滑組件實現(xiàn)的小demo
加入技術交流群
pager=(ViewPager) findViewById(R.id.pager);//初始化控件
fragments=new ArrayList
fragments.add(new ActivityFragment());
fragments.add(new JobFragment());
fragments.add(new FriendFragment());
}
/**
* 初始化ViewPager
*/
private void initViewPager() {
// TODO Auto-generated method stub
mAdapter=new MyViewPagerAdapter(getSupportFragmentManager(), fragments);
pager.setAdapter(mAdapter);
pager.setOnPageChangeListener(this);
pager.setCurrentItem(0);//設置成當前第一個
}
/**
* OnPageChangeListener的接口函數(shù)
*/
@Override
public void onPageSelected(int arg0) {
title.get(arg0).setChecked(true);//保持頁面跟按鈕的聯(lián)動
//下面這個條件語句里面的是針對側(cè)滑效果的
if(arg0==0){
// 如果當前是第一頁，那么設置觸摸屏幕的模式為全屏模式
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//設置成全屏響應
}else {
// 如果不是第一頁，設置觸摸屏幕的模式為邊緣60px的地方
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
}
}
以上基本配置好了ViewPager組件，運行起來3個Fragment頁面可以自由滑動了，但是下面的三個button還沒有設置監(jiān)聽，所以viewpager切換的時候不會跟著切換，點擊也不會有響應。接下來要做的就是在onCreate()里面初始化RadioButton，并給它設置OnClickListener監(jiān)聽點擊事件：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
/**
* 初始化幾個用來顯示title的RadioButton
*/
private void initTitle() {
title.add((RadioButton) findViewById(R.id.title1));//三個title標簽
title.add((RadioButton) findViewById(R.id.title2));
title.add((RadioButton) findViewById(R.id.title3));
title.get(0).setOnClickListener(new MyOnClickListener(0));//設置響應
title.get(1).setOnClickListener(new MyOnClickListener(1));
title.get(2).setOnClickListener(new MyOnClickListener(2));
}
/**
* 重寫OnClickListener的響應函數(shù)，主要目的就是實現(xiàn)點擊title時，pager會跟著響應切換
* @author llb
*/
private class MyOnClickListener implements OnClickListener{
private int index;
public MyOnClickListener(int index){
this.index=index;
}
@Override
public void onClick(View v) {
// TODO Auto-generated method stub
pager.setCurrentItem(index);//把viewpager的視圖切過去，實現(xiàn)title跟pager的聯(lián)動
title.get(index).setChecked(true);//設置被選中，否則布局里面的背景不會切換
}
}
最后就是實現(xiàn)側(cè)滑出左邊頁面的效果，這里使用了開源組件SlidingMenu，具體的使用方法可百度or查看源代碼。SlidingMenu組件重寫了Activity、FragmentActivity、RelativeLayout等，要實現(xiàn)側(cè)滑效果，可以把主函數(shù)繼承的FragmentActivity改成SlidingFragmentActivity，也可以去在xml布局文件里面直接設置。這個demo里面采用的是繼承SlidingFragmentActivity類，主要的初始化代碼如下：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/**
* 初始化開源組件SlidingMenu
*/
private void initSlidingMenu() {
// 實例化滑動菜單對象
SlidingMenu sm = getSlidingMenu();
setContentView(R.layout.activity_main);//設置當前的視圖
setBehindContentView(R.layout.left);//設置左頁視圖
sm.setMode(SlidingMenu.LEFT);
// 設置滑動陰影的寬度
// sm.setShadowWidthRes(R.dimen.shadow_width);
// 設置滑動陰影的圖像資源
// sm.setShadowDrawable(R.drawable.shadow);
// 設置滑動菜單視圖的寬度
// sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);
// 設置漸入漸出效果的值
sm.setFadeDegree(0.35f);
// 設置觸摸屏幕的模式
sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);
// sm.setTouchModeBehind(SlidingMenu.TOUCHMODE_FULLSCREEN);//設置左頁的響應范圍
sm.setTouchmodeMarginThreshold(60);//這個設置的是隔屏幕邊緣多遠開始響應
// sm.setBehindOffset(50);//設置左頁距離屏幕右邊緣的距離，右頁會補上
WindowManager wManager=(WindowManager) getSystemService(Context.WINDOW_SERVICE);
screenWidth=wManager.getDefaultDisplay().getWidth();//獲取屏幕的寬度
sm.setBehindWidth((int) (screenWidth*0.8));//設置左頁的寬度
}
最后附上其中一個Fragment的示例代碼：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
評論