AndroidCollapsingToolbarLayout-仿BiliBili视频页

来源：互联网发布：优化后人员配制方案编辑：程序博客网时间：2024/06/04 18:56

效果图：

这里写图片描述

coordinatorLayout.xml布局

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:tools="http://schemas.android.com/tools"    android:id="@+id/main_content"    android:layout_width="match_parent"    android:layout_height="match_parent">    <android.support.design.widget.AppBarLayout        android:id="@+id/appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/collaps"            android:layout_width="match_parent"            android:layout_height="@dimen/tab_height"            app:contentScrim="#FA7199"            app:layout_scrollFlags="scroll|exitUntilCollapsed"            app:statusBarScrim="@android:color/transparent">            <ImageView                android:layout_width="match_parent"                android:layout_height="match_parent"                android:scaleType="fitXY"                android:src="@mipmap/meizhi"                app:layout_collapseMode="parallax" />            <android.support.v7.widget.Toolbar                android:id="@+id/toolbar1"                android:layout_width="match_parent"                android:layout_height="48dp"                android:layout_marginTop="20dp"                app:collapseIcon="@mipmap/ic_book_list"                app:layout_collapseMode="pin"                app:navigationIcon="@mipmap/navigation_back_white"                app:popupTheme="@style/ThemeOverlay.AppCompat.Light"                app:title="@string/app_name"                app:titleTextColor="@color/white">                <!--自定义带图片的立即播放按钮-->                <LinearLayout                    android:id="@+id/playButton"                    android:layout_width="match_parent"                    android:layout_height="match_parent"                    android:gravity="center"                    android:orientation="horizontal"                    android:visibility="gone">                    <ImageView                        android:layout_width="30dp"                        android:layout_height="30dp"                        android:src="@mipmap/ic_book_list" />                    <TextView                        android:layout_width="wrap_content"                        android:layout_height="wrap_content"                        android:layout_marginLeft="5dp"                        android:text="立即播放"                        android:textColor="#ffffff" />                </LinearLayout>            </android.support.v7.widget.Toolbar>        </android.support.design.widget.CollapsingToolbarLayout>        <include layout="@layout/common_toolbar_with_tab" />    </android.support.design.widget.AppBarLayout>    <android.support.v4.view.ViewPager        android:id="@+id/viewpager"        android:layout_width="match_parent"        android:layout_height="510dp"        android:layout_weight="1"        app:layout_behavior="@string/appbar_scrolling_view_behavior"        tools:layout_editor_absoluteY="257dp" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_gravity="end|bottom"        android:layout_margin="@dimen/fab_margin"        app:fabSize="mini"        android:src="@mipmap/add" />    <android.support.design.widget.FloatingActionButton        android:id="@+id/fab2"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginBottom="25dp"        android:layout_marginRight="15dp"        android:src="@mipmap/ic_book_list"        app:elevation="6dp"        app:layout_anchor="@+id/appbar"        app:layout_anchorGravity="bottom|right" /></android.support.design.widget.CoordinatorLayout>

监听AppBarLayout.OnOffsetChangedListener来判断伸缩状态

 appbar.addOnOffsetChangedListener(new AppBarLayout.OnOffsetChangedListener() {            @Override            public void onOffsetChanged(AppBarLayout appBarLayout, int verticalOffset) {                if (verticalOffset == 0) {                    if (state != CollapsingToolbarLayoutState.EXPANDED) {                        state = CollapsingToolbarLayoutState.EXPANDED;                        collaps.setTitle(getString(R.string.app_name));                    }                } else if (Math.abs(verticalOffset) >= appBarLayout.getTotalScrollRange()) {                    if (state != CollapsingToolbarLayoutState.COLLAPSED) {                        collaps.setTitle("");//设置title不显示                        fab2.setVisibility(View.VISIBLE);//隐藏播放按钮                        state = CollapsingToolbarLayoutState.COLLAPSED;//修改状态标记为折叠                    }                } else {                    if (state != CollapsingToolbarLayoutState.INTERNEDIATE) {                        if (state == CollapsingToolbarLayoutState.COLLAPSED) {                            fab2.setVisibility(View.GONE);//由折叠变为中间状态时隐藏播放按钮                        }                        collaps.setTitle(getString(R.string.app_name));//设置title为INTERNEDIATE                        state = CollapsingToolbarLayoutState.INTERNEDIATE;//修改状态标记为中间                    }                }            }        });

github地址：https://github.com/hushendian/CollapsingToolbarLayoutDemo.git

原文地址：http://www.jianshu.com/p/06c0ae8d9a96
http://www.jianshu.com/p/ac56f11e7ce1
http://www.jianshu.com/p/f09723b7e887

阅读全文

0 0