新聞中心

EEPW首頁 > 嵌入式系統(tǒng) > 設(shè)計(jì)應(yīng)用 > 利用ViewPager+Fragment+slidingmenu側(cè)滑組件實(shí)現(xiàn)

利用ViewPager+Fragment+slidingmenu側(cè)滑組件實(shí)現(xiàn)

作者: 時(shí)間:2016-10-29 來源:網(wǎng)絡(luò) 收藏

pager=(ViewPager) findViewById(R.id.pager);//初始化控件

fragments=new ArrayList();//初始化數(shù)據(jù)

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);//設(shè)置成當(dāng)前第一個(gè)

}

/**

* OnPageChangeListener的接口函數(shù)

*/

@Override

public void onPageSelected(int arg0) {

title.get(arg0).setChecked(true);//保持頁面跟按鈕的聯(lián)動(dòng)

//下面這個(gè)條件語句里面的是針對側(cè)滑效果的

if(arg0==0){

// 如果當(dāng)前是第一頁,那么設(shè)置觸摸屏幕的模式為全屏模式

sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_FULLSCREEN);//設(shè)置成全屏響應(yīng)

}else {

// 如果不是第一頁,設(shè)置觸摸屏幕的模式為邊緣60px的地方

sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

}

}

以上基本配置好了ViewPager組件,運(yùn)行起來3個(gè)Fragment頁面可以自由滑動(dòng)了,但是下面的三個(gè)button還沒有設(shè)置監(jiān)聽,所以viewpager切換的時(shí)候不會(huì)跟著切換,點(diǎn)擊也不會(huì)有響應(yīng)。接下來要做的就是在onCreate()里面初始化RadioButton,并給它設(shè)置OnClickListener監(jiān)聽點(diǎ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

/**

* 初始化幾個(gè)用來顯示title的RadioButton

*/

private void initTitle() {

title.add((RadioButton) findViewById(R.id.title1));//三個(gè)title標(biāo)簽

title.add((RadioButton) findViewById(R.id.title2));

title.add((RadioButton) findViewById(R.id.title3));

title.get(0).setOnClickListener(new MyOnClickListener(0));//設(shè)置響應(yīng)

title.get(1).setOnClickListener(new MyOnClickListener(1));

title.get(2).setOnClickListener(new MyOnClickListener(2));

}

/**

* 重寫OnClickListener的響應(yīng)函數(shù),主要目的就是實(shí)現(xiàn)點(diǎn)擊title時(shí),pager會(huì)跟著響應(yīng)切換

* @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的視圖切過去,實(shí)現(xiàn)title跟pager的聯(lián)動(dòng)

title.get(index).setChecked(true);//設(shè)置被選中,否則布局里面的背景不會(huì)切換

}

}

最后就是實(shí)現(xiàn)側(cè)滑出左邊頁面的效果,這里使用了開源組件SlidingMenu,具體的使用方法可百度or查看源代碼。SlidingMenu組件重寫了Activity、FragmentActivity、RelativeLayout等,要實(shí)現(xiàn)側(cè)滑效果,可以把主函數(shù)繼承的FragmentActivity改成SlidingFragmentActivity,也可以去在xml布局文件里面直接設(shè)置。這個(gè)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() {

// 實(shí)例化滑動(dòng)菜單對象

SlidingMenu sm = getSlidingMenu();

setContentView(R.layout.activity_main);//設(shè)置當(dāng)前的視圖

setBehindContentView(R.layout.left);//設(shè)置左頁視圖

sm.setMode(SlidingMenu.LEFT);

// 設(shè)置滑動(dòng)陰影的寬度

// sm.setShadowWidthRes(R.dimen.shadow_width);

// 設(shè)置滑動(dòng)陰影的圖像資源

// sm.setShadowDrawable(R.drawable.shadow);

// 設(shè)置滑動(dòng)菜單視圖的寬度

// sm.setBehindOffsetRes(R.dimen.slidingmenu_offset);

// 設(shè)置漸入漸出效果的值

sm.setFadeDegree(0.35f);

// 設(shè)置觸摸屏幕的模式

sm.setTouchModeAbove(SlidingMenu.TOUCHMODE_MARGIN);

// sm.setTouchModeBehind(SlidingMenu.TOUCHMODE_FULLSCREEN);//設(shè)置左頁的響應(yīng)范圍

sm.setTouchmodeMarginThreshold(60);//這個(gè)設(shè)置的是隔屏幕邊緣多遠(yuǎn)開始響應(yīng)

// sm.setBehindOffset(50);//設(shè)置左頁距離屏幕右邊緣的距離,右頁會(huì)補(bǔ)上

WindowManager wManager=(WindowManager) getSystemService(Context.WINDOW_SERVICE);

screenWidth=wManager.getDefaultDisplay().getWidth();//獲取屏幕的寬度

sm.setBehindWidth((int) (screenWidth*0.8));//設(shè)置左頁的寬度

}

最后附上其中一個(gè)Fragment的示例代碼:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18



關(guān)鍵詞: android

評論


相關(guān)推薦

技術(shù)專區(qū)

關(guān)閉