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

Question

我在 Activity 中使用一个 LinearLayout 来更改两个 View 。在这里，我使用了两个 TextView 。当用户点击线性布局时，我会根据我的要求更改 View 。 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>

这两个图像显示了我的两个条件。我已经做了足够多的事情来改变这一点。现在我想在点击布局时更改 TextView 的背景时制作动画。我检查了 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 这个用于蓝色背景的textview

<?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它的标题。

要仍然实现 View 正好占据容器的一半，您可以使用 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);
}