我正在尝试构建一个如下图所示的用户界面:
请同时检查:/image/aO1Vn.jpg
我的代码:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:background="@drawable/drawableborder"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/iv_attachment"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:paddingStart="@dimen/padding_big"
android:paddingEnd="@dimen/padding_big"
android:scaleType="centerInside"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@+id/frameLayout"
app:srcCompat="@drawable/ic_gallery" />
<androidx.recyclerview.widget.RecyclerView
android:id="@+id/gv_attach_image"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:layout_toStartOf="@+id/iv_attachment"
android:layout_toLeftOf="@+id/iv_attachment"
android:nestedScrollingEnabled="true"
android:numColumns="3"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/tell_us_more" />
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/tell_us_more"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="@string/what_do_you_need_help"
app:layout_constraintTop_toTopOf="parent">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/tell_us_moreone"
style="@style/whathelpdoyouneedontextinput"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<FrameLayout
android:id="@+id/frameLayout"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/dell_grey2"
app:layout_constraintTop_toBottomOf="@+id/gv_attach_image">
</FrameLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
这会产生如下所示的 UI:
正如您所看到的,这会在 TextInputLayout
和边框之间创建一个小间隙。我该如何解决这个问题?
最佳答案
你可以这样做:
<LinearLayout
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="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="24dp"
android:layout_marginEnd="16dp"
android:orientation="vertical"
>
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/tell_us_more"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:hint="@string/hint_tell_us"
app:boxStrokeColor="@color/......"
app:placeholderText="Required"
app:shapeAppearanceOverlay="@style/ShapeAppearanceOverlay.top">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/tell_us_moreone"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@drawable/shape_rounded"
android:gravity="end">
<ImageView
android:id="@+id/iv_attachment"
android:layout_width="18dp"
android:layout_height="18dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginRight="8dp"
android:layout_marginBottom="8dp"
android:paddingStart="16dp"
android:paddingEnd="16dp"
android:scaleType="centerInside"
app:srcCompat="@drawable/ic_menu_gallery" />
</LinearLayout>
</LinearLayout>
您可以将 shapeAppearanceOverlay
应用于 TextInputLayout
来获取不同的角:
<style name="ShapeAppearanceOverlay.top" parent="">
<item name="cornerSizeBottomRight">0dp</item>
<item name="cornerSizeBottomLeft">0dp</item>
</style>
在包含图像的布局中使用仅具有 3 个边的形状背景:
<inset xmlns:android="http://schemas.android.com/apk/res/android"
android:insetTop="-2dp">
<shape>
<stroke android:width="1dp" android:color="@color/...." />
<corners
android:bottomRightRadius="8dp"
android:bottomLeftRadius="8dp"/>
<solid android:color="#FFFFFF"/>
</shape>
</inset>
最后,TextInputLayout
使用带有 app:placeholderText="Required"
的占位符和带有红色星号的 float 标签(提示)。
从1.2.0-alpha05
开始您可以设置提示文本的格式。
例如,您可以使用如下内容:
<com.google.android.material.textfield.TextInputLayout
android:hint="@string/hint_tell_us"
...>
与:
<string name="hint_tell_us"><font fgcolor='#FF0000'>*</font> Tell us more about the issue</string>
关于android - 不正确的用户界面 - android,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63131832/