如何编写分为三个水平列和四个垂直行的XML?

时间:2017-04-03 08:52:07

标签: android xml android-layout android-xml

如何编写分为三个水平列和四个垂直行的xml?

它应该分成三列,而三列进一步分为四行,如下面的截图所示。

如何通过XML获取附加图像等视图?

enter image description here

横向:

<LinearLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:orientation="horizontal" android:layout_width="match_parent"
        android:layout_marginTop="2dp"
        android:layout_height="wrap_content"
        android:weightSum="3"
        android:id="@+id/l1"
        android:background="#ffff">

        <ImageView
            android:id="@+id/glassconsumed1"
            android:src="@drawable/icon2"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:textColor="#ffff"
            android:paddingLeft="40dp"
            android:paddingRight="@dimen/desc_padding"
            android:layout_height="20.7dp" />

        <ImageView
            android:id="@+id/glassconsumed22"
            android:src="@drawable/icon2"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:textColor="#ffff"
            android:paddingLeft="40dp"
            android:paddingRight="@dimen/desc_padding"
            android:layout_height="20.7dp" />

        <ImageView
            android:id="@+id/glassconsumed32"
            android:src="@drawable/icon2"
            android:layout_weight="1"
            android:layout_width="wrap_content"
            android:textColor="#ffff"
            android:paddingLeft="40dp"
            android:paddingRight="@dimen/desc_padding"
            android:layout_height="20.7dp" />
        </LinearLayout>

表示垂直

<LinearLayout
            xmlns:android="http://schemas.android.com/apk/res/android"
            android:orientation="vertical" android:layout_width="match_parent"
            android:layout_marginTop="2dp"
            android:layout_height="wrap_content"
            android:weightSum="3"
            android:layout_below="@+id/glassconsumed1"
            android:id="@+id/l2"
            android:background="#ffff">
        <TextView
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:layout_weight="1"
            android:layout_below="@+id/glassconsumed1"
            android:hint="   14/16"
            android:textSize="16dp"
            android:layout_width="wrap_content"
            android:background="@color/white"
            android:textColorHint="#8E8E8E"
            android:layout_marginTop="2dp"
            android:paddingLeft="@dimen/desc_padding"
            android:paddingRight="@dimen/desc_padding"
            android:textColor="#000000"
            android:id="@+id/editTextvalue1" />
            <TextView

                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:layout_below="@+id/editTextvalue1"
                android:layout_weight="1"
                android:hint="  Glasses"
                android:textSize="16dp"
                android:layout_width="wrap_content"
                android:background="@color/white"
                android:textColorHint="#8E8E8E"

                android:layout_marginTop="2dp"
                android:paddingLeft="@dimen/desc_padding"
                android:paddingRight="@dimen/desc_padding"
                android:textColor="#000000"
                android:id="@+id/editTextvalue2" />
            <TextView

                android:layout_height="wrap_content"
                android:inputType="textPersonName"
                android:layout_below="@+id/editTextvalue2"
                android:layout_weight="1"
                android:hint="Consumed"
                android:textSize="16dp"
                android:layout_width="wrap_content"
                android:background="@color/white"
                android:textColorHint="#8E8E8E"

                android:layout_marginTop="2dp"
                android:paddingLeft="@dimen/desc_padding"
                android:paddingRight="@dimen/desc_padding"
                android:textColor="#000000"
                android:id="@+id/editTextvalue3" />
            </LinearLayout>

3 个答案:

答案 0 :(得分:1)

尝试设置此类型希望这可以帮助你..

 <?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:orientation="horizontal"
   android:weightSum="1">

  <LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight=".33"
    android:orientation="vertical">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@mipmap/ic_launcher" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="14/16" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Glasses" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Consumed" />

</LinearLayout>

<View
    android:layout_width="1dp"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight=".33"
    android:orientation="vertical">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@mipmap/ic_launcher" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="14/16" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Glasses" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Consumed" />

</LinearLayout>

<View
    android:layout_width="1dp"
    android:layout_height="wrap_content"
    android:background="@color/colorAccent" />

<LinearLayout
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight=".33"
    android:orientation="vertical">

    <ImageView
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@mipmap/ic_launcher" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="14/16" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Glasses" />

    <TextView
        android:textColor="#cccccc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="Consumed" />

  </LinearLayout>

</LinearLayout>

答案 1 :(得分:0)

<Linear
    orientation="vertical"
        <Linear
            orientation=horizontal
                <Linear
                    orientation=vertical
                    <textview>
                    <imageview>
                    <textview>
                    <Textview>
                </linear>
                <Linear
                    orientation=vertical
                    <textview>
                    <imageview>
                    <textview>
                    <Textview>
                </linear>
                <Linear
                    orientation=vertical
                    <textview>
                    <imageview>
                    <textview>
                    <Textview>
                </linear>
        </Linear>
</linear>
你可以这样走。

答案 2 :(得分:0)

您可以使用GridLayout或TableLayout
请参阅以下示例:TableLayoutGridLayout