android - Android 分组文本视图

Question

我的 Android 应用程序有一个用户必须填写的表单。我一直在寻找这样的东西。这个http://img688.imageshack.us/img688/4162/photocr.jpg。我的意思是编辑文本看起来像这样整洁。关于我们如何在 Android 中复制它的任何建议。我在 Android 中看到过几个具有这样 UI 的应用程序。任何建议都将受到欢迎。

亲切的问候，

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

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/round_linearlayout"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/first_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/first_name_hint_text"
        android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/last_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/last_name_hint_text"
        android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/email_address"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/email_address_hint_text"
        android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/password"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/password_hint_text"
       android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/already_have_an_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/transparent"
        android:padding="20dp"
        android:text="@string/already_have_an_account"
        android:textColor="@color/hyperlink" />
</LinearLayout>

score 3 · Accepted Answer

编辑了您想要的答案。

public class EditTextView extends LinearLayout{

    private LayoutInflater inflater;
    private EditText edit_text;
    private TextView item;
    private View spacer;

    public EditTextView(Context context) {
        super(context);
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        initialize();
    }

    public void setLabel(String label){
        item.setText(label);
    }

    public void setText(String text){
        item.setText(text);
    }

    public String getText(){
        if((edit_text != null)&& (edit_text.getText() != null)){
            return edit_text.getText().toString();          
        }
        return "";
    }

    public void showSpacer(){
        spacer.setVisibility(View.VISIBLE);
    }

    private void initialize() {
         inflater.inflate(R.layout.edit_text_view, this);
         edit_text = (EditText) findViewById(R.id.edit_text);
         item = (TextView) findViewById(R.id.edit_text_label);
         spacer = (View) findViewById(R.id.spacer);
         spacer.setVisibility(View.GONE);
    }


}

用于获取文本如下

EditTextView textView = (EditTextView) groupedView2.getFieldViewAt(0);
System.out.println(textView.getText());
textView = (EditTextView) groupedView2.getFieldViewAt(1);
System.out.println(textView.getText());

这对我很有效。如果您有任何问题，请告诉我。

score 3 · Accepted Answer

您想用 android 实现的目标很容易。您只需要为您的编辑文本使用形状可绘制对象。

以下是如何实现这一目标：

形状可
绘制用于上部编辑文本

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid 
        android:color="#ffffff"/>
    <corners
        android:topLeftRadius="15dp"
        android:bottomLeftRadius="0dp"
        android:topRightRadius="15dp"
        android:bottomRightRadius="0dp"/>

</shape>

可用于较低的编辑文本

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid 
        android:color="#ffffff"/>
    <corners
        android:topLeftRadius="0dp"
        android:bottomLeftRadius="15dp"
        android:topRightRadius="0dp"
        android:bottomRightRadius="15dp"/>

</shape>

布局的 XML

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#3434ff"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="50dp" >

    <ImageView
        android:id="@+id/img"
        android:layout_width="fill_parent"
        android:layout_height="80dp"
        android:background="@drawable/stack"
        android:layout_marginBottom="50dp" />

    <EditText
        android:id="@+id/emailEdt"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="@drawable/edit_back1"
        android:hint="Email"
        android:paddingLeft="10dp" />

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#5a5a5a" />

    <EditText
        android:id="@+id/passwordEdt"
        android:layout_width="fill_parent"
        android:layout_height="60dp"
        android:background="@drawable/edit_back2"
        android:hint="Password"
        android:paddingLeft="10dp" />

</LinearLayout>

生成的布局将如下所示：
在此处输入图像描述

score -1 · Accepted Answer

你可以有一个线性布局，应用border.xml作为该线性布局的可绘制背景：

边框.xml

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke
        android:width="1dp"
        android:color="@color/grey"/>
<!-- "#5D2E8C"  -->
    <solid android:color="#ffffff" />       <!-- background to the border -->
    <padding
        android:bottom="2dp"
        android:left="2dp"
        android:right="2dp"
        android:top="2dp" />
    <corners android:radius="20dp" />

</shape>

在其中输入用户名的 EditText 视图
宽度为 fill_parent 和 height=1dp 且背景颜色为黑色的 TextView（这会给您带来线条般的感觉）
密码的 EditText 视图。

//==========================编辑====================== ============//

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/white"
    android:orientation="vertical" >
<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/border"
    android:orientation="vertical" >

    <EditText
        android:id="@+id/first_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/first_name_hint_text"
        android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />
    <View 
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#000000"
        />

    <EditText
        android:id="@+id/last_name"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/last_name_hint_text"
        android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />
<View 
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#000000"
        />
<EditText
        android:id="@+id/email_address"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/email_address_hint_text"
        android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />
<View 
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#000000"
        />
    <EditText
        android:id="@+id/password"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:hint="@string/password_hint_text"
       android:singleLine="true"
        android:textColor="#778BB0"
        android:textColorHint="#778BB0"
        android:textSize="13sp"
        android:textStyle="bold" />
<View 
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#000000"
        />
    <Button
        android:id="@+id/already_have_an_account"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:background="@android:color/transparent"
        android:padding="20dp"
        android:text="@string/already_have_an_account"
        android:textColor="@color/red1" />
</LinearLayout>
</LinearLayout>

android - Android 分组文本视图

3 回答 3

Related

Reference