如何在Android中实现此UI

Question

我想创建一个如图所示的UI，但并不完全相同。我该如何实现呢？

Answer 1

为此你需要制作一个xml文件并将其放入drawable文件夹中。

rounded_background.xml

<?xml version="1.0" encoding="UTF-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android"> 
    <solid android:color="#ffffffff"/>    

    <stroke android:width="1dp"
            android:color="#ababab"
            />

    <padding android:left="1dp"
             android:top="1dp"
             android:right="1dp"
             android:bottom="1dp"
             /> 

    <corners android:bottomRightRadius="7dp" android:bottomLeftRadius="7dp" 
     android:topLeftRadius="7dp" android:topRightRadius="7dp"/> 
</shape>

现在制作另一个xml文件，其中包含textview和edittext。

main.xml中

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout 
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:background="@drawable/rounded_background"
            android:layout_marginRight="10dp"
            android:layout_marginBottom="10dp" 
            android:layout_marginTop="20dp">

    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:orientation="horizontal"
        android:paddingLeft="10dp">

<TextView android:text="Initial"  android:textColor="#686868"
        android:id="@+id/lable" android:textSize="10sp" android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ></TextView>

        <EditText android:id="@+id/r_email" android:layout_width="fill_parent"
            android:layout_height="35dp" android:singleLine="true"
            android:inputType="textEmailAddress" android:textSize="15sp"
            android:background="@android:color/transparent" android:hint="Initial" />
    </LinearLayout>

    <View android:layout_width="fill_parent" android:layout_height="1dip"
        android:background="#ababab" />

    <LinearLayout android:layout_width="fill_parent"
        android:layout_height="wrap_content" android:orientation="horizontal"
        android:paddingLeft="10dp">

<TextView android:text="Initial"  android:textColor="#686868"
        android:id="@+id/lable" android:textSize="10sp" android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        ></TextView>

        <EditText android:id="@+id/r_email" android:layout_width="fill_parent"
            android:layout_height="35dp" android:singleLine="true"
            android:inputType="textEmailAddress" android:textSize="15sp"
            android:background="@android:color/transparent" android:hint="Initial" />
    </LinearLayout>
</LinearLayout>
</LinearLayout>

Answer 2

您可以使用表格布局设计此类视图，也可以使用工具进行UI设计调用Droid Draw ..下载.exe文件并安装到您的PC中并开始设计Droid Draw UI design Tool

<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/white"/>
<corners android:radius="10px" />
<padding android:left="0dp" android:top="0dp" android:right="0dp" android:bottom="0dp" /> 

Answer 3

像这样使用tablelayout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
<TableRow>
<TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="First Name"
 />
</TableRow>
<TableRow>
<TextView
 android:layout_width="fill_parent"
 android:layout_height="fill_parent"
 android:text="Last Name"
 />
</TableRow>
</TableLayout>

Answer 4

这是食谱。

1. 拍摄3张图片如下 1.1顶部圆角 1.2中间图像（锐角） 1.3底部圆角

2. 选择文本视图并将上述图像设置为背景。

使用方向LinearLayout

的vertical