Android TableView和图像（可滚动布局）
问题描述：
我是一个新手，我一直在工作几个小时的android布局，没有运气。我想创建一个类似的布局：http://i43.tinypic.com/254wkt5.pngAndroid TableView和图像（可滚动布局）
我有四个问题，我试图通过与布局工作：
首先，如何使靠左的图像在上面的链接？我的所有内容都集中在页面中。另外，如何缩放不同大小的图像以使它们具有相同的大小 - 即关于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>
答
首先想你应该知道的是，在模拟的图像，一点不看起来像一个桌面布局（也许顶级的蓝色酒吧，但它可以用两个线性布局或图像很容易完成），它可以完成与表，但是浪费时间和精力:) 所以这里有一个想法： 使用，填补所有的屏幕相对布局：
<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
您好，感谢您的答复。我真的很喜欢你的提示，为分隔符使用渐变。但是，相对布局似乎没有按预期工作。我已经更新了我的代码，只是为了显示我的布局的前几行，并且梯度线不出现在文本下方。我试过android：layout_alignBottom和android：layout_below。 –
谢谢，经过多时，我终于明白了！我现在几乎是相对布局的专业人士:)。我只需要弄清楚最后一个问题，但我想我可以从这里得到它。再次感谢您的帮助（我上面发布了我的解决方案） –
很高兴我可以帮助你:) – Arkde