首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Android材料设计Material Design 开篇前言

Android材料设计Material Design 开篇前言

作者头像
张风捷特烈
发布2018-12-21 16:32:10
7760
发布2018-12-21 16:32:10
举报
零、前言
虽然网上已经有了很多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'

CollapsingToolbarLayout1.gif

CollapsingToolbarLayout.gif


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>
4.资源图标位置:
test\src\main\res\drawable
5.图片资源位置
app\src\main\res\mipmap-xhdpi

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2018.11.30 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 零、前言
  • 本系列文章一览:
  • 一、本篇是干嘛的(开场不能low)----点将台
    • 1.ToolBar资料卡片:
      • 2.CardView资料卡片:
        • 3.FloatingActionButton资料卡片:
          • 4.Snackbar资料卡片:
            • 5.bottom_sheet资料卡片:
              • 6.BottomNavigationBar资料卡片:
                • 7.TabLayout资料卡片:
                  • 8-1.AppBarLayout资料卡片:
                    • 8-2.CoordinatorLayout资料卡片:
                      • 9.CollapsingToolbarLayout资料卡片:
                        • 10.DrawerLayout资料卡片:
                          • 11.NavigationView资料卡片:
                            • 12.TextInputLayout资料卡片:
                              • 13.最强战将:Behavior资料卡片
                              • 二、资源文件
                                • 1.常用颜色一览:
                                  • 2.测试Text样式抽取
                                    • 3.常用尺寸
                                      • 4.资源图标位置:
                                        • 5.图片资源位置
                                        领券
                                        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档