Androidレイアウト別の2つのレイアウトの途中にレイアウトを配置

Question

こんにちは私は通常のAndroidレイアウトを使用して（画像が添付された）蛇口のようなUIを作成する必要があります。ヘッダー、フッター、ミドルエリアとイメージビューがあります。エリアAとエリアCは、同様の高さ（画面の20％）であり、画像ビューは

私の現在のXMLコードは次のようにされている領域Bと領域Cの中央に常に配置されるべきである： 画像によれ

<?xml version="1.0" encoding="utf-8"?> 
 
<RelativeLayout 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" 
 
    > 
 

 
    <LinearLayout 
 
     android:id="@+id/show_contact_bottomArea" 
 
     android:layout_width="match_parent" 
 
     android:layout_height="120dp" 
 
     android:orientation="vertical" 
 
     android:layout_alignParentBottom="true" 
 
     android:layout_alignParentLeft="true" 
 
     android:layout_alignParentStart="true"> 
 

 
    </LinearLayout> 
 

 
    <LinearLayout 
 
     android:id="@+id/show_contact_middleArea" 
 
     android:layout_width="match_parent" 
 
     android:layout_height="150dp" 
 
     android:orientation="vertical" 
 
     android:background="@color/grayContact" 
 
     android:layout_below="@+id/show_contact_headerArea" 
 
     android:layout_alignParentLeft="true" 
 
     android:layout_alignParentStart="true" 
 
     android:layout_above="@+id/show_contact_bottomArea"> 
 
     
 
    </LinearLayout> 
 

 
    <LinearLayout 
 
     android:id="@+id/show_contact_headerArea" 
 
     android:layout_width="match_parent" 
 
     android:layout_height="120dp" 
 
     android:orientation="vertical" 
 
     android:layout_alignParentTop="true" 
 
     android:layout_alignParentLeft="true" 
 
     android:layout_alignParentStart="true"></LinearLayout> 
 

 
    <ImageView 
 
     android:layout_width="150dp" 
 
     android:layout_height="150dp" 
 
     app:srcCompat="@drawable/common_google_signin_btn_icon_dark_focused" 
 
     android:id="@+id/imageView2" 
 
     android:layout_marginBottom="40dp" 
 
     android:layout_alignParentBottom="true" 
 
     android:layout_centerHorizontal="true" /> 
 

 
</RelativeLayout>

私は

marginBotを与えましたtom = "40dp"

画像ビューで上に移動するのは良い方法ではありません。エリアBとエリアCの境界線の中央にイメージビューを配置する最善の方法は何ですか？どのように、エリアA &エリアBの高さlayout_height = "120dp"

しかし、理想的には両方ともスクリーンの20％（各）にすべきである：

は、現在私が

アンドロイドを与えそれも達成する？

Answer 1

あなたがとC各に重みに20％を与えることができます（あなたはBの部分に表示する高さ） - エリアBの後、トップで画像表示を追加します。この方法で、彼らはそれぞれ上下の20％を占めます。身長の60％をBに割り当てる。

imageViewでは、レイアウト全体をレイアウトレイアウトに配置し、アンカーをフッターに割り当てることができます。私は別のカラーコードと異なる部分を色付けしている - ：

彼女は、コードスニペット

<?xml version="1.0" encoding="utf-8"?> 
<android.support.design.widget.CoordinatorLayout 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"> 


    <LinearLayout 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="vertical" 
     android:weightSum="10"> 

     <LinearLayout 

      android:id="@+id/show_contact_bottomArea" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_alignParentBottom="true" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_weight="2" 
      android:background="@color/primary_light" 
      android:orientation="vertical"> 

     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/show_contact_middleArea" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_above="@+id/show_contact_bottomArea" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_below="@+id/show_contact_headerArea" 
      android:layout_weight="6" 
      android:background="@color/holo_blue_light" 
      android:orientation="vertical"> 

     </LinearLayout> 

     <LinearLayout 
      android:id="@+id/show_contact_headerArea" 
      android:layout_width="match_parent" 
      android:layout_height="0dp" 
      android:layout_alignParentLeft="true" 
      android:layout_alignParentStart="true" 
      android:layout_alignParentTop="true" 
      android:layout_weight="2" 
      android:background="@color/primary" 
      android:orientation="vertical"></LinearLayout> 


    </LinearLayout> 

    <ImageView 
     android:id="@+id/imageView2" 
     android:layout_width="150dp" 
     android:layout_height="150dp" 
     android:layout_alignParentBottom="true" 
     android:layout_centerHorizontal="true" 
     android:layout_marginBottom="40dp" 
     app:layout_anchor="@+id/show_contact_headerArea" 
     app:layout_anchorGravity="center_horizontal|top" 
     app:srcCompat="@drawable/header_record" /> 


</android.support.design.widget.CoordinatorLayout> 

結果です。

Answer 2

などの正確な領域の一部とフレームレイアウト を与えるための使用重量： 重量和= 4が親に与える必要が線形レイアウト エリアA 1件の 領域Bを与える2 エリア1

を与えるcを与えます