Android實現滑動懸浮置頂效果
阿新 • • 發佈:2019-01-08
網上都是利用重寫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方法(網上一大堆)。