如何实现“动画CollapsingToolbar?”

时间:2016-09-02 07:49:45

标签: java android android-animation android-collapsingtoolbarlayout

基本上,我想知道如何使用RecyclerView,如何实现一种“动画的CollapsingToolbar”。注意它在引号中,因为我没有附加到解决方案是一个CollapsingToolbar,但是到目前为止,这是我能找到的最接近我想要的东西。基本上,我想制作一个工具栏,其中包含我的应用程序的标题,以及带有一些字符串后跟一个int(作为字符串类型)的字幕。当我向上滚动时,我希望字符串淡出,但保持int并移动到与应用程序标题相同的级别。

enter image description here(原谅粗略的图纸)

我查看了this solution,但它依赖于ListView。我也看了this solution,但是我看不出我怎么能自定义动画的方式。 This repo看起来可以工作,但它有一堆错误,无法编译。

所以基本上,总结一下,我正在寻找以上述方式动画工具栏的可能性,以你认为最好的方式,而不是必须的CollapsingToolbar。

1 个答案:

答案 0 :(得分:2)

结帐CoordinatorLayout

<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:fitsSystemWindows="true">

    <android.support.design.widget.AppBarLayout
        android:id="@+id/app_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingTop="5dp"
        android:paddingBottom="30dp"
        android:theme="@style/AppTheme.AppBarOverlay"
        >

        <abysmel.com.collapsibletoolbarhelper.widgets.CollapsibleToolbarHelper
            android:id="@+id/toolbar_layout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:layout_scrollFlags="scroll|exitUntilCollapsed"
            android:gravity="center_vertical"
            android:layout_marginTop="10dp"
            android:background="@android:color/transparent"
            >

            <!--Note that the position has to be set with respect to the collapsed toolbar. So,
                aligning it in center initially (centerInParent="true") will NOT work as it will remain
                at its position even after the Toolbar collapses. Also note that the initially set the
                alpha of the view to zero and NOT the visibility to gone, as the view will then have never
                been drawn which will throw all calculations haywire for show_on_collapse. Wish there
                was a better way to do this-->
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:id="@+id/hello.img"
                android:src="@mipmap/hello"
                android:layout_marginLeft="10dp"
                android:alpha="0"
                app:layout_marginTopPercent = "3%"
                app:collapseMode="show_on_collapse"/>

            <!-- Title -->
            <abysmel.com.collapsibletoolbarhelper.widgets.CollapsibleTextLayout
                android:id="@+id/hello.text"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                app:layout_widthPercent="59%"
                android:layout_alignParentLeft="true"
                app:layout_marginTopPercent = "1%"
                app:layout_marginBottomPercent = "1%"
                app:layout_marginLeftPercent="5%"
                android:textColor="@android:color/white"
                app:collapseMode="pin_on_scroll"
                app:textToShow = "Hello World"
                app:expandedTextColor = "@android:color/white"
                app:collapsedTextColor = "@android:color/white"
                app:typefaceFamilyPrimary = "sans-serif-light"
                app:typefaceFamilySecondary = "sans-serif-medium"
                app:isMultiFaceted="true"
                app:typefaceSplitPosition="5"
                app:expandedTextSize = "62dp"
                app:collapsedTextSize = "32dp"
                app:maxExpandedTextSize = "62dp"
                />

            <!-- The hello number edit button -->
            <ImageView
                android:id="@+id/hello.edit"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                app:layout_marginTopPercent = "3%"
                app:layout_marginBottomPercent = "1%"
                app:layout_marginRightPercent = "4%"
                android:layout_marginLeft="10dp"
                android:src="@mipmap/pencil"
                app:collapseMode="hide_on_collapse"/>

            <!-- The hello Number -->
            <TextView
                android:id="@+id/hello.number"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                app:layout_widthPercent="40%"
                app:layout_marginTopPercent = "1%"
                app:layout_marginBottomPercent = "1%"
                app:layout_marginRightPercent = "1%"
                android:layout_toLeftOf="@id/hello.edit"
                android:layout_toRightOf="@id/hello.text"
                android:gravity="end"
                android:text="@string/hello_no_sign"
                android:textColor="@android:color/white"
                android:textSize="@dimen/hello_no_size"
                app:collapseMode="pin_on_scroll"/>



            <!-- Version -->
            <TextView
                android:id="@+id/version"
                app:layout_widthPercent="40%"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_below="@id/hello.text"
                android:layout_marginTop="5dp"
                android:layout_alignParentLeft="true"
                app:layout_marginLeftPercent="5%"
                android:text="@string/version"
                android:textColor="@android:color/white"
                android:textSize="@dimen/version_no_size"
                app:collapseMode="parallax_on_scroll"
                 />

            <!-- E-mail Address -->
            <TextView
                android:id="@+id/hello.address"
                app:layout_widthPercent="40%"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:layout_below="@id/hello.number"
                android:layout_alignParentRight="true"
                android:gravity="end"
                app:layout_marginRightPercent="5%"
                android:text="@string/emailaddress"
                android:textColor="@android:color/white"
                android:textSize="@dimen/mail_address_size"
                app:collapseMode="parallax_on_scroll"
                 />
        </abysmel.com.collapsibletoolbarhelper.widgets.CollapsibleToolbarHelper>
    </android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>

https://github.com/opacapp/multiline-collapsingtoolbar