一篇文章让你彻底搞懂Material Design

最新推荐文章于 2024-10-15 02:52:32 发布
最新推荐文章于 2024-10-15 02:52:32 发布
阅读量5.5k 收藏 15
点赞数 2
文章标签： android MD
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u014702332/article/details/53731511
版权

Material Design越来越流行了，然而从来没有人整理一份比较好的MD 学习文档，而自己也不怎么熟悉，所以这篇文档就诞生了。

声明： 本文是参考郭神出版的《Android第二行代码》第12章Material Design实战编写，在此基础上做了一些取舍与提起。

转载请标明出处：
http://blog.csdn.net/u014702332/article/details/53731511
本文出自:【扫地僧的博客】

1. ToolBar

使用ToolBar需要注意以下几点

1. 主题需要修改一下，需要继承NoActionBar,而不要用DarkActionBar，这样会导致ActionBar重复，程序崩溃

2. 颜色样式 ：

     1. colorPrimary   指定标题栏背影色
     2. colorPrimaryDrak   指定状态栏颜色
     3. textColorPrimary   指定标题文字颜色
     4. windowBackground   背景色
     5. navigationBarColor 指定状态导航条颜色
     6. colorAccent  比较特殊，指定浮动按钮颜色  


    <!--<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

效果图

3. 注意引用主题 theme popupTheme


<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <android.support.v7.widget.Toolbar
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
        app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        />
</FrameLayout>

看起来非常单调，这个时候我要插入按钮了。

4.插入菜单按钮


<?xml version="1.0" encoding="utf-8"?>
<menu
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    >

    <item
        android:id="@+id/back_up"
        android:icon="@drawable/ic_backup"
        android:title="back up"
        app:showAsAction="always"
        />

    <item
        android:id="@+id/delete"
        android:icon="@drawable/ic_delete"
        android:title="delete"
        app:showAsAction="ifRoom"
        />

    <item
        android:id="@+id/settings"
        android:icon="@drawable/ic_settings"
        android:title="settings"
        app:showAsAction="never"
        />

</menu>
  1. always 表示永远显示，如果屏幕空间不够则不显示
  2. ifRoom 表示屏幕空间足够的情况下显示在ToolBar中，不够就显示在菜单中。
  3. never 则表示永远显示在菜单中。
  4. 注意 ToolBar中的action按钮只会显示按钮，菜单中的action按钮，只会显示文字

效果图
5.菜单的点击事件

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return super.onCreateOptionsMenu(menu);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {

            case R.id.back_up:
                Toast.makeText(this, "You clicked Backup", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "You clicked Delete", Toast.LENGTH_SHORT).show();
                break;
            case R.id.settings:
                Toast.makeText(this, "You clicked Settings", Toast.LENGTH_SHORT).show();
                break;
            default:
        }
        return true;
    }

当然ToolBar功能远不止这些，我这里只是列出常用的功能。一般项目够用。

2. 滑动菜单

2.1 DrawerLayout

用法：首先他是一个布局，在布局中允许放入2个直接子控件，第一个子控件是主屏幕显示的内容，第二个子控件是滑动菜单中显示的内容

<?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">


    <FrameLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    </FrameLayout>


    <TextView
        android:id="@+id/tv_menu"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:text="this is menu"
        android:textSize="30sp"
        android:background="#FFF"

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

这里需要指定下TextView的 android:layout_gravity=”start” 告诉滑动菜单是在屏幕左边，还是右边，left,表示在左边，right在右边，这里我用start,会根据系统语言来从左往右。

但是这样弄完还有一个缺陷，用户可能不知道有这个侧滑菜单，所以我们需要添加一个按钮来告诉用户，官方推荐是在导航栏加入一个按钮。

      drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();
        if (null != actionBar){
            actionBar.setDisplayHomeAsUpEnabled(true);
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar,menu);
        return super.onCreateOptionsMenu(menu);
    }


    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {

            case android.R.id.home:
                drawerLayout.openDrawer(GravityCompat.START);
                break;

2.2 NavigationView

但上面的菜单栏显示与我们实际想要的效果还差很完，还好官方提供了Navigation控件，让我们很好的把菜单栏处理一下，几行代码就可以集成。

<?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">


    <FrameLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent">


        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
            app:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" />
    </FrameLayout>

    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_gravity ="start"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/header_layout"

        />

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

官方提供了NavigationView控件，我们只需要指定app:menu与app:headerLayout就可以设置菜单栏与头部栏目。

nav_menu布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <group android:checkableBehavior="single">

        <item
            android:id="@+id/nav_call"
            android:icon="@drawable/nav_call"
            android:title="call" />
        <item
            android:id="@+id/nav_friends"
            android:icon="@drawable/nav_friends"
            android:title="friends" />
        <item
            android:id="@+id/nav_location"
            android:icon="@drawable/nav_location"
            android:title="location" />
        <item
            android:id="@+id/nav_mail"
            android:icon="@drawable/nav_mail"
            android:title="mail" />
        <item
            android:id="@+id/nav_task"
            android:icon="@drawable/nav_task"
            android:title="task" />


    </group>
</menu>

以及header_layout.xml布局如下：

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="180dp"
    android:background="?attr/colorPrimary"
    android:padding="10dp">


    <de.hdodenhof.circleimageview.CircleImageView
        android:id="@+id/icon_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:layout_centerInParent="true"
        android:src="@drawable/nav_icon" />

    <TextView
        android:id="@+id/username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="tonygreendev@gmail.com"
        android:textColor="#FFF"
        android:textSize="14sp" />

    <TextView
        android:id="@+id/mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/username"
        android:text="Tony Green"
        android:textColor="#FFF"
        android:textSize="14sp" />

</RelativeLayout>

这里写图片描述

3.悬浮按钮和可交互提示

3.1 FloatingActionButton

这个按钮感觉用处好像和普通按钮没有多大区别，不知道官方为什么会弄这个这样的按钮，完全必要似的啊，但不管吧，也给大家看一下

这里面布局文件有一个属性 android:elevation=”8dp” 指定高度值，高度值越大，投资范围越大，感觉没有什么用似的。直接用默认的就够了。

直接上代码吧：


    <FrameLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent">


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


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


    </FrameLayout>


        final FloatingActionButton floatingActionButton = (FloatingActionButton) findViewById(R.id.fab);
        floatingActionButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(A12Activity.this, "Fab click", Toast.LENGTH_SHORT).show();
            }
        });

3.2 Snackbar

首先要明确的是SnackBar并不是Toast的替代器，他们两者之间有不同的应用场景，Toast的作用是告诉用户现在发生了什么事件，但同时用户只能被动接收这个事情，而SnackBar除了有Toast显示 的功能外，还可以在这基础上做其它的操作，打比方，我删除了一条数据，用SnackBar可以撤销这个操作。
具体用法如下，非常简单：


        Snackbar.make(view,"Data delete!",Snackbar.LENGTH_LONG)
                .setAction("撤销",new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Snackbar.make(view,"撤销了",Snackbar.LENGTH_LONG).show();
            }
        }).show();

感觉比Toast好看些，另外如果你需要在这基础上作撤销操作，可以setAction。 个人感觉这个setAction并无卵用。

这里写图片描述

另外我们这个时候发现，SnackBar弹出View把悬浮按钮挡住了，效果不好看，好在Material Design给出了解决方案，这就是，CoordinatorLayout

3.3 CoordinatorLayout

CoordinatorLayout 可以说是一个加强版的FrameLayout,在普通情况下的作用和FrameLayout基本一致，事实上CoordinatorLayout可以监听其所有了控件的各种事件，然后自动帮助我们做出最为合理的响应。举个简单例子，弹出SnackBar提示将悬浮按钮遮挡住了，如果我们让CoordinatorLayout监听到SnackBar的弹出事件，那么它会自动将内部的FloatingActionButton身上偏移，从而确保不会被SnackBar遮挡.
直接用CoordinatorLayout来替换FrameLayout就好了：

...
    <android.support.design.widget.CoordinatorLayout

        android:layout_width="match_parent"
        android:layout_height="match_parent">


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


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


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

下面我写了两份基本相同的代码SnackBar中传入的第一个参数，做了改动，如果用drawerLayout,，他不是CoordinatorLayout的子控件，所以无法坚挺变化，这个时候悬浮按钮还是会被挡住。

                Snackbar.make(drawerLayout,"Data delete!",Snackbar.LENGTH_LONG)
                        .setAction("撤销",new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Snackbar.make(drawerLayout,"撤销了",Snackbar.LENGTH_LONG).show();
                            }
                        }).show();

                Snackbar.make(view,"Data delete!",Snackbar.LENGTH_LONG)
                        .setAction("撤销",new View.OnClickListener() {
                            @Override
                            public void onClick(View view) {
                                Snackbar.make(view,"撤销了",Snackbar.LENGTH_LONG).show();
                            }
                        }).show();

4. 卡片式布局

4.1 CardView

CardView也是一个FrameLayout,只是额外提供了圆角和阴影等效果。这里没有什么好讲的，贴代码吧。


<?xml version="1.0" encoding="utf-8"?>

<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    app:cardCornerRadius="4dp"

    android:elevation="5dp"

    >

    <TextView

        android:id="@+id/tv_info"

        android:layout_width="match_parent"

        android:layout_height="wrap_content" />



</android.support.v7.widget.CardView>

app:cardCornerRadius属性指定卡片圆角的弧度，数值越大，弧度越大，另外还可以通过app:elevation属性来指定卡片的高度，高度数值越大，投影ailfbn越大，但是投影效果越淡，高度值越小，投影范围也越小，但是投影效果越浓。

4.2 AppBarLayout

上面会造成RecyclerView把ToolBar挡住，由于RecyclerView和ToolBar都是放在CoordinatorLayout中的，我们知道CoordinatorLayout就是一个加强版的FrameLayout,在不进行明确定位的情况下，默认都会放在左上角，从而产生遮挡。由于我们使用的是CoodinatorLayout,而不是FrameLayout所以我们有更加巧妙的解决办法。
好在官方也给出方案使用AppBarLayout，它实际上是一个垂直方向的LinearLayout,它在内部做了很多滚动事件的封装，并应用了Material Design设计理念
我们现在来解决之前覆盖的问题

  1. 将ToolBar嵌套到AppBarLayout中，
  2. 给RecyclerView指定一个布局行为, app:layout_behavior=”@string/appbar_scrolling_view_behavior”。
  3. 但这还没有完，还需要在ToolBar中添加一个属性 app:layout_scrollFlags=”scroll|enterAlways|snap”
    1. scroll 表示当RecyclerView身上滚动的时候，ToolBar会跟着向上滚动并实现隐藏
    2. enterAlways 表示当RecyclerView向下滚动的时候，ToolBar会跟着一起向下滚动，并重新显示
    3. snap表示当ToolBar还没有完全隐藏或者显示的时候，会根据当前滚动的距离，自动选择隐藏还是显示

代码如下：


    <android.support.design.widget.CoordinatorLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent">



        <android.support.design.widget.AppBarLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content">



            <android.support.v7.widget.Toolbar

                android:id="@+id/toolbar"

                android:layout_width="match_parent"

                android:layout_height="?attr/actionBarSize"

                android:background="?attr/colorPrimary"

                android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"

                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"

                app:layout_scrollFlags="scroll|enterAlways|snap" />

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

        <android.support.v7.widget.RecyclerView
            android:id="@+id/recycler_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_behavior="@string/appbar_scrolling_view_behavior"
            />
            ...

这里写图片描述

5 下拉刷新

这个控件算是我们比较常用的控件了，但这里我是需要再做一下说明


        <android.support.design.widget.AppBarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">

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

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

            <android.support.v7.widget.RecyclerView
                android:id="@+id/recycler_view"
                android:layout_width="match_parent"
                android:layout_height="match_parent" />
        </android.support.v4.widget.SwipeRefreshLayout>

这里需要注意一下由于RecyclerView变成了SwipeRefreshLayout的子控件了，所以之前使用的app:layout_behavior 声明布局行为也要列表SwipeRefreshLayout中才行
这里我需要说明几个SwipeRefreshLayout所用到的方法

  1. setColorSchemeResources(R.color.colorPrimary); 来设置下拉刷新的颜色
  2. setOnRefreshListener 来做下拉刷新监听。
  3. 最后需要设置setRefreshing(false) 来结束刷新事件，并隐藏刷新进度条。

代码如下：

    private SwipeRefreshLayout swipeRefresh;
        swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
        swipeRefresh.setColorSchemeResources(R.color.colorPrimary);
        swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
            @Override
            public void onRefresh() {
                refreshFruits();
            }
        });
    }

    private void refreshFruits() {
        new Thread(new Runnable() {
            @Override
            public void run() {
                try {
                    Thread.sleep(2000);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                runOnUiThread(new Runnable() {
                    @Override
                    public void run() {
                        initFruits();
                        adapter.notifyDataSetChanged();
                        swipeRefresh.setRefreshing(false);
                    }
                });
            }
        }).start();
    }

6 可折叠式标题栏

6.1 CollapsingToolBarLaout

  1. 顾名思义 CollapsingToolBarLayout是一个作用于ToolBar基础之上的布局，他不能独立存在的，
  2. 它在设计的时候就被限定只能作为AppBarLayout的直接子布局来使用，而AppBarLayout又必须是CoodinatorLayout的子布局。

所以我们可以这么表现他们的层级
   CoodinatorLayout
        AppBarLayout
             CollapsingToolBarLayout             

<?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:orientation="vertical" 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="exitUntilCollapsed|scroll"
            >

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

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

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

对上述代码解释

  1. android:theme 指定了一个主题，
  2. app:contentScrim=”?attr/colorPrimary” 用于指定CollapsingToolbarLayout在趋于折叠状态以驻折叠之后的背影色，其实，CollapsingToolbarLayout 在折叠之后就是一个普通的ToolBar,那么背景色应该是colorPrimary
  3. app:layout_scrollFlags=”exitUntilCollapsed|scroll” scroll表示CollapsingToolbarLayout会随着滚动完成折叠之后留在界面上，不再移出屏幕。4

另外：

<?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:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="250dp">

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="exitUntilCollapsed|scroll"
            >


            <ImageView
                android:id="@+id/iv_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                app:layout_collapseMode="parallax"
                />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                />


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

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

</android.support.design.widget.CoordinatorLayout>
  1. 我们可以看到CollapsingToolbarLayout中定义了一个ImageView和Toolbar也就意味着，这个高级版的标题将是由普通的标题栏加上图片组合而成的。
  2. app:layout_collapseMode=”” 指定成pin表示在折叠的过程中位置始终保持不变，而指定成parallax表示会在折叠过程中产生一定的错位偏移。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_fruit);
        Intent intent = getIntent();
        String fruitName = intent.getStringExtra(FRUIT_NAME);
        int fruitImageId = intent.getIntExtra(FRUIT_IMAGE_ID, 0);
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
         CollapsingToolbarLayout collapsingToolbar = (CollapsingToolbarLayout)          findViewById(R.id.collapsing_toolbar);
        ImageView fruitImageView = (ImageView) findViewById(R.id.fruit_image_view);
        TextView fruitContentText = (TextView) findViewById(R.id.fruit_content_text);
        setSupportActionBar(toolbar);
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);
        }
        collapsingToolbar.setTitle(fruitName);
        Glide.with(this).load(fruitImageId).into(fruitImageView);
        String fruitContent = generateFruitContent(fruitName);
        fruitContentText.setText(fruitContent);
    }

    private String generateFruitContent(String fruitName) {
        StringBuilder fruitContent = new StringBuilder();
        for (int i = 0; i < 500; i++) {
            fruitContent.append(fruitName);
        }
        return fruitContent.toString();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()) {
            case android.R.id.home:
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }

说明

  1. collapsingToolbar.setTitle()设置标题，
  2. 获取ActionBar，并且使 actionBar.setDisplayHomeAsUpEnabled(true); 因为默认图标就是一个返回剪头，所以无需另外设置。

这里写图片描述

6.2 充分利用系统状态栏空间

我们发现背景图片与系统的状态栏总有一些不搭的感觉，这时我们可以融合一下就好了。
只给ImageView设置


<?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:orientation="vertical"
    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="250dp"
        android:fitsSystemWindows="true"
        >

        <android.support.design.widget.CollapsingToolbarLayout
            android:id="@+id/collapsing_toolbar"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="exitUntilCollapsed|scroll"
            android:fitsSystemWindows="true"
            >


            <ImageView
                android:id="@+id/iv_img"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="centerCrop"
                android:fitsSystemWindows="true"
                app:layout_collapseMode="parallax"
                android:src="@drawable/nav_friends"
                />

            <android.support.v7.widget.Toolbar
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                app:layout_collapseMode="pin"
                />

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

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

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

为了图片与状态栏融合需要做以下几条：

  1. 把Imageview以及其父控件的属性 android:fitsSystemWindows=”true” 全部设置为true
  2. 还必须把程序的主题中状态栏颜色指定成透明色，android:statusBarColor 属性指定成透明 @android:color/transparent就可以，但问题在于android:statusBarColor的属性是从API21，也就是5.0系统 才有的。如果实现差异性功能呢。

右击res目录-》new–>Directory创建values-v21目录 然后创建一个styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="FruitActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

专门指定了一个FruitActivityTheme主题，给FruitActivity使用。由于values-v21目录只有Android5.0及以上系统才会读取，因此不会有问题。

另外还需要兼容5.0以前的版本，因为5.0之前的系统无法指定状态栏颜色，因此wftcbn不用设置

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="FruitActivityTheme" parent="AppTheme">
    </style>

</resources>

代码地址

注：效果图片是事后才补上的，mac上没有找到好的做Gif图工具，当时就没有做，另外gif图片比较大，后面几张图不怎么好看，凑合着看一下吧

我的Android进阶之旅------>RxJava学习资料汇总
字节卷动
04-29 6384
在响应式编程中，应该牢记以下两点：everything is a stream（一切皆流）don't break the chain（不要打断链式结构）记住，可观测序列就像一条河，它们是流动的。你可以“过滤”一条河，你可以“转换”一条河，你可以将两条河合并成一条，然后它依旧是流动的。最后，它将成为你想要的那条河。"Be Water,my friend"  --Bruce Lee(李小龙)-----
Material Design控件使用(一)
朱利源的博客
02-25 1万+
Md风格App架构搭建,AndroidM AndroidL 控件使用介绍
一篇博客让你了解Material Design的使用
一个码农的博客
08-25 1万+
Material Design的基本概念Material Design是Google设计的一套视觉语言，将优先的经典的设计原理与科技创新相结合，为开发者提供一套完成视觉和交互设计规范。移动设备是这套设计语言的基础对象，让用户在不同的平台、不同尺寸的设备上能保持一致的体验。 Material Design强调交互上的即时反馈，即对于用户的触控等行为app需要给出即时的反应。同时Materi
现代化 React UI 库：Material-UI 详解！
最新发布
weixin_40373920的博客
10-15 365
随着 React 在前端开发中的流行，越来越多的 UI 框架和库开始涌现，以帮助开发者更高效地构建现代化、响应式的用户界面。其中，Material-UI 是基于 Google Material Design 规范设计的一款开源 React UI 库，Github Star高达 94K，凭借其丰富的组件库、灵活的定制化选项以及无缝的开发体验，迅速成为了前端开发者的热门选择。今天我们将详细介绍 Ma...
Android Material Design新UI控件使用大全 一
jsx9057的博客
08-19 969
序言 自从谷歌在2014年的IO大会上推出了Material Design新的设计规范后,安卓应用的整体美观程度提升了很大的一个层次, 安卓再也不是又黑又丑的界面,取而代之的是拥有丰富的颜色,美观的按钮,好的用户体验;但是刚开始的话这种设计规范只能在Android 5.0以上的手机上运行,导致开发者也只是自己去体验,在国内并没有大范围的推广,App的质量并不能大幅度的提升,但是作为改变世界的
Material Design的使用
全栈大师兄
07-26 411
android5.X使用了Material Design主题，现在我们来看看如何使用。 首先在style资源文件中继承android:Theme.Material资源，当然android:Theme.Material...有很多， 然后你设置一下它的一些选项。                  #f20909              #0919f2
MaterialDesign的使用
fan_zyf的博客
05-18 559
一.Toolbar 如果要使用Toolbar，一般我们需要隐藏ActionBar。 一般的做法，                 @color/colorPrimary         @color/colorPrimaryDark         @color/colorAccent         关于这三个属性代表的是什么，一张图你就清楚了。 xml
【Android系统主题定制完全手册】：一篇文章搞定所有问题
在现代移动应用开发中，主题定制已不仅仅是一个辅助功能，它逐渐成为用户界面（UI）设计的重要组成部分，尤其在Android系统中，提供个性化体验的定制主题是吸引用户的亮点之一。本章节将概述Android系统主题定制的...
针对 CoordinatorLayout 及 Behavior 的一次细节较真
热门推荐
frank 的专栏
06-12 3万+
我认真不是为了输赢，我就是认真。– 罗永浩 我一直对 Material Design 很感兴趣，每次在官网上阅读它的相关文档时，我总会有更进一步的体会。当然，Material Design 并不是仅仅针对 Android 而言的，它其实是一套普遍性的设计规范。而对于 Android 开发人员而言，我们涉及的往往是它的实现。也就是一个个个性鲜明的类。比如 RecyclerView 、Car...
作为一名Android开发者，你有过迷茫吗？，vsandroid开发
m0_65146387的博客
12-15 421
前言 – 经常听新进的小白问道，Android是不是饱和了？想写一篇关于Android开发者忧虑的文章很久了，今天才提起勇气写。不管是在微信、QQ群，还是在各大博客网站，都随处听得到Android开发不景气的声音，而现在的大数据、人工智能的火爆程度，很大程度上对Android开发者不免有一定的影响，写这篇文章主要的目的是表达一下自己对目前Android开发的一点看法，仅仅是个人观点。 Google 2005年8月17就已经收购了Android，距今已经有十余载，纵观这十几年的发展可以说是天翻地覆。Andr
Android 用 TabLayout + ViewPager + Fragment 实现顶部、底部导航栏
QDJdeveloper
05-06 6188
这是我们 Material Design 系列的第四篇分享了，对 Material Design 还不是太清楚的可以先过前几篇大概的了解一下，今天我们主要通过实现顶部和底部导航栏的功能来了解又一个 Material Design 的控件 TabLayout 的使用，在移动应用开发中，由于屏膜大小的限制，使得顶部、底部 Tab 导航栏的使用非常的广泛，相信大家在实际开发过程中也是经常遇到，以前可以通
Material Design之Material Menu
08-02
Material Design之toolbar实现策划菜单
Material Design基本使用
Android小码农的博客
09-17 1783
1、Toolbar 1.1 修改样式##### 首先要知道，任何一个新建项目默认都是ActionBar，这个ActionBar就是根据项目中指定的主题来显示，打开AndroidManifest.xml文件看一下，如下所示： &lt;application android:allowBackup="true" android:icon="@mipmap/ic_...
关于MaterialDesign的综合使用
qq_35698774的博客
08-22 257
下图是根基前面几篇文章聚合成一个的： Android MaterialDesign简单使用_toolbar：https://blog.csdn.net/qq_35698774/article/details/107892669 Android MaterialDesign简单使用_DrawerLayout：https://blog.csdn.net/qq_35698774/article/details/107894719 悬浮按钮和可交互按钮：https://blog.csdn.net/qq_356
Material Design使用总结
坚持是一种品质
05-20 1万+
Material Design是在Android5.0时新推出的一种设计规范，现在绝大部分的app都已经使用这种新的设计规范来进行界面设计。其主要是强调材质和层次感在设计中的应用，Android中也做了一些原生态的支持，但是要使用这些都必须最小兼容到Android5.0，也就是API 21，或者是添加Material Design的一个支持库。关于详细的Material Design的解释和说明，
朝花夕拾----新组件的学习和使用
废墟的树的专栏
06-26 9677
【转载请注明出处：http://blog.csdn.net/feiduclear_up/article/details/46619637 CSDN 废墟的树】今天来学习总结一下，Android 后添加的一些新的组件和UI效果，Material Dialog，SwipeRefreshLayout，ListPopupWindow，PopupMenu等。Material Dialog你还在为使用 Mate
Material Design的基本使用方法、Tollbar、菜单等
摸鱼小小虫的博客
09-11 953
Toolbar、DrawerLayout——抽屉布局、悬浮按钮与可交互提示、监听布局、卡片式布局
Material-Design
李泽文的博客
04-01 2358
Material-Design 介绍Material design的相关控件在开发中使用 ##概述 对于开发人员，Android21新增了许多新控件和新特性，这些控件和特性都是基于Material Design的设计理念的，这一篇就来讲讲Material Design给Android开发带来的变化。 ##主题和布局 Material提供了下面三种主题 @android:style/The...
Material Design（一）
qq_36699930的博客
07-24 983
1.FloatingActionButton FloatingActionButton就是一个漂亮的按钮，其本质是一个ImageVeiw。有一点要注意，Meterial Design引入了Z轴的概念，就是所有的view都有了高度，他们一层一层贴在手机屏幕上，而FloatingActionButton的Z轴高度最高，它贴在所有view的最上面，没有view能覆盖它。 &amp;lt;android...
Material Design精华：四大要点打造惊艳用户体验
关于Material Design，一种旨在提供一致、直观和美观用户体验的设计语言，让开发者能够创建出与Google产品风格相符的应用。要做到让用户惊喜，以下四个关键点是至关重要的： 1. **正确运用新元素** - 特别提到的是...
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值