效果圖:
效果分析:
往上滑動scrollview當
導航欄距屏幕頂部的距離小於等於標題欄的高度時 懸浮,即上滑到緊貼標題欄時 懸浮。
反之:
(導航欄原來的位置)下滑到距離大於標題欄的高度時將懸浮的導航欄放回原來的位置。
實現步驟:
1、首先是佈局實現,在內容佈局(標題下面的容器)中,最外層使用FrameLayout包裹住ScrollView(自定義ScrollView,寫一個接口監聽它的onScrollChanged方法)控件和一個空的LinearLayout控件(用於動態將ScrollView控件中的導航欄添加到裏面)。
xml佈局,大致醬紫,不重要的view都已省略,重點看註釋,看註釋,看註釋:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<!--此處省略標題欄-->
<!--內容佈局最外層使用FrameLayout-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--下面是自定義scrollview-->
<MyScrollView
android:id="@+id/myScrollview"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:fillViewport="true"
android:focusable="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">
<!--此處省略頭部view-->
<!--下面LinearLayout用於包裹導航欄控件-->
<LinearLayout
android:id="@+id/line_add_navigation_fixation"
android:layout_width="match_parent"
android:layout_height="填寫固定的導航欄高度"
android:background="@color/white"
android:orientation="vertical">
<!--此處省略導航欄view-->
</LinearLayout>
<ViewPager
android:id="@+id/viewPage_device"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</LinearLayout>
</MyScrollView>
<!--下面LinearLayout用於佔位-->
<LinearLayout
android:id="@+id/line_add_navigation_suspension"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/white"
android:orientation="vertical">
</LinearLayout>
</FrameLayout>
</LinearLayout>
2、然後是java代碼
主要代碼,重點還是看註釋:
//scrollview的滑動監聽
@Override
public void onScrollChanged(MyScrollView ceshimy, int scrollX, int scrollY, int oldl, int oldt) {
int[] location = new int[2];
lineAddNavigationFixation.getLocationOnScreen(location);
//lineAddNavigationFixation是包裹導航欄的LinearLayout
int y = location[1];//導航欄距屏幕頂部的距離,會隨着scrollview的滑動而改變
if (y <= titleView.getHeight()) {//導航欄距屏幕頂部的距離小於等於標題欄的高度時 懸浮,即上滑到緊貼標題欄時 懸浮
addNavigationSuspension();
} else {//反之下滑到距離大於標題欄的高度時放回原來的位置
addNavigationFixation();
}
}
private void addNavigationSuspension() {//添加懸浮
//lineAddNavigationSuspension是佈局中的佔位LinearLayout
if (lineAddNavigationSuspension.getChildCount() == 0) {
if (navigationDevice.getParent() != null)
((ViewGroup) navigationDevice.getParent()).removeView(navigationDevice);
lineAddNavigationSuspension.addView(navigationDevice);
}
}
private void addNavigationFixation() {//懸浮固定到原位置
if (lineAddNavigationFixation.getChildCount() == 0) {
// L.e("---" + "固定");
if (navigationDevice.getParent() != null)
((ViewGroup) navigationDevice.getParent()).removeView(navigationDevice);
lineAddNavigationFixation.addView(navigationDevice);
}
}
ok,邏輯代碼這麼點,是不是so簡單。
實現原理:
簡單概括就是:
佈局中,固定一個位置緊靠着標題欄的Linearlayout空控件,和在導航欄控件的外層包裹一個固定高度的Linearlayout控件。監聽scrollview的滑動位置,做出相應操作動態將導航欄控件添加到某一個Linearlayout控件中。
結束。