MaterialDesign 中悬浮吸顶效果实现

  针对目前开始着手MaterialDesign风格设计的,着实方便了很多,以前的悬浮吸顶最起码的话要去根据View去计算Width Height, 滑动距离X y来改变Titltbar的变化和事件的监听。对此,对于MaterialDesign 中悬浮系统进行总结,大家一起探讨

1.首先不多说,直接导入Design包 以及recyclerview

implementation 'com.android.support:design:28.0.0'
          
            implementation 'com.android.support.constraint:constraint-layout:1.1.3'
            implementation 'com.android.support:recyclerview-v7:28.0.0'

好的,这就算导入完成了。

开始Review Code,首先先创建xml:

<?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=".Main2Activity">

    <android.support.design.widget.AppBarLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar"
        >
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar1"
            android:layout_width="match_parent"
            android:layout_height="?actionBarSize"
            app:layout_scrollFlags="scroll|enterAlwaysCollapsed"//这行就是关键点了,悬浮吸顶的 。这个表示的是在滑到第一页才显示ToolBar. 如果是 app:layout_scrollFlags="scroll|enterAlways"这个属性。向下滑的时候就是显示Toolbar了。
            
           
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="悬浮"
            />

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

    <android.support.v7.widget.RecyclerView
        android:id="@+id/main_recycler"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"//这段代码主要是解决了RecyclerView会被遮挡显示不全的问题,主要是由于CoordinatorLayout属于帧布局。设置ToolBar之后会遮住部分
        app:layoutManager="android.support.v7.widget.LinearLayoutManager"

        />



    <TextView
        android:id="@+id/coordinator"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        android:layout_gravity="center"
        android:textSize="30sp"
        android:background="#f00"
        android:clickable="true"
        app:layout_behavior="design.material.com.materialdesign.MyBehavior"
        />

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

好的,xml差不多就是这个样子

在Activity中记得 setSupportActionBar(toolbar);不然titleBar没法绑定
run 起来就是你要的效果啦 。

原创文章 3 获赞 3 访问量 1596

猜你喜欢

转载自blog.csdn.net/summer0012/article/details/106072959