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