Android中的Material Form

时间:2015-11-08 11:33:16

标签: android android-layout material-design

我想创建一个带有素材设计的表单,就像谷歌日历一样,用于新事件。

但我似乎无法将左侧图标的大小与第一行对齐,右侧文字的大小也不同。

enter image description here

(我稍后会更改图标。)

这是我的代码:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_marginTop="56dp"
    android:orientation="vertical">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_marginTop="10dp">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_action_content_inbox"/>

        <EditText
            android:id="@+id/reg_form_name"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:hint="@string/reg_form_name"
            android:inputType="textMultiLine"
            android:background="@android:color/transparent"/>
    </LinearLayout>

    <include layout="@layout/material_divider"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_action_content_inbox"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/reg_form_birth_date"/>

            <Button
                android:id="@+id/reg_form_date_picker"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Date"
                android:background="@android:color/transparent"/>
        </LinearLayout>

    </LinearLayout>

    <include layout="@layout/material_divider"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_action_content_inbox"/>

        <EditText
            android:id="@+id/reg_form_phone"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Phone Number"
            android:inputType="textMultiLine"
            android:background="@android:color/transparent" />

    </LinearLayout>

    <include layout="@layout/material_divider"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_action_content_inbox"/>

        <EditText
            android:id="@+id/reg_form_email"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:hint="Email"
            android:inputType="textMultiLine"
            android:background="@android:color/transparent" />

    </LinearLayout>

    <include layout="@layout/material_divider"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_action_content_inbox"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <EditText
                android:id="@+id/reg_form_add"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Address"
                android:inputType="textMultiLine"
                android:background="@android:color/transparent"
                android:layout_marginBottom="10dp"/>

            <EditText
                android:id="@+id/reg_form_add2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Address 2"
                android:inputType="textMultiLine"
                android:background="@android:color/transparent"
                android:layout_marginBottom="10dp"/>

            <EditText
                android:id="@+id/reg_form_postal_code"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Postal Code"
                android:inputType="textMultiLine"
                android:background="@android:color/transparent"
                android:layout_marginBottom="10dp"/>

            <EditText
                android:id="@+id/reg_form_local"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:hint="Local"
                android:inputType="textMultiLine"
                android:background="@android:color/transparent" />
        </LinearLayout>

    </LinearLayout>

    <include layout="@layout/material_divider"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <ImageView
            android:layout_width="80dp"
            android:layout_height="match_parent"
            android:src="@drawable/ic_action_content_inbox"/>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">

            <TextView
                android:id="@+id/reg_form_imei"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="IMEI"
                android:textStyle="bold"
                android:layout_marginBottom="10dp"/>

            <TextView
                android:id="@+id/reg_form_model"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="Model"
                android:gravity="center"
                android:textStyle="bold" />

        </LinearLayout>

    </LinearLayout>

    <Button
        android:id="@+id/reg_form_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Register"
        android:layout_marginTop="10dp"
        android:gravity="center"/>
</LinearLayout>

我希望实现这样的目标:

enter image description here

1 个答案:

答案 0 :(得分:2)

您可以使用此

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
 android:id="@+id/widget32"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 xmlns:android="http://schemas.android.com/apk/res/android"
 >
<EditText
 android:id="@+id/edit_select_stop"
 android:layout_width="fill_parent"
 android:layout_height="wrap_content"
 android:layout_weight="1"
 >
</EditText>
<ImageView
android:id="@+id/image_select_time"
android:layout_width="39dp"
android:layout_height="wrap_content"
android:layout_weight="1"
>

或者你可以试试这个

mEmailView = (EditText) mLoginFormView.findViewById(R.id.email);
Drawable icon = new IconDrawable(getActivity(),Iconify.IconValue.fa_envelope).colorRes(R.color.holo_gray_light).actionBarSize();
mEmailView.setCompoundDrawables(icon, null, null, null);
mEmailView.setCompoundDrawablePadding(5);

或者如果你想在edittext中放置图标,你可以简单地使用这个

 <EditText
    ...
   android:drawableLeft="@drawable/my_icon" />

还有一个我在材料设计上找到的图书馆可能对你有所帮助

https://android-arsenal.com/details/1/475

祝你好运