Android材料设计Material Design 开篇前言

最新推荐文章于 2023-06-23 01:43:14 发布

原创最新推荐文章于 2023-06-23 01:43:14 发布 · 646 阅读

0 ·

CC 4.0 BY-SA版权

全面解析MaterialDesign组件特性，包括ToolBar、CardView、FloatingActionButton等，深入Behavior联动机制，附大量实例与代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

零、前言

虽然网上已经有了很多Material Design系列的文章,但是动眼和动手是有本质区别的  
虽然有很好的文章，但不太系统，既然要总结Material Design，那就写一个系列吧，可以说`尽吾所能，纳百家之长`  
Material Design本身倒不难，就是有点烦，小东西太多,核心的难点要数`Behavior`了  
心态要放好:要相信Material Design是为了帮助开发者的,而不是谷歌闲着没事弄个东西刁难我们  
所有的代码都我都亲自测试过，文章的语言也尽量用我的话来叙述，大量的动图和图片也是我一个一个截的

属性介绍以xml里为主,代码中动态设置使用`setXXX`即可，如有需要，可自理(多选模式：类名.模式名)

so：项目源码：Github----Android_Material_Design_Test你看着办吧

本系列文章一览：

一、本篇是干嘛的(开场不能low)----`点将台`

1.ToolBar资料卡片：

国籍：View
城市：ViewGroup
爱好：招揽小弟、统筹协调
一句话：哥是老大，就座在上面，你不服?
额外依赖：无

toolbar常用属性.png

2.CardView资料卡片：

国籍：View
城市：ViewGroup(FrameLayout)
爱好：梳妆打扮，圆角阴影
一句话：姐怎么能这么好看...
额外依赖：implementation 'com.android.support:cardview-v7:27.1.1'

CardView.gif

3.FloatingActionButton资料卡片：

国籍：View
城市：ImageView
爱好：游离不定、抱大腿、随用随到
一句话：没关系，我小，不碍事
额外依赖：implementation 'com.android.support:design:27.1.1'

fab的属性.png

4.Snackbar资料卡片：

国籍：非View
城市：BaseTransientBottomBar
爱好：show
一句话：虽然我不是View，但我体内燃烧着View的灵魂(FrameLayout之魂)
额外依赖：implementation 'com.android.support:design:27.1.1'

fab_sna.gif

5.bottom_sheet资料卡片：

国籍：非View
城市：Behavior族
爱好：暗杀、潜藏、show
一句话：哥是迷一样的存在----Behavior族
额外依赖：implementation 'com.android.support:design:27.1.1'

状态监听.gif

6.BottomNavigationBar资料卡片：

国籍：View
城市：FrameLayout
爱好：切换状态
一句话：最佳底栏就是我，TabLayout别跟我抢
额外依赖：implementation 'com.ashokvarma.android:bottom-navigation-bar:1.2.0'

颜色.png

7.TabLayout资料卡片：

国籍：View
城市：FrameLayout
爱好：切换状态
一句话：老娘上得厨房，下得厅堂
额外依赖：implementation 'com.android.support:design:27.1.1'

tablayout.png

8-1.AppBarLayout资料卡片：

国籍：View
城市：ViewGroup(LinearLayout)
爱好：装东西、酷炫
一句话：别绑架我，我不是大佬，Behavior才是...
额外依赖：implementation 'com.android.support:design:27.1.1'

8-2.CoordinatorLayout资料卡片：

国籍：View
城市：ViewGroup
爱好：军师，调兵遣将
一句话：运筹帷幄之中，决胜千里之外
额外依赖：implementation 'com.android.support:design:27.1.1'

9.CollapsingToolbarLayout资料卡片：

国籍：View
城市：ViewGroup(LinearLayout)
爱好：潮流、碰撞
一句话：AppBarLayout是我哥,ToolBar是我弟，我怕你?
额外依赖：implementation 'com.android.support:design:27.1.1'

10.DrawerLayout资料卡片：

国籍：View
城市：ViewGroup
爱好：装东西
一句话：孰愿随孤，开疆拓土...
额外依赖：implementation 'com.android.support:design:27.1.1'

DrawerLayout.gif

11.NavigationView资料卡片:

国籍：View
城市：ViewGroup(FrameLayout)
爱好：装东西
一句话：我就是我，不一样的自我
额外依赖：implementation 'com.android.support:design:27.1.1'

NavigationView.png

12.TextInputLayout资料卡片：

国籍：View
城市：ViewGroup(LinearLayout)
爱好：装东西
一句话：输入框的最佳神辅助
额外依赖：implementation 'com.android.support:design:27.1.1'

字符个数监听.gif

13.最强战将：Behavior资料卡片

国籍：Behavior神秘种族
城市：Behavior神秘领地
爱好：联动
一句话：军师CoordinatorLayout麾下最强战将,没有之一
额外依赖：implementation 'com.android.support:design:27.1.1'

联动.gif

二、资源文件

1.常用颜色一览：

常用颜色.png

2.测试Text样式抽取

    <!--测试用的TextView通用属性-->
    <style name="TVTestCenter">
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">100dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textSize">18sp</item>
        <item name="android:text">Test-测试文字</item>
        <item name="android:background">#6096F3</item>
        <item name="android:textColor">#fff</item>
    </style>

3.常用尺寸

    <dimen name="dp_2">2dp</dimen>
    <dimen name="dp_4">4dp</dimen>
    <dimen name="dp_8">8dp</dimen>
    <dimen name="dp_16">16dp</dimen>
    <dimen name="dp_24">24dp</dimen>
    <dimen name="dp_32">32dp</dimen>
    <dimen name="dp_48">48dp</dimen>
    <dimen name="dp_56">56dp</dimen>
    <dimen name="dp_64">64dp</dimen>
    <dimen name="dp_72">72dp</dimen>
    <dimen name="dp_88">88dp</dimen>
    <dimen name="dp_200">200dp</dimen>

    <dimen name="sp_12">12sp</dimen>
    <dimen name="sp_14">14sp</dimen>
    <dimen name="sp_16">16sp</dimen>
    <dimen name="sp_18">18sp</dimen>

    <dimen name="px_1">1px</dimen>