Question

什么应用程序发送图像预览UI设计，我需要与此UI类似，有人可以帮助实现此目标

下面是我设计的XML，但是当键入时编辑文本增长时，发送按钮会移动

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".ui.AttachmentSendPreviewActivity"
    tools:showIn="@layout/activity_attachment_send_preview">


    <ImageView
        android:id="@+id/imageViewPreview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="8dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <RelativeLayout
        android:id="@+id/rl_send_attachment"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:background="@color/colorBlackDull"
        android:padding="3dp"
        app:layout_constraintBottom_toBottomOf="parent">

        <EditText
            android:id="@+id/editTextCaption"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginTop="8dp"
            android:ems="10"
            android:hint="Add a caption"

            android:textColor="@android:color/white"
            android:textColorHint="@android:color/darker_gray" />


    </RelativeLayout>

    <ImageButton

        android:id="@+id/imageButtonSend"
        android:layout_width="42dp"
        android:layout_height="45dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"

        android:background="@drawable/rounded_button_bg"
        android:src="@drawable/ic_action_send"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.97"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.95" />




</android.support.constraint.ConstraintLayout>

当编辑文本增长多行时，发送按钮没有相应地移动。有人可以帮忙如何限制编辑文本增长时发送按钮的移动。

Imageview不应该向上滚动，只有在弹出键盘时需要向上滚动编辑文本才能实现？

Answer 1

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <ImageView
        android:id="@+id/imageViewPreview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginBottom="8dp"
        android:adjustViewBounds="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <EditText
        android:id="@+id/editTextCaption"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:ems="10"
        android:paddingEnd="75dp"
        android:hint="Add a caption"
        android:textColor="#000"
        android:textColorHint="@android:color/darker_gray"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent" />

    <ImageButton
        android:id="@+id/imageButtonSend"
        android:layout_width="42dp"
        android:layout_height="45dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="12dp"
        android:layout_marginBottom="8dp"
        app:layout_constraintBottom_toTopOf="@id/editTextCaption"
        app:layout_constraintTop_toTopOf="@id/editTextCaption"
        app:layout_constraintEnd_toEndOf="parent"
        android:src="@drawable/ic_launcher_background" />

</android.support.constraint.ConstraintLayout>

尝试一下，让我知道这是否适合您。

WhatsApp设计如何通过EditText UI发送图像预览

1 个答案: