Material Design控件总结

时间  2020-08-13 标签 material design 控件 总结

1. Toolbar

知识点1：Toolbar和ActionBar的区别？

Toolbar与ActionBar相似，但ActionBar只能仅位于活动的顶部，并且也不能实现Material Design效果，使用不灵活。通常在开发时都会在app的theme里设置不显示ActionBar,以下：java

<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

知识点2：colorPrimary，colorAccent等分别是设置哪块的色值？

这里写图片描述
并用Toolbar代替ActionBar,以下设置：android

<android.support.v7.widget.Toolbar xmlns:app="http://schemas.android.com/apk/res-auto"
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="@dimen/titlebar_height"
                android:background="@color/colorPrimary"
                app:contentInsetStart="0.0dp"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:theme="@style/ToolbarStyle">

知识点3:为何要指定新的xmlns:app命名空间？

因为Material Design是在Android 5.0系统才出现的，不少的Material属性在5.0以前系统不存在，为了兼容以前老系统，就不能直接用android:atrribute这样的写法，而应该使用app:attribute
app:theme是设置toolbar的主题，app:popupTheme是设置弹出菜单项的主题，为淡色主题web

知识点4：在xml中写好了Toolbar，代码中应该怎么用？

Toolbar toolbar = (Toolbar) findViewById(R.id.tool_bar);//得到Toolbar实例
setSupportActionBar(toolbar);//将toolbar实例传入，这样既保证使用了Toolbar,又让它的外观与功能都和ActionBar一致。

知识点5：怎么给Toolbar设置返回按钮和标题？

  1. 设置标题
    方法1: 在AndroidMainfest.xml相应的activity注册信息里，添加android:label属性
    方法2: 调用Toolbar里的setTitle()方法，可是使用时要注意，有些时候设置了，发现标题栏并无跟着变，是你使用姿式不对哦。如下两种方法均可以成功设置Toolbar的标题
    （1) 在setSupportActionBar(titletoolbar);以前调用ToolBar的setTitle方法。
    （2) 在Activity的onResume周期中调用。
    方法3: 本身在Toolbar里添加TextView控件，并隐藏系统的title，而后直接给本身定义的TextView控件设置值。
ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            //去除默认Title显示
            actionBar.setDisplayShowTitleEnabled(false);
        }

2 设置返回按钮
方法1: 利用Toolbar自带的返回
getSupportActionBar().setDisplayHomeAsUpEnabled(true);//显示返回键
还能够自定义返回按钮app

ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.mipmap.icon_back);
        }

方法2: 在Toolbar布局内部自定义ImageButton控件，并设置其图标ide

2. 滑动菜单DrawLayout

知识点1: DrawLayout能够包含几个子控件，它们的关系是怎样的？

能够经过左滑或是右滑主屏幕，将菜单显示出来，以下图所示：
这里写图片描述
DrawerLayout容许在布局中放入两个直接子控件，第一个子控件是主屏幕中显示的内容，第二个子控件是滑动菜单中显示的内容。svg

<android.support.v4.widget.DrawerLayout
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:openDrawer="start">
     <include
        layout="@layout/app_bar_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/nav_header_main"
        app:menu="@menu/main"
        />
</android.support.v4.widget.DrawerLayout>

第二个子控件中的layout_gravity属性是必须指定，告诉DrawerLayout滑动菜单是在屏幕的左边仍是右边，left表示滑动菜单在左边，right表示滑动菜单在右边。start会根据系统语言判断，若系统语言是从左至右，如英语、汉语等，滑动菜单在左边，若系统语言是从右往左，如阿拉伯语，滑动菜单就在右边。布局

知识点2: 如要想在主界面点击某个按钮弹出左滑的菜单栏如何实现？

能够在主界面标题栏中添加一个导航栏按钮，设置点击的响应方式为：spa

mDrawerLayout.open(GravityCompat.START);//打开左侧菜单栏
mDrawerLayout是xml中定义的DrawerLayout的实例。

若是想关闭菜单，则调用mDrawerLayout.closeDrawers();.net

知识点3:NavigationView有什么特殊之处？

NavigationView是android5.0以后推出的一个抽屈菜单，菜单栏总体上分为两部分，上面部分叫HeaderLayout, 下面的点击项都是menu
menu定义以下：3d

<menu xmlns:android="http://schemas.android.com/apk/res/android">  
    <item  
        android:id="@+id/favorite"  
        android:icon="@mipmap/ic_launcher"  
        android:title="收藏"/>  
    <item  
        android:id="@+id/wallet"  
        android:icon="@mipmap/ic_launcher"  
        android:title="钱包"/>  
    <item  
        android:id="@+id/photo"  
        android:icon="@mipmap/ic_launcher"  
        android:title="相册"/>  
    <item  
        android:id="@+id/file"  
        android:icon="@mipmap/ic_launcher"  
        android:title="文件"/>  
</menu>

每一项item表示一个菜单，android:icon指定菜单的图标，android:title指定菜单显示的文字

3. 悬浮按钮FloatingActionBar

<android.support.design.widget.FloatingActionButton
            style="@style/layout_ww"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:layout_margin="15dp"
            android:src="@mipmap/actionbar_add_icon"
            android:id="@+id/add_fab"/>

它会悬浮在当前界面上，按钮默认的背景色为应用主题色colorAccent，也能够自定义背景色值，app:backgroundTint这里能够设置按钮点击和常态色值。
还可与CoordinatorLayout结合使用，设置app:layout_behavior和app:layout_scrollFlags=”scroll|enterAlways|snap”，让按钮在列表向上滑动时隐藏，向下滑动时显示。

4. 卡片布局CardView

CardView相似于FrameLayout,只是额外提供了圆角和阴影等效果，看上去会有立体的感受。

<android.support.v7.widget.CardView 
    android:id="@+id/cardView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:padding="10dp"
    app:cardCornerRadius="4dp"
    app:elevation="4dp">

app:cardCornerRadius是指定卡片圆角的弧度，数值越大，圆角的弧度也越大；
app:elevation指定卡片高度，值越大，投影范围也越大，投影效果越淡。

5. 下拉刷新SwipeRefreshLayout

将SwipeRefreshLayout包裹在须要刷新布局外面。

<android.support.v4.widget.SwipeRefreshLayout  
       android:id="@+id/demo_swiperefreshlayout"  
       android:layout_width="fill_parent"  
       android:layout_height="fill_parent"  
        android:scrollbars="vertical"  
        >  
       <android.support.v7.widget.RecyclerView  
           android:id="@+id/demo_recycler"  
           android:layout_width="fill_parent"  
           android:layout_height="fill_parent"  
           ></android.support.v7.widget.RecyclerView>  
   </android.support.v4.widget.SwipeRefreshLayout>  
在具体代码中使用：
demo_swiperefreshlayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {  
            @Override  
            public void onRefresh() {  
                //刷新的操做
            }  
        });

6. 可折叠标题栏CollapsingToolbarLayout

CollapsingToolbarLayout是一个做用于Toolbar基础上的布局，CollapsingToolbarLayout只能做为AppBarLayout的直接子布局来使用。AppBarLayout又必须是CoordinatorLayout子布局。
具体使用以下：

<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="200dp"
            android:fitsSystemWindows="true"
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

            <android.support.design.widget.CollapsingToolbarLayout
                android:id="@+id/collapsing_toolbar"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:fitsSystemWindows="true"
                app:contentScrim="?attr/colorPrimary"
                app:expandedTitleMarginEnd="64dp"
                app:expandedTitleMarginStart="48dp"
                app:layout_scrollFlags="scroll|exitUntilCollapsed">

                <ImageView
                    android:id="@+id/logo"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:background="@mipmap/header_img"
                    android:contentDescription="@null"
                    android:fitsSystemWindows="true"
                    android:scaleType="fitCenter"
                    app:layout_collapseMode="parallax"
                    app:layout_collapseParallaxMultiplier="0.1" />

                <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.design.widget.CollapsingToolbarLayout>

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

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

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

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

        <android.support.design.widget.FloatingActionButton
            android:id="@+id/floating_action_button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="@dimen/fab_margin"
            android:clickable="true"
            android:src="@mipmap/ic_star_black_24dp"
            app:layout_anchor="@id/appbar"
            app:layout_anchorGravity="bottom|right|end" />

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

具体说明可见个人另外一篇博客：http://blog.csdn.net/smileiam/article/details/61643006
CollapsingToolbarLayout中定义了一个ImageView和一个Toolbar，这个标题栏将由普通标题栏加上图片组合而成。
app:layout_collapseMode用于指定当前控件在CollapsingToolbarLayout折叠过程当中的折叠模式，Toolbar指定成pin，表示在折叠过程当中始终保持不变，ImageView设置成parallax，表示会在折叠过程当中产生必定的错位偏移。

7. 如何实现沉浸式状态栏？

要让背景图能和系统栏融合，须要借助android:fitsSystemWindows属性，设置android:fitsSystemWindows=”true”表示该控件会出如今系统状态栏里，不过须要把该控件的全部父布局都设置成该属性才行。同时还需把主题中的状态栏颜色指定成透明色。在主题中设置android:statusBarColor属性值设置成@android:color/transparent。不过这个属性是从Android5.0系统开始才有，须要建立一个values-21目录，并设置styles.xml，在里边设置状态栏色值，而在默认的values文件夹的styles.xml中不设置状态栏色值。

联系我们 沪ICP备13005482号-10