Material Design控件使用详解

前言

安卓的Design包出来了很久了,布局的炫酷,是有目共睹,使用起来还是很方便的,而且实现的效果,让你惊奇,但是一些童鞋们还是不太熟悉怎么的使用它,然而自己也只是略知一二,所以在此总结一下,共同的学习交流一下如何的使用,希望对您们有一定的帮助

一、Design里面比较实用的类:

 TextInputLayout   FloatingActionButton   NavigationView   TabLayout  Snackbar  AppBarLayout   CollapsingToolbarLayout   CoordinatorLayout    android.support.v7.widget.Toolbar(为了配合主题使用的)

二、类的如何的使用:

  1. TextInputLayout:setHint()设置提示的文案;setError()设置错误的文案;

  2. FloatingActionButton:

    app:rippleColor="#f00"  //点击按钮的颜色

    app:backgroundTint="#f0f" //默认的颜色

    app:fabSize="normal"  //按钮大小

    app:elevation="10dp" //阴影高度

    app:layout_anchor="@id/appbar" //粘连在那个控件(注意:最后两个属性只有在CoordinatorLayout中才能生效)

    app:layout_anchorGravity="bottom|right|end"  //粘连的位置

3.NavigationView:(主要配合抽屉使用的 android.support.v4.widget.DrawerLayout)

    android:layout_gravity="start"  //抽屉的方向(只支持左右)

    app:headerLayout="@layout/nav_header" //菜单的头布局

    app:menu="@menu/drawer_view"   //菜单的选项

4.TabLayout:

    app:tabBackground=""  //默认的背景颜色

    app:tabIndicatorColor="" //指示器的颜色

    app:tabIndicatorHeight=""  //指示器的高度

    app:tabMode="scrollable"  //两种滚动模式: fixed:充满整个宽度   scrollable:可以左右的滑动

    app:tabSelectedTextColor="" //选择字体的颜色

    app:tabTextColor="" //默认肢体颜色

    两种常用的方式:(1)单独的当使用,addTab(Tab tab)(2)和ViewPage联动的使用  setupWithViewPager(ViewPager viewPager)

5.Snackbar:(一个好看的底部弹出吐司:)

Snackbar.make(view, "您点击了Snackbar!", Snackbar.LENGTH_SHORT).show(); //直接的吐司

Snackbar.make(view, "您点击了Snackbar!", Snackbar.LENGTH_SHORT).setAction ("actionText",onClickListener).show();//吐完之后,里面还有一个点击的事件

6.Toolbar:就是一个封装好的标题:

setNavigationIcon(int)
设置工具栏的回退图标

setLogo(int)
设置工具栏logo图片

setTitle(CharSequence)
设置工具栏标题

setSubtitle(CharSequence)
设置工具栏子标题

7.后面的AppBarLayout,CoordinatorLayout,CollapsingToolbarLayout得代码里说:

 <?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/main_content"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:fitsSystemWindows="true">  //设置状态栏的透明度(系统会自己适配)

<android.support.design.widget.AppBarLayout
    android:id="@+id/appbar"
    android:layout_width="match_parent"
    android:layout_height="@dimen/detail_backdrop_height"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:fitsSystemWindows="true">

    <android.support.design.widget.CollapsingToolbarLayout
        android:id="@+id/collapsing_toolbar"
        android:layout_width="match_parent"
        android:layout_height="match_parent"

        app:layout_scrollFlags="scroll|exitUntilCollapsed"  //滑动的效果

        android:fitsSystemWindows="true"
        app:contentScrim="?attr/colorPrimary"  //折叠之后的颜色
        app:expandedTitleMarginStart="48dp"
        app:expandedTitleMarginEnd="64dp">

        <ImageView
            android:id="@+id/backdrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:fitsSystemWindows="true"

            app:layout_collapseMode="parallax" //图片的折叠效果
            app:layout_collapseParallaxMultiplier="1" //折叠的视觉差

            />

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:layout_collapseMode="pin" /> //标题栏效果

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

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

<android.support.v4.widget.NestedScrollView  //为了可以滑动,而代替了 ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"> //可以和上面的布局进行联动(支持的控件 RecyclerView  ViewPager  NestedScrollView ,不支持ListView ,GridViEW )

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:paddingTop="24dp">

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/card_margin">

            <LinearLayout
                style="@style/Widget.CardContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Info"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/cheese_ipsum" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/card_margin"
            android:layout_marginLeft="@dimen/card_margin"
            android:layout_marginRight="@dimen/card_margin">

            <LinearLayout
                style="@style/Widget.CardContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Friends"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/cheese_ipsum" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="@dimen/card_margin"
            android:layout_marginLeft="@dimen/card_margin"
            android:layout_marginRight="@dimen/card_margin">

            <LinearLayout
                style="@style/Widget.CardContent"
                android:layout_width="match_parent"
                android:layout_height="wrap_content">

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="Related"
                    android:textAppearance="@style/TextAppearance.AppCompat.Title" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:text="@string/cheese_ipsum" />

            </LinearLayout>

        </android.support.v7.widget.CardView>

    </LinearLayout>

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

<android.support.design.widget.FloatingActionButton
    android:layout_height="wrap_content"
    android:layout_width="wrap_content"

    android:src="@drawable/ic_discuss"
    android:layout_margin="@dimen/fab_margin"
    android:clickable="true"
    app:fabSize="normal"
    app:elevation="10dp"
    app:rippleColor="#f00"
    app:backgroundTint="#f0f"

    app:layout_anchor="@id/appbar"
    app:layout_anchorGravity="bottom|right|end"
    />
 </android.support.design.widget.CoordinatorLayout>

上面滑动的属性的详解:

 CoordinatorLayout

 app:layout_scrollFlags (子布局设置是否可滑动)

 android:layout_gravity 属性控制组件在布局中的位置

 app:layout_behavior="@string/appbar_scrolling_view_behavior" 通知布局中包含滑动组件!

 子布局通过app:layout_scrollFlags确定是否可滑动.给需要滑动的组件设置 app:layout_scrollFlags="scroll|enterAlways" 属性。 
 设置的layout_scrollFlags有如下几种选项: 

 scroll: 所有想滚动出屏幕的view都需要设置这个flag- 没有设置这个flag的view将被固定在屏幕顶部。

 enterAlways: 这个flag让任意向下的滚动都会导致该view变为可见,启用快速“返回模式”。 enterAlwaysCollapsed: 
 当你的视图已经设置minHeight属性又使用此标志时,你的视图只能已最小高度进入,只有当滚动视图到达顶部时才扩大到完整高度。 

 exitUntilCollapsed: 滚动退出屏幕,最后折叠在顶端。



 CollapsingToolbarLayout
 app:collapsedTitleGravity 指定折叠状态的标题如何放置,可选值:top、bottom等

 app:collapsedTitleTextAppearance="@style/TextAppearance.CollapsedTitle"
 指定折叠状态标题文字的样貌

 app:expandedTitleTextAppearance="@style/TextAppearance.ExpandedTitle"
 指定展开状态标题文字的样貌

 app:contentScrim="?attr/colorPrimaryDark"
 指定CollapsingToolbarLayout完全被滚出到屏幕外时的ColorDrawable

 app:expandedTitleGravity  展开状态的标题如何放置
 app:titleEnabled指定是否显示标题文本
 app:toolbarId指定与之关联的ToolBar,如果未指定则默认使用第一个被发现的ToolBar子View
 app:expandedTitleMarginStart="10dp"
 app:expandedTitleMargin
 app:expandedTitleMarginBottom
 app:expandedTitleMarginEnd

 展开状态改变标题文字的位置,通过margin设置
 app:layout_collapseParallaxMultiplier="0.7"

 设置视差的系数,介于0.0-1.0之间。
 app:layout_collapseMode="pin"(子布局设置折叠模式)
 有两种“pin”:固定模式,在折叠的时候最后固定在顶端;“parallax”:视差模式,在折叠的时候会有个视差折叠的效果。

 CollapsingToolbarLayout主要是提供一个可折叠的Toolbar容器,对容器中的不同View设置layout_collapseMode折叠模式,来达到不同的折叠效果。

三、总结:

Design使用熟练了,会让你觉得布局非常优雅,好看,以后也可以充当你的去装逼的神器,比较难的点就是里面的属性,比较难以理解和活灵活用,也希望自己一些拙劣的见解可以帮助到你,让你不再对Design包里面的东西比较陌生,骚年行动起来吧,总会有你自己一片天地,要是有什么不足的地方多多的指导一下,大家一起互相学习,进步,谢谢你们!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,793评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,567评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,342评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,825评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,814评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,680评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,033评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,687评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 42,175评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,668评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,775评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,419评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,020评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,206评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,092评论 2 351
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,510评论 2 343

推荐阅读更多精彩内容