android - 拖到另一侧时翻转RelativeLayout内容

我有一个RelativeLayout，其中包含2个ImageView（字符图像和关闭图像）和1个LinearLayout（其中包含1个TextView）。

这是我的完整布局。

<RelativeLayout
    android:id="@+id/root_container"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <!--   ImageView of floating widget  -->
    <ImageView
        android:id="@+id/collapsed_iv"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:src="@drawable/character01"
        android:adjustViewBounds="true"
        tools:ignore="ContentDescription" />

    <!--   Close button to close Floating Widget View  -->
    <ImageView
        android:id="@+id/close_floating_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/collapsed_iv"
        android:layout_marginLeft="5dp"
        android:layout_marginTop="5dp"
        android:background="@drawable/circle_shape"
        android:src="@drawable/ic_close_white_24dp"
        tools:ignore="ContentDescription" />

    <LinearLayout
        android:id="@+id/message_container"
        android:layout_width="125dp"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@+id/collapsed_iv"
        android:layout_marginLeft="-25dp"
        android:layout_marginTop="35dp"
        android:padding="10dp"
        android:visibility="gone">
        <TextView
            android:id="@+id/chat_box"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textColor="@color/colorBlack"
            android:background="@drawable/rounded_corner" />
    </LinearLayout>
</RelativeLayout>

用户可以按照本教程here将布局拖到屏幕的左右（我删除了一些代码以使字符只能在x轴上拖动）。

问题是，当字符拖动到右侧时，我不能使ChatBox位于字符的左侧。


我修改了原始教程中的moveToLeft和moveToRight函数，以将关闭按钮从左向右移动。

/*  Method to move the Floating widget view to Left  */
private void moveToLeft(final int current_x_cord) {
    RelativeLayout.LayoutParams layoutClose = (RelativeLayout.LayoutParams) remove_image_view.getLayoutParams();
    layoutClose.removeRule(RelativeLayout.ALIGN_RIGHT);
    layoutClose.addRule(RelativeLayout.ALIGN_LEFT, R.id.collapsed_iv);
    layoutClose.setMargins(5, 5, 0, 0);
    remove_image_view.setLayoutParams(layoutClose);

    final int x = szWindow.x - current_x_cord;

    new CountDownTimer(500, 5) {
        //get params of Floating Widget view
        WindowManager.LayoutParams mParams = (WindowManager.LayoutParams) mFloatingWidgetView.getLayoutParams();

        public void onTick(long t) {
            long step = (500 - t) / 5;

            mParams.x = 0 - (int) (current_x_cord * current_x_cord * step);

            //If you want bounce effect uncomment below line and comment above line
            // mParams.x = 0 - (int) (double) bounceValue(step, x);


            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }

        public void onFinish() {
            mParams.x = 0;

            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }
    }.start();
}

/*  Method to move the Floating widget view to Right  */
private void moveToRight(final int current_x_cord) {
    RelativeLayout.LayoutParams layoutClose = (RelativeLayout.LayoutParams) remove_image_view.getLayoutParams();
    layoutClose.removeRule(RelativeLayout.ALIGN_LEFT);
    layoutClose.addRule(RelativeLayout.ALIGN_RIGHT, R.id.collapsed_iv);
    layoutClose.setMargins(0, 5, 5, 0);
    remove_image_view.setLayoutParams(layoutClose);

    new CountDownTimer(500, 5) {
        //get params of Floating Widget view
        WindowManager.LayoutParams mParams = (WindowManager.LayoutParams) mFloatingWidgetView.getLayoutParams();

        public void onTick(long t) {
            long step = (500 - t) / 5;

            mParams.x = (int) (szWindow.x + (current_x_cord * current_x_cord * step) - mFloatingWidgetView.getWidth());

            //If you want bounce effect uncomment below line and comment above line
            //  mParams.x = szWindow.x + (int) (double) bounceValue(step, x_cord_now) - mFloatingWidgetView.getWidth();

            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }

        public void onFinish() {
            mParams.x = szWindow.x - mFloatingWidgetView.getWidth();

            //Update window manager for Floating Widget
            mWindowManager.updateViewLayout(mFloatingWidgetView, mParams);
        }
    }.start();
}

但是，我不知道如何将ChatBox移到角色的左侧。我试图通过此代码将RIGHT_OF属性更改为LEFT_OF的LayoutParams，但是ChatBox没有显示。

    RelativeLayout.LayoutParams layoutChat = (RelativeLayout.LayoutParams) messageContainer.getLayoutParams();
    layoutChat.removeRule(RelativeLayout.RIGHT_OF);
    layoutChat.addRule(RelativeLayout.LEFT_OF, R.id.collapsed_iv);
    layoutChat.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
    layoutChat.setMargins(0, 35, -25, 0);
    messageContainer.setLayoutParams(layoutChat);

我猜是因为ChatBox在布局之外。知道我该如何实现吗？

另外，当从左向右移动时，我想翻转字符的ImageView。关于如何做到的任何建议或链接？

谢谢。

最佳答案

我终于找到了。
我更改了移动ChatBox的方式。我没有将ChatBox放在角色的左侧，而是将角色放在ChatBox的右侧，并将ChatBox设置为AlignParentLeft。

characterLayoutRight = (RelativeLayout.LayoutParams) character_image_view.getLayoutParams();
characterLayoutRight.removeRule(RelativeLayout.ALIGN_PARENT_LEFT);
characterLayoutRight.addRule(RelativeLayout.RIGHT_OF, R.id.message_container);

messageLayoutRight = (RelativeLayout.LayoutParams) messageContainer.getLayoutParams();
messageLayoutRight.removeRule(RelativeLayout.RIGHT_OF);
messageLayoutRight.addRule(RelativeLayout.ALIGN_PARENT_LEFT);