Question

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

这两张照片显示了我的两个条件。我已经做了足够的改变。现在我想做动画，而我正在改变布局点击的文本视图的背景。我已经检查了migrationdrawable示例，但它对我没有帮助。

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

可能的情况是将白色drawable设置为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);
}

用户点击动画时用动画更改背景

1 个答案: