繁体   English   中英

如何实现“动画化的CollapsingToolbar”?

[英]How to achieve an “animated CollapsingToolbar?”

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

在此处输入图片说明 (原图请原谅)

我已经看过这种解决方案 ,但是它依赖于ListView。 我也研究了这个解决方案 ,但是我看不到如何能够自定义动画。 这个仓库看起来可以工作,但是有很多错误,无法编译。

因此,总的来说,我正在寻找一种如何以上面描述的方式对工具栏进行动画处理, 并采用您认为最好的任何方式 ,而不必使用CollapsingToolbar。

检出此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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM