Android Material Design 兼容库的使用

Android Material Design 兼容库的使用

mecury

前言：近来学习了Android Material Design 兼容库，为了把这个弄懂，才有了这篇博客，这里先推荐两篇博客：1.Android Material Design 兼容库的使用详解
2.Android应用Design Support Library完全使用实例
第一篇博客是这个兼容库的详细解析，我参考了里面的许多内容，第二篇是兼容库的大致介绍，如果你能把这两篇全部弄懂，我这篇也没有必要看了。说了这么多，开始正文吧，大家有什么问题或建议，欢迎留言交流。本文同时发布在简书：http://www.jianshu.com/p/8ec9cfc7a7b0

文章所用的示例地址：[mecury/MeterialDesignSupportLibrary]

1.概述

在2015年，google官方升级了Design Support Library，为开发者增加了不少可用的开发控件。

2综述

支持Android 2.1以上设备。
Gradle build script dependency：

compile ‘com.android.support:design:22.2.0‘ //可修改版本号为自己匹配

Design Support Library包含8个控件，具体如下：

  • android.support.design.widget.TextInputLayout
    强大带提示的MD风格的EditText
  • android.support.design.widget.FloatingActionButton
    MD风格的圆形按钮，来自于ImageView
    +android.support.design.widget.Snackbar
    类似Toast，添加了简单的单个Action
  • android.support.design.widget.TabLayout
    选项卡
  • android.support.design.widget.NavigationView
    DrawerLayout的SlideMenu
  • android.support.design.widget.CoordinatorLayout
    超级FrameLayout
  • android.support.design.widget.AppBarLayout
    MD风格的滑动Layout
  • android.support.design.widget.CollapsingToolbarLayout
    可折叠MD风格ToolbarLayout

注意事项：
这里需要添加额外的命名空间appNs（xmlns:app="http://schemas.android.com/apk/res-auto" ）

在介绍各个控件之前，大家先看一下预览图，这里我自己写了一个示例，看起来不太好，但是用来介绍是够了，下面看图。

演示动画.gif

2.1 FLoatingActionButton

演示gif

FloatingActionButton]NU.png

一
个负责显示界面基本操作的圆形按钮。Design library中的FloatingActionButton
实现了一个默认颜色为主题中colorAccent的悬浮操作按钮。FloatingActionButton继承自ImageView，你可以通过
android:src或者
ImageView的任意方法，比如setImageDrawable()来设置FloatingActionButton里面的图标。下面介绍几种常用
的设置属性：

  • app:fabSize 设置按钮的大小，有mini和normal可选，默认为normal
  • app:elevation 设置按钮的高度，影响阴影范围的显示
  • app:rippleColor 设置涟漪效果的颜色（当点击按钮时的水波纹）

code：
<android.support.design.widget.FloatingActionButton android:id="@+id/floatingButton"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@mipmap/ic_launcher"
app:elevation="5dp"
app:fabSize="normal" />

无特别注意项，和普通控件类似。

2.2 TextInputLayout

演示gif：

TextInputLayout.gif

在MD中，使用TextInputLayout将EditText进行了封装。其最大的改变就是为EditText添加了两个提示效果。一个显示在上面，提示用户输入的是什么，另一个可以设为Error提示，当输入错误的时候显示出来。

code:

<android.support.design.widget.TextInputLayout
android:id="@+id/textInput"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>

在代码中使用的是时候，需要监听EditText的变化。

editText.addTextChangedListener(new TextWatcher() {
            @Override
            public void beforeTextChanged(CharSequence s, int start, int count, int after) {

            }

            @Override
            public void onTextChanged(CharSequence s, int start, int before, int count) {
                Log.e("TAG",s.length()+"");
                if (s.length() > 4){
                    inputLayout.setError("字符不能超过5个");
                    inputLayout.setErrorEnabled(true);
                }else{
                    inputLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable s) {

            }
        });

注意项
TextInputLayout中至少嵌套一个EditText。

2.3 SnackBar

演示gif：

SnackBar.gif

SnackBar
提供一个轻量级的、快速的反馈。它可以说是一个增强功能的Toast，不同的是SnackBar被固定在底部（Snackbar试图找到一个合适的父亲以
确保自己是被放置于底部），包含一段文本信息与一个可选的操作按钮。它会在时间到达时删除，或者被用户点击按钮提前删除。
code
SnackBar的使用十分简单，和Toast十分类似，使用下面代码就可以创建一个SnackBar：

final Snackbar snackbar = Snackbar.make(view,"你点击按钮",Snackbar.LENGTH_SHORT);
snackbar.show();

此时如果，你想添加在SnackBar上添加一个按钮，你可以这样：

snackbar.setAction("知道了", new View.OnClickListener() {
@Override
 public void onClick(View v) {
 snackbar.dismiss();
 }});

上面代码放在一起，就是动态图的效果。

无特别注意项，和普通控件类似。

CoordinatorLayout

CoordinatorLayout.gif

我们来看看官方对他的描述：

  • CoordinatorLayout is a super-poweredFrameLayout.
  • CoordinatorLayout is intended for two primary use cases:1.As a top-level application decor or chrome layout2.As a container for a specific interaction with one or more child views
    从这里我们可以知道它是一个增强版的
    FrameLayout，他可以协调其子View的交互，控制手势机滚动技巧。这个控件十分的强大，用处也十分的广泛。就比如刚才说的
    FloatingActionButton如果用CoordinatorLayout
    作为FloatingActionButton的父布局，它将很好的协调Snackbar的显示与FloatingActionButton（见上图，可
    以见到FloatingActionButton随着SnackBar的出现而移动），在Snackbar以动画效果进入的时候自动向上移动让出位置，并
    且在Snackbar动画地消失的时候回到原来的位置，不需要额外的代码。

CoordinatorLayout的另一个用例是ActionBar与滚动技巧。你可能已经在自己的布局中使用了Toolbar
，它允许你更加自由的自定义其外观与布局的其余部分融为一体。Design
library把这种设计带到了更高的水平，使用AppBarLayout可以让你的Toolbar与其他View（比如TabLayout的选项卡）能
响应被标记了ScrollingViewBehavior的View的滚动事件。

code

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView
 android:id="@+id/tv"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="CoordinatorLayout展示界面，当点击右下角的FloatingActionButton时，可以看到明显的移动。另外：点击下面的按钮跳转到CoordinatorLayout，AppbarLayout,toolbar等演示界面：" />
<android.support.v7.widget.AppCompatButton
android:id="@+id/act_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="100dp"
android:text="跳转"
/>
<android.support.design.widget.FloatingActionButton
android:id="@+id/fab_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:layout_margin="10dp"
android:src="@mipmap/ic_launcher"
app:fabSize="normal"
/>
</android.support.design.widget.CoordinatorLayout>

无特别注意项，和普通控件类似。

NavigationView

演示gif
这个在上面的录制过程中忘了录了，这里也录的有点小瑕疵，大家见谅啊。

Navigation.gif

NavgationView是一个抽屉式的导航控件，它可以让我们很方便的建立一个滑动菜单。
关于用法，以上图为例，见下面代码：
code
navigationview_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"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">     

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

<android.support.design.widget.NavigationView
android:id="@+id/navigationView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="@layout/head"
app:menu="@menu/navigationview_item"
/>
</android.support.v4.widget.DrawerLayout>

里面内容区的布局，就是侧滑不滑动时显示的布局。里面headerLayout和menu分别为侧滑导航中的头部和item。这里我头部用了一张图片：
head.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="wrap_content"
android:orientation="vertical">    

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:src="@drawable/header"
/>
</LinearLayout>

对于menu，就是菜单项的配置：
navigationview_item.xml:

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto">
<group
android:checkableBehavior="single">
<item
android:id="@+id/menu_main"
android:icon="@mipmap/ic_home_white"
android:title="首页"
app:showAsAction="always"
/>
<item
android:id="@+id/menu_about"
android:icon="@mipmap/ic_about"
android:title="关于"
app:showAsAction="always"
/>
</group>
</menu>

上面的布局已经完成了，如果我们添加抽屉导航的Item的点击事件，那又该怎么做呢？下面简单介绍一下：

private void navigationViewListener(){
NavigationView mNavigationView = (NavigationView) findViewById(R.id.navigationView);
mNavigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(MenuItem item) {
switch(item.getItemId()){
case R.id.menu_main:
Toast.makeText(MainActivity.this, "点击了首页", Toast.LENGTH_SHORT).show();
break;
case R.id.menu_about:
Toast.makeText(MainActivity.this, "点击了关于", Toast.LENGTH_SHORT).show();
break;
}
item.setChecked(true);
mDrawerLayout.closeDrawer(Gravity.LEFT);
return false;
}
});
}
看了上面的代码，大家应该很明白应该怎么做了。

TabLayout

TabLayout.png

通 过选项卡的方式切换View并不是MD中才有的新概念，它们和顶层导航模式或者组织app中不同分组内容（比如，不同风格的音乐）是同一个概念。 Design library的TabLayout 既实现了固定的选项卡（View的宽度平均分配），也实现了可滚动的选项卡（View宽度不固定同时可以横向滚动）。如果你使用ViewPager在 tab之间横向切换，你可以直接从PagerAdapter的getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将两者联系在一起。它可以使tab的选中事件能更新ViewPager,同时 ViewPager的页面改变能更新tab的选中状态。

ViewPager viewPager = (ViewPager) findViewById(R.id.viewPager);
FragmentAdapter mAdapter = new FragmentAdapter(getSupportFragmentManager(), titles, fragments);
viewPager.setAdapter(mAdapter);
tabLayout.setupWithViewPager(viewPager);
tabLayout.setTabsFromPagerAdapter(mAdapter);

注意事项
如果你使用ViewPager在tab之间横向切换，切记可以直接从PagerAdapter的getPageTitle() 中创建选项卡，然后使用setupWithViewPager()将两者联系在一起。

AppBarLayout、CollapsingToolbarLayout

这介绍这两个之前，大家要明白什么是ToolBar。
ToolBar:这代表一个标题栏，图中的绿色区域就是ToolBar。

AppBarLayout:
其继承于LinearLayout，使用AppBarLayout可以让包含在其中的子控件能响应被标记了ScrollingViewBehavior的
的滚动事件（要与CoordinatorLayout
一起使用），利用它我们可以很容易的去实现视差滚动效果,见下图（蓝色区域就是AppBarLayout）。

AppBarLayout.gif

CollapsingToolbarLayout:
可伸缩折叠的Toolbar （Collapsing
Toolbar），直接添加Toolbar到AppBarLayout可以让你使用enterAlwaysCollapsed和
exitUntilCollapsedscroll标志，但是无法控制不同元素如何响应collapsing的细节。当你让
CollapsingToolbarLayout和Toolbar在一起使用的时候，title
会在展开的时候自动变得大些，而在折叠的时候让字体过渡到默认值。

这里面有一些属性十分重要：这里先介绍一下：
1.app:layout_collapseMode
pin：来确保Toolbar在view折叠的时候仍然被固定在屏幕的顶部
parallax：见3
2. app:layout_scrollFlags
scroll: 所有想滚动出屏幕的view都需要设置这个flag，没有设置这个flag的view将被固定在屏幕顶部。
enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见，当向上滑的时候Toolbar就隐藏，下滑的时候显示。
enterAlwaysCollapsed: 顾名思义，这个flag定义的是何时进入（已经消失之后何时再次显示）。假设你定义了一个最小高度（minHeight）同时enterAlways也定义了，那么view将在到达这个最小高度的时候开始显示，并且从这个时候开始慢慢展开，当滚动到顶部的时候展开完。
exitUntilCollapsed: 同样顾名思义，这个flag时定义何时退出，当你定义了一个minHeight，这个view将在滚动到达这个最小高度的时候消失。

3.定位到ImageView，有这两个属性是我们平常用没看到的，说明我写在注释上了

app:layout_collapseMode="parallax"
app:layout_collapseParallaxMultiplier="0.7"

code
xml文件：

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/root"
    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="300dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsingtoolbarlayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">

            <android.support.v7.widget.Toolbar
                android:id="@+id/toolbar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:background="#77db93"
                app:layout_collapseMode="pin"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">
　　　　　　　
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_launcher" />

        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>

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

activity:

public class CoordinationActivity extends AppCompatActivity {

    private Toolbar toolbar;
    private CollapsingToolbarLayout collapsingToolbarLayout;

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

        toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
        collapsingToolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.collapsingtoolbarlayout);
        collapsingToolbarLayout.setTitle("极客学院");  

        getSupportActionBar().setHomeButtonEnabled(true);
        getSupportActionBar().setDisplayHomeAsUpEnabled(true);
        toolbar.setNavigationOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                onBackPressed();
            }
        });
    }
}

附(一些控件使用使用应注意的地方):
1.在使用CardView的时候，一定要注意，当CardView的宽和高填充父容器的时候，CardView的margin最好要比cardElevation大，不然就看不到立体的效果。

2.
我们知道ListView有一个onItemClick的事件，但是RecyclerView却没有，那么我们应该怎样去设置呢？其实很简单，关于
RecyclerView设置item的点击事件，只需在创建ViewHolder的时候，给填充的View设置单击事件即可。

3.在使用
android.support.design.widget.AppBarLayout的时候内容区最好使用
android.support.v4.widget.NestedScrollView，之前我的内容区用的是ScrollView，在往上拉的时候
AppBarLayout一直没有动画效果，折腾了几个小时都没找到原因。最后逼不得用Android
Studio创建了一个他自带的关于AppBarLayout的模板项目，看到他用的是NestedScrollView作为内容区，我果断就把我的内容
区换成了这个，立马就有动画效果了。
NestedScrollView官方的描述：
NestedScrollView is just
likeScrollView, but it supports acting as both a nested scrolling parent
and child on both new and old versions of Android. Nested scrolling is
enabled by default.
如果感觉还不错的就给个喜欢支持一下吧，有问题请留言，谢谢
最后附一张MD的主题色解析图:

主题色.jpg

参考
1.Android Material Design 兼容库的使用详解
2.Android应用Design Support Library完全使用实例

时间： 2024-08-26 05:13:36

Android Material Design 兼容库的使用的相关文章

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

序言 自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的Google公司不久就推出了兼容库Android Material Design,这绝对是业界良心了,我们

Android Material Design学习之RecyclerView代替 ListView

前言 # Android Material Design越来越流行,以前很常用的 ListView 现在也用RecyclerView代替了,实现原理还是相似的.笔者实现一下 RecyclerView,代码比较简单,适合初学者,如有错误,欢迎指出. 源码地址(欢迎star) https://github.com/studychen/SeeNewsV2 本文链接 http://blog.csdn.net/never_cxb/article/details/50495505,转载请注明出处. 复习 L

Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计

?? Android Material Design : Ripple Effect水波波纹荡漾的视觉交互设计 Android Ripple Effect波纹荡漾效果,是Android Material Design视觉设计引入的一种交互设计效果简言之:当点击某个view时候,view会出现像水波波纹一样的荡漾传播效果.在最新版的Android如Android 5.0或以上版本中默认具有该效果,但在低版本Android中没有,如果需要向下兼容低版本设备,则需要自己写代码实现,实现步骤: 第1步:

MaterialEditText——Android Material Design EditText控件

MaterialEditText是Android Material Design EditText控件.可以定制浮动标签.主要颜色.默认的错误颜色等. 随着 Material Design 的到来, AppCompat v21 中也提供了 Material Design 的控件外观支持,其中包括 EditText .但 AppCompat 中的 EditText 实在有点难用,因为它是通过 colorAccent 来自动为控件着色的,并没有提供设置颜色的api,因此需要通过为控件定制theme的

Android Material Design带来的UI变革

谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点. 谷歌I/O 014开发者大会上宣布全新的设计语言"Material Design",适用于旗下所有平台,包括 Android.Chrome OS 和网页. 谷歌Matias Duarte称,"Material Design是美丽和大胆的,因为干净的排版和布局简单且容易理解.内容才是焦点." Material Design 初

android Material design是什么

Material design概述: Material design是一套UI样式标准,应该会提供一些新的API这写API包含了以下五大模块内容,分别是: Material Theme New Widgets View Shadows Animations New Capabilities for Drawables 1.material新的主题样式. 主题的颜色.动画.反馈效果都可以自定义: 2.控件阴影. 在原来的X,Y的基础之上增加了Z轴的阴影控制,Z值大的控件将显示在上面. 3.Recy

Android Material Design 详解（使用support v7兼容5.0以下系统）

Material Design是Google在2014年的I/O大会上推出的全新设计语言.Material Design是基于Android 5.0(API level 21)的,兼容5.0以下的设备时需要使用版本号v21.0.0以上的support v7包中的appcpmpat,不过遗憾的是support包只支持Material Design的部分特性.使用eclipse或Android Studio进行开发时,直接在Android SDK Manager中将Extras->Android S

android material design

谷歌2015 I/O大会上,发布了Android新版本,为了能使用 这些 material design 组件,需要去更新最新的SDK中的Extras支持库 Android Support Library Android Support Repository 下面是android studio sdk manager 相关安装的截图: 更新完之后,在build.gralde文件添加依赖: 基于matterial design的组件: 1. FloatingActionButton (浮动按钮)

Android Material Design之Toolbar与Palette

转:http://blog.csdn.net/jdsjlzx/article/details/41441083 前言 我们都知道Marterial Design是Google推出的全新UI设计规范,如果对其不太了解的可以看下:Material design非官方中文指导手册 ,或者我的前面几篇Material Design的译文,相比之前Google在Android Holo风格上平平淡淡的表现不同,Material Design现在是被Google所比较重视的.在推出这门全新设计语言后,And