您的位置:首页 > 其它

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

2016-02-19 15:25 573 查看
由于项目需求自己写了个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.Toolbarandroid: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"><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:orientation="horizontal"android:layout_gravity="left"><ImageViewandroid: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"/><TextViewandroid: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><ImageViewandroid: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"/><ImageViewandroid: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>
效果图如下
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: