拖动到另一侧时翻转 RelativeLayout 内容

Question

我有一个 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 轴上拖动）。

问题是，当角色拖动到右侧时，我无法使聊天框位于角色的左侧。

我修改了原始教程中的 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();
}

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

    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。关于如何做到这一点的任何建议或 link？

谢谢。

Answer 1

终于找到了。我改变了移动 ChatBox 的方式。我没有将 ChatBox 放在 Character 的左侧，而是将 Character 放在 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);

拖动到另一侧时翻转 RelativeLayout 内容

Flipping RelativeLayout Content when Dragged to Another Side

android

android-layout

android-imageview

android-relativelayout

android-layoutparams