ConstraintLayout：パーセンテージベースの寸法

Question

画面サイズに基づいてUI要素の位置を設定することができます。

しかし、UI要素の幅と高さは画面サイズに基づいて変化していないので、まだ不完全に見えます。

どのように私はこれを達成することができますか？我々は、デバイスを回転させたときにUIボタンが実際に画面に基づいてどのように見えるべきかを推測できるように、私はいくつかのガイドライン（賢明なパーセンテージ）を作成しました

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 

    tools:context="com.satizh.android.constraintlayouttest.MainActivity"> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="125dp" 
     android:layout_height="47dp" 
     android:layout_marginBottom="0dp" 
     android:layout_marginLeft="0dp" 
     android:layout_marginRight="0dp" 
     android:layout_marginTop="0dp" 
     android:layout_weight="68" 
     android:text="5%V30%H" 

     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_bias="0.3" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_bias="0.050000012" /> 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:text="Button" 
     android:layout_marginTop="0dp" 
     app:layout_constraintTop_toBottomOf="@+id/button" 
     android:layout_marginRight="0dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginLeft="0dp" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintHorizontal_bias="0.915" 
     app:layout_constraintBottom_toBottomOf="parent" 
     android:layout_marginBottom="0dp" 
     app:layout_constraintVertical_bias="0.138" /> 

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

    <android.support.constraint.Guideline 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/guideline2" 
     android:orientation="horizontal" 
     app:layout_constraintGuide_percent="0.05" /> 

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

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

</android.support.constraint.ConstraintLayout> 

：

は、以下の私のソースコードです。より良い理解のためにここにgifがあります。あなたはまた、小さな丸をクリックして、ガイドラインにドラッグして、ボタンのためにあなたの制約を設定することが明らかに

android:layout_constraintLeft_toRightOf="@+id/guidelineX" 

はなく、親

を忘れてしまったように見える

Answer 1

ボタンに2つのガイドラインの間のすべての水平スペースを使用させたい場合は、幅は0dp、制約ボタンの左端と右端は適切なガイドラインになります。

をそして、この景観のために：

<Button 
    android:layout_width="0dp" 
    app:layout_constraintStart_toEndOf="@id/guideline3" 
    app:layout_constraintEnd_toStartOf="@id/guideline4" 
    ... /> 

あなたは肖像画のために、この出力が得られます

縦のスペースに対処するために、高さ0dpを作成し、制約ボタンの上端と下端を適切なガイドラインに合わせます。

<?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" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 

    tools:context="com.satizh.android.constraintlayouttest.MainActivity"> 

    <Button 
     android:id="@+id/button" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginBottom="0dp" 
     android:layout_marginLeft="0dp" 
     android:layout_marginRight="0dp" 

     android:layout_marginTop="0dp" 
     android:layout_weight="68" 
     android:text="5%V30%H" 
     app:layout_constraintBottom_toTopOf="@+id/guideline" 
     app:layout_constraintLeft_toLeftOf="@+id/guideline3" 
     app:layout_constraintRight_toLeftOf="@+id/guideline4" 
     app:layout_constraintTop_toTopOf="@+id/guideline2" /> 

    <Button 
     android:id="@+id/button2" 
     android:layout_width="0dp" 
     android:layout_height="0dp" 
     android:layout_marginBottom="0dp" 
     android:layout_marginLeft="0dp" 
     android:layout_marginRight="0dp" 
     android:layout_marginTop="0dp" 
     android:text="box" 
     app:layout_constraintBottom_toTopOf="@+id/guideline8" 
     app:layout_constraintLeft_toLeftOf="@+id/guideline5" 
     app:layout_constraintRight_toLeftOf="@+id/guideline6" 
     app:layout_constraintTop_toTopOf="@+id/guideline7" 
     app:layout_constraintHorizontal_bias="0.0" /> 

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

    <android.support.constraint.Guideline 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/guideline2" 
     android:orientation="horizontal" 
     app:layout_constraintGuide_percent="0.05" /> 

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

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

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

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

    <android.support.constraint.Guideline 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/guideline7" 
     android:orientation="horizontal" 
     app:layout_constraintGuide_percent="0.2994129" /> 

    <android.support.constraint.Guideline 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/guideline8" 
     android:orientation="horizontal" 
     app:layout_constraintGuide_percent="0.42" /> 

</android.support.constraint.ConstraintLayout> 

対応する出力：の

Answer 2

レイアウトビューで