Material Design - DrawerLayout

2017-09-30 本文已影响0人 Arnold_J

关键字：DrawerLayout、材料设计
项目地址：AboutMaterialDesign
注意：代码基于 android.support.design 26.0.0

在材料设计出现之前，想要实现下面的布局，必须自定义实现，多亏了开源社区，那时候我们可以用 SlidingMenu 等优秀的第三方模块来实现相关功能。今天我们要介绍 google 推出的抽屉布局

效果图

一、从搬运官网代码开始

链接：官网链接，科学食用

抽屉式导航栏是一个面板，它将应用的主要导航选项显示在屏幕边缘。大多数情况下，它处于隐藏状态，但是如果用户从屏幕左边缘滑动手指，它就会显示出来。

抽屉式导航栏设计
决定在应用中使用抽屉式导航栏之前，应该了解抽屉式导航栏设计指南中定义的用例和设计原则。材料设计的原则如果想详细了解，还可以戳这里

1）创建简单抽屉布局

现在来创建一个简单的抽屉布局，要添加抽屉式导航栏，需要将包含 DrawerLayout 对象的用户界面声明为布局的根视图。在 DrawerLayout 内，添加一个包含屏幕主内容（当抽屉式导航栏处于隐藏状态时为主要布局）的视图和另一个包含抽屉式导航栏内容的视图。

<!--例如，以下布局使用包含两个子视图的 DrawerLayout：-->
<!--包含主内容的 FrameLayout（在运行时由 Fragment 填充）-->
<!--和抽屉式导航栏的 ListView-->
<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>

此布局演示了一些重要的布局特性：
1.主内容视图（上面的 FrameLayout）必须是第一个子视图，因为 XML 顺序意味着按 z 序（层叠顺序）排序，并且抽屉式导航栏必须位于内容顶部。主内容视图设置为匹配父视图的宽度和高度，因为在抽屉式导航栏处于隐藏状态时，它代表整个 UI。
2.抽屉式导航栏视图 (ListView) 必须使用 android:layout_gravity 属性指定其水平重力。要支持“从右到左”(RTL) 语言，请使用 "start"（而非 "left"）指定该值（这样当布局为 RTL 时，抽屉式导航栏会显示在右侧）。
3.抽屉式导航栏视图以 dp 为单位指定其宽度，且高度与父视图相匹配。抽屉式导航栏的宽度不应超过 320dp，从而用户始终可以看到部分主内容。

2）初始化抽屉式导航栏列表

直接贴代码了，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());

        ...
    }
}

3）监听打开和关闭事件

DrawerLayout.DrawerListener
监听的方法名也很人性，一看就懂

Type	Interface Discription
abstract void	onDrawerClosed(View drawerView)
abstract void	onDrawerOpened(View drawerView)
abstract void	onDrawerSlide(View drawerView,float slideOffset)
abstract void	onDrawerStateChanged(int newState)

onDrawerStateChanged 的对应值

Type	Name	Constant Discription
int	STATE_DRAGGING	Indicates that a drawer is currently being dragged by the user.
int	STATE_IDLE	Indicates that any drawers are in an idle, settled state. No animation is in progress.
int	STATE_SETTLING	Indicates that a drawer is in the process of settling to a final position.

---- 以上就是官网文档的全部内容，当然还有一点点关于 ActionBarDrawerToggle 的介绍，有兴趣可以自行了解。

二、简单的使用

其实最简单的使用官网已经列出了，按照上面的代码就可以写出一个最简单的抽屉布局。

三、更进一步，NavigationView

NavigationView 是 design 22.2.0 加入的一个新的类，如果支持包版本过低，是没有的。它的出现弥补了上面简单布局中实现 ListView 布局的繁琐，可以让我们快速实现抽屉栏的布局。(就像文章开头的效果一样)

贴上仓库的部分代码，如果全部代码，可以到仓库链接克隆。
链接：仓库传送门

<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_drawer_drawerlayoutId"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorPrimary"
    tools:context="com.arno.aboutmaterialdesign.drawerlayout.DrawerLayoutActivity">

    <!--主布局-->
    <include layout="@layout/content_drawerlayout_drawer"/>


    <!--抽屉布局-->
    <!--Attention:-->
    <!--android:layout_gravity="start" 属性一定要设置，这是作为抽屉的标志-->
    <!--这里的代码很可能没有联想，需要手动输入-->
    <android.support.design.widget.NavigationView
        android:id="@+id/activity_drawer_nav"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/header_drawerlayout"
        app:menu="@menu/menu_drawer"
        android:background="@color/colorPrimaryDark"
        ></android.support.design.widget.NavigationView>

</android.support.v4.widget.DrawerLayout>

使用 NavigationView 会有这样的问题：

1.item 设置的图片没有色彩
2.取消滚动条的有效方法找不到
3.item 文字样式怎么设置

//去除滚动条
mNavigationView.getChildAt(0).setVerticalScrollBarEnabled(false);
//设置图片有色彩
mNavigationView.setItemIconTintList(null);
//设置文字颜色
mNavigationView.setItemTextColor(getResources().getColorStateList(R.color.selector_nav_menu_item));
//设置文字其他样式
mNavigationView.setItemTextAppearance(R.style.main_nav_menu_item_text_appearance);

NavigationView 有一个内部的监听方法：

NavigationView.OnNavigationItemSelectedListener

另，menu 和 header 除了像上面那样在 xml 中设置，也可以在代码里设置：

//Header 相关
addHeaderView(View v)
inflateHeaderView(int res)
getHeaderCount()
getHeaderView(int index)
removeHeaderView(View v)

//Menu 相关
getMenu()
inflateMenu()

也许你会觉得，好像哪里还有点不如意，不如看看 Menu 这个文件的属性，是不是能帮到你
链接：Menu 科学食用口味更佳

---- 以上就是全部内容