1. 程式人生 > >Android實現滑動懸浮置頂效果

Android實現滑動懸浮置頂效果

網上都是利用重寫scrollview滑動的監聽,來隱藏和顯示某一個控制元件來實現的,通過這個方法實現的滑動不是很流暢,於是我決定用最新的material design來實現這個效果。廢話不多說,直接上程式碼:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:background="@color/white">
        <!-- 第一部分:CoordinatorLayout -->
<android.support.design.widget.CoordinatorLayout xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/scrollview" android:layout_width="fill_parent" android:layout_height="match_parent" android:background="#ffffff">
<!-- 第二部分:縮放控制元件--> <android.support.design.widget.AppBarLayout android:id="@+id/id_appbarlayout" android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.design.widget.CollapsingToolbarLayout
android:id="@+id/collapsing_tool_bar_test_ctl" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" app:contentScrim="?attr/colorPrimary" app:expandedTitleMarginEnd="64dp" app:expandedTitleMarginStart="48dp" app:layout_scrollFlags="scroll">
<LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <com.bigkoo.convenientbanner.ConvenientBanner android:id="@+id/convenient_banner" android:layout_width="match_parent" android:layout_height="400px" app:canLoop="true" /> <maibai.maibai.com.maibai.util.view.MyGridView android:id="@+id/grid_view" android:layout_width="match_parent" android:layout_height="wrap_content" android:numColumns="4" android:layout_marginTop="20px" android:verticalSpacing="20px" android:listSelector="@color/white"/> <TextView android:layout_width="match_parent" android:layout_height="1px" android:background="#eee" android:layout_marginTop="20px"/> <LinearLayout android:layout_width="match_parent" android:layout_height="400px" android:background="#eee"></LinearLayout> </LinearLayout> </android.support.design.widget.CollapsingToolbarLayout> <LinearLayout android:layout_width="fill_parent" android:layout_height="50px" android:background="#ff66bb" android:orientation="horizontal"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="懸浮部分"/> </LinearLayout> </android.support.design.widget.AppBarLayout> <!-- 第三部分:Your Scroll View--> <android.support.v4.widget.NestedScrollView android:id="@+id/myMainScrollView" android:layout_width="match_parent" android:layout_height="match_parent" android:overScrollMode="always" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <maibai.maibai.com.maibai.util.view.MyListView android:id="@+id/list_view" android:layout_width="match_parent" android:layout_height="match_parent" android:listSelector="@color/white" android:divider="@color/white"/> </android.support.v4.widget.NestedScrollView> </android.support.design.widget.CoordinatorLayout> </LinearLayout>

這裡是佈局檔案,最外層是CoordinatorLayout,然後滑動時候要隱藏的控制元件放CollapsingToolbarLayout裡面,NestedScrollView裡面放的是置頂後可滑動的控制元件,然後就可以實現效果了,就是這麼簡單。
需要注意的有幾點:
1.CollapsingToolbarLayout必須設定app:layout_scrollFlags=”scroll”,他才可以滑動。
2.NestedScrollView必須設定app:layout_behavior這個屬性,他們才會聯動。
3.NestedScrollView裡面如果巢狀listview等可滑動的佈局時要重寫listview的onmeasures方法(網上一大堆)。