Android Material Design新UI控件使用大全 一

序言

自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们也看到了越来越多的App开始使用这个兼容库,来提升UI效果及用户体验,由于之前只是偶尔体验了一下,并没有认真的去了解使用,导致对这个库的使用懵懵懂懂,现在写下这个总结,也算是对自己的一个交代,也算是对知识的一个总结,如果能帮到其他人,让别人少走弯路,那就更好了;

我们先看一下印象笔记的截图,有个大致的了解

如何使用

这个兼容库如果使用的话只需要将其添加到项目依赖中即可:

compile ‘com.android.support:design:23.2.1’

这样的话,Android Studio 就会自动去同步这个库,然后我们就可以愉快的使用了,相信一些老司机用这个简直太简单;

1 侧滑NavigationView

在Materil Design中,NavigationView作为一个抽屉导航来实现app内部的交互,让实现更简单,同时还能直接通过菜单资源元素直接生成导航元素;

它的一般用法是需要配合之前v4包中的DrawLayout,并作为其中的Darwer部分,也就是划出的导航部分,它提供了可选的Header,默认样式,选中项高亮,分组单选,分组子标题等,如图示,左侧即为NavigationView:

我们现在来看一下是怎么用的,外层是一个DrawerLayout，第一个child将作为主页content，第二个child则作为Drawer侧拉面板:

<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout
    android:id="@+id/drawer_laout"
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    tools:context=".NavigationViewActivity">

<LinearLayout
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">
    <include layout="@layout/toolbar_actionbar"/>
    <TextView
        android:layout_gravity="center"
        android:layout_marginTop="100dp"
        android:textSize="25sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="This is home content"/>
</LinearLayout>
    <android.support.design.widget.NavigationView
        android:id="@+id/navi_all"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/head_layout"
        app:menu="@menu/navigation_menu">

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

**注意:**我们看到NavigationView有两个属性,`app:headerLayout`接受的是一个layout文件,作为导航页的头布局,可选项;`app:menu`接受一个menu,作为导航栏的菜单页,这个是必选项;

headerLayout为一个普通的layout文件,我们就不在赘述,我们现在来看一下menu文件怎么写,在`res`目录下新建一个`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/navi_home"
            android:icon="@mipmap/home"
            android:checked="true"
            android:title="首页" />
        <item
            android:id="@+id/navi_notify"
            android:icon="@mipmap/notify"
            android:title="通知" >
        </item>
        <item
            android:id="@+id/navi_blog"
            android:icon="@mipmap/blog"
            android:title="我的博客" />
    </group>
</menu>

注意:其中checked=”true”的item将会高亮显示，这可以让用户知道当前选中的菜单项是哪个。当然,item的选中状态可以在代码中设置;

使用subheader来为菜单分组：

<item
    android:id="@+id/navigation_subheader"
    android:title="@string/navigation_subheader">
    <menu>
        <item
            android:id="@+id/navigation_sub_item_1"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_1"/>
        <item
            android:id="@+id/navigation_sub_item_2"
            android:icon="@drawable/ic_android"
            android:title="@string/navigation_sub_item_2"/>
    </menu>
</item>

最后,就是我们要写的menu菜单中的点击事件了,NavigationView给我们提供了setNavigationItemSelectedListener方法来设置当有菜单项被点击时的回调,OnNavigationItemSelectedListener也会给我们提供被点击的MenuItem,我们可以在这里处理点击事件,改变item的状态,更新界面状态,关闭导航栏等操作;

 mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
    @Override
    public boolean onNavigationItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case R.id.navi_blog:
                Toast.makeText(NavigationViewActivity.this,"Blog",Toast.LENGTH_SHORT).show();
                break;
            case R.id.navi_home:
                Toast.makeText(NavigationViewActivity.this,"Home",Toast.LENGTH_SHORT).show();
                break;
            case R.id.navi_notify:
                Toast.makeText(NavigationViewActivity.this,"Notify",Toast.LENGTH_SHORT).show();
                break;
        }
        item.setChecked(true);
        mDrawerLayout.closeDrawer(Gravity.LEFT);//外层的DrawerLayout
        return false;
    }
});

2.TextInputLayout 提升用户体验的EditText

我们之前使用EditText的时候,会使用一个hint属性,但是当用户输入的时候,hint属性值就会被清空,但是在Material Design中,谷歌又给我们提供了一个TextInputLayout来优化我们的用户体验,当获取焦点输入时,hint的值会自动缩小并跑到输入栏的上方,具体效果看图示:

当然,使用也非常简单:

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

    <android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="用户名/手机号"/>
    </android.support.design.widget.TextInputLayout>

    <android.support.design.widget.TextInputLayout
        android:layout_marginTop="20dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textPassword"
            android:hint="密码"/>
    </android.support.design.widget.TextInputLayout>

</LinearLayout>

注意: TextInputLayout的颜色来自style中的colorAccent的颜色,除了显示提示信息，还可以通过调用setError()在EditText下面显示一条错误信息。

3.悬浮操作按钮 FloatingActionButton

看字面意思就是悬浮按钮,是一个负责显示界面基本操作的圆形按钮,它实现了一个默认颜色为主题中colorAccent的悬浮操作按钮，它是一个带有阴影的圆形按钮，可以通过fabSize来改变其大小;有以下属性:

  • 默认颜色为colorAccent的颜色值,可以通过app:backgroundTint 属性或者setBackgroundTintList (ColorStateList tint)方法去改变背景颜色。
  • 改变尺寸:通过设置 app:fabSize 属性(mini or normal)
  • android:src 改变drawable
  • app:rippleColor 设置点击时候的颜色(水波纹效果)
  • app:borderWidth 设置button的边框宽度
  • app:elevation 设置平常阴影状态的深度(默认6dp)
  • app:pressedTranslationZ 设置点击状态的阴影深度(默认12dp)

用法:

<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="20dp"
    android:layout_alignParentBottom="true"
    android:layout_alignParentRight="true"
    android:src="@mipmap/add"
    app:rippleColor="#ff0000"
    app:borderWidth="3dp"
    app:fabSize="normal"
    />

实现效果如下:

4 底部Snackbar

SnackBar通过在屏幕底部展示一个简洁的信息,为用户提供一个友好的反馈,用法类似于Toast,区别在于第一个参数不需要上下文而是所依附的父view,而且在同一时间内只能显示一个Snackbar,同时可以为用户提供一个动作操作,用户可以在它消失之前滑动删除; 最简单用法:

Snackbar.make(mParentView, "SnackbarClicked", Snackbar.LENGTH_LONG).show();

我们来看效果图:

OK,我们现在来看一下带有Action的SnackBar怎么使用,

 Snackbar.make(mRelativeLayout, "SnackbarClicked", Snackbar.LENGTH_SHORT).setAction("Test", new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(TestInput.this,"Clicked",Toast.LENGTH_SHORT).show();
            }
        }).show();

这里我们给SnackBar设置了一个Action,当我们点击Test时候,就会弹出吐司,效果如下:

ok,我们对部分控件的使用已经有了一定的了解,我们在下篇会介绍AppBarLayout、CollapsingToolbarLayout、TabLayout 的使用,愿大家都有一个美好的生活….

时间： 2024-08-03 15:39:33

Android Material Design新UI控件使用大全 一的相关文章

Android Material Design新UI控件使用大全 二

序言 上一篇中我们介绍了几个简单的新UI控件,相信很多小伙伴对Materil Design的视觉效果有了一定的了解,今天我们就继续介绍其他几个控件的玩儿法,让我们一探Materil Design的究竟,我们先来看一下我们今天要介绍的CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout及TabLayout, ok,我们接下来就逐一对这些控件进行解析,揭开他们神秘的面纱,来为我们服务,Let's Go. TabLayout 我们先来看官方的介绍

Android Material Design新UI控件使用大全 三

序言 在我们对NavigationView侧滑,TextInputLayout输入框,Snackbar弹出提示框,FloatingActionBar圆形button,TabLayout顶部导航栏及CoordinatorLayout有了一定的了解后,我们最后将对AppBarLayout,CollapsingToolbarLayout进行最后的分析,我们先看两张效果图,(因为暂时没找到好的方法来录制gif,先借用网上的图) AppBarLayout AppBarLayout 是继承LinerLayo

【Android】开源项目UI控件分类汇总之ProgressBar

Android开发的宝库越来越多,我开发中有需要的组件,主要参考Trinea的大作Android开源项目分类汇总(包含了后面的绝大多数).CSDN上直接拿来用!最火的Android开源项目还有CSDN上的直接拿来用!十大Material Design开源项目,受益匪浅,但是,有的分类项目太多,不是每个项目都有预览,不容易找到什么是最想要的,而且有一些项目不容易顺利地导入,我把同类的Demo做到一个app里,供大家下载参考.不过顺序没有按Trinea的大作来,当下需要什么控件,就优先写哪些,先从最

Android Material Design带UI变化

谷歌Matias Duarte称,"Material Design是漂亮和大胆的.由于干净的排版和布局简单且easy理解.内容才是焦点. 谷歌I/O 014开发人员大会上宣布全新的设计语言"Material Design",适用于旗下全部平台,包含 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是漂亮和大胆的,由于干净的排版和布局简单且easy理解.内容才是焦点. " Material De

【Android】开源项目UI控件分类汇总之Dialog

接前文ProgressBar:Android开发的宝库越来越多,我开发中有需要的组件,主要参考Trinea的大作Android开源项目分类汇总(包含了后面的绝大多数).CSDN上直接拿来用!最火的Android开源项目还有CSDN上的直接拿来用!十大Material Design开源项目,受益匪浅,但是,有的分类项目太多,不是每个项目都有预览,不容易找到什么是最想要的,而且有一些项目不容易顺利地导入,我把同类的Demo做到一个app里,供大家下载参考.本文介绍几种Dialog.Dialog相关的

Android Studio中关于UI控件的边框问题

1.首先在drawable目录中创建一个文件  例如shape.xml 2.可填写内容如下: 1 <!-- shape定义形状,shape="rectangle"表示形状为长方形 --> 2 <shape 3 xmlns:android="http://schemas.android.com/apk/res/android" 4 android:shape="rectangle" > 5 <!-- 设置框内填充颜色

ANDROID L——Material Design详解（UI控件）

转载请注明本文出自大苞米的博客(http://blog.csdn.net/a396901990),谢谢支持! Android L: Google已经确认Android L就是Android Lollipop(5.0). 前几天发现Android5.0正式版的sdk已经可以下载了,而且首次搭载Android L系统的Nexus 6和 Nexus 9也即将上市. 所以是时候开始学习Android L了! 关于Android L如何配置模拟器和创建项目,如果大家有兴趣的话可以看看我之前的一篇文章: A

Android Material Design系列之主题样式介绍说明

今天这篇文章应该算是Material Design系列的补充篇,因为这篇文章本来应该放到前面讲的,因为讲的是主题嘛,对于一些状态和颜色的介绍,因为我们一新建一个项目时,系统自带了三个属性的颜色,现在就重点介绍这三个颜色属性的意义和作用.讲明白这个,留着以后讲别的用. 最常用的三个颜色属性 colorPrimary colorPrimaryDark colorAccent 这三个分别代表什么意思呢? colorPrimaryDark 是状态栏底色 colorPrimary 如果你不手动自己去修改t

Android进阶——Material Design新控件之初识TabLayout（一）

引言 Google I/O 2015 推出的 Android Design Support Library令人非常激动.Material Design的推出确实振奋了不少 Android开发者以及用户的心.以前Google给我的感觉就像是他并没太在乎他们的UI(或者审美不同,Gmail不忍吐槽),但是当Material Design伴随Android5.0发布之后,一切好像就都变了个样,Google好像意识到了设计的重要性以及自己以往的种种不足,决定也要迎头赶上,不仅仅只是推出一套Materia