2013-07-22 19 views
-4

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

回答

2

我會做的主要佈局是相對佈局。

  • 的「個人資料」按鈕,將是第一個對象在佈局
  • 是下段可以是另一個相對佈局中,你會指定所有元素的關聯。
  • 而底部的地圖部分是地圖視圖

在第二部分,使用垂直和水平的線性佈局的搭配,讓你的願望

外觀