Android TableLayout問題 - 無法正確設置

Question

請分享TableLayout的修復 - 有點困惑如何設置權重和列以根據需要安排佈局。我希望你能得到基於layout_span的格式化需求。但會嘗試用文字解釋。放下我如何可視化的佈局

1. 第一行 - 有一個按鈕，整個寬度跨越
2. 第二排 - 有標題居中對齊
3. 第三排 - 有兩個TextViews以50％的面積每個
4. 第四行 - 使標題中心對齊
5. 第五行 - 使一個ImageView佔用16.6％的寬度，而TextView佔用其餘的83.3％。
6. 第六行 - 使一個ImageView佔用16.6％的寬度，而TextView佔用其餘的83.3％。

下面是代碼：

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    > 

    <TableRow 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:padding="10dp"> 
     <Button 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/app_get_questions" 
      android:id="@+id/btnNext" 
      android:textColor="@color/windowBackground" 
      android:layout_span="4" 
      android:layout_column="1" 
      /> 
    </TableRow> 
    <TableRow 
     android:layout_height="fill_parent" 
     android:layout_width="match_parent" 
     > 
     <TextView 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal" 
      android:text="@string/app_scoring_leaders" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textStyle="bold" 
      android:layout_span="4" 
      android:layout_column="1" 
      android:padding="5dp"/> 
    </TableRow> 
    <TableRow 
     android:layout_height="fill_parent" 
     android:layout_width="match_parent" 
     android:padding="5dp"> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/txtDailyScores" 
      android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)" 
      android:textAppearance="?android:attr/textAppearanceSmall" 
      android:layout_margin="5dp" 
      android:layout_column="1" 
      android:layout_span="2" 
      android:layout_weight="3"/> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/txtAllTimeScores" 
      android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)" 
      android:textAppearance="?android:attr/textAppearanceSmall" 
      android:layout_margin="5dp" 
      android:layout_column="3" 
      android:layout_span="2" 
      android:layout_weight="3"/> 
    </TableRow> 
    <TableRow 
     android:layout_height="fill_parent" 
     android:layout_width="match_parent" 
     > 
     <TextView 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal" 
      android:text="@string/app_get_started" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textStyle="bold" 
      android:layout_column="1" 
      android:layout_span="4" 
      android:padding="5dp"/> 
    </TableRow> 
    <TableRow 
     android:layout_height="fill_parent" 
     android:layout_width="match_parent" 
     android:padding="5dp"> 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:src="@drawable/ic_assessment_black_36dp" 
      android:layout_gravity="center_vertical" 
      android:layout_column="1" 
      android:layout_span="1" 
      android:layout_weight="1" 
      /> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/app_intro" 
      android:textAppearance="?android:attr/textAppearanceSmall" 
      android:layout_margin="5dp" 
      android:layout_column="2" 
      android:layout_span="3" 
      android:layout_weight="5"/> 

    </TableRow> 
    <TableRow 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:padding="5dp"> 
     <ImageView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical" 
      android:src="@drawable/ic_today_black_36dp" 
      android:layout_column="1" 
      android:layout_span="1" 
      android:layout_weight="1" 
      /> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:layout_gravity="center_vertical" 
      android:gravity="left" 
      android:textAppearance="?android:attr/textAppearanceSmall" 
      android:text="@string/app_base_score" 
      android:layout_margin="5dp" 
      android:layout_column="2" 
      android:layout_span="3" 
      android:layout_weight="5"/> 
    </TableRow> 
</TableLayout> 

Answer 1

這花了一點時間，但也有layout_weight，我不得不做相關的變化，整個表的結構必須改變。我使用LinearLayout來代替最後兩行。前四行可以使用TableLayout完成。 Layout_spans不得不簡化 - 似乎我們不能有複雜的佈局。高興地瞭解是否有更好的解決方案。

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    > 

    <TableRow 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:padding="5dp" > 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:text="@string/app_rankgrade" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textStyle="bold" 
      android:textColor="@android:color/black" 
      android:textAlignment="center" 
      android:layout_weight="2" 
      /> 

    </TableRow> 
    <TableRow 
     android:layout_height="wrap_content" 
     android:layout_width="wrap_content" 
     android:padding="2dp" android:layout_gravity="center"> 
     <RelativeLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/relativelayout" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" android:layout_gravity="center" android:gravity="center" android:layout_weight="1"> 

      <ImageView 
       android:id="@+id/myImageView" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/trframered1" 

       /> 

      <LinearLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@id/myImageView" 
       android:layout_alignTop="@id/myImageView" 
       android:layout_alignRight="@id/myImageView" 
       android:layout_alignBottom="@id/myImageView" 
       android:layout_margin="1dp" 
       android:gravity="center" 
       android:orientation="vertical" 
       > 
       <TextView 
        android:id="@+id/myImageViewTextHead" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_margin="1dp" 
        android:gravity="center" 
        android:text="@string/app_last_rank_grade" 
        android:textColor="#000000" /> 
       <TextView 
        android:id="@+id/txtLastDayRankGrade" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_margin="1dp" 
        android:gravity="center" 
        android:text="-" 
        android:textColor="#000000" /> 

      </LinearLayout> 


     </RelativeLayout> 

     <RelativeLayout 
      xmlns:android="http://schemas.android.com/apk/res/android" 
      android:id="@+id/relativelayout1" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" android:layout_gravity="center" android:gravity="center" android:layout_weight="1"> 

      <ImageView 
       android:id="@+id/myImageView1" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/trframered1" /> 

      <LinearLayout 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_alignLeft="@id/myImageView1" 
       android:layout_alignTop="@id/myImageView1" 
       android:layout_alignRight="@id/myImageView1" 
       android:layout_alignBottom="@id/myImageView1" 
       android:layout_margin="1dp" 
       android:gravity="center" 
       android:orientation="vertical" 
       > 
       <TextView 
        android:id="@+id/myImageViewTextHead1" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_margin="1dp" 
        android:gravity="center" 
        android:text="All Time" 
        android:textColor="#000000" /> 
       <TextView 
        android:id="@+id/txtLastAllTimeRankGrade" 
        android:layout_width="wrap_content" 
        android:layout_height="wrap_content" 
        android:layout_margin="1dp" 
        android:gravity="center" 
        android:text="-" 
        android:textColor="#000000" /> 

      </LinearLayout> 


     </RelativeLayout> 
    </TableRow> 
</TableLayout> 
<TableLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    > 

    <TableRow 
     android:layout_height="wrap_content" 
     android:layout_width="match_parent" 
     android:padding="5dp"> 
     <Button 
      android:layout_height="wrap_content" 
      android:text="@string/app_get_questions" 
      android:id="@+id/btnNext" 
      android:textColor="@color/windowBackground" 
      android:layout_span="2" 
      android:layout_weight="2" 
      /> 
    </TableRow> 
    <TableRow 
     android:layout_height="fill_parent" 
     android:layout_width="match_parent" 
     > 
     <TextView 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal" 
      android:text="@string/app_scoring_leaders" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textStyle="bold" 
      android:layout_span="2" 
      android:layout_weight="2" 
      android:padding="5dp"/> 
    </TableRow> 
    <TableRow 
     android:layout_height="fill_parent" 
     android:layout_width="match_parent" 
     android:padding="5dp"> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/txtDailyScores" 
      android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)" 
      android:textAppearance="?android:attr/textAppearanceSmall" 
      android:layout_margin="5dp" 
      android:layout_weight="1"/> 
     <TextView 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:id="@+id/txtAllTimeScores" 
      android:text="1. Kapil Bhagia (34511)\n2. Hardik Bhagia (2231)" 
      android:textAppearance="?android:attr/textAppearanceSmall" 
      android:layout_margin="5dp" 
      android:layout_weight="1"/> 
    </TableRow> 

    <TableRow 
     android:layout_height="fill_parent" 
     android:layout_width="match_parent" 
     > 
     <TextView 
      android:layout_height="wrap_content" 
      android:gravity="center_horizontal" 
      android:text="@string/app_get_started" 
      android:textAppearance="?android:attr/textAppearanceMedium" 
      android:textStyle="bold" 
      android:layout_weight="2" 
      android:layout_span="2" 
      android:padding="5dp"/> 
    </TableRow> 
    </TableLayout> 

      <LinearLayout 
       xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:orientation="horizontal" > 
       <ImageView 
        android:layout_height="wrap_content" 
        android:src="@drawable/ic_assessment_black_36dp" 
        android:layout_gravity="center_vertical" 
        android:layout_width="wrap_content" 
        android:padding="10dp" 
        /> 
       <TextView 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:text="@string/app_intro" 
        android:textAppearance="?android:attr/textAppearanceSmall" 
        android:padding="10dp" 
        /> 
      </LinearLayout> 

      <LinearLayout 
       xmlns:android="http://schemas.android.com/apk/res/android" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:orientation="horizontal" > 
       <ImageView 
        android:layout_height="wrap_content" 
        android:layout_gravity="center_vertical" 
        android:src="@drawable/ic_today_black_36dp" 
        android:layout_width="wrap_content" 
        android:padding="10dp" 
        /> 
       <TextView 
        android:layout_height="wrap_content" 
        android:layout_width="wrap_content" 
        android:textAppearance="?android:attr/textAppearanceSmall" 
        android:text="@string/app_base_score" 
        android:padding="10dp" 
        /> 
      </LinearLayout>