使用design库

FloatingActionButton

CoordinatorLayout为FloatingActionButton提供了layout_anchorlayout_anchor_gravity属性来设置FAB对应的位置。

AppBarLayout

AppBarLayout是用来包装界面中的顶部栏布局的,可以包括Toolbar、TabLayout等相对固定布局,当相同界面中一个指定了app:layout_behavior="@string/appbar_scrolling_view_behavior"属性的滑动布局进行滑动时,AppBarLayout可以根据设置的属性对滑动行为进行响应,常见的布局设置方式如下:

<android.support.design.widget.CoordinatorLayout
    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">

    <! --Your Scrollable View -->
    <android.support.v7.widget.RecyclerView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior" />

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

        <android.support.v7.widget.Toolbar
            ...
            app:layout_scrollFlags="scroll|enterAlways">

        <android.support.design.widget.TabLayout
            ...
            app:layout_scrollFlags="scroll|enterAlways">
     </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

AppBarLayout中所含控件对于属性的响应方式是通过设置layout_scrollFlags来实现的,分别有以下几个标志,使用滑动布局代表NestedScrollView或者RecyclerView等可滑动的控件:

  • scroll:滑动事件发生时,该View可以响应滑动,呈现滑入或滑出效果。未设置该标志的View将在AppBarLayout内相对固定不动。
  • enterAlways:手指下滑时,该View立即滑出显示。
  • enterAlwaysCollapsed:在View声明了minHeight的情况下,手指下滑时,该View立即滑出显示,只不过滑动显示出minHeight即固定,直到滑动布局达到顶部时,继续下滑才完整显示。
  • exitUntilCollapsed:手指上滑时,该View只会滑动隐藏到minHeight就不会继续滑动了。
  • snap:当该View处于半隐藏半出现状态时,自动滑动到完全隐藏或完全显示。

scroll标志是其他标志的基础,只有设置了该标志才有滑出滑入的效果,其他的标志都是来定义具体滑出滑入的行为。同时AppBarLayout是个LinearLayout,设置了scroll标志的子View必须放在没有设置该标志的子View前面,否则会无法正常滑动。

默认状态下当滑动布局滑动到顶部时,AppBarLayout的子布局才会滑动显示出来,如果要在手指下滑时就显示AppBarLayout,可以在子布局中设置enterAlways。如果设置了minHeight,还可以设置enterAlwaysCollapsed使下滑动作只显示到AppBarLayout子布局的minHeight,下滑到顶部时才完整显示出来。

手指上滑时总会隐藏AppBarLayout内部布局,不过此时可以指定exitUntilCollapsed属性,使隐藏到minHeight即不继续隐藏。

snap标志用来使布局不会停留在中途状态,会自动隐藏或显示。

值得注意的是,滑动布局必须是实现了NestedScrollingChild接口的类,例如NestedScrollView、RecyclerView,如果使用ScrollView,AppBarLayout将无法正常响应滑动行为。

CollapsingToolbarLayout

AppBarLayout只能对标题栏的滑动行为进行设置,CollapingToolbarLayout则对滑动过程提供了更多动效。

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

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_scrollFlags="scroll|exitUntilCollapsed">

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

注意,当Toolbar包装了CollapsingToolbarLayout之后,标题的设置需要在CollapsingToolbarLayout中进行,可以在xml或Java代码中声明,因为标题没有设置在Toolbar当中了,所以Toolbar高度不能设置为wrap_content,需要设为?attr/actionBarSize

因为此时CollapsingToolbarLayout是AppBarLayout的直接子控件,所以scroll_flags设置在CollapsingToolbarLayout上。此时如果设置了exitUntilCollapsed标志,因为CollapsingToolbarLayout没有设置minHeight,所以在内部的Toolbar中设置layout_collapseMode="pin"保证当CollapsingToolbarLayout进行collapse时,Toolbar仍然固定能显示。

CollapsingToolbarLayout本身继承于FrameLayout,所以内部控件堆叠显示。可以在CollapsingToolbarLayout中添加其他控件,例如ImageView,增加显示效果,同时在CollapsingToolbarLayout中添加contentScrim设置折叠后Toolbar颜色。

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

        <android.support.design.widget.CollapsingToolbarLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:contentScrim="@android:color/holo_green_light"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            app:title="This is new title">

            <ImageView
                android:layout_width="match_parent"
                android:layout_height="300dp"
                android:scaleType="centerCrop"
                android:src="@drawable/scene1"
                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="parallax"/>
        </android.support.design.widget.CollapsingToolbarLayout>

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

这里写图片描述

DrawerLayout+NavigationView

使用DrawerLayout+NavigationView,需要在DrawerLayout中添加CoordinatorLayout才能实现侧滑时背景变暗的效果

添加ToolBar:
toolbar标题出现在activity中央:添加AppBarLayout
toolbar颜色延伸到整个activity:添加CoordinatorLayout

<android.support.v4.widget.DrawerLayout 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/drawer_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    tools:context="timshin.com.test_navigation_drawer.MainActivity"
    tools:openDrawer="start">

    <android.support.design.widget.CoordinatorLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fitsSystemWindows="true"
        tools:context="timshin.com.navigation_drawer_demo.NavigationDrawerActivity">

        <android.support.design.widget.AppBarLayout
            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/colorPrimary"
                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
                app:titleTextColor="@android:color/white" />
        </android.support.design.widget.AppBarLayout>
    </android.support.design.widget.CoordinatorLayout>

    <android.support.design.widget.NavigationView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/activity_navigation_drawer_drawer" />
</android.support.v4.widget.DrawerLayout>

menu文件

<group android:checkableBehavior="single"> // 组内菜单单选模式
        <item
            android:id="@+id/nav_camera"
            android:icon="@drawable/ic_menu_camera"
            android:title="Import" />
        <item
            android:id="@+id/nav_gallery"
            android:icon="@drawable/ic_menu_gallery"
            android:title="Gallery" />
        <item
            android:id="@+id/nav_slideshow"
            android:icon="@drawable/ic_menu_slideshow"
            android:title="Slideshow" />
        <item
            android:id="@+id/nav_manage"
            android:icon="@drawable/ic_menu_manage"
            android:title="Tools" />
    </group>

    <item android:title="Communicate"> // 内含菜单并设置标题
        <menu>  // 菜单,默认多选,如果外层包上group节点,会和上面的group合并在一起单选
            <item
                android:id="@+id/nav_share"
                android:icon="@drawable/ic_menu_share"
                android:title="Share" />
            <item
                android:id="@+id/nav_send"
                android:icon="@drawable/ic_menu_send"
                android:title="Send" />
        </menu>
    </item>

navigationView设置点击选中事件

...
 mNavigationView = (NavigationView) findViewById(R.id.navigation_view);
 mNavigationView.setNavigationItemSelectedListener(this);
...
 @Override
    public boolean onNavigationItemSelected(@NonNull MenuItem item) {
        item.setChecked(true); // 确保第二组菜单点击保存选中状态
        return true;
    }

参考:
Android Design Support Library

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值