Material Design

最新推荐文章于 2022-08-31 10:44:50 发布

qingsongwill

最新推荐文章于 2022-08-31 10:44:50 发布

阅读量285

点赞数

分类专栏： android 文章标签： android material-design

本文链接：https://blog.csdn.net/qingsongfoxconn123/article/details/71077092

版权

android 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

Android新控件

DrawerLayout 顶层容器，通常与NavigationView实现侧滑菜单
NavigationView 导航菜单
CoordinatorLayout 一个超级强大的FrameLayout，主要用于根布局、与子视图做特定交互
AppBarLayout MD风格滑动布局，子视图需提供滚动行为
CollapsingToolbarLayout 对ToolBar再次包装
ToolBar 工具栏、导航栏
TabLayout 官方tabs组件，通常与ViewPager组合实现主内容区域
ViewPager 可以左右滑动的布局管理器
FloatingActionButton 浮动按钮
TextInputLayout 包裹EditText，实现带提示EditText
SnackBar 类似Toast轻量级提示控件
CardView 卡片式View，轻松实现圆角阴影效果

DrawerLayout 通常使用情况布局如下：

<?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:background="@color/white">
    <include
        layout="@layout/inc_content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
    <android.support.design.widget.NavigationView
        android:id="@+id/navigation_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        app:headerLayout="@layout/view_nav"
        app:menu="@menu/drawer"/>
</android.support.v4.widget.DrawerLayout>

通常主要布局内容布局放在DrawerLayout中第一个位置，第二个位置放DrawerLayout中的内容，通常与NavigationView结合实现抽屉式侧滑菜单也可使用其他布局；
打开侧滑菜单
drawerLayout.openDrawer(GravityCompat.START)
关闭侧滑菜单
drawerLayout.closeDrawers()

NavigationView

app:headerLayout：NavigationView中头部的head部分的布局，自己定义一个布局；
app:menu：指定NavigationView中的Menu布局，就是自己写Menu中的按钮，要放在res/menu/文件夹下；

CoordinatorLayout

一个增强型的FrameLayout，可以实现与子布局交互，比如滚动的工具栏（ToolBar）、浮动View（FloatingActionButton ）为SnackBar腾出位置等；

ToolBar 是用来替换ActionBar的，使用ToolBar时需隐藏ActionBar；

隐藏ActionBar方法：

在style.xml文件下AppTheme中加入以下两行

<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>

也可以将AppTheme的parent设置为Theme.AppCompat.Light.NoActionBar的方式

AppBarLayout

继承LinearLayout，方向垂直，当外部某个可滚动控件滚动时，可定制内部控件如何移动；
通过设置子View ：app:layout_scrollFlags属性来控制子View执行动作：
- scroll: 值设为scroll的View会跟随滚动事件一起发生移动。就是当指定的ScrollView发生滚动时，该View也跟随一起滚动，就好像这个View也是属于这个ScrollView一样。
- enterAlways:值设为enterAlways的View,当ScrollView往下滚动时，该View会直接往下滚动。而不用考虑ScrollView是否在滚动。
- exitUntilCollapsed：值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。
- exitUntilCollapsed：值设为exitUntilCollapsed的View，当这个View要往上逐渐“消逝”时，会一直往上滑动，直到剩下的的高度达到它的最小高度后，再响应ScrollView的内部滑动事件。
需要注意的是，后面两种模式基本只有在CollapsingToolbarLayout才有用;
将AppBarLayout与滑动控件关联起来需指定Behavior，即属性：app:layout_behavior=”@string/appbar_scrolling_view_behavior”

CollapsingToolbarLayout

CollapsingToolbarLayout是用来对Toolbar进行再次包装的ViewGroup，主要是用于实现折叠（其实就是看起来像伸缩~）的App Bar效果。它需要放在AppBarLayout布局里面，并且作为AppBarLayout的直接子View。
常见布局：

<?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.support.design.widget.AppBarLayout
        android:id="@+id/app_bar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorAccent"
            app:layout_scrollFlags="scroll|enterAlways|snap"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"/>

        <android.support.design.widget.TabLayout
            android:id="@+id/tabs"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>

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

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
        android:id="@+id/fab"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="end|bottom"
        android:layout_margin="16dp"
        android:src="@mipmap/ic_done"/>
</android.support.design.widget.CoordinatorLayout>

<?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/detail_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:fitsSystemWindows="true"
      android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/coll_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:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:layout_height="match_parent"/>

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

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="match_parent"></android.support.v7.widget.Toolbar>

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

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

    <android.support.v4.widget.NestedScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior">

        <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>
        </LinearLayout>
    </android.support.v4.widget.NestedScrollView>
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="@dimen/fab_margin"
        android:clickable="true"
        android:src="@mipmap/ic_discuss"
        app:layout_anchor="@id/appbar"
        app:layout_anchorGravity="bottom|right|end"/>
</android.support.design.widget.CoordinatorLayout>

TabLayout

Tabs选项卡，和ViewPager搭配使用可以增大界面的内容展示量，实现各种个性化分类内容展示而不互相干扰！
常用属性：
有以下常用属性：
- app:tabGravity=”fill” 表示TabLayout中的Tabs要占满屏幕的width；
- app:tabSelectedTextColor：Tab被选中字体的颜色；
- app:tabTextColor：Tab未被选中字体的颜色；
- app:tabIndicatorColor：Tab指示器下标的颜色；

FloatingActionButton

这是一个浮动按钮。由于FloatingActionButton是重写ImageView的，所有FloatingActionButton拥有ImageView的一切属性。
属性介绍：
- app:backgroundTint : FAB的背景色。
- app:elevation：FAB的阴影效果。
- app:rippleColor：设置涟漪的颜色，默认是由背景色生成的暗色调，可以自己指定。
- app:pressedTranslationZ：FAB动画效果，在它被按下的时候阴影就会增大。

CardView

常用属性：
- app:cardBackgroundColor : 背景颜色
- app:cardCornerRadius ：设置圆角。
- app:cardElevation ：阴影。
- app:cardMaxElevation ：最大阴影。
- app:cardPreventCornerOverlap ：在v20和之前的版本中添加内边距，这个属性是为了防止卡片内容和边角的重叠。
- app:cardUseCompatPadding ：设置内边距，v21+的版本和之前的版本仍旧具有一样的计算方式

Snackbar

是一种针对操作的轻量级反馈机制，常以一个小的弹出框的形式，出现在手机屏幕下方或者桌面左下方。它们出现在屏幕所有层的最上方，包括浮动操作按钮。

它们会在超时或者用户在屏幕其他地方触摸之后自动消失。Snackbar 可以在屏幕上滑动关闭。当它们出现时，不会阻碍用户在屏幕上的输入，并且也不支持输入。屏幕上同时最多只能现实一个 Snackbar。

Android 也提供了一种主要用于提示系统消息的胶囊状的提示框 Toast。Toast 同 Snackbar 非常相似，但是 Toast 并不包含操作也不能从屏幕上滑动关闭。

[GitHub很不错Demo]（https://github.com/chrisbanes/cheesesquare）

qingsongwill

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Material Design

Android新控件DrawerLayout 顶层容器，通常与NavigationView实现侧滑菜单NavigationView 导航菜单CoordinatorLayout 一个超级强大的FrameLayout，主要用于根布局、与子视图做特定交互AppBarLayout MD风格滑动布局，子视图需提供滚动行为ToolBar 工具栏、导航栏TabLayout 官方tabs组件，通常
复制链接

扫一扫