Question

enter image description here

我想在我的应用程序的主屏幕上进行此布局。我为上面显示的每个图像块都有条纹。请指导我应该使用哪个布局（RelativeLayout，LinearLayout ...等）来实现这一点。我是android开发的新手。我已经尝试了一些布局但没有成功。我也用过FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:stretchColumns="1">

        <TableRow>
            <FrameLayout 
                android:id="@+id/inboxLargeButton"
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">

                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/inbox_normal" 
                    android:id="@+id/buttonWeddingDayCheatSheet"
                    android:layout_gravity="center_horizontal">
                </ImageView>
                <TextView  
                    android:layout_width="fill_parent"  
                    android:layout_height="wrap_content"  
                    android:text="2631"  
                    android:layout_gravity="bottom"  
                    android:gravity="center"  
                    android:textColor="#fff"  
                    android:textSize="50dp" />
            </FrameLayout>

            <FrameLayout 
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">
                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/outbox_normal" 
                    android:id="@+id/buttonShareFavoriteRecipe"
                    android:layout_gravity="center_horizontal">
                </ImageView>
                <TextView  
                    android:layout_width="fill_parent"  
                    android:layout_height="wrap_content"  
                    android:text="0296"  
                    android:layout_gravity="bottom"  
                    android:gravity="center"  
                    android:textColor="#fff"  
                    android:textSize="50dp" />
                </FrameLayout>
        </TableRow>

        <TableRow>
            <FrameLayout 
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">

                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/header_left_normal" 
                    android:id="@+id/buttonWeddingDayCheatSheet"
                    android:layout_gravity="center_horizontal">
                </ImageView>
                <TextView  
                    android:layout_width="fill_parent"  
                    android:layout_height="wrap_content"  
                    android:text="Most sent"  
                    android:layout_gravity="bottom"  
                    android:gravity="center"  
                    android:textColor="#fff"  
                    android:textSize="15dp" />
            </FrameLayout>

            <FrameLayout 
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">
                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/header_right_normal" 
                    android:id="@+id/buttonShareFavoriteRecipe"
                    android:layout_gravity="center_horizontal">
                </ImageView>
                </FrameLayout>
        </TableRow>
        <TableRow>
            <FrameLayout 
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">

                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/body_left_normal" 
                    android:id="@+id/buttonWeddingDayCheatSheet"
                    android:layout_gravity="center_horizontal">
                </ImageView>
            </FrameLayout>

            <FrameLayout 
                android:layout_height="wrap_content"
                android:layout_width="0dp"
                android:layout_weight="1">
                <ImageView android:layout_width="wrap_content" 
                    android:layout_height="wrap_content" 
                    android:src="@drawable/body_right_normal" 
                    android:id="@+id/buttonShareFavoriteRecipe"
                    android:layout_gravity="center_horizontal">
                </ImageView>
                </FrameLayout>
        </TableRow>
    </TableLayout>

因为我想让每个块都可以点击。

Answer 1

试试这段代码：

<?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"
    android:stretchColumns="1" >

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

        <LinearLayout
            android:id="@+id/inboxLargeButton"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:orientation="vertical" >

            <ImageView
                android:id="@+id/buttonWeddingDayCheatSheet"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" >
            </ImageView>

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:gravity="center"
                android:text="2631"
                android:textColor="#fff"
                android:textSize="50dp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/buttonShareFavoriteRecipe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" >
            </ImageView>

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:gravity="center"
                android:text="0296"
                android:textColor="#fff"
                android:textSize="50dp" />
        </LinearLayout>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

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

            <ImageView
                android:id="@+id/buttonWeddingDayCheatSheet"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" >
            </ImageView>

            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:gravity="center"
                android:text="Most sent"
                android:textColor="#fff"
                android:textSize="15dp" />
        </LinearLayout>

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

            <ImageView
                android:id="@+id/buttonShareFavoriteRecipe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" >
            </ImageView>
        </LinearLayout>
    </TableRow>

    <TableRow
        android:layout_width="match_parent"
        android:layout_height="wrap_content" >

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

            <ImageView
                android:id="@+id/buttonWeddingDayCheatSheet"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" >
            </ImageView>
        </LinearLayout>

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

            <ImageView
                android:id="@+id/buttonShareFavoriteRecipe"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_launcher" >
            </ImageView>
        </LinearLayout>
    </TableRow>

</TableLayout>

等垂直间隔列布局

1 个答案: