RelativeLayoutの幅の割合

ActivityAndroidアプリでログイン用のフォームレイアウトを作成しています。下の画像は私がそれをどのように見せたいかです：

このレイアウトは次のXMLで実現できました。問題は、少しハックです。ホストEditTextの幅をハードコーディングする必要がありました。具体的には、以下を指定する必要がありました。

android:layout_width="172dp" 

ホストとポートにEditTextの幅をパーセントで指定したいのですが。（ホストは80％、ポートは20％など）。これは可能ですか？次のXMLは私のDroidで機能しますが、すべての画面で機能するとは限りません。より堅牢なソリューションが本当に必要です。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/main"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:paddingLeft="15dp"
        android:paddingTop="0dp"
        android:text="host"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/home"
        android:layout_toRightOf="@+id/host_input"
        android:paddingTop="0dp"
        android:text="port"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="172dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="100dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/host_label"
        android:layout_marginTop="4dp"
        android:layout_toRightOf="@id/host_input"
        android:background="@android:drawable/editbox_background"
        android:inputType="number" />

    <TextView
        android:id="@+id/username_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/host_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="username"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/username_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/username_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textEmailAddress" />

    <TextView
        android:id="@+id/password_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/username_input"
        android:paddingLeft="15dp"
        android:paddingTop="15dp"
        android:text="password"
        android:textColor="#a5d4e2"
        android:textSize="25sp"
        android:textStyle="normal" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_label"
        android:layout_marginLeft="15dp"
        android:layout_marginRight="15dp"
        android:layout_marginTop="4dp"
        android:background="@android:drawable/editbox_background"
        android:inputType="textPassword" />

    <ImageView
        android:id="@+id/home"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_centerVertical="false"
        android:paddingLeft="15dp"
        android:paddingRight="15dp"
        android:paddingTop="15dp"
        android:scaleType="fitStart"
        android:src="@drawable/home" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginLeft="15dp"
        android:layout_marginTop="15dp"
        android:text="   login   "
        android:textSize="18sp" >
    </Button>

</RelativeLayout>

android:layout_weight属性を探しています。パーセンテージを使用してレイアウトを定義できます。

次の例では、左ボタンはスペースの70％を使用し、右ボタンは30％を使用します。

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

    <Button
        android:text="left" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".70" /> 

    <Button
        android:text="right" 
        android:layout_width="0dp" 
        android:layout_height="wrap_content" 
        android:layout_weight=".30" />

</LinearLayout>

どのようなビューでも同じように機能します。ボタンをいくつかのEditTextに置き換えて、ニーズに合わせることができます。

をに設定しlayout_widthて0dpください。そうしないと、ビューが適切にスケーリングされない場合があります。

重みの合計が1である必要はないことに注意してください。このように読みやすいだけです。最初の重みを7に設定し、2番目の重みを3に設定すると、同じ結果が得られます。

これは、70/30分割の元の質問には完全には答えませんが、コンポーネント間で50/50分割の特別な場合には、方法があります。中央に見えない支柱を配置し、それを使用して、関心のある2つのコンポーネント。

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View android:id="@+id/strut"
        android:layout_width="0dp"
        android:layout_height="0dp" 
        android:layout_centerHorizontal="true"/>
    <Button
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignRight="@id/strut"
        android:layout_alignParentLeft="true"
        android:text="Left"/> 
    <Button 
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@id/strut"
        android:layout_alignParentRight="true"
        android:text="Right"/>
</RelativeLayout>

これはかなり一般的なケースであるため、このソリューションは好奇心以上のものです。少しハックですが、サイズがゼロの空の支柱のコストは非常に低いため、効率的なハックです。

ただし、一般的には、Androidの標準的なレイアウトからあまり期待しないことが最善です...

アップデート1

@EmJiHashで指摘されているように、PercentRelativeLayout はAPIレベル26.0.0で廃止され ました

グーグルコメントの引用の下：

このクラスはAPIレベル26.0.0で廃止されました。代わりにConstraintLayoutおよび関連するレイアウトの使用を検討してください。以下は、ConstraintLayoutを使用してパーセンテージレイアウトの機能を複製する方法を示しています。

グーグルは android.support.percentと呼ばれる新しいAPIを導入しました

次に、ビューで取得するパーセンテージを指定できます

次のようなコンパイル依存関係を追加します

implementation 'com.android.support:percent:22.2.0

その中で、PercentRelativeLayoutは、パーセンテージごとのレイアウトを実行できるものです

 <android.support.percent.PercentRelativeLayout
     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">
     <ImageView
         app:layout_widthPercent="50%"
         app:layout_heightPercent="50%"
         app:layout_marginTopPercent="25%"
         app:layout_marginLeftPercent="25%"/>
 </android.support.percent.PercentRelativeLayout>

パーセンテージを使用して、RelativeLayout内のビューのサイズを定義することはできません。これを行う最良の方法は、LinearLayoutとウェイト、またはカスタムレイアウトを使用することです。

新しいパーセントサポートライブラリをご覧ください。

compile 'com.android.support:percent:22.2.0'

docs

サンプル

PercentRelativeLayoutを使用できます。これは、ドキュメント化されていない最近のDesign Support Libraryへの追加であり、相互に関連する要素だけでなく、使用可能なスペースの合計パーセンテージも指定できます。

パーセンテージベースの寸法とマージンをサポートするRelativeLayoutのサブクラス。接尾辞が「パーセント」の属性を使用して、ディメンションまたは子のマージンを指定できます。

<android.support.percent.PercentRelativeLayout
     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">
  <ImageView
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      app:layout_widthPercent="50%"
      app:layout_heightPercent="50%"
      app:layout_marginTopPercent="25%"
      app:layout_marginLeftPercent="25%"/>
</android.support.percent.PercentFrameLayout>

Percentパッケージは、アプリでパーセンテージベースのディメンションの追加と管理をサポートするAPIを提供します。

使用するには、このライブラリをGradle依存関係リストに追加する必要があります。

dependencies {
    compile 'com.android.support:percent:22.2.0'//23.1.1
}

私はこれを解決してカスタムビューを作成しました：

public class FractionalSizeView extends View {
  public FractionalSizeView(Context context, AttributeSet attrs) {
    super(context, attrs);
  }

  public FractionalSizeView(Context context, AttributeSet attrs, int defStyle) {
    super(context, attrs, defStyle);
  }

  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    setMeasuredDimension(width * 70 / 100, 0);
  }
}

これは、RelativeLayout内の他のビューを整列するために使用できる見えないストラットです。

更新

@EmJiHashで指摘されているように、PercentRelativeLayoutとPercentFrameLayoutはAPIレベル26.0.0で廃止されました

ConstraintLayoutの使用を検討する

グーグルはandroid.support.percentと呼ばれる新しいAPIを導入しました

1）PercentRelativeLayout

2）PercentFrameLayout

次のようなコンパイル依存関係を追加します

compile 'com.android.support:percent:23.1.1'

パーセンテージでディメンションを指定できるため、メリットRelativeLayoutとパーセンテージの両方を得ることができます

 <android.support.percent.PercentRelativeLayout
         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"/>
     <TextView
         app:layout_widthPercent="40%"
         app:layout_heightPercent="40%"
         app:layout_marginTopPercent="15%"
         app:layout_marginLeftPercent="15%"/>
 </android.support.percent.PercentRelativeLayout/>

PercentRelativeLayoutは26.0.0で非推奨になり、RelativeLayout内のLinearLayoutのようなネストされたレイアウトはパフォーマンスにマイナスの影響を与えます（ConstraintLayoutのパフォーマンス上の利点を理解する）。

これは2つの方法で解決できます。

解決策＃1オフセットがパーセントのガイドラインを使用する

<android.support.constraint.ConstraintLayout
    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">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/guideline" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toLeftOf="@+id/guideline"
        app:layout_constraintRight_toRightOf="parent" />

    <android.support.constraint.Guideline
        android:id="@+id/guideline"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.8" />

</android.support.constraint.ConstraintLayout>

解決策＃2 EditTextに重み付けされた幅のチェーンを使用する

<android.support.constraint.ConstraintLayout
    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">

    <TextView
        android:id="@+id/host_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Host"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/host_input" />

    <TextView
        android:id="@+id/port_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Port"
        android:layout_marginTop="16dp"
        android:layout_marginLeft="8dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/host_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="textEmailAddress"
        app:layout_constraintHorizontal_weight="0.8"
        app:layout_constraintTop_toBottomOf="@+id/host_label"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toLeftOf="@+id/port_input" />

    <EditText
        android:id="@+id/port_input"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:inputType="number"
        app:layout_constraintHorizontal_weight="0.2"
        app:layout_constraintTop_toBottomOf="@+id/port_label"
        app:layout_constraintLeft_toRightOf="@+id/host_input"
        app:layout_constraintRight_toRightOf="parent" />

</android.support.constraint.ConstraintLayout>

どちらの場合も、このようなものを取得します

PercentRelativeLayoutは、サポートライブラリのリビジョン26.0.0から廃止されました。

GoogleはConstraintLayoutと呼ばれる新しいレイアウトを導入しました。

ライブラリを依存関係としてモジュールレベルのbuild.gradleファイルに追加します。

     dependencies {
        compile 'com.android.support.constraint:constraint-layout:1.0.1'
      }

レイアウトファイルを追加するだけです。

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

制約

制約は、ウィジェットの整列を維持するのに役立ちます。以下に示す制約ハンドルなどのアンカーを使用して、さまざまなウィジェット間の配置規則を決定できます。

1. Wrap Content：ビューは、コンテンツに合わせて必要に応じて拡張されます。
2. Match Constraints：マージンを考慮した後、制約の定義を満たすために必要に応じてビューが拡張されます。ただし、特定のディメンションに制約が1つしかない場合、ビューはその内容に合わせて拡張されます。高さまたは幅のいずれかでこのモードを使用すると、サイズ比を設定することもできます。
3. Fixed：特定の寸法を下のテキストボックスに指定するか、エディターでビューのサイズを変更します。
4. Spread：ビューは均等に分散されます（マージンが考慮された後）。これがデフォルトです。
5. Spread inside：最初と最後のビューはチェーンの両端の制約に固定され、残りは均等に分散されます。
6. Weighted：チェーンがスプレッドまたはスプレッド内に設定されている場合、1つまたは複数のビューを「制約に一致」（0dp）に設定することにより、残りのスペースを埋めることができます。デフォルトでは、「マッチ制約」に設定されている各ビューの間にスペースが均等に配分されますが、layout_constraintHorizo​​ntal_weight属性とlayout_constraintVertical_weight属性を使用して、各ビューに重要度の重みを割り当てることができます。線形レイアウトのlayout_weightに慣れている場合、これは同じように機能します。したがって、最も高い重み値を持つビューが最も多くのスペースを取得します。同じ重みを持つビューは、同じ量のスペースを取得します。
7. Packed：ビューは一緒にパックされます（マージンが考慮された後）。次に、チェーンのヘッドビューバイアスを変更して、チェーン全体のバイアス（左/右または上/下）を調整できます。
8. Center Horizontally or Center Vertically：ビューのチェーンをすばやく作成するには、ビューのチェーンをすべて選択し、ビューの1つを右クリックして、[水平に中央揃え]または[垂直に中央揃え]を選択して、水平または垂直のチェーンを作成します。
9. Baseline alignment：ビューのテキストベースラインを別のビューのテキストベースラインに揃えます。
10. Constrain to a guideline：ビューを制限できる垂直または水平のガイドラインを追加できます。このガイドラインはアプリユーザーには表示されません。レイアウトの端を基準として、dp単位またはパーセントに基づいて、ガイドラインをレイアウト内に配置できます。
11. Adjust the constraint bias：ビューの両側に制約を追加すると（同じ寸法のビューサイズが「固定」または「コンテンツを折り返す」）、ビューはデフォルトで50％のバイアスで2つの制約の中央に配置されます。プロパティウィンドウのバイアススライダーをドラッグしてバイアスを調整できます
12. Set size as a ratio：ビューのサイズを16：9などの比率に設定できます（ビューの寸法の少なくとも1つが「制約に一致する」（0dp）に設定されている場合）。

詳細については、公式ドキュメントをご覧ください。

これは、レイアウトの重みによって実現できます。重みは、画面の要求されていない部分がどのように分割されるかを決定します。各EditTextに、layout_widthを0とし、それに比例した重みを付けます。つまり、1つに2の重みを付け、もう1つに最初の2倍のスペースを必要とする場合は1の重みを与えます。

興味深いことに、@ olefevreからの回答に基づいて、「見えない支柱」で50/50のレイアウトを実行できるだけでなく、2のべき乗を含むあらゆる種類のレイアウトを実行できます。

たとえば、次のレイアウトは、幅を4つの等しい部分に分割します（実際には3、重みは1、1、2）。

<?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="wrap_content" >

    <View
        android:id="@+id/strut"
        android:layout_width="1dp"
        android:layout_height="match_parent"
        android:layout_centerHorizontal="true"
        android:background="#000000" />

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/strut" >

        <View
            android:id="@+id/left_strut"
            android:layout_width="1dp"
            android:layout_height="match_parent"
            android:layout_toLeftOf="@+id/strut"
            android:layout_centerHorizontal="true"
            android:background="#000000" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignRight="@+id/left_strut"
            android:text="Far Left" />

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_toRightOf="@+id/left_strut"
            android:text="Near Left" />
    </RelativeLayout>

        <Button
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_alignLeft="@id/strut"
            android:layout_alignParentRight="true"
            android:text="Right" />

</RelativeLayout>

2つのtextviewsホストとポートを独立したlinearlayout水平に配置し、android：layout_weightを使用してパーセンテージを作成します

レイアウトxmlでパーセントまたはJava式を直接使用できるhttps://github.com/mmin18/FlexLayoutを確認してください。

<EditText
    app:layout_left="0%"
    app:layout_right="60%"
    app:layout_height="wrap_content"/>
<EditText
    app:layout_left="prev.right+10dp"
    app:layout_right="100%"
    app:layout_height="wrap_content"/>