转载路径:Navigation Drawer 的初了解以及ActionBar自定义视图(标题居中)
整个示例都是改造自 Google Android Training 中的 NavigationDrawer 示例(http://developer.android.com/training/implementing-navigation/nav-drawer.html)
因为我需要使用自定义的 ActionBar,而ActionBarDrawerToggle 只能通过 ActionBar 中的 Action Menu 进行触发,且需要提供一个indicator图片,而不支持自定义按钮的触发(如下代码);
01.
public
boolean onOptionsItemSelected(MenuItem item) {
02.
if
(item != null && item.getItemId() == ID_HOME && mDrawerIndicatorEnabled) {
03.
if
(mDrawerLayout.isDrawerVisible(GravityCompat.START)) {
04.
mDrawerLayout.closeDrawer(GravityCompat.START);
05.
}
else
{
06.
mDrawerLayout.openDrawer(GravityCompat.START);
07.
}
08.
return
true
;
09.
}
10.
return
false
;
11.
}
因此考虑参考 ActionBarDrawerToggle 重写自己的 MabDrawerToggle,然后去掉 onOptionsItemSelected 方式来触发 drawer,新增了一个 switchDrawer 方法,如下:
01.
public
void
switchDrawer()
02.
{
03.
if
(mDrawerLayout.isDrawerVisible(GravityCompat.START))
04.
{
05.
mDrawerLayout.closeDrawer(GravityCompat.START);
06.
}
07.
else
08.
{
09.
mDrawerLayout.openDrawer(GravityCompat.START);
10.
}
11.
}
下面看一下 ActionBar 自定义 View 中标题居中的问题,折腾了好久,最后采用 FrameLayout 方式解决的,如下 action_bar_title.xml:
01.
<?
xml
version
=
"1.0"
encoding
=
"utf-8"
?>
02.
<
FrameLayout
xmlns:android
=
"http://schemas.android.com/apk/res/android"
03.
android:layout_width
=
"fill_parent"
04.
android:layout_height
=
"wrap_content"
>
05.
<
TextView
06.
android:id
=
"@android:id/title"
07.
android:layout_height
=
"match_parent"
08.
android:layout_width
=
"match_parent"
09.
android:gravity
=
"center"
10.
android:text
=
"hello"
11.
android:textColor
=
"@android:color/holo_red_light"
/>
12.
<
ImageButton
13.
android:id
=
"@+id/left_btn"
14.
android:layout_height
=
"wrap_content"
15.
android:layout_width
=
"wrap_content"
16.
android:layout_gravity
=
"left|center_vertical"
17.
android:layout_marginLeft
=
"12.0dip"
18.
android:src
=
"@android:drawable/ic_media_play"
/>
19.
<
ImageButton
20.
android:id
=
"@+id/right_btn"
21.
android:layout_height
=
"wrap_content"
22.
android:layout_width
=
"wrap_content"
23.
android:layout_gravity
=
"right|center_vertical"
24.
android:layout_marginRight
=
"12.0dip"
25.
android:src
=
"@android:drawable/ic_media_pause"
/>
26.
</
FrameLayout
>
在 onCreate 中实现如下:
01.
protected
void
onCreate(Bundle savedInstanceState)
02.
{
03.
super.onCreate(savedInstanceState);
04.
setContentView(R.layout.activity_main);
05.
mTitle = getTitle();
06.
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
07.
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
08.
mDrawerList = (ListView) findViewById(R.id.left_drawer);
09.
// set a custom shadow that overlays the main content when the drawer opens www.it165.net
10.
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
11.
mDrawerList.setAdapter(
new
ArrayAdapter<String>(
this
,
12.
R.layout.drawer_list_item, mPlanetTitles));
13.
mDrawerList.setOnItemClickListener(
new
DrawerItemClickListener());
14.
ActionBar.LayoutParams lp =
new
ActionBar.LayoutParams(
15.
ActionBar.LayoutParams.MATCH_PARENT,
16.
ActionBar.LayoutParams.MATCH_PARENT,
17.
Gravity.CENTER);
18.
View viewTitleBar = getLayoutInflater().inflate(R.layout.action_bar_title, null);
19.
getActionBar().setCustomView(viewTitleBar, lp);
20.
getActionBar().setDisplayShowHomeEnabled(
false
);//去掉导航
21.
getActionBar().setDisplayShowTitleEnabled(
false
);//去掉标题
22.
getActionBar().setDisplayOptions(ActionBar.DISPLAY_SHOW_CUSTOM);
23.
getActionBar().setDisplayShowCustomEnabled(
true
);
24.
tvTitle = (TextView) getActionBar().getCustomView().findViewById(android.R.id.title);
25.
ImageButton ibtnNav = (ImageButton) getActionBar().getCustomView().findViewById(R.id.left_btn);
26.
ibtnNav.setOnClickListener(
new
View.OnClickListener() {
27.
@Override
28.
public
void
onClick(View v) {
29.
mDrawerToggle.switchDrawer();
30.
}
31.
});
32.
// MabDrawerToggle ties together the the proper interactions
33.
// between the sliding drawer and the action bar app icon
34.
mDrawerToggle =
new
MabDrawerToggle(
35.
this
,
/* host Activity */
36.
mDrawerLayout,
/* DrawerLayout object */
37.
R.drawable.ic_drawer,
/* nav drawer image to replace 'Up' caret */
38.
R.string.drawer_open,
/* "open drawer" description for accessibility */
39.
R.string.drawer_close
/* "close drawer" description for accessibility */
40.
);
41.
mDrawerLayout.setDrawerListener(mDrawerToggle);
42.
if
(savedInstanceState == null)
43.
{
44.
selectItem(0);
45.
}
46.
}
下面为两张运行效果图:
选择 Navigation 列表中的项后,切换 Fragment 以及 标题: