剑客
关注科技互联网

Drawer 详解 ·Material Design Part 3

Drawer 详解 ·Material Design Part 3

这是一个系列文章,在这个系列里,我会按打造一个Material Design App的路线介绍所有应当掌握和值得掌握的系统组件。

你会在这些文章里了解到这些组件的使用和内部实现原理,以及它们背后所反映的Material Design的设计思想,希望你会喜欢。

往期回顾

Material Design Part 1 · TextInput详解

Material Design Part 2 · Toolbar详解

Tips

我的每一篇博客都会提供详尽的API介绍,如果你想快速查阅某个功能的API或如何实现,建议Ctrl+F(Commad+F)在本页面搜索关键字查找。

Thanks for reading~!

前言

上一篇我介绍了有关Toolbar的知识点,在Toolbar的最左侧,可以有一个导航按钮的存在,它可以是一个向上键,可以是个菜单开关或者其他任何的样式。

通常在App首页,我们更多的见到它以一个菜单样式的图案呈现,点击该按钮,会从App的侧边弹出一个新页面,我们称之为“抽屉”。

Drawer 详解 ·Material Design Part 3 在这篇文章里,我会 介绍抽屉在APP中的作用,以及如何通过 Drawerlayout&NavigationView来实现抽屉,顺便说下我采用的抽屉菜单延伸至状态栏的方法。

目录

  1. Navigation Drawer简介
  2. DrawerLayout详解
  3. 代码示例(一)
  4. NavigationView介绍
  5. 将DrawerLayout延伸至状态栏
  6. 代码示例(二)
  7. 几句额外的

Navigation Drawer简介

就像我一直强调的, Material Design的世界就是一个真实世界的缩影。一个优秀的Material Design组件,要么反映了真实世界里事物的功能和特性,要么反映了真实世界里的行为逻辑。

举个例子,大家都使用过抽屉,我们通常会将 比较常用但又不需要每时每刻都使用 的东西放在抽屉里。在需要的时候,我们能准确且稳定地在指定地点找到;不需要的时候可以很好地隐藏和存放,不占用更多的可见空间。在我们的app里,也一定有数个这样的操作入口:它们 比较常用但又不需要每时每刻都看见 。这时,我们自然就需要一个地方来存放它们,这就是我今天想要介绍的“抽屉导航栏”。

为了实现这样的效果,Android官方提供了 DrawerLayout ,通过它我们便可以轻松创造出一个“抽屉”,下面就让我们一起来详细了解一下它。

DrawerLayout详解

首先是使用,DrawerLayout的使用可以非常简单,仅需要如下的XML代码便能实现两侧都可以拉出抽屉的效果:

<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">
    <!-- 主内容 -->
    <LinearLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 抽屉导航栏1 -->
    <RelativeLayout android:id="@+id/left_drawer"
        android:layout_width="240dp"
        android:layout_height="100dp"
        android:layout_gravity="start"/>

    <!-- 抽屉导航栏2 -->
    <RelativeLayout android:id="@+id/right_drawer"
        android:layout_width="240dp"
        android:layout_height="match_parent"
        android:layout_gravity="end"/>

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

不过我们还是需要记住几点:

  1. 在Drawerlayout中, 主内容视图必须是第一个子视图 。因为XML里是按层叠顺序进行排序的,后面的内容会盖过前面的内容,而抽屉视图应位于页面顶部。
  2. 抽屉视图必须通过"android:layout_gravity"指定其重心位置 ,建议使用"start"&"end"来支持RTL(从右到左)语言。
  3. 主内容视图的长宽都应“match_parent”,因为当抽屉收起时它代表整个UI界面。
  4. 抽屉部分的高度应设为match_parent,而宽度不应超过320dp,以便让用户仍可以看到部分主内容。

当然,仅仅只是这样对我们的日常开发显然是不够的,我们需要对Drawerlayout有更多的细节处的掌控,对此Drawerlayout提供了简便的API,下面我们就来了解一下。

常用方法详解

  • openDrawer()方法用于打开“抽屉”,有四种参数形式:
    • (View drawerView): 打开传入的抽屉视图。
    • (int gravity): 打开传入的相应gravity上的抽屉视图。
    • (View drawerView, boolean animate): 打开传入的抽屉视图,第二个参数用于控制是否开启视图滑入动画。
    • (int gravity, boolean animate): 打开传入的相应gravity上的抽屉视图,第二个参数用于控制是否开启视图滑入动画。
  • closeDrawer()方法用于关闭“抽屉”,有四种参数形式:
    • closeDrawer(View drawerView): 关闭传入的抽屉视图。
    • closeDrawer(int gravity): 关闭传入的相应gravity上的抽屉视图。
    • closeDrawer(View drawView, boolean animate): 关闭传入的抽屉视图,第二个参数用于控制是否开启视图退出动画。
    • closeDrawer(int gravity, boolean animate): 关闭传入的相应gravity上的抽屉视图,第二个参数用于控制是否开启视图退出动画。
  • closeDrawers(): 关闭所有的抽屉视图。
  • setDrawerTitle(int edgeGravity, CharSequence title): 依据传入的gravity来给相应的Drawer设置title,设置title的目的是用于无障碍服务(Accessibility Service)。
  • CharSequence getDrawerTitle(int edgeGravity): 依据传入的gravity来获取相应Drawer的title。
  • setDrawerElevation(float elevation): 设置抽屉视图的Z轴高度,带来的视觉上的变化为 抽屉视图的阴影发生了改变
  • float getDrawerElevation(): 用于获取抽屉视图的Z轴高度,返回值为float型。
  • boolean isDrawerOpen(View drawer / int drawerGravity): 根据传入的参数判断相应的Drawer是否处于开启状态。
  • boolean isDrawerVisible(View drawer / int drawerGravity): 根据传入的参数判断相应的Drawer当前在屏幕上是否可见。
  • setScrimColor(int color): 设置当抽屉打开时,未被抽屉遮住部分的颜色。
  • setDrawerLockMode(int lockMode / int lockMode,View drawerView / int lockMode, int edgeGravity): 该方法用于设置抽屉的锁定模式,只传入锁定模式而不指定是哪个抽屉则会将两侧的抽屉都设置一遍。
    锁定模式有四种:
    • LOCK_MODE_LOCKED_CLOSED:关闭抽屉的滑动操作并将抽屉收起
    • LOCK_MODE_LOCKED_OPEN:关闭抽屉的滑动操作并将抽屉打开
    • LOCK_MODE_UNDEFINED:将锁定模式重新设置到默认状态
    • LOCK_MODE_UNLOCKED:解锁对抽屉的滑动操作锁定
      注: 关闭抽屉的滑动操作即使

      通过滑动 打开/关闭 抽屉的操作失效

  • addDrawerListener(DrawerLayout.DrawerListener listener): 为Drawerlayout添加监听器监听抽屉的开启关闭等事件。
  • removeDrawerListener(DrawerLayout.DrawerListener listener): 移除传入的DrawerLayout的相应监听器。

Drawer监听器

上面的常用API介绍最后两条提到了为DrawerLayout添加监听器,下面就来介绍一下Drawer的监听器——DrawerListener。

该接口提供了四个回调方法供复写,分别是:

  • onDrawerOpened: 当抽屉处于完全打开的状态时该方法会被回调
  • onDrawerClosed: 当抽屉处于完全关闭的状态时该方法会被回调
  • onDrawerSlide: 当抽屉被滑动时该方法会回调
  • onDrawerStateChanged: 当抽屉的状态发生变化时该方法会被回调

使用DrawerListener需要将以上四个方法都实现,但如果你只需要对其中的个别方法增加逻辑话,你可以使用 SimpleDrawerListener ,它继承自DrawerListener,不需要你实现全部四个方法而是只需复写你需要用到的方法。

ActionBarDrawerToggle

如果你的页面包含了Toolbar(ActionBar),那么我更建议你使用ActionBarDrawerToggle。从它的名字也可以看出,这是当我们需要将ActionBar和Drawer结合使用的最佳途径。

首先, ActionBarDrawerToggle该类实现了DrawerListener接口 ,所以其实你可以直接将它当作DrawerListener来使用,它能做到DrawerListener可以做的任何事。同时,会有一个抽屉样式的indicator位于Toolbar(ActionBar)上,根据抽屉的打开和关闭,会有一个很自然的演变动画给予用户当前抽屉开或闭的明确提示。当然,如果你不想要那个图标,也可以自己指定一个新的图案(详情见常用方法介绍)。

需要注意两点:

  1. 该类应配合 onConfigurationChanged()onOptionsItemSelected() 使用,具体原因我直接在下面代码的注释里写吧
  2. 如果使用了该类,应在 onPostCreate() 方法里调用 syncState() 来将指示器(indicator)的状态和Drawer同步。

常用方法

  • boolean isDrawerIndicatorEnabled(): 返回当前指示器是否可用(可见)
  • setDrawerIndicatorEnabled(boolean enable): 设置指示器是否可用(可见)
  • setHomeAsUpIndicator(Drawable indicator / int resId):默认的指示器不可用时 为Drawer设置一个新的指示器
  • setToolbarNavigationClickListener(View.OnClickListener onToolbarNavigationClickListener): 为指示器绑定点击事件监听

代码示例(一)

效果图

Drawer 详解 ·Material Design Part 3

效果视频

Drawer详解·效果视频1—在线播放—优酷网,视频高清在线观看 http://v.youku.com/v_show/id_XMTgxNDU3ODc2OA==.html

activity_layout.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/activity_drawer_test"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include layout="@layout/content_toolbar" />

    <android.support.v4.widget.DrawerLayout
        android:id="@+id/drawer_layout"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <!--主内容-->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="设置蒙板颜色"
                android:textColor="@color/textPrimary"
                android:textSize="30sp" />

            <RadioGroup
                android:id="@+id/radio_group"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginBottom="30dp">

                <RadioButton
                    android:id="@+id/red_rbtn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="红色"
                    android:textColor="@color/colorRed"
                    android:textSize="32sp" />

                <RadioButton
                    android:id="@+id/green_rbtn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="绿色"
                    android:textColor="@color/colorGreen"
                    android:textSize="32sp" />

                <RadioButton
                    android:id="@+id/purple_rbtn"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="紫色"
                    android:textColor="@color/colorPurpleLight"
                    android:textSize="32sp" />
            </RadioGroup>

        </LinearLayout>


        <!-- 抽屉导航栏1 -->
        <LinearLayout
            android:id="@+id/left_drawer"
            android:layout_width="400dp"
            android:layout_height="300dp"
            android:layout_gravity="start"
            android:background="@color/colorPrimaryLight"
            android:gravity="center"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="左侧导航栏"
                android:textColor="@color/textPrimary"
                android:textSize="30sp" />

            <Button
                android:id="@+id/close_start_drawer_btn"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="关闭" />
        </LinearLayout>

        <!-- 抽屉导航栏2 -->
        <RelativeLayout
            android:id="@+id/right_drawer"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_gravity="end"
            android:background="@color/colorAccent">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="右侧导航栏"
                android:textColor="@color/textPrimary"
                android:textSize="30sp" />
        </RelativeLayout>
    </android.support.v4.widget.DrawerLayout>

</LinearLayout>

Activity.java

public class DrawerTestActivity extends AppCompatActivity {

    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.radio_group)
    RadioGroup radioGroup;
    @BindView(R.id.drawer_layout)
    DrawerLayout drawerLayout;
    @BindView(R.id.close_start_drawer_btn)
    Button closeStartDrawerBtn;
    @BindView(R.id.left_drawer)
    LinearLayout leftDrawer;

    private ActionBarDrawerToggle mToggle;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_test);
        ButterKnife.bind(this);
        setSupportActionBar(toolbar);

        //配置ActionBarDrawerToggle
        toggleSettings();

        //配置RadioButton
        scrimColorSettings();
    }

    private void toggleSettings() {
        mToggle = new ActionBarDrawerToggle(this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawerLayout.addDrawerListener(mToggle);
        mToggle.syncState();
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        mToggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        mToggle.onConfigurationChanged(newConfig);
    }


    private void scrimColorSettings() {
        radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                switch (checkedId) {
                    case R.id.red_rbtn:
                        drawerLayout.setScrimColor(getResources().getColor(R.color.colorRed));
                        break;
                    case R.id.green_rbtn:
                        drawerLayout.setScrimColor(getResources().getColor(R.color.colorGreen));
                        break;
                    case R.id.purple_rbtn:
                        drawerLayout.setScrimColor(getResources().getColor(R.color.colorPurpleLight));
                        break;
                }
            }
        });
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.activity_drawer_test_menu, menu);
        return super.onCreateOptionsMenu(menu);
    }

    @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 (mToggle.onOptionsItemSelected(item)) {
            return true;
        }
        switch (item.getItemId()) {
            case R.id.action_drawers_close:
                drawerLayout.closeDrawers();
                break;
            case R.id.action_drawer_locked_close:
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_CLOSED);
                break;
            case R.id.action_drawer_locked_open:
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_LOCKED_OPEN);
                break;
            case R.id.action_drawer_unlocked:
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNLOCKED);
                break;
            case R.id.action_drawer_reset:
                drawerLayout.setDrawerLockMode(DrawerLayout.LOCK_MODE_UNDEFINED);
                break;
        }
        return super.onOptionsItemSelected(item);
    }

    @Override
    public void onBackPressed() {
        if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
            drawerLayout.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @OnClick(R.id.close_start_drawer_btn)
    public void onClick() {
        drawerLayout.closeDrawer(leftDrawer);
    }
}

NavigationView介绍

我们已经知道了如何使用DrawerLayout在侧边弹出页面,接下来我们就要实现抽屉的具体效果了。那么在Material Design里,对抽屉的具体细节要求都是什么呢?看图…
Drawer 详解 ·Material Design Part 3

有如此细节的要求,自然应该有个实现这些细节的组件配合。为此,Google提供了NavigationView组件,将NavigationView与Drawerlayout配合使用,我们便可以轻松实现抽屉菜单。

NavigationView可分为两部分——头部布局和菜单点击项布局。由于NavigationView使用比较简单和呆板,我决定尝试FAQ的方式来介绍这个组件的使用。

FAQ

  1. 如何指定头布局和菜单点击项布局?
    答:可在XML布局里使用 app:headerLayout="@layout/layout文件" 来指定头布局,使用 app:menu="@menu/menu文件" 来指定菜单点击项;
    在Java代码里可以使用 inflateHeaderView(View view) 来指定头布局,使用 inflateMenu(int resId) 来指定菜单布局。
  2. 如何监听和处理菜单点击事件?
    NavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                    //在此根据每个item的id处理相应的逻辑即可
                    return true;
                }
            });
  3. 如何改变菜单中图标的颜色?
    答: app:itemIconTint="@color/颜色"
  4. 如何让菜单中的图标颜色还原成原本真实的颜色?
    答:

    NavigationView.setItemIconTintList(null)

  5. 如何设置头部布局中的控件点击事件?
    答:首先,使用NavigationView .getHeaderView(0) 获得头部布局,然后使用该布局的findViewById()获取相应控件绑定点击事件即可。

以上是使用NavigationView通常会遇到的问题,如果你还有其他的问题,欢迎在评论里交流。如果你还是对它的使用觉得云里雾里,那么看我最后的代码吧~:blush:

将DrawerLayout延伸至状态栏

这是一个引起过广泛讨论的问题,有关于这方面的文章和问题也有很多,当然也有不止一种解决方案,我采用的解决思路是:

  1. 将状态栏设为透明
  2. 根据StatusBar的值为Toolbar设置相应的paddingTop
  3. 为作为根布局的DrawerLayout设置 setFitsSystemWindows(true)
  4. 为作为根布局的Drawerlayout设置

    setClipToPadding(false)

有关setFitsSystemWindows(true)和setClipToPadding(false)的知识点,可以看 Why would I want to fitsSystemWindows? ,这篇文章特地针对Drawerlayout讲得非常清楚,同时该文已经有人进行了翻译,链接也在此附上 中文翻译版

具体实现和效果请看下面的代码示例。

代码示例(二)

效果图(Android 4.4)

Drawer 详解 ·Material Design Part 3 效果图(Android 7.0)

5.0以上都一样,就不全放了。

Drawer 详解 ·Material Design Part 3 layout.xml

<?xml version="1.0" encoding="utf-8"?>
<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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:openDrawer="start">

    <include
        layout="@layout/content_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:background="@color/colorBlueGrey"
        app:headerLayout="@layout/nav_header_drawer_demo"
        app:itemBackground="@color/colorYellowLight"
        app:itemIconTint="@color/colorRed"
        app:itemTextColor="@color/colorGreen"
        app:menu="@menu/activity_drawer_demo_drawer" />

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


content_main.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?actionBarSize"
            android:paddingTop="@dimen/status_bar_height"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />

    </android.support.design.widget.AppBarLayout>
</LinearLayout>

这里的dimen根据v23来区分即可。

Activity.java

public class DrawerDemoActivity extends AppCompatActivity
        implements NavigationView.OnNavigationItemSelectedListener {

    ActionBarDrawerToggle toggle;

    @BindView(R.id.toolbar)
    Toolbar toolbar;
    @BindView(R.id.nav_view)
    NavigationView navView;
    @BindView(R.id.drawer_layout)
    DrawerLayout drawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_drawer_demo);
        ButterKnife.bind(this);
        setSupportActionBar(toolbar);

        handlingStatusBar();
        toggleSettings();
        navView.setNavigationItemSelectedListener(this);

    }

    /**
     * 说明:DrawerLayout延伸至StatusBar并正常显示
     */
    private void handlingStatusBar() {
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
            WindowManager.LayoutParams localLayoutParams = getWindow().getAttributes();
            localLayoutParams.flags = (WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS | localLayoutParams.flags);

            drawerLayout.setFitsSystemWindows(true);
            drawerLayout.setClipToPadding(false);
        }
    }



    /**
     * 说明:配置ActionBarDrawerToggle
     */
    private void toggleSettings() {
        toggle = new ActionBarDrawerToggle(
                this, drawerLayout, toolbar, R.string.navigation_drawer_open, R.string.navigation_drawer_close);
        drawerLayout.addDrawerListener(toggle);
        toggle.syncState();
    }


    @Override
    public void onBackPressed() {
        DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
        if (drawer.isDrawerOpen(GravityCompat.START)) {
            drawer.closeDrawer(GravityCompat.START);
        } else {
            super.onBackPressed();
        }
    }

    @SuppressWarnings("StatementWithEmptyBody")
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        // Handle navigation view item clicks here.
        int id = item.getItemId();

        if (id == R.id.nav_camera) {

        } else if (id == R.id.nav_gallery) {

        } else if (id == R.id.nav_slideshow) {

        } else if (id == R.id.nav_manage) {

        } else if (id == R.id.nav_share) {

        } else if (id == R.id.nav_send) {

        }

        drawerLayout.closeDrawer(GravityCompat.START);
        return true;
    }

    @Override
    protected void onPostCreate(Bundle savedInstanceState) {
        super.onPostCreate(savedInstanceState);
        // Sync the toggle state after onRestoreInstanceState has occurred.
        toggle.syncState();
    }

    @Override
    public void onConfigurationChanged(Configuration newConfig) {
        super.onConfigurationChanged(newConfig);
        toggle.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 (toggle.onOptionsItemSelected(item)) {
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

几句额外的

从Bottom Navigation加入MD规范开始,我就看到过有关“抛弃Drawer”的说法,最近又看到了几篇这样的文章。其中不乏一些好的思考,但有些观点还是过于激进了,甚至有些人云亦云。这里想分享下自己的看法:

首先,我们在 设计产品的时候,做出的一切决定都应该基于产品本身 :当前页面的业务场景是什么,什么才是最符合需求的交互形式? 至于组件和界面只是产品的呈现手段和方式,最终目的都是为了给出一个最符合需求的产品。

再者,在学习和遵循Material Design时,除了知道怎么使用各种组件, 更应该理解这些组件真正的作用是什么,设计思想是什么 。只有这样,我们才能在设计APP时做出更加正确的决定。 一个符合Material Design的APP绝不会是由各种MD组件随意堆砌而成的。 至于说到抛弃Drawer,我认为更是完全没有必要,不然你看看Android 7.0的设置界面?

下一篇我会介绍有关 Bottom Navigation 的知识点,也算是个对比。希望看完这两篇后,能够帮助你在构思界面时做出更好的决定。

参考文章

Creating a Navigation Drawer | Android官方文档

DrawerLayout | Android官方文档

Why would I want to fitsSystemWindows?

http:// weixin.qq.com/r/yTgrM-D ESK03rbRQ923b (二维码自动识别)

微信公众号: BugDev「bugdev」

欢迎关注啦~

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址