如何在Android中创建这样的视图?

时间:2015-04-17 20:33:40

标签: android html css android-layout

我是Android新手,想要创建这样的视图

Listings Data

这是我在HTML中创建的示例行,但想在Android中制作相同(或几乎相似)的行。请指导我前进的任何方式。

我写了

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="wrap_content"
             android:layout_height="match_parent">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="123dp"
        android:layout_marginLeft="6dp"
        android:layout_marginRight="6dp"
        android:layout_marginTop="4dp"
        android:layout_marginBottom="4dp"
        android:background="@drawable/bg_card"
        android:divider="@android:color/transparent"
        >

            <TextView
                android:id="@+id/field_1"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:text="Field 1"
                android:textColor="#000"
                android:textStyle="bold"/>

            <TextView
                android:id="@+id/field_2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:text="Field 1"
                android:textColor="#000"
                android:textStyle="bold"/>

            /* and so on */

    </LinearLayout>


</FrameLayout>

但它给出的视图类似于:

Android view list

1 个答案:

答案 0 :(得分:1)

使用LinearLayout和GridLayout可以实现很长的路要走。 将前两个TextView放在LinearLayout中,方向设置为vertical。 然后将GridLayout中的4个下一项设置为2列。 最后三个项目,最后将radiobutton放入另一个LinearLayout,但方向设置为水平。

编辑: 我没有看到这两个图标。它应该仍然适用于具有2列的GridLayout,然后每个第二项应该是包含ImageView的水平LinearLayout,其中图标作为源和TextView。 您可以使用重力和重量属性来正确放置视图。

接近这一点,虽然你必须弄清楚适合你的边距,填充等等。

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

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

    <TextView
        android:layout_margin="10dp"
        android:layout_marginLeft="10dp"
        android:text="Test line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_margin="10dp"
        android:layout_marginLeft="10dp"
        android:text="Test line 2 test test"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>

<GridLayout
    android:layout_margin="10dp"
    android:columnCount="2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:text="Another Test line"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

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

    </LinearLayout>

    <Button
        android:text="Textbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:text="Another test string"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</GridLayout>

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

    <ImageView
        android:layout_weight="1"
        android:maxHeight="100dp"
        android:maxWidth="100dp"
        android:src="@drawable/abc_btn_rating_star_on_mtrl_alpha"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <TextView
        android:layout_weight="1"
        android:text="Test profile link"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageView
        android:layout_weight="1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <RadioButton
        android:layout_weight="3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</LinearLayout>