5中央元素的列布局

Question

我想在我的Android應用程序中顯示包含遊戲分數的列表。該名單應該是這樣的：

，你可以在上圖中看到我有每行5個視圖元素：

1. 第一隊名
2. 一線隊標誌
3. 遊戲得分
4. 二隊隊旗
5. 二隊隊名

元素2,3和4應該總是居中居中，這樣遊戲的冒號和旗幟就會直接位於上方/下方，而隊名的長度可以變化。

到目前爲止，我已經用RelativeLayout，TableLayout和LinearLayouts進行了實驗，但找不到工作解決方案。

什麼是最好的方法來達到desried佈局？該佈局應該適用於Android 1.6，垂直和水平方向。

Answer 1

擺弄RelativeLayouts後，我設法找到以下解決方案，在縱向和橫向模式下工作。

<RelativeLayout 
    android:id="@+id/mainlayout" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:layout_below="@id/headerLayout" 
    android:layout_centerVertical="true" 
    android:layout_marginBottom="5dip" 
    android:layout_marginTop="5dip" > 

    <TextView 
     android:id="@+id/teamAName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentLeft="true" 
     android:layout_centerVertical="true" 
     android:layout_toLeftOf="@+id/innerlayout" 
     android:gravity="center_vertical|right" 
     android:text="Team A" 
     android:textColor="@color/black" 
     android:textSize="12dip" 
     android:textStyle="bold" /> 

    <RelativeLayout 
     android:id="@id/innerlayout" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_centerVertical="true" 
     android:paddingLeft="6dip" 
     android:paddingRight="6dip" > 

     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toLeftOf="@+id/score" 
      android:src="@drawable/de" /> 

     <TextView 
      android:id="@id/score" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_centerHorizontal="true" 
      android:layout_centerVertical="true" 
      android:layout_marginLeft="6dip" 
      android:layout_marginRight="6dip" 
      android:background="@drawable/scorebox" 
      android:paddingLeft="6dip" 
      android:paddingRight="6dip" 
      android:text="18:00" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textColor="@color/white" 
      android:textStyle="bold" /> 

     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_toRightOf="@id/score" 
      android:src="@drawable/de" /> 
    </RelativeLayout> 

    <TextView 
     android:id="@+id/teamBName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:layout_centerVertical="true" 
     android:layout_toRightOf="@id/innerlayout" 
     android:gravity="center_vertical" 
     android:text="Team B" 
     android:textColor="@color/black" 
     android:textSize="12dip" 
     android:textStyle="bold" /> 
</RelativeLayout> 

Answer 2

嘗試的朋友：

<LinearLayout 
    android:id="@+id/linearLayoutRow" 
    android:layout_width="fill_parent" 
    android:layout_height="50dp" > 

    <LinearLayout 
     android:id="@+id/linearLayoutTeam1" 
     android:layout_width="85dp" 
     android:layout_height="fill_parent" 
     android:orientation="vertical" > 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/linearLayoutFlag1" 
     android:layout_width="50dp" 
     android:layout_height="fill_parent" 
     android:orientation="vertical" > 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/linearLayoutScore" 
     android:layout_width="50dp" 
     android:layout_height="fill_parent" 
     android:orientation="vertical" > 
    </LinearLayout> 

    <LinearLayout 
     android:id="@+id/linearLayoutFlag2" 
     android:layout_width="50dp" 
     android:layout_height="fill_parent" 
     android:orientation="vertical" > 
    </LinearLayout> 


    <LinearLayout 
     android:id="@+id/linearLayoutTeam2" 
     android:layout_width="85dp" 
     android:layout_height="fill_parent" 
     android:orientation="vertical" > 
    </LinearLayout> 

</LinearLayout> 

，你編輯XXdp;）

Answer 3

listItem.xml爲customAdapter可以像：

<RelativeLayot> 
<TextView TeamA alignParentLeft /> 
<RelativeLayot alignParentcenter> 
    <ImageView flag1 alignParentLeft /> 
    <TextView 1.2 alignParentcenter /> 
    <ImageView flag2 alignParentRight /> 
</RelativeLayot> 
<TextView TeamB alignParentReight/> 
</RelativeLayot> 

Answer 4

一個行可能是這個樣子：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" > 
    <TextView 
     android:id="@+id/textView1" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:layout_weight="4" 
     android:gravity="center_vertical|right" 
     android:text="Team A" /> 
    <LinearLayout 
     android:id="@+id/linearLayout1" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_weight="2" 
     android:gravity="center" 
     android:orientation="horizontal" > 
     <ImageView 
      android:id="@+id/imageView1" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/icon" /> 
     <TextView 
      android:id="@+id/textView3" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="1 : 2" /> 
     <ImageView 
      android:id="@+id/imageView2" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/icon" /> 
    </LinearLayout> 
    <TextView 
     android:id="@+id/textView2" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:layout_weight="4" 
     android:gravity="center_vertical|left" 
     android:text="Team B" /> 
</LinearLayout> 

如果中心對象與兩側的比例不正確，請嘗試更改layout_weight的值。