0

私は初心者で、Androidのレイアウトに数時間取り組んできましたが運がありませんでした。私はこれに似たレイアウトを作成しようとしています：http：//i43.tinypic.com/254wkt5.png

レイアウトを処理しようとしている4つの問題があります。

まず、上のリンクのように画像を左にフラッシュするにはどうすればよいですか？鉱山はすべてページの中央に配置されています。また、異なるサイズの画像を同じサイズになるように拡大縮小するにはどうすればよいですか？つまり、Androidアイコンのサイズ程度ですか？私が持っている画像はかなり大きいです：http：//i39.tinypic.com/2eo8dg7.png。

私の3番目の問題は、「チップを残す」ボタンに関係しています。同じテーブル列内に並べて配置するにはどうすればよいですか？

最後に、レイアウトはデフォルトでスクロール可能だと思いました。スクロールして残りのレイアウトを表示することはできません（問題ないはずです）。その画像とボタンは私を混乱させます。

これが私の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>

今のところ私の解決策。3つの画像の横に情報を配置する方法を理解する必要がありますが、取得できると思います。

<?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>
4

1 に答える 1

0

最初に知っておくべきことは、モックアップ画像では、テーブルレイアウトのようには見えないことです（おそらく一番上の青いバーですが、2つの線形レイアウトまたは画像で非常に簡単に実行できます）。テーブルですが、時間とエネルギーの無駄です:)ここにアイデアがあります：すべての画面を埋める相対レイアウトを使用します：

<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>

これは、別の2つのネストされたレイアウトまたは2つの画像のいずれかを保持します。

その後android:layout_below="@id/top_linear、タイトルを保持する別のLinearLayoutをその下に設定します。

その後、いくつかの線形レイアウトに画像とテキスト（同じ水平方向）を上下に並べて、画像/テキストセクションを取得します。

区切り文字（灰色/黒の線）は、次のように取得できます。

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

背景の色は任意のヘキサにすることができます。上部を明るくしたい場合、またはその他のスタイルを使用する場合は、グラデーションの使用を検討する必要があります。

等々 ：）

頑張って、アークデ

于 2011-11-17T19:05:39.060 に答える