Material Design

2014年Google I/O大会重磅推出了一套全新的界面设计语言—Material Design

2015年Google I/O大会推出了一个Design Support库,这个库将Material Design中最具代表性的一些控件和效果进行了封装.

Material Design
Toolbar
- 使用方法
- 添加action按钮
滑动菜单QQ50那种
悬浮按钮和可交互提示
卡片式布局
可折叠式标题栏
- 1 CollapsingToolbarLayout
- 2 充分利用系统状态栏空间感觉像是沉浸式状态栏

ActionBar 由于其设计的原因,被限定只能位于活动的顶部,从而不能实现一些Material Design的效果.因此官方已经不再建议使用ActionBar了.Toolbar的强大之处在于,它不仅继承了ActionBar的所有功能,而且灵活性高,可以配合其他控件来完成一些Material Design的效果.

使用方法

首先修改主题:

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

然后在布局中配置

<?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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    深色主题
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  popupTheme5.0系统才有的,需要兼容之前的系统
    -->
    <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" />

</FrameLayout>

在Activity中写:

Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);

添加action按钮

效果如下:

步骤:

右击res目录->new->directory,创建一个menu文件夹.然后新建Menu resource file,创建一个toolbar.xml文件,并编写如下代码:

这里引入app命名空间,是为了兼容性.

指定的app:showAsAction用来指定按钮的显示位置,有以下几种值可选,always表示永远显示在Toolbar中,如果屏幕空间不够,则不显示;ifRoom表示屏幕空间足够的情况下显示在Toolbar中,不够的话就显示在菜单中;never则表示永远显示在菜单中.

<?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/backup"
    android:icon="@drawable/ic_backup"
    android:title="Backup"
    app:showAsAction="always" />

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

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

然后在Activity中重写如下函数

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.toolbar,menu);    //加载菜单文件
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()){
        case R.id.backup:
            Toast.makeText(this, "你点击了备份", Toast.LENGTH_SHORT).show();
            break;
        case R.id.delete:
            Toast.makeText(this, "你点击了删除", Toast.LENGTH_SHORT).show();
            break;
        case R.id.setting:
            Toast.makeText(this, "你点击了设置", Toast.LENGTH_SHORT).show();
            break;
        default:
            break;
    }
    return true;
}

2. 滑动菜单(QQ5.0那种)

首先介绍以下DrawerLayout的用法吧.首先它是一个布局,在布局中允许放入两个直接子控件,第一个子控件是主屏幕中显示的内容,第二个子控件是滑动菜单中显示的内容.

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

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

    <!--
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    深色主题
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  popupTheme5.0系统才有的,需要兼容之前的系统
    -->
    <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" />

</FrameLayout>

<!--
    android:layout_gravity="start"  这个属性是必须指定的,意思是让系统指定滑动菜单在左边还是右边.这里为start是指让系统根据当前语言环境自动选择.
-->
<TextView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:text="This is Menu"
    android:id="@+id/tv_menu"
    android:textSize="30sp"
    android:background="#FFF"
    android:layout_gravity="start"/>

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

然后在Activity中写入如下:

public class MainActivity extends AppCompatActivity {

    private DrawerLayout mDrawerLayout;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);

        mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
        ActionBar actionBar = getSupportActionBar();   //具体实现是Toobar来完成的
        if (actionBar != null) {
            actionBar.setDisplayHomeAsUpEnabled(true);  //让导航按钮显示出来
            actionBar.setHomeAsUpIndicator(R.drawable.ic_menu);  //设置导航按钮图标
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.toolbar, menu);    //加载菜单文件
        return true;
    }

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

            //这个是HomeAsUp按钮的id永远都是android.R.id.home
            case android.R.id.home:
                mDrawerLayout.openDrawer(GravityCompat.START);   //将滑动菜单显示出来
                break;

            case R.id.backup:
                Toast.makeText(this, "你点击了备份", Toast.LENGTH_SHORT).show();
                break;
            case R.id.delete:
                Toast.makeText(this, "你点击了删除", Toast.LENGTH_SHORT).show();
                break;
            case R.id.setting:
                Toast.makeText(this, "你点击了设置", Toast.LENGTH_SHORT).show();
                break;
            default:
                break;
        }
        return true;
    }
}

NavigationView

你可以在滑动菜单页面定制任意的布局,不过谷歌给我提供了一种更好的方法—-使用NavigationView.NavigationView是Design Support库中提供的一个控件.

效果如下:

使用方法

引入

compile 'com.android.support:design:24.2.1'  
compile 'de.hdodenhof:circleimageview:2.1.0'

第一个是Design Support->NavigationView
第二个是图片圆形化的一个开源库

在开始使用NavigationView之前,我们还需要准备好两个东西,menu和headerLayout.menu是用来在NavigationView中显示具体的菜单项的,headerLayout则是用来在NavigationView中显示头部布局的.

新建menu文件夹->new->Menu resource file

menu

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

    <!--这是滑动菜单的菜单项-->

    <!--android:checkableBehavior="single"表示所有菜单只能单选-->
    <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="Tasks" />

    </group>

</menu>

layout文件夹->new->layout resource file

headerLayout

<?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="@color/colorPrimary"
    android:padding="10dp">

    <!--
        这是headerLayout布局
    -->

    <!--头像  圆形的-->
    <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/tv_mail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:textColor="#FFF"
        android:textSize="14sp"
        android:text="xfhy@gmail.com"/>

    <!--用户名-->
    <TextView
        android:id="@+id/tv_username"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/tv_mail"
        android:textSize="14sp"
        android:textColor="#FFF"
        android:text="Tony Gonm"/>

</RelativeLayout>

高度设为180dp,这是一个NavigationView比较适合的高度.

3.然后将布局中滑动菜单布局替换一下,具体实现:

    <?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:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    深色主题
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  popupTheme5.0系统才有的,需要兼容之前的系统
        -->
        <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" />

    </FrameLayout>

    <!--
        android:layout_gravity="start"  这个属性是必须指定的,意思是让系统指定滑动菜单在左边还是右边
        app:menu="@menu/nav_menu"   指定菜单
        app:headerLayout="@layout/nav_header"   指定headerLayout
    -->
    <android.support.design.widget.NavigationView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/nav_view"
        android:layout_gravity="start"
        app:menu="@menu/nav_menu"
        app:headerLayout="@layout/nav_header"/>

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

4.在Activity中找到NavigationView控件

navView.setCheckedItem(R.id.nav_call);   //设置默认选中call选项

//设置NavigationView菜单选中事件的监听器
    navView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            //这里可以根据item的getItemId()来判断  具体点击了哪个选项

            mDrawerLayout.closeDrawers();   //关闭滑动菜单
            return true;
        }
    });

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

3.1 FloatingActionButton

FloatingActionButton是Design Support 库中提供的一个控件,这个控件可以帮助我们轻松地实现悬浮按钮的效果.

1.首先,在上面的基础上进行修改activity_main.xml布局.将下面这段代码放到FrameLayout中.

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

2.设置点击事件,和普通按钮一样的用法.

FloatingActionButton fab_done = (FloatingActionButton) findViewById(R.id.fab_done);
    //设置点击事件   和普通按钮的点击事件是一样的
    fab_done.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(MainActivity.this, "你点我了(Done)", Toast.LENGTH_SHORT).show();
        }
    });

3.2 Snackbar

Design Support库中提供的更加先进的提示工具—-Snackbar

首先要明确,Snackbar并不是Toast的替代品,它们两者之间有着不同的应用场景.

Snackbar允许在提示当中加入一个可交互按钮,当用户点击按钮的时候可以执行一些额外的逻辑操作.

过一段时间会自动消失

效果如下:

用法如下:

//需要传入View对象  这个view只要是当前界面布局的任意一个View都可以,Snackbar会根据这个View来
            //自动查找最外层的布局,用来展示Snackbar.
            Snackbar.make(view,"Data Deleted",Snackbar.LENGTH_SHORT)
                    .setAction("Undo",new View.OnClickListener(){

                        @Override
                        public void onClick(View v) {
                            Toast.makeText(MainActivity.this, "Data restored", Toast.LENGTH_SHORT).show();
                        }
                    })
                    .show();

存在的问题:这个Snackbar竟然将我们的悬浮按钮给遮挡住了.

3.3 CoordinatorLayout

上面遗留的问题用CoordinatorLayout就可以轻松解决.CoordinatorLayout可以说是一个加强版的FrameLayout,这个布局也是由Design Support库提供的.

事实上,CoordinatorLayout可以监听其所有子控件的各种事件,然后自动帮助我们做出最合理的响应.

如下:

用法

直接替换用android.support.design.widget.CoordinatorLayout替换掉上面的FrameLayout

4 卡片式布局

4.1 CardView

CardView是用于实现卡片式布局效果的重要控件,由appcompat-v7库提供.实际上,CardView就是一个FrameLayout,只是额外提供了圆角和阴影等效果,看上去会有立体的效果. 下面就将使用CardView作为Recycler的子项来使用,达到下面图片上的效果.

效果如下:

1.首先需要往app/build.gradle文件中声明这些库的依赖才行

compile 'com.android.support:cardview-v7:24.2.1' //CardView
compile 'com.android.support:recyclerview-v7:24.2.1' //RecyclerView
compile 'com.github.bumptech.glide:glide:3.7.0' //强大的图片加载库

2.然后每个RecyclerView的子项就是用CardView来实现的.具体代码:

<?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:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dp"
app:cardCornerRadius="4dp">

<!--
    这是RecyclerView的子项布局
    cardCornerRadius  圆角弧度
-->

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!--
            scaleType:可以指定图片的缩放模式
            这里使用了centerCrop模式,它可以让图片保持原有比例填充满ImageView
            并将超出的部分裁剪掉.
        -->
        <ImageView
            android:id="@+id/fruit_image"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            android:scaleType="centerCrop" />

        <TextView
            android:id="@+id/fruit_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="5dp"
            android:textSize="16sp" />

    </LinearLayout>

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

3.然后直接将RecyclerView显示出来即可就可以看到CardView的效果了.
上面的那种2列的效果是配合
GridLayoutManager layoutManager = new GridLayoutManager(this,2); //2列 recyclerView.setLayoutManager(layoutManager);
这个使用的.

待解决问题:RecyclerView把Toolbar遮盖住了.

4.2 AppBarLayout

AppBarLayout是Design Support提供的另一个工具,AppBarLayout实际上是一个垂直方向的LinearLayout,它在内部做了很多滚动事件的封装,并应用了一些Material Design的设计理念.

AppBarLayout必须是CoordinatorLayout的子布局

可以实现的效果:当往下滑的时候标题栏自动隐藏,往上滑的时候标题栏用重新出现.

首先将Toolbar用AppBarLayout包起来:

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
        <!--
            android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"    深色主题
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light"  popupTheme5.0系统才有的,需要兼容之前的系统
        -->
    <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:layout_scrollFlags="scroll|enterAlways|snap"
        app:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
</android.support.design.widget.AppBarLayout>

然后将布局中的RecyclerView加一个属性,这个属性可以指定布局的行为.
```
app:layout_behavior="@string/appbar_scrolling_view_behavior"
```
现在往Toolbar中添加一个app:layout_scrollFlags="scroll|enterAlways|snap"属性,并将这个属性的值指定成了scroll|enterAlways|snap.其中,scroll表示当RecyclerView向上滚动的时候,Toolbar会跟着一起向上滚动并实现隐藏;enterAlways 表示当RecyclerView向下滚动的时候Toolbar会跟着一起向下滚动并重新显示.snap表示当Toolbar还没有完全隐藏或显示的时候,会根据当前滚动的距离,自动选择是隐藏还是显示.

4.3 下拉刷新

SwipeRefreshLayout就是用于实现下拉刷新功能的核心类,它是由support-v4库提供的.我们把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout中,就可以迅速让这个控件支持下拉刷新.

效果如下:

使用方法

在布局中这样用

<!--
    SwipeRefreshLayout,嵌套在里面的话就有下拉刷新功能
    app:layout_behavior="@string/appbar_scrolling_view_behavior"   指定布局行为
-->
<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">

    <!--
        layout_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>

在Activity中,可以设置监听器等

private SwipeRefreshLayout swipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh);
swipeRefreshLayout.setColorSchemeResources(R.color.colorPrimary);   //设置下拉刷新进度条的颜色

//设置下拉刷新的监听器
swipeRefreshLayout.setOnRefreshListener(new SwipeRefreshLayout.OnRefreshListener() {
    @Override
    public void onRefresh() {
        refreshFruits();    //进行刷新操作
    }
});

5. 可折叠式标题栏

5.1 CollapsingToolbarLayout

实现一个可折叠式标题栏的效果,需要借助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"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_fruit"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.xfhy.materialtest.FruitActivity">

<!--
    垂直的LinearLayout
-->
<android.support.design.widget.AppBarLayout
    android:id="@+id/appBar"
    android:layout_width="match_parent"
    android:layout_height="250dp">

    <!--
        app:contentScrim="?attr/colorPrimary":  指定CollapsingToolbarLayout在趋于折叠状态以及
        折叠之后的背景色

        app:layout_scrollFlags="scroll|exitUntilCollapsed" : scroll表示CollapsingToolbarLayout
        会随着水果内容详情的滚动一起滚动,exitUntilCollapsed表示当CollapsingToolbarLayout随着滚动完
        成折叠之后就保留在界面上,不再移出屏幕.
    -->
    <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.Dark.ActionBar"
        app:contentScrim="?attr/colorPrimary"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

        <!--
            android:scaleType="centerCrop" : 图片的缩放模式  这种模式是表示图片等比例放大,占满这个控件

            app:layout_collapseMode="parallax" : 用于指定当前控件在CollapsingToolbarLayout折叠过程中
            的折叠模式,其中Toolbar指定成pin,表示在折叠的过程中位置始终保持不变,ImageView指定成parallax,
            表示会在折叠过程中产生一定的错位偏移,这种模式的视觉效果会非常好.

            这个ImageView是用于显示顶部的图片的
        -->
        <ImageView
            android:id="@+id/fruit_image_view"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            app:layout_collapseMode="parallax" />

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

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

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

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

<!--
    NestedScrollView 和ScrollView差不多,只不过NestedScrollView在ScrollView的基础上海增加了嵌套响应
    滚动事件的功能.

    app:layout_behavior="@string/appbar_scrolling_view_behavior" : 指定布局行为

    这个滚动控件是用于放置下方的水果介绍的那些文字用的   可滚动
-->
<android.support.v4.widget.NestedScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">

    <!--
        不管是ScrollView还是NestedScrollView,它们的内部都只允许存在一个直接子布局.因此,
        如果我们想要在里面放入很多东西的话,通常都会先嵌套一个LinearLayout,然后再在LinearLayout放入具体的内容
    -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!--
            app:cardCornerRadius="4dp" : 圆角弧度
        -->
        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginBottom="15dp"
            android:layout_marginLeft="15dp"
            android:layout_marginRight="15dp"
            android:layout_marginTop="34dp"
            app:cardCornerRadius="4dp">

            <TextView
                android:id="@+id/fruit_content_text"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_margin="10dp" />

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

    </LinearLayout>

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

<!--
    app:layout_anchor="@id/appBar" : 设置描点,即以哪个控件为参照点设置位置
    app:layout_anchorGravity="bottom|end" : 设置按钮在底部和右边
-->
<android.support.design.widget.FloatingActionButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="16dp"
    android:src="@drawable/ic_comment"
    app:layout_anchor="@id/appBar"
    app:layout_anchorGravity="bottom|end" />

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

然后需要在Activity中让导航图标可见,并且生成水果介绍的数据.

package com.xfhy.materialtest;
public class FruitActivity extends AppCompatActivity {

    public static final String FRUIT_NAME = "fruit_name";
    public static final String FRUIT_IMAGE_ID = "fruit_image_id";

    @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 fruit_image_view = (ImageView) findViewById(R.id.fruit_image_view);
        TextView fruit_content_text = (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(fruit_image_view);   //设置显示水果图片

        String fruitContent = generateFruitContent(fruitName);
        fruit_content_text.setText(fruitContent);   //设置水果介绍需要显示的文字
    }

    /**
     * 生成水果的介绍
     * @param fruitName
     * @return
     */
    private String generateFruitContent(String fruitName) {
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < 500; i++) {
            sb.append(fruitName);
        }
        return sb.toString();
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        switch (item.getItemId()){
            case android.R.id.home:   //这是导航按钮的id(固定值)
                finish();
                return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

当然,如果需要设置卡片的点击事件,点击后跳转到当前的水果介绍页面则需要在FruitAdapter中设置点击事件

//创建ViewHolder实例
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) {
    if (mContext == null) {
        mContext = parent.getContext();
    }
    //加载布局到view
    View view = LayoutInflater.from(mContext).inflate(R.layout.fruit_item, parent, false);
    final ViewHolder viewHolder = new ViewHolder(view);

    //设置每个卡片的点击事件
    viewHolder.cardView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            int adapterPosition = viewHolder.getAdapterPosition();
            Fruit fruit = mFruitList.get(adapterPosition);
            Intent intent = new Intent(mContext, FruitActivity.class);
            intent.putExtra(FruitActivity.FRUIT_NAME, fruit.getName());
            intent.putExtra(FruitActivity.FRUIT_IMAGE_ID, fruit.getImageId());
            mContext.startActivity(intent);
        }
    });

    return viewHolder;   //创建ViewHolder实例
}

5.2 充分利用系统状态栏空间(感觉像是沉浸式状态栏)

上面的效果还有个缺陷,背景图片和系统的状态栏总有一些不搭的感觉.只不过可惜的是,在Android 5.0 之前,我们是无法对状态栏的背景或颜色进行操作的,那个时候也还没有Material Design的概念.

想要让背景图能够和状态栏融合,需要借助android:fitsSystemWindows这个属性来实现.

效果如下:

1.在CoordinatorLayout,AppBarLayout,CollapsingToolbarLayout,ImageView,这种嵌套结构的布局中,将android:fitsSystemWindows属性指定成true;

2.还需要在程序的主题中将状态栏的颜色指定成透明色才行.指定成透明色的方法:在主题中将android:statusBarColor属性的值指定成@android:color/transparent就可以了. 但是有个问题,android:statusBarColor属性是从API 21 开始的,也就是Android 5.0 系统才开始有的.那么,系统差异型的功能实现就要从这里开始了.

在res下创建目录values-21,然后在该目录下创建values resources file ,写入如下代码:

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

    <!--
        values-v21 是android 5.0以上系统才回去读取的
        这个主题是专门为FruitActivity使用的
    -->
    <style name="FruitActivityTheme" parent="AppTheme">
        <item name="android:statusBarColor">@android:color/transparent</item>
    </style>

</resources>

但是,在5.0 之前的系统无法识别FruitActivityTheme这个主题,所以需要在res->values->styles.xml添加2行代码,中间什么都没有.

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

3.最后在清单文件中设置FruitActivity的主题时,这样设置android:theme="@style/FruitActivityTheme";

即可实现状态栏沉浸式效果.

posted @ 2017-04-27 07:39 潇风寒月阅读(8) 评论(0) 收藏举报

刷新页面返回顶部

xfhy

Material Design

Material Design

1. Toolbar

使用方法

添加action按钮

2. 滑动菜单(QQ5.0那种)

DrawerLayout

NavigationView

使用方法

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

3.1 FloatingActionButton

3.2 Snackbar

3.3 CoordinatorLayout

4 卡片式布局

4.1 CardView

4.2 AppBarLayout

4.3 下拉刷新

5. 可折叠式标题栏

5.1 CollapsingToolbarLayout

5.2 充分利用系统状态栏空间(感觉像是沉浸式状态栏)

公告