Android TableView和圖像（可滾動佈局）

Question

我是一個新手，我一直在工作幾個小時的android佈局，沒有運氣。我想創建一個類似的佈局：http://i43.tinypic.com/254wkt5.png

我有四個問題，我試圖通過與佈局工作：

首先，如何使靠左的圖像在上面的鏈接？我的所有內容都集中在頁面中。另外，如何縮放不同大小的圖像以使它們具有相同的大小 - 即關於android圖標的大小？我擁有的圖像非常大：http://i39.tinypic.com/2eo8dg7.png。

我的第三個問題與留下小費按鈕有關。他們如何安排，以便他們並排排列在同一個表格中？

最後，我認爲佈局默認是可滾動的。我無法滾動查看剩餘的佈局（應該沒問題）。它的圖像和按鈕讓我感到困惑。

這裏是我的xml：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="fill_parent" 
    android:layout_height="fill_parent"> 

    <LinearLayout style="@style/TitleBar"> 
     <ImageButton style="@style/TitleBarAction" 
      android:contentDescription="@string/description_home" 
      android:src="@drawable/title_home" 
      android:onClick="onClickHome" /> 
     <ImageView style="@style/TitleBarSeparator" /> 
     <TextView style="@style/TitleBarText" /> 
     <ImageButton style="@style/TitleBarAction" 
      android:contentDescription="@string/description_about" 
      android:scaleType="fitXY" 
      android:src="@drawable/about" 
      android:onClick="onClickAbout" /> 
    </LinearLayout> 

    <TableLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/tableLayout1" 
     android:layout_width="wrap_content" 
     android:layout_height="fill_parent" 
     android:stretchColumns="1"> 
     <TableRow> 
      <TextView 
       android:text="Community Summary" 
       android:textSize="18sp" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" /> 
     </TableRow> 
     <View android:layout_height="2dip" android:background="#FF909060" /> 
     <TableRow> 
      <TextView 
       android:text="Leaderboard" 
       android:textSize="16sp" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" /> 
     </TableRow> 
     <TableRow> 
      <ImageView 
       android:id="@+id/firstPlaceIcon" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/android"/> 
      <TextView 
       android:id="@+id/household1" 
       android:text="Household 1"/> 
     </TableRow> 
     <TableRow> 
      <ImageView 
       android:id="@+id/secondPlaceIcon" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/android"/> 
      <TextView 
       android:id="@+id/household1" 
       android:text="Household 2" /> 
     </TableRow> 
     <TableRow> 
      <ImageView 
       android:id="@+id/thirdPlaceIcon" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:src="@drawable/sample_0"/> 
      <TextView 
       android:id="@+id/household3" 
       android:text="Household 3" /> 
     </TableRow> 

     <View android:layout_height="1dip" android:background="#FF909060" /> 
     <TableRow> 
      <TextView 
       android:text="How do I compare?" 
       android:textSize="16sp" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" /> 
     </TableRow> 
     <TableRow> 
      <Button 
       android:id="@+id/howdoICompareStatus" 
       android:text="Compare me to others" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 
     </TableRow> 


     <View android:layout_height="1dip" android:background="#FF909060" /> 
     <TableRow> 
      <TextView 
       android:text="Tips" 
       android:textSize="16sp" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" /> 
     </TableRow> 
     <TableRow> 
      <TextView 
       android:id="@+id/statusTips" 
       android:text="Temporary Tips Text" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" /> 
     </TableRow> 

     <View android:layout_height="1dip" android:background="#FF909060" /> 

     <TableRow> 
      <TextView 
       android:text="Status" 
       android:textSize="16sp" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" /> 
     </TableRow> 
     <TableRow> 
      <TextView 
       android:id="@+id/communitysize" 
       android:text="" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent"/> 
     </TableRow> 
     <TableRow> 
      <TextView 
       android:id="@+id/tbd" 
       android:text="More features coming soon!" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent"/> 
    </TableRow>  
    </TableLayout> 


</LinearLayout> 

任何提示或資源將幫助。一個樣本XML將是偉大的！

我已經試過此基礎上，沒有運氣得到的線坡度的第一個建議首先出現的一段文字如下：

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 
    <LinearLayout style="@style/TitleBar" 
     android:id="@+id/titleBar"> 
     <ImageButton style="@style/TitleBarAction" 
      android:contentDescription="@string/description_home" 
      android:src="@drawable/title_home" 
      android:onClick="onClickHome" /> 
     <ImageView style="@style/TitleBarSeparator" /> 
     <TextView style="@style/TitleBarText" /> 
     <ImageButton style="@style/TitleBarAction" 
      android:contentDescription="@string/description_about" 
      android:scaleType="fitXY" 
      android:src="@drawable/about" 
      android:onClick="onClickAbout" /> 
    </LinearLayout> 
    <LinearLayout 
      android:id="@+id/top_linear" 
      android:layout_height="80dp" 
      android:layout_width="match_parent" 
      android:orientation="vertical" 
      android:layout_below="@+id/titleBar" > 
    <LinearLayout 
      android:id="@+id/linear2" 
      android:layout_width="wrap_content" 
      android:layout_height="fill_parent" 
      android:layout_below="@id/top_linear" 
      android:stretchColumns="1"> 
     <TextView 
       android:id="@+id/communitySummary" 
       android:text="Community Summary" 
       android:textSize="18sp" 
       android:layout_width="fill_parent" 
       android:layout_height="fill_parent" /> 
     <View 
       android:id="@+id/dividerSummary" 
       android:background="@drawable/black_white_gradient" 
       android:layout_alignBottom="@+id/communitySummary" 
       android:layout_height="1dp" 
       android:layout_width="fill_parent"/> 
     </LinearLayout>  
</LinearLayout> 
</RelativeLayout> 

我現在的解決方案。我還需要弄清楚如何把旁邊的三個圖像信息，但我想我會得到它：

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/myinfo_root" 
     android:orientation="vertical" 
     android:layout_width="fill_parent" 
     android:layout_height="wrap_content" 
     android:gravity="center_vertical" 
     android:scrollbars="vertical" 
     > 
    <LinearLayout style="@style/TitleBar"> 
     <ImageButton style="@style/TitleBarAction" 
      android:contentDescription="@string/description_home" 
      android:src="@drawable/title_home" 
      android:scaleType="fitXY" 
      android:onClick="onClickHome" /> 
     <ImageView style="@style/TitleBarSeparator" /> 
     <TextView style="@style/TitleBarText" /> 
     <ImageButton style="@style/TitleBarAction" 
      android:contentDescription="@string/description_about" 
      android:src="@drawable/about" 
      android:scaleType="fitXY" 
      android:onClick="onClickAbout" /> 
    </LinearLayout> 
    <ScrollView android:layout_width="fill_parent" android:layout_height="wrap_content"> 
    <RelativeLayout 
     xmlns:android="http://schemas.android.com/apk/res/android" 
     android:id="@+id/relative_layout" 
     android:layout_height="wrap_content" 
     android:layout_width="fill_parent" 
     android:padding="10dp" > 
    <TextView 
      android:id="@+id/communitySummary" 
      android:text="Community Summary" 
      android:textSize="18sp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
      <View 
       android:id="@+id/dividerSummary" 
       android:background="@drawable/black_white_gradient" 
       android:layout_below="@+id/communitySummary" 
       android:layout_height="1dp" 
       android:layout_width="fill_parent"/> 
      <TextView 
       android:id="@+id/leaderboard" 
       android:paddingTop="10dp" 
       android:text="Leaderboard" 
       android:textSize="16sp" 
       android:layout_below="@+id/dividerSummary" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" /> 

      <ImageView 
       android:id="@+id/firstPlaceIcon" 
       android:layout_width="80dp" 
       android:layout_height="80dp" 
       android:layout_below="@+id/leaderboard" 
       android:src="@drawable/image20" 
       /> 
      <TextView 
      android:id="@+id/top_spot" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_marginLeft="10px" 
      android:layout_toLeftOf="@id/firstPlaceIcon" 
      android:text="Top spot: "/> 
      <TextView 
      android:id="@+id/household1" 
      android:layout_width="fill_parent" 
      android:layout_height="fill_parent" 
      android:layout_below="@+id/top_spot" 
      android:text=""/> 
     <ImageView 
      android:id="@+id/secondPlaceIcon" 
      android:layout_width="80dp" 
      android:layout_height="80dp" 
      android:layout_below="@+id/firstPlaceIcon" 
      android:src="@drawable/image15"/> 
     <ImageView 
      android:id="@+id/thirdPlaceIcon" 
      android:layout_width="80dp" 
      android:layout_height="80dp" 
      android:layout_below="@+id/secondPlaceIcon" 
      android:src="@drawable/image10"/>  
     <View 
       android:id="@+id/dividerLeaderboard" 
       android:background="@drawable/black_white_gradient" 
       android:layout_below="@+id/thirdPlaceIcon" 
       android:layout_height="1dp" 
       android:layout_width="fill_parent"/> 
     <TextView 
      android:id="@+id/howdoICompareText" 
      android:text="How do I compare?" 
      android:paddingTop="10dp" 
      android:layout_below="@+id/dividerLeaderboard" 
      android:textSize="16sp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
     <Button 
      android:id="@+id/howdoICompareStatus" 
      android:text="Compare me to others" 
      android:layout_width="wrap_content" 
      android:layout_below="@+id/howdoICompareText" 
      android:layout_height="wrap_content" />  
     <View 
       android:id="@+id/dividerCompareStatus" 
       android:paddingTop="10dp" 
       android:background="@drawable/black_white_gradient" 
       android:layout_below="@+id/howdoICompareStatus" 
       android:layout_height="1dp" 
       android:layout_width="fill_parent"/>  
     <TextView 
      android:id="@+id/waystoSaveHeader" 
      android:text="Ways to Save" 
      android:layout_below="@+id/dividerCompareStatus" 
      android:textSize="16sp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
     <TextView 
      android:id="@+id/waystoSave" 
      android:text="" 
      android:layout_below="@+id/waystoSaveHeader" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
     <TextView 
      android:id="@+id/leaveaMessageHeader" 
      android:text="Leave a message to your community" 
      android:paddingTop="10dp" 
      android:layout_below="@+id/waystoSave" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" />  
     <Button 
      android:id="@+id/leaveMsgBtn" 
      android:text="Leave a Message" 
      android:layout_width="wrap_content" 
      android:layout_below="@+id/leaveaMessageHeader" 
      android:layout_height="wrap_content" />  
     <TextView 
      android:id="@+id/seeMessagesHeader" 
      android:text="See community messages" 
      android:layout_below="@+id/leaveMsgBtn" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" />  
     <Button 
      android:id="@+id/sendMsgBtn" 
      android:text="See messages" 
      android:layout_width="wrap_content" 
      android:layout_below="@+id/seeMessagesHeader" 
      android:layout_height="wrap_content" />  
     <View 
       android:id="@+id/dividerWaystoSave" 
       android:paddingTop="10dp" 
       android:background="@drawable/black_white_gradient" 
       android:layout_below="@+id/sendMsgBtn" 
       android:layout_height="1dp" 
       android:layout_width="fill_parent"/>  
     <TextView 
      android:id="@+id/CommunityStatusHeader" 
      android:text="Community Status" 
      android:layout_below="@+id/dividerWaystoSave" 
      android:textSize="16sp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" /> 
     <TextView 
      android:id="@+id/communitysize" 
      android:text="" 
      android:layout_below="@+id/CommunityStatusHeader" 
      android:paddingTop="5dp" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" />   
</RelativeLayout> 
</ScrollView>    
</LinearLayout> 

Answer 1

首先想你應該知道的是，在模擬的圖像，一點不看起來像一個桌面佈局（也許頂級的藍色酒吧，但它可以用兩個線性佈局或圖像很容易完成），它可以完成與表，但是浪費時間和精力:) 所以這裏有一個想法： 使用，填補所有的屏幕相對佈局：

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

之後使用LinearLayout

<LinearLayout 
    android:id="@+id/top_linear" 
    android:layout_height="80dp" 
    android:layout_width="match_parent" 
    android:orientation="vertical" 
    android:layout_alignParentTop="true" 
> 
</LinearLayout> 

這將保存另外兩個嵌套的佈局或兩個圖像。

之後，您將在其下面設置另一個LinearLayout，它位於其下方，標題爲android:layout_below="@id/top_linear。

之後，您將填充一些線性佈局與圖像和文字（相同的水平方向）一個在另一個之下，以獲得圖像/文本部分。

分隔符（那些線條灰色/黑色），可以得到這樣的：

<View 
    android:layout_width="match_parent" 
    android:layout_height="2dp" 
    android:background="#000000" 
/> 

注意，對於背景色可以是任何六，如果你想在上面，或任何其他打火機樣式，你應該考慮使用漸變。

等等:)

祝你好運， Arkde