美文网首页CoordinatorLayout
CoordinatorLayout+TabLayout 实现酷炫

CoordinatorLayout+TabLayout 实现酷炫

作者: ana生 | 来源:发表于2019-02-28 15:23 被阅读0次

正文前先来张效果图:


output2.gif

布局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"
android:layout_width="match_parent"
android:layout_height="match_parent">

<android.support.design.widget.AppBarLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar">

    <android.support.design.widget.CollapsingToolbarLayout
        android:layout_width="match_parent"
        android:layout_height="250dp"
        app:contentScrim="@color/colorAccent"
        app:expandedTitleMarginBottom="100dp"
        app:layout_scrollFlags="scroll|exitUntilCollapsed"
        app:title="我是collapsebar的标题">

        <ImageView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:scaleType="centerCrop"
            android:background="@color/colorAccent"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="第一个固定(pin)"
            android:textSize="40sp"
            app:layout_collapseMode="pin" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="不设置,跟随滑动"
            android:textSize="40sp" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:text="视察效果(parallax)"
            android:textSize="40sp"
            app:layout_collapseMode="parallax" />

        <android.support.v7.widget.Toolbar
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:layout_gravity="top"
            android:background="#600f"
            app:layout_collapseMode="pin">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="我是toolbar"
                android:textColor="#fff" />
        </android.support.v7.widget.Toolbar>


    </android.support.design.widget.CollapsingToolbarLayout>

    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorAccent"
        android:layout_gravity="bottom" />
</android.support.design.widget.AppBarLayout>


<android.support.v4.view.ViewPager
    android:id="@+id/vp"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    app:layout_behavior="@string/appbar_scrolling_view_behavior" />

</android.support.design.widget.CoordinatorLayout>

本效果已上传github仅供参考,如需要更加酷炫的效果,请上github.

相关文章

网友评论

    本文标题:CoordinatorLayout+TabLayout 实现酷炫

    本文链接:https://www.haomeiwen.com/subject/nhahuqtx.html