仿造 bilibili 的播放界面+推特的个人中心界面改造的
掌握这种布局后,任何需要上滑缩进的界面,全部可以实现,一劳永逸。
只需要掌握布局和几行监听代码
代码走起
需要两个包 (如何导入:略) 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("");
}
}
});