android - WhatsApp 如何设计使用 edittext UI 发送图像预览

标签 android android-layout android-constraintlayout

<分区>

enter image description here Whats app send image preview UI design I need similar to this 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不应该向上滚动只有编辑文本需要在键盘弹出时向上滚动如何实现？

enter image description here

最佳答案 

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

试试这个，让我知道它是否适合你。

关于android - WhatsApp 如何设计使用 edittext UI 发送图像预览，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53371202/

上一篇：android - W/ManagedChannelImpl : [{0}] Failed to resolve name. 状态={1}

下一篇：Android 下载 apk 文件并保存到内部存储

相关文章：

android - 如何在android中画一条圆线

android - 屏幕方向锁定

MapView 上 View 的 android z-order

java - Android动态TabView使用JSON配置文件

android - ConstraintLayout 中的准则是否支持 RTL

android - 以编程方式更改 ConstraintLayout 子项的边距和大小

android - ConstraintLayout 中的 ImageView 缩放问题

android - 找不到....未指定

android - iOS/Android 是否需要对应用程序提供最低操作系统支持？

android - 在运行时使用 MVVM 中的数据添加绑定(bind) View

©2024 IT工具网  联系我们