我如何制作如下图所示的布局?

时间:2013-07-22 16:31:13

标签: java android android-layout user-interface

enter image description here

我实际上是在尝试创建这样的布局,但它似乎散布在各处。

非常感谢任何有关优化它的帮助或想法。

XML

<RelativeLayout
    android:id="@+id/header"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true" >

    <ImageView
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/menu_normal"
        android:onClick="onClickContentButton" />

    <ImageView
        android:id="@+id/new_chat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:onClick="actionPerformed"
        android:src="@drawable/invite_friends_normal" />

    <TextView
        android:id="@+id/headerText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="true"
        android:text="Profile"
        android:textAppearance="?android:attr/textAppearanceMedium" />
</RelativeLayout>

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/header"
    android:background="#049080"
    android:gravity="center_horizontal"
    android:padding="10dp"
    android:text="My profile"
    android:textColor="#FFFFFF"
    android:textSize="15sp" />

<LinearLayout
    android:id="@+id/linearLayout1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentBottom="true"
    android:layout_alignParentLeft="true"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/textView1"
    android:orientation="vertical"
    android:weightSum="2" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@android:color/darker_gray"
        android:orientation="vertical">

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent" >

            <ImageView
                android:id="@+id/imageView1"
                android:layout_width="100dp"
                android:layout_height="100dp"
                android:layout_margin="20dp"
                android:layout_alignParentLeft="true"
                android:layout_alignParentTop="true"
                android:src="@drawable/com_facebook_profile_picture_blank_square" />

            <ImageView
                android:id="@+id/imageView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentRight="true"
                android:layout_marginTop="10dp"
                android:layout_alignTop="@+id/imageView1"
                android:src="@drawable/bang_selected" />

            <TextView
                android:id="@+id/textView2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignBottom="@+id/imageView1"
                android:layout_toRightOf="@+id/imageView1"
                android:text="John smith"
                android:textColor="#2D2D2D"
                android:textAppearance="?android:attr/textAppearanceMedium" />

            <TextView
                android:id="@+id/textView3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignLeft="@+id/textView2"
                android:layout_below="@+id/textView2"
                android:text="latitude:"
                android:textColor="#2d2d2d"
                android:textAppearance="?android:attr/textAppearanceSmall" />

            <TextView
                android:id="@+id/textView4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/textView2"
                android:text="longitude:"
                android:textAppearance="?android:attr/textAppearanceSmall" />

        </RelativeLayout>

    </LinearLayout>

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

图形布局

enter image description here

1 个答案:

答案 0 :(得分:2)

我会将主要布局设为相对布局。

  • &#34;我的个人资料&#34;按钮将是布局中的第一个对象
  • 下面的片段可以是另一个相对布局,您可以在其中指定所有元素的关联。
  • 底部地图部分将是地图视图

在第二部分中,使用垂直和水平线性布局的混合来获得您想要的外观