Android布局动画

时间:2015-06-10 11:29:55

标签: android android-layout animation

我想在android中实现菜单布局。菜单布局将位于屏幕底部。我想要一个用于显示和隐藏菜单布局的按钮。到目前为止,我已成功实现如下:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true"
    android:layout_alignParentBottom="true"
    android:orientation="vertical">

    <ImageView
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:id="@+id/conversations_imageView_menu"
        android:layout_alignParentEnd="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_marginBottom="35dp"
        android:layout_marginRight="15dp"
        android:layout_marginEnd="15dp"
        android:layout_gravity="right"
        android:src="@mipmap/ic_olla_menu_conversations_show"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:id="@+id/conversations_menu_layout"
        android:visibility="gone"
        android:background="@drawable/conversations_menu_background">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:layout_marginTop="10dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center"
                android:layout_marginTop="5dp">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/ic_olla_block_user"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Block"
                    android:textSize="12sp"
                    android:textColor="@color/conversations_menu_textColor"/>

            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/ic_olla_group"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Groups"
                    android:textSize="12sp"
                    android:textColor="@color/conversations_menu_textColor"/>

            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/ic_olla_background"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Background"
                    android:textSize="12sp"
                    android:textColor="@color/conversations_menu_textColor"/>

            </LinearLayout>

        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:orientation="horizontal"
            android:layout_weight="1"
            android:layout_marginBottom="20dp"
            android:layout_marginTop="5dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/ic_olla_invite"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Invite"
                    android:textSize="12sp"
                    android:textColor="@color/conversations_menu_textColor"/>

            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/ic_olla_privacy"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Privacy"
                    android:textSize="12sp"
                    android:textColor="@color/conversations_menu_textColor"/>

            </LinearLayout>
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:layout_weight="1"
                android:gravity="center">

                <ImageView
                    android:layout_width="40dp"
                    android:layout_height="40dp"
                    android:layout_marginBottom="5dp"
                    android:src="@mipmap/ic_olla_help"/>

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="Help"
                    android:textSize="12sp"
                    android:textColor="@color/conversations_menu_textColor"/>

            </LinearLayout>

        </LinearLayout>

    </LinearLayout>

</LinearLayout>

当用户点击conversations_imageView_menu ImageView时,conversations_menu_layout布局将从底部滑动并按下按钮直到所有内容都可见。如果菜单可见,{​​{1}}将向下滑动并隐藏。或者,我想使用棒棒糖conversations_menu_layout显示conversations_menu_layout。 我试图实现前者,这里是我的动画文件;

向上滑动

circular reveal animations

向下滑动

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
    <translate
        android:duration="800"
        android:fromYDelta="70%"
        android:toYDelta="0" />
</set>

但动画并不流畅。在菜单布局完成显示之前,按钮向上移动。如何使其向下平滑滚动?

1 个答案:

答案 0 :(得分:0)

这可能会对您有所帮助:

{% extends "admin/change_form.html" %}
{% load i18n %}

{% block submit_buttons_bottom %}
    <div class="submit-row">
       <input type="button" value="{% trans 'Another Button' %}" name="_anotherbutton" />
    </div>

    {{ block.super }}
{% endblock %}

您可以在此处应用该动画来查看v。