展开/折叠Lollipop工具栏动画(Telegram应用程序)


76

我试图弄清楚工具栏的展开/折叠动画是如何完成的。如果您查看Telegram应用程序设置,将会看到有一个列表视图和工具栏。向下滚动时,工具栏将折叠,而向上滚动时,工具栏将展开。还有个人资料图片和FAB的动画。有人对此有任何线索吗?您是否认为他们在其之上构建了所​​有动画?也许我缺少新的API或支持库中的内容。

当您打开微调器时,我在Google日历应用程序中注意到了相同的行为(我不认为它是微调器,但看起来像):工具栏展开,向上滚动时,它折叠。

只是要澄清一下:我不需要QuickReturn方法。我知道,Telegram应用程序可能正在使用类似的东西。我需要的确切方法是Google日历应用效果。我尝试过

android:animateLayoutChanges="true"

并且expand方法效果很好。但是显然,如果我向上滚动ListView,工具栏不会折叠。

我还考虑过添加一个,GestureListener但是我想知道是否有任何API或更简单的方法来实现。

如果没有,我想我会去的GestureListener。希望能有流畅的动画效果。

谢谢!

Answers:


109

编辑:

自Android Design支持库发布以来,有一个更简单的解决方案。检查华金的答案

-

这是我的操作方式,可能还有许多其他解决方案,但这对我有用。

  1. 首先,您必须使用Toolbar透明背景的。扩展与折叠Toolbar实际上是一种透明的伪造Toolbar。(您可以在下面的第一个屏幕截图中看到-带有边距的屏幕截图-这也是他们在Telegram中的操作方式)。

    我们只保留和和的实际Toolbar值。NavigationIconMenuItem

    1.透明工具栏-2.展开的标题-3.折叠的标题

  2. 第二个屏幕截图中红色矩形中的所有内容(即假冒ToolbarFloatingActionButton)实际上都是您添加到设置(或)的标头ListViewScrollView

    因此,您必须在一个单独的文件中为此标头创建一个布局,如下所示:

     <!-- The headerView layout. Includes the fake Toolbar & the FloatingActionButton -->
    
     <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    
        <RelativeLayout
            android:id="@+id/header_container"
            android:layout_width="match_parent"
            android:layout_height="@dimen/header_height"
            android:layout_marginBottom="3dp"
            android:background="@android:color/holo_blue_dark">
    
            <RelativeLayout
                android:id="@+id/header_infos_container"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_alignParentBottom="true"
                android:padding="16dp">
    
                <ImageView
                    android:id="@+id/header_picture"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_centerVertical="true"
                    android:layout_marginRight="8dp"
                    android:src="@android:drawable/ic_dialog_info" />
    
                <TextView
                    android:id="@+id/header_title"
                    style="@style/TextAppearance.AppCompat.Title"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_toRightOf="@+id/header_picture"
                    android:text="Toolbar Title"
                    android:textColor="@android:color/white" />
    
                <TextView
                    android:id="@+id/header_subtitle"
                    style="@style/TextAppearance.AppCompat.Subhead"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_below="@+id/header_title"
                    android:layout_toRightOf="@+id/header_picture"
                    android:text="Toolbar Subtitle"
                    android:textColor="@android:color/white" />
    
            </RelativeLayout>
        </RelativeLayout>
    
        <FloatingActionButton
            android:id="@+id/header_fab"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom|right"
            android:layout_margin="10dp"
            android:src="@drawable/ic_open_in_browser"/>
    
    </FrameLayout>
    

    (请注意,您可以使用负边距/填充使晶圆厂跨越2 Views

  3. 现在介绍有趣的部分。为了扩大假货的动画规模Toolbar,我们实施了ListView onScrollListener

    // The height of your fully expanded header view (same than in the xml layout)
    int headerHeight = getResources().getDimensionPixelSize(R.dimen.header_height);
    // The height of your fully collapsed header view. Actually the Toolbar height (56dp)
    int minHeaderHeight = getResources().getDimensionPixelSize(R.dimen.action_bar_height);
    // The left margin of the Toolbar title (according to specs, 72dp)
    int toolbarTitleLeftMargin = getResources().getDimensionPixelSize(R.dimen.toolbar_left_margin);
    // Added after edit
    int minHeaderTranslation;
    
    private ListView listView;
    
    // Header views
    private View headerView;
    private RelativeLayout headerContainer;
    private TextView headerTitle;
    private TextView headerSubtitle;
    private FloatingActionButton headerFab;
    
    
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
    {
        View rootView = inflater.inflate(R.layout.listview_fragment, container, false);
        listView = rootView.findViewById(R.id.listview);
    
        // Init the headerHeight and minHeaderTranslation values
    
        headerHeight = getResources().getDimensionPixelSize(R.dimen.header_height);
        minHeaderTranslation = -headerHeight + 
            getResources().getDimensionPixelOffset(R.dimen.action_bar_height);
    
        // Inflate your header view
        headerView = inflater.inflate(R.layout.header_view, listview, false);
    
        // Retrieve the header views
        headerContainer = (RelativeLayout) headerView.findViewById(R.id.header_container);
        headerTitle = (TextView) headerView.findViewById(R.id.header_title);
        headerSubtitle = (TextView) headerView.findViewById(R.id.header_subtitle);
        headerFab = (TextView) headerView.findViewById(R.id.header_fab);;
    
        // Add the headerView to your listView
        listView.addHeaderView(headerView, null, false);
    
        // Set the onScrollListener
        listView.setOnScrollListener(this);        
    
        // ...
    
        return rootView;
    }
    
    @Override
    public void onScrollStateChanged(AbsListView view, int scrollState)
    {
        // Do nothing
    }
    
    
    @Override
    public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount)
    {
        Integer scrollY = getScrollY(view);
    
        // This will collapse the header when scrolling, until its height reaches
        // the toolbar height
        headerView.setTranslationY(Math.max(0, scrollY + minHeaderTranslation));
    
        // Scroll ratio (0 <= ratio <= 1). 
        // The ratio value is 0 when the header is completely expanded, 
        // 1 when it is completely collapsed
        float offset = 1 - Math.max(
            (float) (-minHeaderTranslation - scrollY) / -minHeaderTranslation, 0f);
    
    
        // Now that we have this ratio, we only have to apply translations, scales,
        // alpha, etc. to the header views
    
        // For instance, this will move the toolbar title & subtitle on the X axis 
        // from its original position when the ListView will be completely scrolled
        // down, to the Toolbar title position when it will be scrolled up.
        headerTitle.setTranslationX(toolbarTitleLeftMargin * offset);
        headerSubtitle.setTranslationX(toolbarTitleLeftMargin * offset);
    
        // Or we can make the FAB disappear when the ListView is scrolled 
        headerFab.setAlpha(1 - offset);
    }
    
    
    // Method that allows us to get the scroll Y position of the ListView
    public int getScrollY(AbsListView view)
    {
        View c = view.getChildAt(0);
    
        if (c == null)
            return 0;
    
        int firstVisiblePosition = view.getFirstVisiblePosition();
        int top = c.getTop();
    
        int headerHeight = 0;
        if (firstVisiblePosition >= 1)
            headerHeight = this.headerHeight;
    
        return -top + firstVisiblePosition * c.getHeight() + headerHeight;
    }
    

请注意,该代码中有一些部分我没有测试过,所以请随时强调错误。但总的来说,我知道此解决方案有效,即使我确定它可以改进。

编辑2:

上面的代码中存在一些错误(直到今天我才测试……),所以我更改了几行使其起作用:

  1. 我介绍了另一个变量minHeaderTranslation,它代替了minHeaderHeight;
  2. 我从更改了应用于标头View的Y平移值:

        headerView.setTranslationY(Math.max(-scrollY, minHeaderTranslation));
    

    至 :

        headerView.setTranslationY(Math.max(0, scrollY + minHeaderTranslation));
    

    以前的表达根本没有用,对此我感到抱歉。

  3. 比率计算也发生了变化,因此它现在从工具栏的底部(而不是屏幕的顶部)演变为完全展开的标题。


5
向下滚动太远,标题是否会消失?Afaik标头也被回收,因此即使您转换标头,也就好像它固定在顶部一样,我认为一旦实际位置移开,它就会消失。
库诺2014年

你是对的古诺。我没有尝试,但这是预期的行为。这就是为什么我在FrameLayout中使用工具栏。主要内容在工具栏上方,其marginTop为x。要播放动画,我只需要在Y轴之间转换主要内容
edoardotognoni

@FedeAmura亲爱的,但我认为FAB在屏幕底部时过低:)
MathieuMaree 2015年

3
现在,借助新的Android设计支持库,一切都变得更加简单。您可以根据Chris Banes在Cheesesquare示例应用程序的工作,通过遵循Suleiman用户的本教程来实现此效果。<br> <br> **编辑** <br>一些用户询问他们是否可以使用相同的想法,但带有图标。[Saulmm Github用户尝试过类似的操作](github.com/saulmm
Joaquin Iurchuk

该库是获取基本动画和外观的好方法,但是CollapsingToolbarLayout当前仅支持字符串作为标题。无图标或字幕..链接的问题:stackoverflow.com/questions/31069107/...
音速


8

使用设计支持库http://android-developers.blogspot.in/2015/05/android-design-support-library.html

包括在build.gradle

compile 'com.android.support:design:22.2.0'    
compile 'com.android.support:appcompat-v7:22.2.+'

对于回收者视图,还包括此

compile 'com.android.support:recyclerview-v7:22.2.0' 

    <!-- AppBarLayout allows your Toolbar and other views (such as tabs provided by TabLayout) 
    to react to scroll events in a sibling view marked with a ScrollingViewBehavior.-->
    <android.support.design.widget.AppBarLayout
        android:id="@+id/appbar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:fitsSystemWindows="true">

        <!-- specify tag app:layout_scrollFlags -->
        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <!-- specify tag app:layout_scrollFlags -->
        <android.support.design.widget.TabLayout
            android:id="@+id/tabLayout"
            android:scrollbars="horizontal"
            android:layout_below="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="?attr/colorPrimary"
            app:layout_scrollFlags="scroll|enterAlways"/>

        <!--  app:layout_collapseMode="pin" will help to pin this view at top when scroll -->
        <TextView
            android:layout_width="match_parent"
            android:layout_height="50dp"
            android:text="Title"
            android:gravity="center"
            app:layout_collapseMode="pin" />

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

    <!-- This will be your scrolling view. 
    app:layout_behavior="@string/appbar_scrolling_view_behavior" tag connects this features -->
    <android.support.v7.widget.RecyclerView
        android:id="@+id/list"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

    </android.support.v7.widget.RecyclerView>

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

您的活动应扩展AppCompatActivity

public class YourActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.your_layout);

        //set toolbar
        Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
        setSupportActionBar(toolbar);
    }

}

您的应用主题应该像这样

    <resources>
            <!-- Base application theme. -->   
            <style name="AppTheme" parent="Theme.AppCompat.NoActionBar">
            </style>
    </resources>

非常好,喜欢这个设计支持库
luksfarris 2015年

我讨厌它。一直在变化。不幸的是,我将不得不遵循它。
2016年

1

这是我的实现:

collapsedHeaderHeightexpandedHeaderHeight在其他地方定义,使用该函数getAnimationProgress可以获得扩展/折叠进度,基于此值,我可以制作动画并显示/隐藏真正的标题。

  listForumPosts.setOnScrollListener(new AbsListView.OnScrollListener() {

        /**
         * @return [0,1], 0 means header expanded, 1 means header collapsed
         */
        private float getAnimationProgress(AbsListView view, int firstVisibleItem) {
            if (firstVisibleItem > 0)
                return 1;

            // should not exceed 1
            return Math.min(
                    -view.getChildAt(0).getTop() / (float) (expandedHeaderHeight - collapsedHeaderHeight), 1);
        }

        @Override
        public void onScroll(AbsListView view, int firstVisibleItem, int visibleItemCount, int totalItemCount) {
            // at render beginning, the view could be empty!
            if (view.getChildCount() > 0) {
                float animationProgress = getAnimationProgress(view, firstVisibleItem);
                imgForumHeaderAvatar.setAlpha(1-animationProgress);
                if (animationProgress == 1) {
                    layoutForumHeader.setVisibility(View.VISIBLE);
                } else {
                    layoutForumHeader.setVisibility(View.GONE);
                }
            }
        }

        @Override
        public void onScrollStateChanged(AbsListView view, int scrollState) {
            // do nothing
        }

    }
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.