CollapsingToolbarLayout配合CoordinatorLayout、viewpage实现伸缩式布局

来源：互联网发布：被周小平炮轰的网络大v 编辑：程序博客网时间：2024/04/30 16:12

由于项目需求自己写了个demo，有什么需要改的地方希望大家提出

<?xml version="1.0" encoding="utf-8"?><android.support.design.widget.CoordinatorLayout    android:id="@+id/detail_main_content"    xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:android_custom="http://schemas.android.com/tools"    xmlns:app="http://schemas.android.com/apk/res-auto"    xmlns:fab="http://schemas.android.com/apk/res-auto"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:fitsSystemWindows="true">    <android.support.design.widget.AppBarLayout        android:id="@+id/detail_main_appbar"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:fitsSystemWindows="true"        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">        <android.support.design.widget.CollapsingToolbarLayout            android:id="@+id/detail_main_collapsing_toolbar"            android:layout_width="match_parent"            android:layout_height="224dp"            android:fitsSystemWindows="true"            app:contentScrim="?attr/colorPrimary"            app:layout_collapseMode="parallax"            app:layout_scrollFlags="scroll|exitUntilCollapsed">            <LinearLayout                android:layout_width="match_parent"                android:layout_height="match_parent"                android:layout_gravity="center"                android:fitsSystemWindows="true"                android:gravity="center|bottom"                android:paddingBottom="8dp"                android:orientation="vertical"                >                <com.olemob.view.roundedimageview.RoundedImageView                    android:id="@+id/detail_main_icon_iv"                    android:layout_width="80dp"                    android:layout_height="80dp"                    android:layout_centerVertical="true"                    android:scaleType="centerCrop"                    android:src="@drawable/icon_default"                    app:riv_corner_radius="4dp"                    app:riv_oval="false"/>                <RatingBar                    android:id="@+id/detail_main_rating_rb"                    style="@style/gamedetail_star"                    android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_centerVertical="true"                    android:layout_marginBottom="8dp"                    android:layout_marginTop="12dp"                    android:isIndicator="true"/>                <LinearLayout android:layout_width="wrap_content"                    android:layout_height="wrap_content"                    android:layout_gravity="center"                    android:gravity="center"                    android:orientation="horizontal"                    >                    <TextView android:id="@+id/detail_main_size"                        android:layout_width="wrap_content"                        android:layout_height="wrap_content"                        android:layout_marginRight="8dp"                        android:singleLine="true"                        android:text="0.00M"                        android:textColor="@color/color2_6"                        android:textSize="@dimen/text_size2"/>                    <TextView android:id="@+id/detail_main_downloads"                        android:layout_width="wrap_content"                        android:layout_height="wrap_content"                        android:layout_marginLeft="8dp"                        android:singleLine="true"                        android:text="100次下载"                        android:textColor="@color/color2_6"                        android:textSize="@dimen/text_size2"/>                </LinearLayout>            </LinearLayout>

<!--自定义的toolbar实现分享收藏功能，也可以定义实现其他功能

具体实现什么功能可以自己搞-->

<include                android:id="@+id/detail_main_title_view"                layout="@layout/include_toolbar_title"/>        </android.support.design.widget.CollapsingToolbarLayout>        <android.support.design.widget.TabLayout            android:id="@+id/detail_main_fragment_slide_tab"            android:layout_width="match_parent"            android:layout_height="?attr/actionBarSize"            android:layout_gravity="bottom"            app:layout_collapseMode="pin"            app:tabIndicatorColor="@color/color2_12"            app:tabSelectedTextColor="@color/color2_6"            app:tabTextColor="@color/color2_8"            app:layout_anchor="@id/detail_main_title_view"/>    </android.support.design.widget.AppBarLayout>    <android.support.v4.view.ViewPager        android:id="@+id/detail_main_fragment_view"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:background="@color/background"        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>    <com.olemob.view.FloatingActionButton        android:id="@+id/detail_main_floatingbar"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_marginBottom="2dp"        android:layout_marginRight="6dp"        app:layout_anchor="@id/detail_main_fragment_view"        app:layout_anchorGravity="right|bottom"        fab:fab_colorNormal="@color/color2_11"        fab:fab_colorPressed="@color/color2_17"        fab:fab_icon="@drawable/ic_plus_down"/>    <com.olemob.view.RoundProgressBar        android:id="@+id/detail_main_progress"        android:layout_width="64dp"        android:layout_height="64dp"        android:layout_marginBottom="10dp"        android:layout_marginRight="11dp"        android:visibility="gone"        android_custom:roundColor="@color/color2_21"        android_custom:roundProgressColor="@color/color2_6"        android_custom:textIsDisplayable="false"        app:layout_anchor="@id/detail_main_fragment_view"        app:layout_anchorGravity="right|bottom"        />    <ViewStub        android:id="@+id/detail_main_nodata_stub"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout="@layout/layout_nonet_and_nodata"        app:layout_behavior="@string/appbar_scrolling_view_behavior"        /></android.support.design.widget.CoordinatorLayout>

引入的自定义toolbar

<?xml version="1.0" encoding="utf-8"?><android.support.v7.widget.Toolbar    android:id="@+id/detail_main_title_view"    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="?attr/actionBarSize"    android:gravity="top"    app:contentInsetStart="0dp"    android:minHeight="?attr/actionBarSize"    app:layout_collapseMode="pin"    app:popupTheme="@style/ThemeOverlay.AppCompat.Light"    app:titleMarginTop="15dp">    <LinearLayout        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:orientation="horizontal"        android:layout_gravity="left"        >        <ImageView            android:id="@+id/include_toolbar_title_left_back"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:background="@drawable/title_btn_selector"            android:src="@drawable/ic_back"            android:padding="16dp"            android:gravity="center_vertical"            />        <TextView            android:id="@+id/include_toolbar_title_titletext"            android:layout_width="wrap_content"            android:layout_height="match_parent"            android:ellipsize="end"            android:gravity="center_vertical"            android:paddingLeft="10dp"            android:paddingRight="10dp"            android:singleLine="true"            android:text="@string/app_name"            android:textColor="@color/white"            android:textSize="18dp"/>    </LinearLayout>    <ImageView        android:id="@+id/include_toolbar_title_right"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/title_btn_selector"        android:layout_gravity="right"        android:padding="16dp"        android:src="@drawable/ic_share"        />    <ImageView        android:id="@+id/include_toolbar_title_left"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/ic_shoucang_n"        android:background="@drawable/title_btn_selector"        android:layout_gravity="right"        android:padding="16dp"        /></android.support.v7.widget.Toolbar>
效果图如下

0 0