Material Design 实战之第二弹——滑动菜单详解&实战（DrawerLayout & NavigationView）

2018-09-16 555

本模块共有六篇文章，参考郭神的《第一行代码》，对Material Design的学习做一个详细的笔记，大家可以一起交流一下：

文章提要与总结

1. DrawerLayout
        控件用处：实现滑动菜单

        1.1 首先它是一个布局，在布局中允许放入两个直接子控件，
        第一个子控件是主屏幕中显示的内容；
        第二个子控件是滑动菜单中显示的内容；
                关于第二个子控件有一点需要注意，layout_gravity这个属性是必须指定的：left   right   start
        
        1.2 添加导航按钮：

        1.2.1 首先调用findViewById()方法得到了DrawerLayout的实例；
        1.2.2 getSupportActionBar()方法得到了ActionBar的实例；
        1.2.3 调用ActionBar的setDisplayHomeAsUpEnabled()让导航按钮显示出来；
        1.2.4 调用了setHomeAsUpIndicator()方法来设置一个导航按钮图标；
        1.2.5 在onOptionsItemSelected()中对HomeAsUp按钮的点击事件进行处理——调用DrawerLayout的openDrawer()方法将滑动菜单展示出来；
                注意openDrawer(）方法要求传入一个Gravity参数，
            为了保证这里的行为和XML中（DrawerLayout标签下的第二个直接子控件的android:layout_gravity值）定义的一致，
            我们传入了GravityCompat.START；
        1.2.6 实际上Toolbar最左侧的这个按钮就叫作HomeAsUp按钮，它默认的图标是一个返回的箭头，含义是返回上一个活动；
              这里将其换了图标，并将逻辑响应修改了；
              HomeAsUp按钮的id永远都是android.R.id.home！！！

2. NavigationView
        控件用处：轻松布局华丽炫酷的滑动菜单页面；
        2.1 添加了两行依赖关系

                compile 'com.android.support:design:24.2.1'
                compile 'de.hdodenhof:circleimageview:2.1.0'

    2.2
          在开始使用NavigationView之前，我们还需要提前准备好两个东西：menu和headerLayout。
        2.2.1 menu是用来在NavigationView中显示具体的菜单项的；
                  为Menu resource file；
                  在<menu>中嵌套了一个<group>标签
                      <group>标签下的<item>:
                        android:id属性指定菜单项的id，
                        android:icon属性指定菜单项的图标，
                        android:title属性指定菜单项显示的文字。
        2.2.2 headerLayout则是用来在NavigationView中显示头部布局的。
                  为Layout resourcefile；
    2.3 使用NavigationView
            添加android.support.design.widget.NavigationView标签，

                使用app:menu="@menu/nav_menu"
                app:headerLayout="@layout/nav_header"
                将menu和headerLayout设置完毕

正文

最终成果图

DrawerLayout

关于滑动菜单和DrawerLayout，郭神如是说：

<?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"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="This is menu"
        android:textSize="30sp"
        android:background="#FFF"/>

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

可见这里最外层的控件使用了DrawerLayout，这个控件是由support-v4库提供的。

DrawerLayout中放置了两个直接子控件：
第一个子控件是FrameLayout，用于作为主屏幕中显示的内容，当然里面还有我们刚刚定义的Toolbar。
第二个子控件这里使用了一个TextView，用于作为滑动菜单中显示的内容，其实使用什么都可以，DrawerLayout并没有限制只能使用固定的控件。

但是关于第二个子控件有一点需要注意，layout_gravity这个属性是必须指定的，
因为我们需要告诉DrawerLayout滑动菜单是在屏幕的左边还是右边，
指定left表示滑动菜单在左边；
指定right表示滑动菜单在右边；
这里指定了start，表示会根据系统语言进行判断，如果系统语言是从左往右的，比如英语、汉语，滑动菜单就在左边，如果系统语言是从右往左的，比如阿拉伯语，滑动菜单就在右边。

现在重新运行一下程序，然后在屏幕的左侧边缘向右拖动，就可以让滑动菜单显示出来了，如图：

这里我们并没有改动多少代码，

首先调用findViewById()方法得到了DrawerLayout的实例，
然后调用getSupportActionBar()方法得到了ActionBar的实例，虽然这个ActionBar的具体实现是由Toolbar来完成的。
接着调用ActionBar的setDisplayHomeAsUpEnabled()方法让导航按钮显示出来，
又调用了setHomeAsUpIndicator()方法来设置一个导航按钮图标。

实际上，Toolbar最左侧的这个按钮就叫作HomeAsUp按钮，它默认的图标是一个返回的箭头，含义是返回上一个活动。很明显，这里我们将它默认的样式（该按钮图标）和作用（改/设置了按钮点击事件）都进行了修改。

接下来在onOptionsItemSelected()方法中对HomeAsUp按钮的点击事件进行处理，
HomeAsUp按钮的id永远都是android.R.id.home；

切记是android.R.id.home，如果写成R.id.home是实现不了功能的！

然后调用DrawerLayout的openDrawer()方法将滑动菜单展示出来；
注意openDrawer(）方法要求传入一个Gravity参数，为了保证这里的行为和XML中定义的一致，我们传入了GravityCompat.START；

当前MainActivity全文：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);//让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//设置一个导航按钮图标
        }

    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break;
            case R.id.backup:
                Toast.makeText(this,"You clicked Backup" , Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"You clicked Delete" , Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"You clicked Settings" , Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }

}

运行程序，效果如下：

可见在Toolbar的最左边出现了一个导航按钮，用户看到这个按钮就知道这肯定是可以点击的。
现在点击一下这个按钮，滑动菜单界面就会再次展示出来了。

NavigationView

首先这个控件是DesignSupport库中提供的，需要将这个库引入到项目中。
打开app/build.gradle文件，在dependencies闭包中添加依赖：

    compile 'com.android.support:design:24.2.1'
    compile 'de.hdodenhof:circleimageview:2.1.0'

这里添加了两行依赖关系，
第一行就是DesignSupport库，
第二行是一个开源项目CircleImageView，它可以用来轻松实现图片圆形化的功能，我们待会就会用到它。
CircleImageView的项目主页地址是：https://github.com/hdodenhof/CircleImageView。

！！！
在开始使用NavigationView之前，我们还需要提前准备好两个东西：menu和headerLayout。
menu是用来在NavigationView中显示具体的菜单项的；
headerLayout则是用来在NavigationView中显示头部布局的。

1/4.准备menu

我们先来准备menu，这里我事先找了几张图片来作为按钮的图标，并将它们放在了drawable-xxhdpi目录下。然后右击menu文件夹→New→Menu resource file，创建一个nav_menu.xml文件，并编写如下代码：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">
        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/nav_call"
            android:title="Call"/>
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="Friends"/>
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="Location"/>
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="Mail"/>
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="Tasks"/>
    </group>

</menu>

我们首先在<menu>中嵌套了一个<group>标签，
然后将group的checkableBehavior属性指定为singlegroup表示一个组，
checkableBehavior指定为single表示组中的所有菜单项只能单选；

那么下面我们来看一下这些菜单项吧。这里一共定义了5个item，
分别使用
android:id属性指定菜单项的id，
android:icon属性指定菜单项的图标，
android:title属性指定菜单项显示的文字。
就是这么简单，现在我们已经把menu准备好了。

2/4.准备headerLayout

接下来应该准备headerLayout了，这是一个可以随意定制的布局，不过这里不将它做得太复杂。我们就在headerLayout中放置头像、用户名、邮箱地址这3项内容吧；
说到头像，那我们还需要再准备一张图片，这里找了一张宠物图片，并把它放在了drawable-xxhdpi目录下。
另外这张图片最好是一张正方形图片，因为待会我们会把它圆形化。
然后右击layout文件夹→New→Layout resourcefile，创建一个nav_header.xml文件。
修改其中的代码，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:padding="10dp"
    android:background="?attr/colorPrimary">

    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/nav_icon"
        android:layout_centerInParent="true"/>

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="8267*****@qq.com"
        android:textColor="#FFF"
        android:textSize="14sp"/>

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/mail"
        android:text="wanchuangxiaoyun"
        android:textColor="#FFF"
        android:textSize="14sp"/>

</RelativeLayout>

可以看到，布局文件的最外层是一个RelativeLayout，我们将它的
宽度设为match_parent，
高度设为180dp，
这是一个NavigationView比较适合的高度，然后
指定它的背景色为colorPrimary；

在RelativeLayout中我们放置了3个控件，
CircleImageView是一个用于将图片圆形化的控件，它的用法非常简单，基本和ImageView是完全一样的，这里给它指定了一张图片作为头像，然后设置为居中显示。
另外两个TextView分别用于显示用户名和邮箱地址，它们都用到了一些RelativeLayout的定位属性；

3/4.使用NavigationView

现在menu和headerLayout都准备好了，我们终于可以使用NavigationView了。
修改activitymam.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"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header">

    </android.support.design.widget.NavigationView>

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

可见这里将之前的TextView换成了NavigationView，这样滑动菜单中显示的内容也就变成NavigationView了。
这里又通过app:menu和app:headerLayout将我们刚才准备好的menu和headerLayout设置了进去，
android:layout_gravity="start"则是跟上面的textview一个道理了，用于指明滑动菜单的滑动位置，
这样NavigationView就定义完成了。

接下来还要去处理菜单项的点击事件。修改MainActivity中的代码：

代码还是比较简单的，
这里首先获取到了NavigauonView的实例，
然后调用它的setCheckedItem()方法将Call菜单项设置为默认选中。

接着调用了setNavigationItemSelectedListener()方法来设置一个菜单项选中事件的监听器，当用户点击了任意菜单项时，就会回调到onNavigationItemSelected(）方法中。
我们可以在这个方法中写相应的逻辑处理，不过这里并没有附加任何逻辑，只是调用了DrawerLayout的closeDrawers()方法将滑动菜单关闭，这也是合情合理的做法。

下面是当前MainActivity.java的全文：

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);


        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        NavigationView navView = (NavigationView) findViewById(R.id.nav_view);
        ActionBar actionBar = getSupportActionBar();
        if(actionBar != null){
            actionBar.setDisplayHomeAsUpEnabled(true);//让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);//设置一个导航按钮图标
        }

        navView.setCheckedItem(R.id.nav_call);//将Call菜单项设置为默认选中
        navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener(){
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                mDrawerLayout.closeDrawers();//关闭滑动菜单
                return true;
            }
        });

    }

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

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);
                break；
            case R.id.backup:
                Toast.makeText(this,"You clicked Backup" , Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this,"You clicked Delete" , Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this,"You clicked Settings" , Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }

}

现在可以重新运行一下程序了，点击一下Toolbar左侧的导航按钮，效果如图所示：

怎么样？这样的滑动菜单页面，你无论如何也不能说它丑了吧？MaterialDesign的魅力就在
这里，它真的是一种非常美观的设计理念，只要你按照它的各种规范和建议来设计界面，最终做
出来的程序就是特别好看的。——郭霖大神

微信关注我们

原文链接：https://yq.aliyun.com/articles/686573

转载内容版权归作者及来源网站所有！

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

shell技巧3 - 自动生成AppIcon

1、前言上一篇讲到 shell技巧2 - 图片旋转缩放转换格式等，而平时iOS开发中，Xcode中Assets.xcassets的AppIcon 需要设计师或开发者自行放置对应尺寸的图标，虽然我经常使用macOS下的 Prepo 应用生成多尺寸的图标，但是依然需要一张一张的放置到Xcode中，并且步骤非常不智能化，部分图标需要人工对应位置放置。如果通过使用 sips 命令，其实可以自动生成对应尺寸的图片，就可以灵活和自动化的批量生成AppIcon的全部图标，绝对的方便和效率！说到就马上实践吧！ 2、AppIcon 要求平时，我们的应用的图标，都会在 Assets.xcassets 的AppIcon 设置，对于 iOS 来说，需要配置如下图标： 20180915-Xcode-Assets.xcassets-AppIcon.png 其中，因为App如果只支持iOS7以上，1x 的设备也不需要支持了，那么大概导出需要如下的尺寸： pt 像素密度(scale) 尺寸(px) 用途支持系统版本 20pt 2x 40*40 iPhone Notificafion iOS 7-12 20pt ...

2018-09-16

700

1、前言网络通信一直是Android项目里比较重要的一个模块，Android开源项目上出现过很多优秀的网络框架，从一开始只是一些对HttpClient和HttpUrlConnection简易封装使用的工具类，到后来Google开源的比较完善丰富的Volley，再到如今比较流行的Okhttp、Retrofit。要想理解他们之间存在的异同（或者具体点说，要想更深入地掌握Android开发中的网络通信技术），必须对网络基础知识、Android网络框架的基本原理等做到心中有数、信手拈来，关键时刻才能找到适合您APP的最佳网络通信技术实践。事实证明在Android的日常开发和源码阅读中也会经常碰到相关知识，掌握这些网络基础知识，也是Android程序员真正迈向高阶的过程中必备的一些基本技术素质之一。有鉴于此，本文将主要介绍计算机网络的一些基础，以及在Android开发中的一些使用及遇到的问题和解决。本篇主要分为以下几部分： 1）计算机网络体系结构； 2）Http相关； 3）Tcp相关； 4）Socket。学习交流： - 即时通讯开发交流3群：185926912[推荐] - 移动端IM...

2018-09-17

644

资源下载

更多资源

优质分享App

近一个月的开发和优化，本站点的第一个app全新上线。该app采用极致压缩，本体才4.36MB。系统里面做了大量数据访问、缓存优化。方便用户在手机上查看文章。后续会推出HarmonyOS的适配版本。

Mario

马里奥是站在游戏界顶峰的超人气多面角色。马里奥靠吃蘑菇成长，特征是大鼻子、头戴帽子、身穿背带裤，还留着胡子。与他的双胞胎兄弟路易基一起，长年担任任天堂的招牌角色。

腾讯云软件源

为解决软件依赖安装时官方源访问速度慢的问题，腾讯云为一些软件搭建了缓存服务。您可以通过使用腾讯云软件源站来提升依赖包的安装速度。为了方便用户自由搭建服务架构，目前腾讯云软件源站支持公网访问和内网访问。

Nacos

Nacos /nɑ:kəʊs/ 是 Dynamic Naming and Configuration Service 的首字母简称，一个易于构建 AI Agent 应用的动态服务发现、配置管理和AI智能体管理平台。Nacos 致力于帮助您发现、配置和管理微服务及AI智能体应用。Nacos 提供了一组简单易用的特性集，帮助您快速实现动态服务发现、服务配置、服务元数据、流量管理。Nacos 帮助您更敏捷和容易地构建、交付和管理微服务平台。

Material Design 实战之第二弹——滑动菜单详解&实战（DrawerLayout & NavigationView）

文章提要与总结

正文

DrawerLayout

NavigationView

1/4.准备menu

2/4.准备headerLayout

3/4.使用NavigationView

shell技巧3 - 自动生成AppIcon

迈向高阶：优秀Android程序员必知必会的网络基础

相关文章

发表评论

资源下载

优质分享App

Mario

腾讯云软件源

Nacos

欢迎您！

Material Design 实战 之第二弹——滑动菜单详解&实战（DrawerLayout & NavigationView）

文章提要与总结

正文

DrawerLayout

NavigationView

1/4.准备menu

2/4.准备headerLayout

3/4.使用NavigationView

shell技巧3 - 自动生成AppIcon

迈向高阶：优秀Android程序员必知必会的网络基础

相关文章

发表评论

资源下载

优质分享App

Mario

腾讯云软件源

Nacos

欢迎您！

Material Design 实战之第二弹——滑动菜单详解&实战（DrawerLayout & NavigationView）