仿造 bilibili 的播放界面+推特的個人中心界面改造的
掌握這種布局后,任何需要上滑縮進的界面,全部可以實現,一勞永逸。
只需要掌握布局和幾行監聽代碼
gif效果
代碼走起
需要兩個包 (如何導入:略) compile 'com.android.support:appcompat-v7:23.4.0' compile 'com.android.support:design:23.4.0'
布局:
<android.support.design.widget.CoordinatorLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorBackground">
<android.support.design.widget.AppBarLayout
android:id="@+id/appbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
//當狀態欄收縮時候,同樣是沉浸式,需要在AppBarLayout內加上這個,讓AppBarLayout留出來一個狀態欄的位置,另需要一行代碼
android:fitsSystemWindows="true"
android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">
<!--滾動的時候縮進的方式,共5種-->
<!--enterAlways-->
<!--enterAlwaysCollapsed-->
<!--exitUntilCollapsed-->
<!--scroll-->
<!--snap-->
<!--app:layout_scrollFlags="scroll|exitUntilCollapsed"-->
<!--CollapsingToolbarLayout內的title文字不顯示-->
<!--app:titleEnabled="false"-->
<android.support.design.widget.CollapsingToolbarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:contentScrim="?attr/colorPrimary"
app:layout_scrollFlags="scroll|exitUntilCollapsed"
app:titleEnabled="false">
<!--最后,將你需要滾動收縮的布局放到這里邊-->
<!--舉例-->
<!--折疊模式 parallax/pin/none-->
<!--app:layout_collapseMode="parallax"-->
<!--設置視差滾動因子,值為:0~1-->
<!--app:layout_collapseParallaxMultiplier="0.5"-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="160dp"
//這一句為了收縮前的狀態欄也是沉浸式
android:fitsSystemWindows="true"
app:layout_collapseMode="parallax">
</RelativeLayout>
</android.support.design.widget.CollapsingToolbarLayout>
<android.support.v7.widget.Toolbar
android:id="@+id/toolbar"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:layout_collapseMode="pin"
app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
</android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>
<!--這里是滾動后停留的tablayout-->
<!--app:layout_behavior,這個屬性作用就是聯動滾動-->
<!--關于behavior:可以自定義出無數種聯動滾動特效,這里的上滑縮進是谷歌提供的,引用的是一個類文件。更多特效可去搜索這個屬性-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
app:layout_behavior="@string/appbar_scrolling_view_behavior">
<android.support.design.widget.TabLayout
android:id="@+id/main_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/color100White"
//注意這個只有5.0生效,5.0以下運行報錯,增加1dp的陰影
android:elevation="1dp"
//以下都是一些tablayout的屬性
app:tabGravity="fill"
app:tabIndicatorColor="?attr/colorMPrimary"
app:tabIndicatorHeight="4dp"
app:tabMode="fixed"
app:tabSelectedTextColor="?attr/colorMPrimary"
app:tabTextColor="?attr/colorTwoText">
</android.support.design.widget.TabLayout>
<!--ViewPager的fragment內必須有支持滾動的控件-->
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
</android.support.design.widget.CoordinatorLayout>
代碼:
1.設置沉浸狀態欄
//加上版本判斷,大于android4.4才有的屬性
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
window.addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
}
2.監聽actionbar滾動
appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {
@Override
public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {
//appbar.getTotalScrollRange() 拿到actionbar可滾動的最大距離
//verticalOffset 當前的滾動距離
if (Math.abs(verticalOffset) > appbar.getTotalScrollRange()/1.2) {
toolbar.setTitle("文字");
} else {
toolbar.setTitle("");
}
}
});