Android抽屉效果 DrawerLayout 入门经验总结

今天试了试这个抽屉布局的效果,结果很崩溃无语

网上很多资料都千篇一律,感觉都有问题,下面总结下几点经验:

先上个效果图:

Android抽屉效果 DrawerLayout 入门经验总结

1.  layout 布局文件中怎么写:

<android.support.v4.widget.DrawerLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/drawerLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#F6F6F6"
>
<!-- 抽屉底部遮罩层 默认不可见 -->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<!-- 抽屉打开后显示的菜单 默认不可见 -->
<ListView
android:id="@+id/drawerListView"
android:layout_width="240dp"
android:layout_height="match_parent"
android:layout_gravity="start"
android:choiceMode="singleChoice"
android:background="#FFF"
/>
<!-- 其他页面内容将直接显示 -->
<android.support.v4.view.ViewPager
android:id="@+id/main_view_pager"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
</android.support.v4.view.ViewPager>
</android.support.v4.widget.DrawerLayout>

要兼容低版本的话用  android.support.v4.widget.DrawerLayout

里面固定的结构:

第一个子节点是:FrameLayout  显示为透明黑色遮罩,点击后自动关闭抽屉,不写也能运行,但触屏时会崩溃

第二个子节点是:ListView

这两个默认是不显示的,其他布局视图都会直接显示出来

我一开始看了网上很多例子,但都没有提说到除了抽屉的布局视图之外的视图究竟放哪里,我尝试了很多方法,发现只能将其他布局视图代码放在 DrawerLayout 内部才能正常使用,否则要么是相互覆盖,或者就是触屏事件失效,滚动等效果全部失效。

2. JAVA代码

package com.ai9475.meitian.ui;

import android.content.Intent;
import android.content.res.Configuration;
import android.os.Bundle;
import android.support.v4.app.ActionBarDrawerToggle;
import android.support.v4.view.GravityCompat;
import android.support.v4.widget.DrawerLayout;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView; import com.ai9475.meitian.R;
import com.ai9475.util.ZLog;
import com.joanzapata.android.iconify.IconDrawable;
import com.joanzapata.android.iconify.Iconify; /**
* 日记列表
* Created by ZHOUZ on 14-3-10.
*/
public final class MainActivity extends BaseActivity
{
private static final String TAG = "MainActivity"; private DrawerLayout mDrawerLayout;
private ActionBarDrawerToggle mDrawerToggle; @Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
ZLog.i(TAG, "onCreate");
setContentView(R.layout.activity_main); getSupportActionBar().setDisplayHomeAsUpEnabled(true);
getSupportActionBar().setHomeButtonEnabled(true); String[] list = new String[]{"test1", "test2", "test3", "test4", "test5", "test6", "test7", "test8"};
ListView listView = (ListView) findViewById(R.id.drawerListView);
listView.setAdapter(new ArrayAdapter<String>(this, R.layout.list_drawer_item, list)); mDrawerLayout = (DrawerLayout) findViewById(R.id.drawerLayout);
mDrawerLayout.setDrawerShadow(R.drawable.drawer_shadow, GravityCompat.START);
if (mDrawerLayout == null) {
ZLog.i(TAG, "mDrawerLayout is null");
}
mDrawerToggle = new ActionBarDrawerToggle(this, mDrawerLayout, R.drawable.ic_drawer, R.string.drawer_open, R.string.drawer_close) {
@Override
public void onDrawerClosed(View drawerView) {
ZLog.i(TAG, "onDrawerClosed");
super.onDrawerClosed(drawerView);
getSupportActionBar().setTitle("close drawer");
supportInvalidateOptionsMenu();
} @Override
public void onDrawerOpened(View drawerView) {
ZLog.i(TAG, "onDrawerOpened");
super.onDrawerOpened(drawerView);
getSupportActionBar().setTitle("open drawer");
supportInvalidateOptionsMenu();
}
};
mDrawerLayout.setDrawerListener(mDrawerToggle); } @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 onCreateOptionsMenu(Menu menu)
{
super.onCreateOptionsMenu(menu);
getMenuInflater().inflate(R.menu.main, menu);
MenuItem home = menu.findItem(R.id.goto_main_activity);
if (home != null) {
home.setIcon(new IconDrawable(this, Iconify.IconValue.fa_home)
.colorRes(R.color.nav_icon)
.actionBarSize());
}
MenuItem my = menu.findItem(R.id.goto_my_activity);
if (my != null) {
my.setIcon(new IconDrawable(this, Iconify.IconValue.fa_user)
.colorRes(R.color.nav_icon)
.actionBarSize());
}
MenuItem tags = menu.findItem(R.id.goto_tags_activity);
if (tags != null) {
tags.setIcon(new IconDrawable(this, Iconify.IconValue.fa_search)
.colorRes(R.color.nav_icon)
.actionBarSize());
}
MenuItem edit = menu.findItem(R.id.goto_edit_activity);
if (edit != null) {
edit.setIcon(new IconDrawable(this, Iconify.IconValue.fa_plus)
.colorRes(R.color.nav_icon)
.actionBarSize());
}
MenuItem more = menu.findItem(R.id.show_more_menu);
if (more != null) {
more.setIcon(new IconDrawable(this, Iconify.IconValue.fa_ellipsis_vertical)
.colorRes(R.color.nav_icon)
.actionBarSize());
}
MenuItem exit = menu.findItem(R.id.goto_exit);
if (exit != null) {
exit.setIcon(new IconDrawable(this, Iconify.IconValue.fa_sign_out)
.colorRes(R.color.nav_icon)
.actionBarSize());
}
return true;
} @Override
public boolean onOptionsItemSelected(MenuItem item)
{
if (item != null && item.getItemId() == android.R.id.home) {
if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) {
mDrawerLayout.closeDrawer(GravityCompat.START);
} else {
mDrawerLayout.openDrawer(GravityCompat.START);
}
return true;
}
super.onOptionsItemSelected(item);
int id = item.getItemId();
Intent intent;
switch (id) {
case R.id.goto_my_activity:
if (this.checkLogin(MyActivity.class)) {
intent = new Intent(this, MyActivity.class);
startActivity(intent);
}
break;
}
return true;
}
}

我使用了 actionBar ,网上的很多教程都提到使用 actionBar 的 home 按钮来控制 抽屉的打开和关闭,但却都没有提到如何控制的,甚至官方例子里面也没有看到,我试了半天都没有触发 ActionBarDrawerToggle 里面的时间,后来好不容易找到一篇文章提说到自己实现控制开关抽屉的方法,于是加入该代码在 onOptionsItemSelected 中才终于实现了:

        if (item != null && item.getItemId() == android.R.id.home) {
if (mDrawerLayout.isDrawerVisible(GravityCompat.START)) {
mDrawerLayout.closeDrawer(GravityCompat.START);
} else {
mDrawerLayout.openDrawer(GravityCompat.START);
}
return true;
}

好了几经折腾终于能看到效果了,遮盖正常、VerPager 以及 pager 内部的 fragment中的 listView 的触屏滚动事件均正常

正以为大功告成的时候,又发现个无语的问题,抽屉里面的 ListView 居然不能滚动,卧槽啊。。。谷歌搜索了好半天没找到解决办法,实在顶不住了,放弃吧。。

话说这个抽屉效果太难看了,兼容性也太差了,问题这么多,还是那个 slidingMenu 好些。

还是暂时放弃这个 DrawerLayout 了,浪费生命

上一篇:DOM之通俗易懂讲解


下一篇:JavaScript实战(带收放动画效果的导航菜单)