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 起來就是你要的效果啦 。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章