ListViewカスタム行のUIデザインを操作する（Android）

Question

ListViewのカスタム行レイアウトxmlファイルを作成して、それぞれの行を見たいように設計できましたが、実際にUIを設計する際に問題がありますこのXMLファイル。私は最終的にはこのように見える活動をしようとしています：

あなたは各タイトル、二つのボタンなどのTextViewでゲームから成る、行のリストビューがある見ることができるように、とバックグラウンドとしてのimageView私はGoogleのUIドキュメントを使って多くの研究をしてきましたが、このように要素を重ねて表示する方法を理解することはできません。私が得た最も遠いのは、FrameLayoutを使って異なるビューをお互いに配置することですが、ここからは、ビューをお互いに正しい位置に配置することはできません。どのようにこれを行うには、または私はこれを行う方法を見つけることができます上の任意のアドバイスですか？これまでのところ（私が知っている恐ろしい）

XML：

<?xml version="1.0" encoding="utf-8"?> 
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="horizontal"> 

<RelativeLayout 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_gravity="top|center_horizontal"> 

    <ImageView 
     android:id="@+id/gameImageID" 
     android:layout_width="340dp" 
     android:layout_height="160dp" 
     android:scaleType="centerCrop" 
     app:srcCompat="@drawable/overwatch" /> 

    <TextView 
     android:id="@+id/gameNameID" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="15dp" 
     android:text="TextView" /> 

    <Button 
     android:id="@+id/btnJoinLobby" 
     android:layout_width="88dp" 
     android:layout_height="wrap_content" 
     android:onClick="myClickHandlerJoin" 
     android:text="Join Lobby" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="15dp" /> 

    <Button 
     android:id="@+id/btnCreateLobby" 
     android:layout_width="102dp" 
     android:layout_height="wrap_content" 
     android:onClick="myClickHandlerCreate" 
     android:text="Create Lobby" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="15dp" 
     android:layout_toEndOf="@+id/gameNameID" /> 

</RelativeLayout> 

Answer 1

問題ありません確かに。スペーシングを処理するためにウェイトを使用するだけで、フレームレイアウトは相対的なものをルートとして使用する必要はありません。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_gravity="top|center_horizontal"> 

    <ImageView 
     android:id="@+id/gameImageID" 
     android:layout_width="match_parent" 
     android:layout_height="160dp" 
     android:layout_marginStart="16dp" 
     android:layout_marginEnd="16dp" 
     android:scaleType="centerCrop" 
     app:srcCompat="@drawable/overwatch" /> 

    <TextView 
     android:id="@+id/gameNameID" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_centerHorizontal="true" 
     android:layout_gravity="center_horizontal" 
     android:layout_marginTop="15dp" 
     android:text="TextView" /> 

    <LinearLayout 
      android:orientation="horizontal" 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:layout_gravity="bottom" 
      android:weightSum="2"> 

      <RelativeLayout 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="wrap_content"> 

       <Button 
        android:id="@+id/btnJoinLobby" 
        android:layout_width="102dp" 
        android:layout_height="wrap_content" 
        android:onClick="myClickHandlerJoin" 
        android:text="Join Lobby" 
        android:layout_centerHorizontal="true" 
        android:layout_marginTop="15dp" /> 

      </RelativeLayout> 

      <RelativeLayout 
       android:layout_width="0dp" 
       android:layout_weight="1" 
       android:layout_height="wrap_content"> 

       <Button 
        android:id="@+id/btnCreateLobby" 
        android:layout_width="102dp" 
        android:layout_height="wrap_content" 
        android:onClick="myClickHandlerCreate" 
        android:text="Create Lobby" 
        android:layout_centerHorizontal="true" 
        android:layout_marginTop="15dp" /> 

      </RelativeLayout> 

     </LinearLayout> 

</RelativeLayout> 

また、単に重力左下と右下にネストされた2つの相対的なレイアウトを使用して、そこにあなたのボタンを押しながら、サイドからのマージンと右にボタンを揃えることができます。また、 "endOF"アライメントを使用しないでください。左揃えを強制し、画面の右側に大きなギャップを作っても、それは1つの電話機に適していても別のもので悪く見えます。美学は重要です。

ボタンを左下と右下にマージンを横にして浮かべて、両方をmatch_parentに設定してスペースを埋めるようにすることができますが、パディングを使用してスペース内のボタンの外観を縮小しますが、 。だから私は上記の実装を好む人もいますが、余分なレイアウトが気に入らない人もいます。これは単なる意見の問題ですが、余分なネストされたレイアウトを使用した場合のパフォーマンスの差は非常に小さく、誰も実際にストレートフェイスのハハでパフォーマンスを主張することはできません。

Answer 2

<RelativeLayout 
    android:layout_width="340dp" 
    android:layout_height="160dp" 
    android:scaleType="centerCrop" 
    android:background="@drawable/overwatch" > 

<TextView 
    android:id="@+id/gameNameID" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:layout_centerHorizontal="true" 
    android:layout_gravity="center_horizontal" 
    android:layout_marginTop="15dp" 
    android:text="TextView" /> 

<Button 
    android:id="@+id/btnJoinLobby" 
    android:layout_width="88dp" 
    android:layout_height="wrap_content" 
    android:onClick="myClickHandlerJoin" 
    android:text="Join Lobby" 
    android:layout_gravity="center_horizontal" 
    android:layout_marginBottom="15dp" /> 

<Button 
    android:id="@+id/btnCreateLobby" 
    android:layout_width="102dp" 
    android:layout_height="wrap_content" 
    android:onClick="myClickHandlerCreate" 
    android:text="Create Lobby" 
    android:layout_gravity="center_horizontal" 
    android:layout_marginBottom="15dp" 
    android:layout_toEndOf="@+id/btnJoinLobby" /> 

</RelativeLayout> 

これを試してください。それが役に立ったら教えてください。