Jak sprawić, by ConstraintLayout działał z wartościami procentowymi?

207

Z podglądem 1 Studio Android 2.2 Google wydała nowy układ w swojej bibliotece wsparcia: ConstraintLayout. Dzięki ConstraintLayout łatwiej jest użyć narzędzia do projektowania w Android Studio, ale nie znalazłem sposobu na użycie względnych rozmiarów (procentów lub „wag” jak w LinearLayout). Czy istnieje sposób zdefiniowania ograniczeń opartych na procentach? Np. Spraw, aby widok zajmował 40% ekranu, utworzyć 20% marginesu między widokami, ustawić szerokość widoku na 50% szerokości innego widoku?

Jurij Fiodorow
źródło
3
Dodano obsługę procentową dla szerokości lub wysokości w version 1.1ConstraintLayout. Zobacz „Wymiar procentowy” na developer.android.com/reference/android/support/constraint/… lub niektóre z nowszych odpowiedzi.
sunadorer

Odpowiedzi:

225

Obecnie możesz to zrobić na kilka sposobów.

Jednym z nich jest utworzenie prowadnic (kliknij prawym przyciskiem myszy obszar projektowania, a następnie kliknij dodaj prowadnicę pionową / poziomą). Następnie możesz kliknąć „nagłówek” prowadnicy, aby zmienić położenie na procentowe. Wreszcie możesz ograniczyć widoki do wytycznych.

Innym sposobem jest pozycjonowanie widoku przy użyciu odchylenia (procent), a następnie zakotwiczenie innych widoków w tym widoku.

To powiedziawszy, zastanawialiśmy się, jak zaoferować wymiary oparte na procentach. Nie mogę nic obiecać, ale chcielibyśmy to dodać.

Romain Guy
źródło
1
0 głosów w dół Czy mogę poprosić o dalsze działania? Próbuję ustawić ImageView na 60% szerokości, ale utrzymuję proporcje 16: 9. Chcę, aby szerokość była stała, ale wysokość ImageView powinna być dynamiczna. Czy to możliwe dzięki ConstraintLayout? Walczę o to, aby zadziałało - kończę z ustalonymi wartościami szerokości / wysokości 0, chyba że podam wymiary zakodowane na stałe.
MattWilliams89
3
@ MattWilliams89 Istnieje parametr o nazwie layout_constraintDimensionRatio, myślę, że może być przydatny w twoim przypadku, napisz tam „16: 9”. Nie udało mi się jednak zbudować z niego układu, obraz staje się ogromny
Yury Fedorov
1
@RomainGuy, jak zmienić pozycjonowanie w procentach w nagłówku wytycznych? próbowałem kliknąć prawym przyciskiem myszy i nic się nie
pojawiło
21
Dla tych, którzy zastanawiają się dokładnie, co to jest nagłówek linii pomocniczej, to okrąg ma strzałkę w górę lub w dół lub symbol procentowy. Kliknięcie przełącza pomiędzy aplikacją: layout_constraintGuide_begin, app: layout_constraintGuide_end i app: layout_constraintGuide_percent w XML. Napotkałem mały problem (na ConstraintLayout w wersji 1.0.0-alpha8, w którym musiałem kliknąć prowadnicę, przytrzymać mysz i przeciągnąć do kółka, aby przełączyć je w edytorze, ale jestem pewien, że ten błąd zostanie wkrótce naprawiony ,
lustig
4
Możesz to również ustawić w XML układu, używającapp:layout_constraintGuide_percentage
piratemurray
215

Przydatne może być szybkie zapoznanie się z tym punktem.

Umieszczenie widoków

Użyj wytyczną przy app:layout_constraintGuide_percenttak:

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

Następnie możesz użyć tej wytycznej jako punktów kontrolnych dla innych widoków.

lub

Użyj stronniczości za pomocą app:layout_constraintHorizontal_biasi / lub, app:layout_constraintVertical_biasaby zmodyfikować lokalizację widoku, gdy pozwala na to dostępna przestrzeń

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

Rozmiar widoków

Inną wartością procentową jest wysokość i / lub szerokość elementów, za pomocą app:layout_constraintHeight_percenti / lub app:layout_constraintWidth_percent:

<Button
    ...
    android:layout_width="0dp"
    app:layout_constraintWidth_percent="0.5"
    ...
    />
Amir Uval
źródło
3
dlaczego ma szerokość ustawioną na 1dp?
user924
1
@ user924 Sensowne byłoby podanie wytycznych o szerokości 0dp, nie wiem dlaczego programiści, którzy to zastosowali, zdecydowali się na 1dp. Może dlatego, że 0dp jest uważane za „rozciąganie” podczas używania ciężarów.
Amir Uval,
3
@ user924: 0dpjest używany w ConstraintLayout do wskazania dynamicznego rozmiaru. Zobacz developer.android.com/reference/android/support/constraint/…
serv-inc 5'18
1
@ serv-inc, ale tutaj 1dpnie 0dp... o tym mówię
924
3
@ user924: musisz ustawić szerokość. 0dpjest już zarezerwowany, więc 1dpwydaje się rozsądny.
serv-inc
109

Od „ConstraintLayout1.1.0-beta1” można użyć wartości procentowej do zdefiniowania szerokości i wysokości.

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

Spowoduje to określenie szerokości wynoszącej 40% szerokości ekranu. Kombinacja tego i wytycznych w procentach pozwala utworzyć dowolny układ oparty na procentach.

hoford
źródło
6
W układzie ograniczenia 1.0.2 wartość procentowa dla parametru layout_constraintWidth_default nie jest obsługiwana. Myślę, że właściwym sposobem jest skorzystanie z Wytycznych.
vovahost
1
współpracuje z Android Studio 3.0 zbudowanym 20 października 2017 r.
Douarbou
5
Jak stwierdzono w odpowiedzi, zostało to dodane w version 1.1ConstraintLayout. Dodatkowe _default="percent"nie jest już potrzebne w stabilnej wersji! Zobacz „Wymiar procentowy” na developer.android.com/reference/android/support/constraint/…
sunadorer
@hoford, w przypadku widoku zawierającego tekst, którego rozmiar należy zdefiniować w spjednostkach, w jaki sposób rozmiar tekstu może być automatycznie proporcjonalny do rozmiaru widoku (który sam w sobie jest definiowany proporcjonalnie do całkowitego rozmiaru układu, tj. w „procentach”) ?
Bliss,
77

Dzięki nowej wersji ConstraintLayout v1.1 możesz teraz wykonywać następujące czynności:

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

Spowoduje to ograniczenie przycisku do 20% wysokości i 65% szerokości widoku rodzica.

Adam
źródło
1
dla mnie działało tylko wtedy, gdy zmieniłem z „android:” na „app:” -> app: layout_constraintHeight_percent = "0.2”
Kirill Karmazin
Jest to dla mnie koniecznością, gdy podążam za płynnym układem projektowania materiałów. material.io/design/layout/…
@Adam, w przypadku widoku zawierającego tekst, którego rozmiar należy zdefiniować w spjednostkach, w jaki sposób rozmiar tekstu może być automatycznie proporcjonalny do rozmiaru widoku (który sam w sobie jest definiowany proporcjonalnie do całkowitego rozmiaru układu, tj. W „procentach”) ?
Bliss,
1
@Bliss Wygląda na to, że to może pomóc: developer.android.com/guide/topics/ui/look-and-feel/... Sam nigdy tego nie używałem.
Adam
43

Jak korzystać z Wytycznych

Przyjęta odpowiedź jest nieco niejasna, jak korzystać z wytycznych i czym jest „nagłówek”.

Kroki

Najpierw dodaj wytyczną.

wprowadź opis zdjęcia tutaj

Wybierz linię prowadzącą lub przesuń ją trochę, aby uwidocznić ograniczenia.

wprowadź opis zdjęcia tutaj

Następnie kliknij okrągły okrąg („nagłówek”), aż stanie się procentem. Następnie możesz przeciągnąć ten procent do 50% lub cokolwiek chcesz.

wprowadź opis zdjęcia tutaj

Następnie możesz ograniczyć widok do Wytycznych, aby uczynić go pewnym procentem rodzica (używając match_constraintw widoku).

wprowadź opis zdjęcia tutaj

Suragch
źródło
Gdzie powinien być widoczny „nagłówek”? Moim zdaniem nie pojawia się.
Marcel50506
@ Marcel50506, upewnij się, że wyświetlane są widoki Projekt i Blueprint. To da ci najlepszą szansę na zobaczenie. Jeśli widzisz linię prowadzącą, spróbuj ją kliknąć, aby ją wybrać. Jeśli nie widzisz linii, spróbuj kliknąć element prowadnicy w menu Drzewo komponentów, który powinien znajdować się po lewej stronie (zakładając, że dodałeś już prowadnicę).
Suragch,
1
Nie widzę koła, ale klikając lewą stronę linii pomocniczej, mogę zmienić go na wartości procentowe. Myślę, że renderują problem. Dziękuję Ci.
Marcel50506
To najlepsza odpowiedź, ponieważ proponuje lepsze podejście do układu. Możemy wyrównać wiele widoków na podstawie wytycznych zamiast dodawać procent tylko do jednego widoku
Nguyen Minh Hien
33

Wytyczne są nieocenione - a aplikacja: layout_constraintGuide_percent jest świetnym przyjacielem ... Jednak czasami chcemy procentów bez wytycznych. Teraz można używać obciążników :

android:layout_width="0dp"
app:layout_constraintHorizontal_weight="1"

Oto bardziej kompletny przykład wykorzystujący wytyczne z dodatkowymi wagami :

<?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>
TomerBu
źródło
2
@Plumbus - Wagi są równoważne procentom (dowolny procent można matematycznie przeliczyć na wagę i odwrotnie). Będąc wybrednym w terminologii, nie rozumiesz sedna odpowiedzi.
Scott Biggs
11

W przypadku ConstraintLayout v1.1.2 wymiar należy ustawić na, 0dpa następnie ustawić atrybuty layout_constraintWidth_percentlub layout_constraintHeight_percentna wartość z zakresu od 0 do 1, na przykład:

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

(Nie musisz ustawiać app:layout_constraintWidth_default="percent"ani app:layout_constraintHeight_default="percent"używać ConstraintLayout 1.1.2 i następujących wersji)

Bubu
źródło
10

Układ ograniczeń 1.0 sprawiający, że widok zajmuje procent wymaganego ekranu, tworząc dwie wytyczne. W Constraint Layout 1.1 został uproszczony, umożliwiając łatwe ograniczenie dowolnego widoku do procentowej szerokości lub wysokości.

wprowadź opis zdjęcia tutaj

Czy to nie fantastyczne? Wszystkie widoki obsługują atrybuty layout_constraintWidth_percent i layout_constraintHeight_percent. Spowoduje to, że ograniczenie zostanie ustalone na procent dostępnego miejsca. Tak więc rozwinięcie przycisku lub TextView do wypełnienia procenta ekranu można wykonać za pomocą kilku wierszy XML.

Na przykład, jeśli chcesz ustawić szerokość przycisku na 70% ekranu, możesz to zrobić w następujący sposób:

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

Należy pamiętać, że należy podać wymiar, który należy zastosować jako wartość procentową do 0dp, ponieważ podaliśmy android: layout_width do 0dp powyżej.

Podobnie, jeśli chcesz ustawić wysokość przycisku na 20% ekranu, możesz to zrobić w następujący sposób:

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

Widzieć! tym razem podaliśmy android: layout_height do 0dp, ponieważ chcemy, aby przycisk używał wysokości jako wartości procentowej.

Ashish Satpute
źródło
8

Wypróbuj ten kod. Możesz zmienić wartości procentowe wysokości i szerokości za pomocą app: layout_constraintHeight_percent i 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>

Stopień:

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

wprowadź opis zdjęcia tutaj

żywa miłość
źródło
7

możesz użyć app:layout_constraintVertical_weighttego samego jak layout_weightwlinearlayout

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

UWAGA: app:layout_constraintVertical_weight( app:layout_constraintHorizontal_weight) będzie działać z android:layout_width="0dp"(android:layout_height="0dp"

vuhung3990
źródło
5

Dla kogoś, kto może się przydać, możesz użyć layout_constraintDimensionRatiodowolnego widoku podrzędnego wewnątrz a, ConstraintLayouta my możemy zdefiniować stosunek wysokości lub szerokości drugiego wymiaru (co najmniej jeden musi mieć wartość 0dp albo szerokość albo wysokość) przykład

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

w tym przypadku proporcje to 16: 9 app:layout_constraintDimensionRatio="16:9" , więcej informacji znajdziesz TUTAJ

Javier
źródło
3

Wiem, że nie było to bezpośrednio to, o co pierwotnie prosił OP, ale bardzo mi pomogło w tej sytuacji, gdy miałem podobne pytanie. Dodanie tego dla osób, które chcą zmienić rozmiar okna układu (z którego regularnie korzystam), za pomocą kodu . Dodaj to do swojego onCreate w pytaniu. (Zmienia to na 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));
David Azzi
źródło
2

Po prostu po prostu zamień w etykiecie z wytycznymi

app:layout_constraintGuide_begin="291dp"

z

app:layout_constraintGuide_percent="0.7"

gdzie 0,7 oznacza 70%.

Również jeśli teraz spróbujesz przeciągnąć prowadnice, przeciągnięta wartość pojawi się teraz w% wieku.

Udit Kapahi
źródło
2

Korzystając z prowadnic, możesz zmienić położenie na procentowe

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

Możesz także użyć w ten sposób

android:layout_width="0dp"
app:layout_constraintWidth_default="percent"
app:layout_constraintWidth_percent="0.4"
Ashish Satpute
źródło