当用户点击它时用动画改变背景

Question

我在我的活动中使用了一个 LinearLayout 来更改两个视图。在这里，我使用了两个文本视图。当用户点击线性布局时，我会根据我的要求更改视图。 xml文件在这里，

<LinearLayout
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:background="@drawable/customswitchselector"
            android:textStyle="bold"
            android:layout_below="@+id/linearTab"
            android:layout_marginTop="20dp"
            android:layout_marginBottom="20dp"
            android:layout_marginLeft="30dp"
            android:layout_marginRight="30dp"
            android:showText="true"
            android:id="@+id/switch1"
            android:checked="false"
            android:weightSum="2">
            <TextView
                android:id="@+id/tv_switch1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_gravity="center_vertical"
                android:layout_weight="1"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:textStyle="bold"
                android:textColor="#272351"
                style="bold" />
            <TextView
                android:id="@+id/tv_switch_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_weight="1"
                android:textStyle="bold"
                android:layout_gravity="center_vertical"
                android:paddingLeft="10dp"
                android:paddingRight="10dp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:textColor="#ffffff"
                style="bold"
                />
        </LinearLayout>

这两张图片显示了我的两种情况。我已经做了足够多的事情来改变这一点。现在我想在布局点击时更改文本视图的背景时做动画。我已经检查了 transitiondrawable 示例，但它对我没有帮助。

customswitchselector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
            <corners android:radius="30dp" />
        </shape>
    </item>
    <item android:state_checked="false">
        <shape android:dither="true" android:shape="rectangle" android:useLevel="false" android:visible="true">
            <gradient android:angle="270" android:endColor="#ffffff" android:startColor="#ffffff" />
            <corners android:radius="30dp" />
        </shape>
    </item>
</selector>

custom_track.xml 这用于蓝色背景的文本视图

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:dither="true"
    android:shape="rectangle"
    android:useLevel="false"
    android:visible="true">
    <gradient
        android:angle="270"
        android:endColor="#292850"
        android:startColor="#292850" />
    <corners android:radius="30dp" />
    <size
        android:width="100dp"
        android:height="30dp" />

</shape>

Answer 1

一种可能性是将白色可绘制对象设置为FrameLayout 的背景，并为蓝色椭圆添加一个View，为它的标题添加两个TextViews。

要仍然实现视图恰好占据容器的一半，您可以使用PercenFrameLayout（阅读更多关于它的信息in the official docu）。要使用它，您需要将此依赖项添加到您的build.gradle：compile 'com.android.support:percent:25.2.0'

创建布局后，您只需将蓝色椭圆的重力动画从左到右或相反。

所以你的布局应该是这样的：

<PercentFrameLayout
    android:id="@+id/container"
    android:animateLayoutChanges="true"
    android:background="@drawable/white_oval"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <!-- blue oval -->
    <View
        android:id="@+id/blue_oval"
        android:gravity="start"
        android:background="@drawable/blue_oval"
        app:layout_widthPercent="50%"
        android:layout_height="wrap_content"
        android:transformPivotX="0dp" />

    <!--2 textviews-->
    <TextView
        app:layout_widthPercent="50%"
        android:layout_height="wrap_content" 
        android:text="left"
        android:gravity="start"/>

    <TextView
        app:layout_widthPercent="50%"
        android:layout_height="wrap_content"
        android:text="right"
        android:gravity="end"/>
</FrameLayout>

然后在您的代码中为蓝色椭圆的重力变化设置动画，如下所示：

private void animateGravity(int toGravity) {
    LayoutTransition layoutTransition = container.getLayoutTransition();
    layoutTransition.enableTransitionType(LayoutTransition.CHANGING);
    layoutTransition.setDuration(YOUR_ANIMATION_DURATION);
    layoutTransition.setInterpolator(LayoutTransition.CHANGING, new AccelerateDecelerateInterpolator());

    FrameLayout.LayoutParams layoutParams = (LayoutParams) blueOvalView.getLayoutParams();
    layoutParams.gravity = toGravity;
    blueOvalView.setLayoutParams(layoutParams);
}