Navigation Drawer,我暂且把它翻译成“侧拉导航栏”。本文根据Android官方Training文档翻译而成,只是分享怎么使用Drawer Layout,可以翻墙的可直接转到官网去瞧瞧:点击打开链接,先上效果图:
一看到图是不是有一种熟悉的感觉,没错这就是侧拉导航栏,这种需求在很多App都有它的身影。用Android Studio新建Project的时候,选择Navigation Drawer Activity,就可以直接新建一个自带侧拉导航栏Activity的Project,本文的效果图也是如此得来的,看到这是不是觉得可以走人了?.......先别走....至少给个赞吧!
好了不扯了,老板,上菜!侧拉导航栏的作用相信不用我多说了,那么下面就直接上代码,看看是怎么实现的,同样的,本文的所有代码也都来自Android官网的Training文档,先来看布局的实现。
<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">
<!-- The main content view -->
<FrameLayout
android:id="@+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- The navigation drawer -->
<ListView android:id="@+id/left_drawer"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:divider="@android:color/transparent"
android:dividerHeight="0dp"
android:background="#111"/>
</android.support.v4.widget.DrawerLayout>
是的,这样就实现了从左侧拉出一个ListView的效果,代码虽然不多,但还是有些地方需要注意的:
1>主View必须是drawerLayout.xml里的第一个child view,对应上面代码指的是<FrameLayout/>。这也不难理解,用户不侧拉才是常态,当用户没有发生侧拉时,主界面需要像正常的Activity那样显示。
2>主View的width和height必须设置成match_parent,这是因为当drawerView隐藏的时候,主View代表了整个UI界面,就像MainActivity那样。
3>drawerView (对应上面代码是ListView) 必须通过android:layout_gravity来设置horizontal gravity,这样drawerView才可以识别侧拉的动作,如上面代码中android:layout_gravity="start" 。
4>drawerView设置width时的单位是dp(因为平时我们用px也可以),而且它的height必须跟它的parent view对齐,width要超过320dp,不然的话看起来就像主view一样了。
布局文件已经搞定了,接下来看看MainActivity里这样去实现,首先是初始化drawer view中的listView,代码如下:
public class MainActivity extends Activity {
private String[] mPlanetTitles;
private DrawerLayout mDrawerLayout;
private ListView mDrawerList;
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mPlanetTitles = getResources().getStringArray(R.array.planets_array);
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerList = (ListView) findViewById(R.id.left_drawer);
// Set the adapter for the list view
mDrawerList.setAdapter(new ArrayAdapter<String>(this,
R.layout.drawer_list_item, mPlanetTitles));
// Set the list's click listener
mDrawerList.setOnItemClickListener(new DrawerItemClickListener());
...
}
}
其实跟我们平时使用listView是一样一样的,眼细的同学可能会发现最后一行代码里的DrawerItemClickListener()里面是怎么样的呢?下面就贴出 DrawerItemClickListener的代码:
private class DrawerItemClickListener implements ListView.OnItemClickListener {
@Override
public void onItemClick(AdapterView parent, View view, int position, long id) {
selectItem(position);
}
}
/** Swaps fragments in the main content view */
private void selectItem(int position) {
// Create a new fragment and specify the planet to show based on position
Fragment fragment = new PlanetFragment();
Bundle args = new Bundle();
args.putInt(PlanetFragment.ARG_PLANET_NUMBER, position);
fragment.setArguments(args);
// Insert the fragment by replacing any existing fragment
FragmentManager fragmentManager = getFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.content_frame, fragment)
.commit();
// Highlight the selected item, update the title, and close the drawer//当Item被点击时,Item的背景色会发生改变,随后把drawerview关掉
mDrawerList.setItemChecked(position, true);
setTitle(mPlanetTitles[position]);
mDrawerLayout.closeDrawer(mDrawerList);
}
@Override
public void setTitle(CharSequence title) {
mTitle = title;
getActionBar().setTitle(mTitle);
}
上面代码实现的功能,当把侧拉导航栏拉出来之后,点击listView上的Item,Item是背景色发生改变(说明是对应Item被点击了),然后主View换成对应需要展示的Fragment,并把侧拉导航栏关闭(也就是缩回去)。这里的点击事件当然可以按照个人意愿去写,这段代码只是向大家说明如何设置drawerview中的点击事件。
设置侧拉导航栏打开和关闭的事件监听,这里先跟大家说一说ActionBarDrawerToggle这个类,Android官方Reference文档中说这个类是要来处理ActionBar和DrawerLayout之间的切换关系的,因为除了通过手势侧拉出导航栏,还可以点击ActionBar上的某个Icon来触发drawer view,直接上代码看看呗
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
private CharSequence mDrawerTitle;
private CharSequence mTitle;
...
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
...
mTitle = mDrawerTitle = getTitle();
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout,
R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
invalidateOptionsMenu(); // creates call to onPrepareOptionsMenu()
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
}
/* Called whenever we call invalidateOptionsMenu() */
@Override
public boolean onPrepareOptionsMenu(Menu menu) {
// If the nav drawer is open, hide action items related to the content view
boolean drawerOpen = mDrawerLayout.isDrawerOpen(mDrawerList);
menu.findItem(R.id.action_websearch).setVisible(!drawerOpen);
return super.onPrepareOptionsMenu(menu);
}
}
ActionBarDrawerToggle()里面是要传参的,参数说明如下:
public ActionBarDrawerToggle (Activity activity, DrawerLayout drawerLayout, int drawerImageRes, int openDrawerContentDescRes, int closeDrawerContentDescRes)
Activity不用说了吧,DrawerLayout就是我们的drawer view即xml里面那个,drawerImageRes就是触发drawer view的那个Icon,至于openDrawerContentDescRes和close DrawerContentDescRes则分别对应两个String类型的“open drawer” ,“close drawer”。
前面也说到,可以用Android Studio直接新建自带drawer view的Activity,说这个有什么卵用?那就看看Android Studio的厉害
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(
this, drawer, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
drawer.setDrawerListener(toggle);
toggle.syncState();
是的,这几行就代替了上面的好多行...........
刚才也说到,其实大部分的侧拉导航栏都是点击ActionBar上的Icon触发的,那就看看这样写的代码咯:
public class MainActivity extends Activity {
private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle;
...
public void onCreate(Bundle savedInstanceState) {
...
mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
mDrawerToggle = new ActionBarDrawerToggle(
this, /* host Activity */
mDrawerLayout, /* DrawerLayout object */
R.drawable.ic_drawer, /* nav drawer icon to replace 'Up' caret */
R.string.drawer_open, /* "open drawer" description */
R.string.drawer_close /* "close drawer" description */
) {
/** Called when a drawer has settled in a completely closed state. */
public void onDrawerClosed(View view) {
super.onDrawerClosed(view);
getActionBar().setTitle(mTitle);
}
/** Called when a drawer has settled in a completely open state. */
public void onDrawerOpened(View drawerView) {
super.onDrawerOpened(drawerView);
getActionBar().setTitle(mDrawerTitle);
}
};
// Set the drawer toggle as the DrawerListener
mDrawerLayout.setDrawerListener(mDrawerToggle);
getActionBar().setDisplayHomeAsUpEnabled(true);
getActionBar().setHomeButtonEnabled(true);
}
@Override
protected void onPostCreate(Bundle savedInstanceState) {
super.onPostCreate(savedInstanceState);
// Sync the toggle state after onRestoreInstanceState has occurred.
mDrawerToggle.syncState();
}
@Override
public void onConfigurationChanged(Configuration newConfig) {
super.onConfigurationChanged(newConfig);
mDrawerToggle.onConfigurationChanged(newConfig);
}
@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Pass the event to ActionBarDrawerToggle, if it returns
// true, then it has handled the app icon touch event
if (mDrawerToggle.onOptionsItemSelected(item)) {
return true;
}
// Handle your other action bar items...
return super.onOptionsItemSelected(item);
}
...
}
到这里,已经把Android官网上Drawer Layout的Training全部搬过来了,第一篇博客就这样渣渣的写完了................................