Material Design

Android ToolBar几种常见的用法

2017-09-14  本文已影响241人  chaohx

前言

想必大家对ToolBar以及Material Design有所了解、也一定见过其炫酷的效果。今天咱们就来总结一下集中常见的用法,以便日后工作中使用。
先上几张效果图来提提劲。

通用的ToolBar.png 可以划出屏幕的ToolBar.gif 可以折叠的ToolBar.gif

自定义样式的ToolBar

ToolBar默认的样式是这个样子的,


ToolBar默认样式.png

然而我们常用的是像最上面那张图的样子。也就是左边是返回键、中间是title、右边是文字或者icon。那么我们改怎样用ToolBar实现我们想要的样子呢,很简单直接看下面代码即可:


    <android.support.v7.widget.Toolbar
        android:id="@+id/tool_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorPrimary"
        android:minHeight="?attr/actionBarSize">

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="返回"
            android:textColor="@android:color/white"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="标题"
            android:textColor="@android:color/white"
            android:textSize="15sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginRight="20dp"
            android:text="右侧按钮"
            android:textColor="@android:color/white"
            android:textSize="15sp" />

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

Ok,就是这么简单。就是把ToolBar当作一个容器来用,实际上它就是一个容易,因为Toolbar是继承自ViewGroup的。这里我们需要关注一个属性, android:layout_gravity="right",该参数可以控制ToolBar子View的位置。

可以划出屏幕的ToolBar

可以划出屏幕的ToolBar.gif

要达到这种效果,我们就要用到Material Design的东西了,这里我们需要用到android.support.design.widget.CoordinatorLayout和android.support.design.widget.AppBarLayout以及ToolBar。
如果在使用这些控件时报错,那么多半是因为没有导包。我们需要在build.gradle里面写compile 'com.android.support:design:25.3.1'。

接下来就开始写代码了,代码很简单 我们只需要用xml即可实现效果。

<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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.chx.toolbardemo.Test2Activity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
        <android.support.v7.widget.Toolbar
            android:id="@+id/tool_bar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/colorPrimary"
            android:minHeight="?attr/actionBarSize"
            app:layout_scrollFlags="scroll|enterAlways">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:text="标题"
                android:textColor="@android:color/white"
                android:textSize="15sp" />

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

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

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

使用总结:
1.CoordinatorLayout 作为最外层容器,其内部需要一个AppBarLayout和一个可以滚动的控件,这里我用的是RecyclerView
2.RecyclerView设置app:layout_behavior="@string/appbar_scrolling_view_behavior"(必须)
3.AppBarLayout里面放入ToolBar,并且给ToolBar设置 app:layout_scrollFlags="scroll|enterAlways"。
这样我们就实现了想要的效果。

这里只是总结一下可划出屏幕的ToolBar是怎样实现的。至于为什么这样能够实现,以及其他参数的效果是怎样的,那就需要大家主动去探索了,写个demo试一试。

可折叠的ToolBar

可以折叠的ToolBar.gif

这种效果也是比较炫酷,比较常见的。当然我们可以用自定义view的方式来实现。不过我们用Material Design只需要在布局文件中配置就可以实现。这里我们需要用到android.support.design.widget.CoordinatorLayout、android.support.design.widget.AppBarLayout、android.support.design.widget.CollapsingToolbarLayout以及ToolBar

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.chx.toolbardemo.Test3Activity">
    <android.support.design.widget.AppBarLayout
        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:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fitsSystemWindows="true"
            app:contentScrim="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|exitUntilCollapsed">
            <RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_collapseMode="parallax">
                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:scaleType="centerCrop"
                    android:src="@mipmap/testimage" />
            </RelativeLayout>
            <android.support.v7.widget.Toolbar
                android:id="@+id/tool_bar"
                android:layout_width="match_parent"
                android:layout_height="?attr/actionBarSize"
                android:minHeight="?attr/actionBarSize"
                app:layout_collapseMode="pin">
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="返回"
                    android:textColor="@android:color/white"
                    android:textSize="15sp" />
                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="right"
                    android:layout_marginRight="20dp"
                    android:text="右侧按钮"
                    android:textColor="@android:color/white"
                    android:textSize="15sp" />
            </android.support.v7.widget.Toolbar>
        </android.support.design.widget.CollapsingToolbarLayout>
    </android.support.design.widget.AppBarLayout>

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

使用总结
1.CoordinatorLayout 作为最外层容器,子view还是AppBarLayout与一个可滚动的控件,这里用RecyclerView
2.需要在AppBarLayout中套一层CollapsingToolbarLayout,然后再在其中放一个ToolBar与RelativeLayout。ToolBar不用解释,RelativeLayout则是用于背景布局,对应上图的背景图片。
3.Recycle'rview 配置参数app:layout_behavior="@string/appbar_scrolling_view_behavior"
4.CollapsingToolbarLayout配置参数app:layout_scrollFlags="scroll|exitUntilCollapsed"

同样我们这篇文章只做实现,方便今后工作使用。至于原理,以及其他用法,大家可自行学习。这里推荐一篇鸿洋大神的文章:http://blog.csdn.net/lmj623565791/article/details/45303349

上一篇 下一篇

猜你喜欢

热点阅读