美文网首页一起来学习Material Design
Material Design基本控件的说明

Material Design基本控件的说明

作者: 前山饭店 | 来源:发表于2018-04-02 22:53 被阅读25次

    1.什么是Material Design
    2.为什么使用Material Design
    3.Material Design主要的控件和使用

    什么是Material Design

    中文翻译为材料设计,由谷歌2014年I/O大会上推出的全新设计语言。对于Android系统会提供API供开发使用。

    为什么使用Material Design

    首先先问下为什么要推出这个设计语言?为了构建一种跨平台和超越尺寸的统一体验的设计体系。题外话是,嫉妒苹果的统一性设计,想扩大自己在软件上的设计影响力。但是对于Android开发者来说,还是具有界面美观,便捷开发的优势。

    Material Design主要的控件和使用

    对于Android应用开发,需要引入Design设计包,才可以使用。

    dependencies {
          implementation "com.android.support:design:26.0.2"
    }
    
    • DrawerLayout + NavigationView (ActionBarDrawerToggle)模式可以制作一个侧滑拦的布局,非常简洁好用。

    • CoordinatorLayout:协调性布局,目前是分为两部分:可收缩布局和可滑动布局。可收缩布局主要是由AppBarLayout包裹一些控件来收缩布局,比如CollapsingToolbarLayout,Toolbar;可滑动布局明确规定必须实现NestedScrollingChild接口才能实现滑动效果,可直接使用的控件有NestedScrollView,SwipeRefreshLayout和RecyclerView。

    AppBarLayout中scrollFlags的五个值:
    scroll:表示子布局可以滑动来展现或者隐藏AppBar布局,这是其它四个条件的必要条件
    snap:表示界面显示完整的AppBar布局或者不显示AppBar布局,或者只显示Toolbar的高度
    exitUtilCollapsed:表示Toolbar固定在顶部显示,AppBar根据子布局展示顶部时才全部显示
    enterAlways:内容向下拉时显示完整Appbar,内容向上推时隐藏Appbar
    enterAlwaysCollapsed:内容向下拉到顶部时显示Appbar,否则不显示Appbar
    这几种可以组合使用,效果会有些微的变化:
    scroll enterAlways enterAlwaysCollapsed 内容向下拉时只显示Toolbar,内容向上拉时隐藏AppBarLayout布局

    • BottomNavigationView是实现底部导航栏的控件,官方指导2-4控件放在底部比较合适,通过设置app:menu="@menu/bottom_navigation_menu"来显示控件。
      TabLayout是和BottomNavigationView控件类似的一组导航栏控件,常放于屏幕顶部,子控件数量不限,所以它本身设置了好多种模式,滑动的,平分的,居中的,各种效果都有。
      这两种控件都可以展示许多个View,一般都与View Pager一起使用,里面包含Fragment显示。

    • 另外有一些常用的控件,例如FloatingActionButton,放在CoordinatorLayout布局中具有可收缩功能,其它好像跟一个ImageView没有太多的区别。SnackBar,是底部显示通知消息的一种控件,并且可以设置操作功能,相比于以前的Toast只能提示信息,多了可以操作的功能。CardView,可以方便的实现圆角,阴影等效果的布局,继承于FrameLayout。TextInputLayout控件,里面常包裹输入框,可以将hint内容在输入内容时移动输入框顶部,可以在输入库底部显示错误的信息,可以显示输入字符的数量等等功能,算是一个集成的功能。


    具体使用可参考Material Design基本控件使用Demo

    相关文章

      网友评论

        本文标题:Material Design基本控件的说明

        本文链接:https://www.haomeiwen.com/subject/bodfhftx.html