Question

我正在尝试使用Android Studio上的XML创建以下布局。我尝试了相对和线性布局的多种组合，但尚未实现所描绘的布局。我想创建以下布局，其中Textviews位于Imageviews下方。

任何帮助都将不胜感激。

我的尝试

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#000000"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity">

<RelativeLayout
    android:id="@+id/Col1"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp"
    android:layout_marginRight="48dp"
    android:layout_toLeftOf="@+id/Col2"
    android:gravity="bottom">

    <RelativeLayout
        android:id="@+id/C1R1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/C1R2"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp">

        <ImageView
            android:id="@+id/phone"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="phone"
            android:src="@drawable/phone" />

        <TextView
            android:id="@+id/phone_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/phone"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Phone"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/C1R2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/C1R3"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp">

        <ImageView
            android:id="@+id/calculator"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="calculator"
            android:src="@drawable/calculator" />

        <TextView
            android:id="@+id/calculator_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/calculator"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Calculator"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/C1R3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:gravity="center">

        <ImageView
            android:id="@+id/keep"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="keep"
            android:src="@drawable/keep" />

        <TextView
            android:id="@+id/keep_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/keep"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Keep"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>
</RelativeLayout>

<RelativeLayout
    android:id="@+id/Col2"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp"
    android:gravity="bottom">

    <RelativeLayout
        android:id="@+id/C2R1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/C2R2"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp">

        <ImageView
            android:id="@+id/messenger"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="messenger"
            android:src="@drawable/messenger" />

        <TextView
            android:id="@+id/messenger_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/messenger"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Messenger"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/C2R2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/C2R3"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp">

        <ImageView
            android:id="@+id/calendar"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="calendar"
            android:src="@drawable/calendar" />

        <TextView
            android:id="@+id/calendar_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/calendar"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Calendar"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/C2R3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:gravity="center">

        <ImageView
            android:id="@+id/clock"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="clock"
            android:src="@drawable/clock" />

        <TextView
            android:id="@+id/clock_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/clock"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Clock"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />

    </RelativeLayout>

</RelativeLayout>

<RelativeLayout
    android:id="@+id/Col3"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:layout_alignParentBottom="true"
    android:layout_centerHorizontal="true"
    android:layout_marginBottom="50dp"
    android:layout_marginLeft="48dp"
    android:layout_toRightOf="@+id/Col2"
    android:gravity="bottom">

    <RelativeLayout
        android:id="@+id/C3R1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/C3R2"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp">

        <ImageView
            android:id="@+id/chrome"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="chrome"
            android:src="@drawable/chrome" />

        <TextView
            android:id="@+id/chrome_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/chrome"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Chrome"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/C3R2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/C3R3"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:layout_marginBottom="36dp">

        <ImageView
            android:id="@+id/email"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="email"
            android:src="@drawable/email" />

        <TextView
            android:id="@+id/email_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/email"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Email"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>

    <RelativeLayout
        android:id="@+id/C3R3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_gravity="bottom"
        android:gravity="center">

        <ImageView
            android:id="@+id/settings"
            android:layout_width="48dp"
            android:layout_height="48dp"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:onClick="settings"
            android:src="@drawable/settings" />

        <TextView
            android:id="@+id/settings_label"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@+id/settings"
            android:layout_centerInParent="true"
            android:layout_marginTop="5dp"
            android:fontFamily="sans-serif-condensed"
            android:text="Settings"
            android:textAppearance="?android:attr/textAppearanceSmall"
            android:textColor="#ffffff" />
    </RelativeLayout>
</RelativeLayout>

Answer 1

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

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/ic_book_black_24dp" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:text="appName" />

</LinearLayout>

Answer 2

      <LinearLayout android:id="@+id/main_parent"
                      android:orientation="vertical"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content">

        <LinearLayout android:id="@+id/first_row"
                      android:orientation="horizontal"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content">

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

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_book_black_24dp" />

            <TextView
                android:marginTop="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="appName" />

        </LinearLayout>

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

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_book_black_24dp" />

            <TextView
                android:marginTop="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="appName" />

        </LinearLayout>

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

            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:src="@drawable/ic_book_black_24dp" />

            <TextView
                android:marginTop="5dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center_horizontal"
                android:text="appName" />

        </LinearLayout>

    <LinearLayout android:id="@+id/second_row"
                      android:marginTop="30dp"
                      android:orientation="horizontal"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content">

     .....


   </LinearLayout>


  <LinearLayout android:id="@+id/third_row"
                      android:marginTop="30dp"
                      android:orientation="horizontal"
                      android:layout_width="wrap_content"
                      android:layout_height="wrap_content">

     .....


   </LinearLayout>
    <?LinearLayout>

这将有效，首先尝试第一行，然后为第二行和第三行重复相同的代码。

Answer 3

您需要单独考虑Imageview和TextView，而不是ImageButton和<?xml version="1.0" encoding="utf-8"?>。我正在尝试使用以下xml代码来实现您的任务：

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

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="1.5"
        android:drawablePadding="5dp"
        android:drawableTop="@drawable/demo_phone"
        android:text="Phone" />

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="1.3"
        android:drawablePadding="5dp"
        android:drawableTop="@drawable/demo_messanger"
        android:text="Messenger" />

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="1"
        android:drawablePadding="5dp"

        android:drawableTop="@drawable/demo_chrome"
        android:text="Chrome" />
</LinearLayout>

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

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="0.2"
        android:drawablePadding="5dp"
        android:drawableTop="@drawable/demo_Calculator"
        android:text="Calculator" />

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="1.1"
        android:drawablePadding="5dp"
        android:drawableTop="@drawable/demo_Calendar"
        android:text="Calendar" />

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:layout_weight="0.5"
        android:drawablePadding="5dp"
        android:drawableTop="@drawable/demo_mail"
        android:text="Email" />
</LinearLayout>

Date        A      B
20150901    23.4   2.4
20150901    245    22
20150901    21     2.4
20150902    243    4.2
20150902    7.5    1.2
20150903    .54    8.4

输出：

在imageviews下创建具有居中文本视图的布局

3 个答案: