【Android界面實現(xiàn)】使用ActionBar和DrawerLayout純原生控件，實現(xiàn)側(cè)滑欄和滑動Tab界面
來源：程序員人生 發(fā)布時間：2014-11-09 08:36:41 閱讀次數(shù)：9000次
轉(zhuǎn)載請注明出處：http://blog.csdn.net/zhaokaiqiang1992
在前面的文章中，我們使用第3方開源控件，比如說是SlidingMenu和PagerSlidingTabStrip，實現(xiàn)過側(cè)滑欄和滑動Tab界面。但是在support-v4包中，提供了原生的側(cè)滑欄控件DrawerLayout，而滑動的Tab效果，我們可使用ViewPager和ActionBar上的Tab來進行實現(xiàn)。所以在今天的文章里面，我們將介紹如何將DrawerLayout與ActionBar進行整合，使用純原生的控件來實現(xiàn)我們想要的效果。
首先，先看1下終究的實現(xiàn)效果。
除實現(xiàn)了側(cè)滑欄和可以滑動的Tab頁，還順便加上了ActionBar上的Menu和ShareActionProvider，可以實現(xiàn)簡單的分享功能，下面，給大家介紹實現(xiàn)的具體進程。
首先看1下全部項目的目錄結(jié)構(gòu)
MainActivity是主界面，MenuAdapter是菜單的listview的適配器，PlaceholderFragment是Fragment的子類，SectionsPagerAdapter是ViewPager的適配器。
res文件夾中的文件則是對應(yīng)的布局文件，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用來實現(xiàn)Tab頁的滑動，要注意的是，下面的ListView就是側(cè)滑欄的布局，我們固然可以用其他的布局來實現(xiàn)。我們?nèi)绻肟刂苽?cè)滑欄的滑出方向，我們應(yīng)當使用layout_gravity屬性來設(shè)置，比如說是left/right或是start/end。如果我們想使用DrawerLayout布局那末我們的主布局必須是第1個子控件，并且寬和高必須是match_parent，比如我們上面的ViewPager的使用。而我們的側(cè)滑欄的布局，必須緊跟在主布局的后面，而且要通過layout_gravity來設(shè)置滑出的方向。通常我們給側(cè)滑欄的寬度設(shè)置1個固定的大小，高度設(shè)置成match_parent。
為了把DrawerLayout綁定到我們需要的Activity上，并定義相干的事件回調(diào)，我們需要定義1個ActionBarDrawerToggle對象來完成這項工作，比如，下面的代碼就實現(xiàn)了我們想要的功能
// 將DrawerLayout布局綁定到當前界面，并設(shè)置點擊事件
mDrawerToggle = new ActionBarDrawerToggle(this, /* 宿主 Activity */
mDrawerLayout, /* 需要綁定的DrawerLayout對象 */
R.drawable.ic_drawer, /* 用于替換向上的圖片 */
R.string.drawer_open, /* "open drawer" description for http://www.jyygyx.com/access/ibility */
R.string.drawer_close /* "close drawer" description for http://www.jyygyx.com/access/ibility */
) {
public void onDrawerClosed(View view) {
// creates call to onPrepareOptionsMenu()
invalidateOptionsMenu();
}
public void onDrawerOpened(View drawerView) {
// creates call to onPrepareOptionsMenu()
invalidateOptionsMenu();
}
};
// 綁定監(jiān)聽器
mDrawerLayout.setDrawerListener(mDrawerToggle);
值得注意的是，在onDrawerClosed()和onDrawerOpened()方法里面，并沒有直接的進行DrawerLayout的打開和關(guān)閉操作，而是調(diào)用了invalidateOptionsMenu()方法，讓系統(tǒng)去調(diào)用onPrepareoptionsMenu()。那末，側(cè)滑欄的打開和關(guān)閉，到底如何控制呢？
我們可以在onOptionsItemelected方法里面進行控制，象下面這樣
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// 處理側(cè)滑欄的打開關(guān)閉效果
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);
}
設(shè)置好側(cè)滑欄以后，下面開始設(shè)置Tab。滑動的Tab界面，實際上是由ViewPager和ActionBar.Tab組成的，因此，我們需要分別進行設(shè)置。
ViewPager的使用大家應(yīng)當很熟習了，需要設(shè)置1個Adapter，然后在里面進行Fragment頁面的切換操作，下面重點說1下，如何將Tab和ViwqPager組合起來。
首先，我們需要調(diào)用下面的代碼，將導(dǎo)航模式調(diào)劑為tab
// 初始化
actionBar = getActionBar();
// 設(shè)置導(dǎo)航模式為Tab方式
actionBar.setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);
設(shè)置好以后，我們就能夠組合了
// 初始化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);
}
});
// 根據(jù)界面數(shù)量添加Tab
for (int i = 0; i < mSectionsPagerAdapter.getCount(); i++) {
actionBar.addTab(actionBar.newTab()
.setText(mSectionsPagerAdapter.getPageTitle(i))
.setTabListener(this));
}
如果想滑動以后改變Tab確當前選中項，我們需要在onPageSelected里面根據(jù)position設(shè)置選中的項目便可，如果我們想點擊tab，ViewPager切換到對應(yīng)的界面，我們需要在當前的Activity中，實現(xiàn)ActionBar.TabListener 接口，然后在下面的回調(diào)接口中，切換便可
@Override
public void onTabSelected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
// 處理Tab的點擊，ViewPager滑動到對應(yīng)的位置
mViewPager.setCurrentItem(tab.getPosition());
}
@Override
public void onTabUnselected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
}
@Override
public void onTabReselected(ActionBar.Tab tab,
FragmentTransaction fragmentTransaction) {
}
經(jīng)過上面這些步驟，我們就用純原生的控件實現(xiàn)了想要的效果。關(guān)于ActionBar上的Menu和SharetionProvider的使用，這篇文章不做過量介紹了，有時間單獨介紹。
項目的Github地址：https://github.com/ZhaoKaiQiang/actionbartabs
生活不易，碼農(nóng)辛苦
如果您覺得本網(wǎng)站對您的學習有所幫助,可以手機掃描二維碼進行捐贈
