제약 조건 레이아웃을 백분율 값으로 작동시키는 방법은 무엇입니까?

제약 조건 레이아웃을 백분율 값으로 작동시키는 방법은 무엇입니까?

Android Studio 2.2의 Preview 1과 함께 Google은 지원 라이브러리에 새로운 레이아웃을 출시했습니다.ConstraintLayout을 사용하면 Android Studio에서 디자인 도구를 사용하는 것이 더 쉽지만 상대적인 크기(LinearLayout과 같은 '중량' 또는 백분율)를 사용하는 방법을 찾지 못했습니다.백분율을 기준으로 제약 조건을 정의할 수 있는 방법이 있습니까?예를 들어, 보기를 화면의 40%를 차지하게 하고, 보기 사이에 20%의 여백을 만들고, 보기의 너비를 다른 보기 너비의 50%로 설정하시겠습니까?

여기서 빠른 참조를 하는 것이 유용할 수 있습니다.

뷰 배치

가이드라인 사용app:layout_constraintGuide_percent다음과 같이:

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/guideline"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.5"/>

그런 다음 이 지침을 다른 보기의 앵커 포인트로 사용할 수 있습니다.

또는

편향 사용app:layout_constraintHorizontal_bias 및/는app:layout_constraintVertical_bias이 허용될 때 합니다.

<Button
    ...
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintHorizontal_bias="0.25"
    ...
    />

뷰 크기

백분율 값은의 높이이며, " " " " " " " " 은 / " " " 입니다.app:layout_constraintHeight_percent 및/는app:layout_constraintWidth_percent:

<Button
    ...
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.5"
    ...
    />

이에 대한 유용한 추가 사항은 첫 번째 치수에 상대적으로 다른 치수를 설정하는 것입니다. 예를 들어 너비에 따라 높이를 비례적으로 설정합니다.

  app:layout_constraintDimensionRatio="1:1"

현재 이 작업은 몇 가지 방법으로 수행할 수 있습니다.

하나는 가이드라인을 작성하는 것입니다(설계 영역을 마우스 오른쪽 단추로 클릭한 다음 수직/수평 가이드라인 추가를 클릭).그런 다음 지침의 "헤더"를 눌러 위치를 백분율 기준으로 변경할 수 있습니다.마지막으로 보기를 지침으로 제한할 수 있습니다.

또 다른 방법은 편향(백분율)을 사용하여 뷰를 배치한 다음 다른 뷰를 해당 뷰에 고정하는 것입니다.

그렇긴 하지만, 우리는 백분율 기반 차원을 제공하는 방법에 대해 생각해 왔습니다.저는 어떤 약속도 할 수 없지만, 그것은 우리가 추가하고 싶은 것입니다.

"ConstraintLayout1.1.0-beta1"부터는 퍼센트를 사용하여 너비와 높이를 정의할 수 있습니다.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent=".4"

이렇게 하면 화면 너비의 40%로 정의됩니다.이 값과 지침을 백분율로 조합하면 원하는 백분율 기반 레이아웃을 만들 수 있습니다.

ConstraintLayout v1.1의 새로운 릴리스를 통해 이제 다음을 수행할 수 있습니다.

<Button
android:layout_width="0dp"
android:layout_height="0dp"
app:layout_constraintHeight_percent="0.2"
app:layout_constraintWidth_percent="0.65" />

이렇게 하면 버튼이 상위 뷰 높이의 20% 및 너비의 65%로 제한됩니다.

가이드라인 사용 방법

채택된 답변은 지침을 사용하는 방법과 "헤더"가 무엇인지에 대해 약간 불분명합니다.

스텝

먼저 가이드라인을 추가합니다.

Guidline을 선택하거나 조금 이동하여 제약 조건을 볼 수 있도록 합니다.

그런 다음 백분율이 될 때까지 둥근 원("헤더")을 클릭합니다.그런 다음 이 비율을 50% 또는 원하는 대로 끌 수 있습니다.

그런 다음 부모의 일정 비율로 보기를 제한할 수 있습니다(사용).match_constraint시야에).

가이드라인은 매우 귀중합니다 - 그리고 앱:layout_constraintGuide_percent는 훌륭한 친구입니다...하지만 때때로 우리는 가이드라인이 없는 백분율을 원합니다.이제 가중치를 사용할 수 있습니다.

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp"
    tools:context="android.itomerbu.layoutdemo.MainActivity">

    <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.44"/>

    <Button
        android:id="@+id/btnThird"
        android:layout_width="0dp"
        app:layout_constraintHorizontal_weight="1"
        android:layout_height="wrap_content"
        android:text="@string/btnThird"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_marginBottom="8dp"
        app:layout_constraintRight_toLeftOf="@+id/btnTwoThirds"
        app:layout_constraintBottom_toTopOf="@+id/guideline"
        android:layout_marginStart="8dp"
        android:layout_marginLeft="8dp"/>

    <Button
        android:id="@+id/btnTwoThirds"
        app:layout_constraintHorizontal_weight="2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="@string/btnTwoThirds"
        app:layout_constraintBottom_toBottomOf="@+id/btnThird"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/btnThird"/>
</android.support.constraint.ConstraintLayout>

제약 조건 레이아웃 1.0은 보기를 만드는 데 두 가지 지침을 만드는 데 필요한 화면의 비율을 차지합니다.구속조건 레이아웃 1.1에서는 보기를 백분율 너비 또는 높이로 쉽게 구속할 수 있어 더 단순해졌습니다.

환상적이지 않나요?모든 뷰가 layout_constraint를 지원합니다.너비_백분율 및 레이아웃_제약Height_percent 특성입니다.이로 인해 제약 조건이 사용 가능한 공간의 백분율로 고정됩니다.따라서 화면의 일부를 채우도록 버튼 또는 텍스트 보기를 확장하는 것은 몇 줄의 XML로 수행할 수 있습니다.

예를 들어 버튼의 너비를 화면의 70%로 설정하려면 다음과 같이 할 수 있습니다.

<Button
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_constraintWidth_percent="0.7" />

위에서 안드로이드:layout_width를 0dp로 지정했기 때문에 차원을 0dp에 대한 백분율로 입력해야 합니다.

마찬가지로 버튼의 높이를 화면의 20%로 설정하려면 다음과 같이 할 수 있습니다.

<Button
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_constraintHeight_percent="0.2" />

보세요! 우리는 버튼이 높이를 백분율로 사용하기를 원하기 때문에 이번에 안드로이드:layout_height를 0dp로 지정했습니다.

를 ConstraintLayout v1.1.2로 설정해야 .0dp그런 다음 설정합니다.layout_constraintWidth_percent또는layout_constraintHeight_percent과 같은 0과 1 : 다과과같 0은 1이값 한대성속:

<!-- 50% width centered Button -->
<Button
    android:id="@+id/button"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintWidth_percent=".5" />

가 없습니다.)app:layout_constraintWidth_default="percent"또는app:layout_constraintHeight_default="percent"제약 조건 레이아웃 1.1.2 및 이후 버전 포함)

이 코드를 사용해 보십시오.높이 및 너비 백분율은 app:layout_constraintHeight_percent 및 app:layout_constraintWidth_percent를 사용하여 변경할 수 있습니다.

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

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        android:orientation="vertical"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHeight_percent=".6"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_percent=".4"></LinearLayout>

</android.support.constraint.ConstraintLayout>

그라들:

dependencies {
...
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
}

사용할 수 있습니다.app:layout_constraintVertical_weight과 같은 것layout_weightlinearlayout

<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">

<Button
    android:id="@+id/button4"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toLeftOf="@+id/button5"
    app:layout_constraintVertical_weight="1"/>

<Button
    android:id="@+id/button5"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:text="Button"
    app:layout_constraintLeft_toRightOf="@+id/button4"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintVertical_weight="1"/>
</android.support.constraint.ConstraintLayout>

참고:app:layout_constraintVertical_weight(app:layout_constraintHorizontal_weight)와 함께 작동합니다.android:layout_width="0dp"(android:layout_height="0dp"

유용하다고 생각되는 사람을 위해, 당신은layout_constraintDimensionRatio나는 a 안에 있는 많은 아이 뷰.ConstraintLayout그리고 다른 차원의 비율(최소 하나는 너비 또는 높이 중 하나는 0dp여야 함) 예를 정의할 수 있습니다.

 <ImageView
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:src="@drawable/top_image"
        app:layout_constraintDimensionRatio="16:9"        
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"/>

이 경우 가로 세로 비율은 16:9입니다.app:layout_constraintDimensionRatio="16:9"자세한 내용은 여기에서 확인할 수 있습니다.

지침을 사용하여 위치를 백분율 기준으로 변경할 수 있습니다.

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

이 방법을 사용할 수도 있습니다.

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.4"

OP가 원래 요구했던 것이 직접적인 것은 아니지만 비슷한 질문이 있었을 때 이 상황에서 많은 도움이 되었습니다.코드를 통해 레이아웃 창 크기(정기적으로 사용)를 변경하려는 사용자를 위해 추가합니다.onCreate에서 질문 활동에 추가합니다. (80%로 변경)

DisplayMetrics dm = new DisplayMetrics();
getWindowManager().getDefaultDisplay().getMetrics(dm);

int width = dm.widthPixels;
int height = dm.heightPixels;

getWindow().setLayout((int)(width * 0.8), (int)(height * 0.8));

간단히, 그냥 당신의 가이드라인 태그에서 교체하세요.

app:layout_constraintGuide_begin="291dp"

와 함께

app:layout_constraintGuide_percent="0.7"

여기서 0.7은 70%를 의미합니다.

또한 이제 가이드라인을 끌면 끌린 값이 %age 단위로 표시됩니다.

언급URL : https://stackoverflow.com/questions/37318228/how-to-make-constraintlayout-work-with-percentage-values