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

2022-11-30 22:06:31

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

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

先上个效果图：

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 了，浪费生命

码农公寓

相关文章