Android之Material Design风格相关控件小结

要使用Material Design风格控件,首先需要在Gradle中加入Support Design Library,例如:

implementation 'com.android.support:design:28.0.0'

1.CoordinatorLayout

1.1.CoordinatorLayout+AppBarLayout

布局文件代码:

<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/t_main_content">
    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/t_appbar"
        android:theme="@style/AppTheme.AppBarOverlay">
        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"
            app:popupTheme="@style/AppTheme.PopupOverlay"
            app:title="MdView"
            android:id="@+id/t_toolbar" />
        <android.support.design.widget.TabLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/t_tablayout"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:id="@+id/t_viewPager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
    <android.support.design.widget.FloatingActionButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/t_fab"
        android:layout_gravity="bottom|end"
        android:layout_margin="16dp"
        android:src="@android:drawable/ic_menu_share"
        />
</android.support.design.widget.CoordinatorLayout>

效果图:

配合CoordinatorLayout、AppBarLayout,我们实现了这样的效果,向上滚动列表时,Toolbar隐藏,TabLayout置顶,Toolbar之所以可以滚动隐藏、显示,是通过 如下属性实现的:

app:layout_scrollFlags="scroll|enterAlways"

代码设置方式:

Toolbar toolbar = ... // your toolbar within an AppBarLayout
AppBarLayout.LayoutParams params = 
    (AppBarLayout.LayoutParams) toolbar.getLayoutParams();
params.setScrollFlags(AppBarLayout.LayoutParams.SCROLL_FLAG_SCROLL
    | AppBarLayout.LayoutParams.SCROLL_FLAG_ENTER_ALWAYS);

1.2界面组成结构说明

<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
    android:id="@+id/t_main_content">
    <android.support.design.widget.AppBarLayout
        android:id="@+id/t_appbar">
        <android.support.v7.widget.Toolbar
            app:layout_scrollFlags="scroll|enterAlways"
            android:id="@+id/t_toolbar" />
        <android.support.design.widget.TabLayout
            android:id="@+id/t_tablayout"
            />
    </android.support.design.widget.AppBarLayout>
    <android.support.v4.view.ViewPager
        android:id="@+id/t_viewPager"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        />
    <android.support.design.widget.FloatingActionButton
        />
</android.support.design.widget.CoordinatorLayout>

CoordinatorLayout布局下包含两部分AppBarLayout+ViewPager,第一步AppBarLayout下需要滚动隐藏的设置app:layout_scrollFlags属性(app:layout_scrollFlags="scroll|enterAlways"),第二部ViewPager下包含滚动视图RecyclerView,同时ViewPager设置app:layout_behavior属性(app:layout_behavior="@string/appbar_scrolling_view_behavior");

1.3app:layout_scrollFlags属性说明

ScrollFlags共有五种常量值供AppBarLayout的Children View使用,在xml布局文件中通过app:layout_scrollFlags设置,对应的值为:scroll,enterAlways&#

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值