Android TableView 和图像（可滚动布局）答案

【问题标题】：Android TableView and Images (scrollable layout)Android TableView 和图像（可滚动布局）
【发布时间】：2011-11-17 17:57:23
【问题描述】：

我是一个新手，我已经在 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>

【问题讨论】：

标签： android image layout scrollable

【解决方案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"
 />

请注意，背景的颜色可以是任何六边形，如果你想在顶部变亮，或者任何其他样式，你应该考虑使用渐变。

等等:)

祝你好运，方舟

【讨论】：

您好，感谢您的回复。我真的很喜欢您使用渐变作为分隔符的提示。但是，相对布局似乎没有按预期工作。我已经根据您的建议更新了我的代码，只是为了显示我的布局的前几行，并且渐变线不会出现在文本下方。我试过 android:layout_alignBottom 和 android:layout_below。
谢谢，又过了几个小时，我终于弄明白了！我现在几乎是相对布局的专家了:)。我只需要弄清楚最后一个问题，但我想我可以从这里得到它。再次感谢您的帮助（我在上面发布了我的解决方案）