móviles - manual de programacion android pdf

cambiar el fondo con animación cuando el usuario hace clic en él

Question

Usé un LinearLayout en mi actividad para cambiar dos vistas. Aquí, utilicé dos textviews. Cuando el usuario hace clic en el diseño lineal, cambio las vistas según mis requisitos. el archivo xml está aquí,

<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>

Estas dos imágenes muestran mis dos condiciones. He hecho lo suficiente para cambiar esto. Ahora quiero hacer animación mientras estoy cambiando el fondo de las vistas de texto en los clics de diseño. He comprobado el ejemplo de transitiondrawable pero no me ayudó.

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 Esto se usa para la vista textual con fondo azul

<?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

Una posibilidad sería establecer el FrameLayout blanco como fondo de un FrameLayout y agregar una View para el óvalo azul y dos TextViews para los títulos.

Para seguir logrando que las vistas ocupen exactamente la mitad del contenedor, puede usar PercenFrameLayout (lea más sobre esto en el documento oficial ). Para usarlo necesitas agregar esta dependencia a tu build.gradle : compile ''com.android.support:percent:25.2.0''

Después de crear el diseño, solo se anima la gravedad del óvalo azul de izquierda a derecha o al revés.

Entonces su diseño se vería así:

<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>

Luego en tu código anima el cambio de gravedad del óvalo azul como este:

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);
}