Android：相対的レイアウトセンター独自の空間内のもの

Question

私はアンドロイドが新しく、このようなものを実現したいと思います。

representative image

私はこのコードをした

...私はそれを変更することができますどのように、なぜ？

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:tools="http://schemas.android.com/tools" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:layout_margin="15dp" 
    tools:context="se.avatarcontrol.MainActivity"> 

    <TextView 
     android:id="@+id/weather" 
     android:layout_width="match_parent" 
     android:layout_height="wrap_content" 
     android:layout_toLeftOf="@id/light" 
     android:layout_marginTop="15dp" 
     android:text="RAINY" /> 

    <Button 
     android:id="@+id/light" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignParentRight="true" 
     android:text="Light OFF" /> 

    <TextView 
     android:id="@+id/frontText" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_alignTop="@id/sideText" 
     android:text="FrontView"/> 

    <TextView 
     android:id="@+id/sideText" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/light" 
     android:layout_marginTop="15dp" 
     android:layout_alignParentRight="true" 
     android:text="SideView" /> 


    <ImageView 
     android:id="@+id/frontImage" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android: android:layout_below="@id/frontText" 
     android:src="**somesource**" /> 

    <ImageView 
     android:id="@+id/sideImage" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_below="@id/sideText" 
     android:layout_alignParentRight="true" 
     android:src="**othersource**"/> 

</RelativeLayout> 

もう1つのことは、ImageViewsが互いに重なっていないすべてのスペースをどのように満たすことができるかです。

Answer 1

RelativeLayoutよりも軽いので、FrameLayoutまたはLinearLayoutを使用してください。あなたが望むものを達成するために

のように、あなたが何かをする必要があります。これは、構造体である

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

<!-- Weather light Layout--> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal" 
    android:weightSum="3"> 

    <ImageView 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_weight="2" 
     android:src="@mipmap/ic_launcher_round" /> 

    <TextView 
     android:layout_width="wrap_content" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:text="Light" /> 

</LinearLayout> 

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

    <!-- Front + Image Layout--> 
    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:orientation="vertical"> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="wrap_content" 
      android:text="Front" /> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:text="Image" /> 

    </LinearLayout> 

    <!-- Side + Image Layout--> 
    <LinearLayout 
     android:layout_width="0dp" 
     android:layout_height="match_parent" 
     android:layout_weight="1" 
     android:orientation="vertical"> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:text="Side" /> 

     <TextView 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:text="Image" /> 


    </LinearLayout> 


</LinearLayout> 


</LinearLayout> 

。あなたのパディング/マージン/ idsとlayout_heightとwidthを適応させるだけです。あなたの場合、私は複数のビュー間のサイズ比を指定するのに便利なlayout_weightを使用しました。