Android Studio(Java):如何用背景色包裹EditText实现目标UI
实现两个EditText置于黑色背景框内的方案
方案1:嵌套布局包裹(推荐)
在现有ConstraintLayout中添加一个子布局(ConstraintLayout或LinearLayout均可),将两个EditText移入该子布局,通过给子布局设置黑色背景、内边距来实现包裹效果。
修改后的布局代码示例:
<?xml version="1.0" encoding="utf-8"?> <androidx.constraintlayout.widget.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" tools:context=".MainActivity"> <!-- 黑色背景包裹容器 --> <androidx.constraintlayout.widget.ConstraintLayout android:id="@+id/edit_container" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginHorizontal="20dp" android:layout_marginTop="50dp" android:background="@drawable/black_box_bg" android:padding="16dp" app:layout_constraintTop_toTopOf="parent"> <!-- 第一个输入框 --> <EditText android:id="@+id/et_first" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入内容1" android:textColor="@android:color/white" app:layout_constraintTop_toTopOf="parent" /> <!-- 第二个输入框 --> <EditText android:id="@+id/et_second" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="请输入内容2" android:textColor="@android:color/white" android:layout_marginTop="12dp" app:layout_constraintTop_toBottomOf="@id/et_first" /> </androidx.constraintlayout.widget.ConstraintLayout> </androidx.constraintlayout.widget.ConstraintLayout>
接着在res/drawable目录下创建black_box_bg.xml文件,定义黑色背景样式(可加圆角优化视觉):
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <!-- 黑色填充背景 --> <solid android:color="@android:color/black" /> <!-- 可选:圆角效果,数值按需调整 --> <corners android:radius="8dp" /> <!-- 可选:添加边框 --> <!-- <stroke android:width="1dp" android:color="@android:color/darker_gray" /> --> </shape>
方案2:独立设置EditText背景(简易版)
若不想嵌套布局,可给每个EditText设置相同的黑色背景drawable,调整间距模拟包裹效果:
给EditText添加背景属性:
android:background="@drawable/et_black_bg"
创建res/drawable/et_black_bg.xml:
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="@android:color/black" /> <corners android:radius="8dp" /> <padding android:padding="12dp" /> </shape>
然后给第二个EditText添加负margin消除缝隙(若有边框):
android:layout_marginTop="-1dp"
关于之前RelativeLayout失败的可能原因
多数是未给RelativeLayout设置背景属性,或是内部EditText的布局约束未正确绑定到RelativeLayout上。改用嵌套ConstraintLayout更适配当前布局结构,只需确保子布局的约束基于父布局,内部EditText的约束基于子布局即可。
内容的提问来源于stack exchange,提问作者prodohsamuel
相关产品推荐
相关产品推荐

