码迷,mamicode.com
首页 > 移动开发 > 详细

Android Material Design 兼容库的使用

时间:2016-06-24 18:41:07      阅读:353      评论:0      收藏:0      [点我收藏+]

标签:

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完全使用实例

 

Android Material Design 兼容库的使用

标签:

原文地址:http://www.cnblogs.com/mercuryli/p/5614904.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!