【Android界面實現】使用ActionBar和DrawerLayout純原生控件，實現側滑欄和滑動Tab界面
來源：程序員人生 發布時間：2014-11-09 08:36:41 閱讀次數：8996次
轉載請注明出處：http://blog.csdn.net/zhaokaiqiang1992
在前面的文章中，我們使用第3方開源控件，比如說是SlidingMenu和PagerSlidingTabStrip，實現過側滑欄和滑動Tab界面。但是在support-v4包中，提供了原生的側滑欄控件DrawerLayout，而滑動的Tab效果，我們可使用ViewPager和ActionBar上的Tab來進行實現。所以在今天的文章里面，我們將介紹如何將DrawerLayout與ActionBar進行整合，使用純原生的控件來實現我們想要的效果。
首先，先看1下終究的實現效果。
除實現了側滑欄和可以滑動的Tab頁，還順便加上了ActionBar上的Menu和ShareActionProvider，可以實現簡單的分享功能，下面，給大家介紹實現的具體進程。
首先看1下全部項目的目錄結構
MainActivity是主界面，MenuAdapter是菜單的listview的適配器，PlaceholderFragment是Fragment的子類，SectionsPagerAdapter是ViewPager的適配器。
res文件夾中的文件則是對應的布局文件，main是ActionBar的菜單布局。
首先，如果我們想用DrawerLayout，我們必須在xml布局進行聲明
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent" >
<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<ListView
android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="#ccffffff"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp" />
</android.support.v4.widget.DrawerLayout>
上面的代碼是主界面的布局代碼，DrawerLayout必須作為根布局，在里面我們嵌套了1個ViewPager用來實現Tab頁的滑動，要注意的是，下面的ListView就是側滑欄的布局，我們固然可以用其他的布局來實現。我們如果想控制側滑欄的滑出方向，我們應當使用layout_gravity屬性來設置，比如說是left/right或是start/end。如果我們想使用DrawerLayout布局那末我們的主布局必須是第1個子控件，并且寬和高必須是match_parent，比如我們上面的ViewPager的使用。而我們的側滑欄的布局，必須緊跟在主布局的后面，而且要通過layout_gravity來設置滑出的方向。通常我們給側滑欄的寬度設置1個固定的大小，高度設置成match_parent。
為了把DrawerLayout綁定到我們需要的Activity上，并定義相干的事件回調，我們需要定義1個ActionBarDrawerToggle對象來完成這項工作，比如，下面的代碼就實現了我們想要的功能
// 將DrawerLayout布局綁定到當前界面，并設置點擊事件
mDrawerToggle = new ActionBarDrawerToggle(this, /* 宿主 Activity */
mDrawerLayout, /* 需要綁定的DrawerLayout對象 */
R.drawable.ic_drawer, /* 用于替換向上的圖片 */
R.string.drawer_open, /* "open drawer" description for http://www.vxbq.cn/access/ibility */
R.string.drawer_close /* "close drawer" description for http://www.vxbq.cn/access/ibility */
) {
public void onDrawerClosed(View view) {
// creates call to onPrepareOptionsMenu()
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
// creates call to onPrepareOptionsMenu()
invalidateOptionsMenu();
}
};
// 綁定監聽器
mDrawerLayout.setDrawerListener(mDrawerToggle);
值得注意的是，在onDrawerClosed()和onDrawerOpened()方法里面，并沒有直接的進行DrawerLayout的打開和關閉操作，而是調用了invalidateOptionsMenu()方法，讓系統去調用onPrepareoptionsMenu()。那末，側滑欄的打開和關閉，到底如何控制呢？
我們可以在onOptionsItemelected方法里面進行控制，象下面這樣
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// 處理側滑欄的打開關閉效果
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// 處理ActionBar的Menu的點擊事件
switch (item.getItemId()) {
// edit
case R.id.action_edit:
Toast.makeText(this, "Edit", Toast.LENGTH_SHORT).show();
return true;
// more
case R.id.action_more:
Toast.makeText(this, "More", Toast.LENGTH_SHORT).show();
return true;
}
return super.onOptionsItemSelected(item);
}
設置好側滑欄以后，下面開始設置Tab。滑動的Tab界面，實際上是由ViewPager和ActionBar.Tab組成的，因此，我們需要分別進行設置。
ViewPager的使用大家應當很熟習了，需要設置1個Adapter，然后在里面進行Fragment頁面的切換操作，下面重點說1下，如何將Tab和ViwqPager組合起來。
首先，我們需要調用下面的代碼，將導航模式調劑為tab
// 初始化
actionBar = getActionBar();
// 設置導航模式為Tab方式
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
設置好以后，我們就能夠組合了
// 初始化ViewPager的適配器對象
mSectionsPagerAdapter = new SectionsPagerAdapter(
getSupportFragmentManager());
mViewPager.setAdapter(mSectionsPagerAdapter);
// 在不同的Fragment之間滑動的時候，修改選中的tab，我們也能夠使用ActionBar.Tab#select()完成，如果我們有Tab的援用的話
mViewPager
.setOnPageChangeListener(new ViewPager.SimpleOnPageChangeListener() {
@Override
public void onPageSelected(int position) {
actionBar.setSelectedNavigationItem(position);
}
});
// 根據界面數量添加Tab
for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
actionBar.addTab(actionBar.newTab()
.setText(mSectionsPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
如果想滑動以后改變Tab確當前選中項，我們需要在onPageSelected里面根據position設置選中的項目便可，如果我們想點擊tab，ViewPager切換到對應的界面，我們需要在當前的Activity中，實現ActionBar.TabListener 接口，然后在下面的回調接口中，切換便可
@Override
public void onTabSelected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
// 處理Tab的點擊，ViewPager滑動到對應的位置
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabReselected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
}
經過上面這些步驟，我們就用純原生的控件實現了想要的效果。關于ActionBar上的Menu和SharetionProvider的使用，這篇文章不做過量介紹了，有時間單獨介紹。
項目的Github地址：https://github.com/ZhaoKaiQiang/actionbartabs
生活不易，碼農辛苦
如果您覺得本網站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
