Próbuję zaimplementować prosty bąbelek czatu przy użyciu pliku ConstraintLayout
. Oto, co staram się osiągnąć:
Jednak wrap_content
wydaje się , że nie działa poprawnie z ograniczeniami. Szanuje marginesy, ale nie oblicza prawidłowo dostępnej przestrzeni. Oto mój układ:
<?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="wrap_content">
<TextView
android:id="@+id/chat_message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintHorizontal_bias="0"
tools:background="@drawable/chat_message_bubble"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum."
android:layout_marginStart="64dp"
android:layout_marginLeft="64dp"
android:layout_marginEnd="32dp"
android:layout_marginRight="32dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>
To renderuje się następująco:
Używam com.android.support.constraint:constraint-layout:1.0.0-beta4
.
czy robię coś źle? Czy to błąd, czy tylko nieintuicyjne zachowanie? Czy mogę osiągnąć właściwe zachowanie za pomocą ConstraintLayout
(wiem, że potrafię używać innych układów, o które ConstrainLayout
dokładnie pytam ).
android
android-layout
android-constraintlayout
Marcin Jedynak
źródło
źródło
tools:background="@drawable/chat_message_bubble"
. Aby go zaimplementować, musisz utworzyć plik chat_message_bubble.xml w folderze do rysowania, a następnie dodać ten kod:<shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#FB4382"/> <corners android:radius="10dip"/> </shape>
Odpowiedzi:
Nieaktualne: zobacz lepszą odpowiedź
Nie, nie możesz robić tego, co chcesz z ConstraintLayout w obecnej postaci (1.0 beta 4):
wrap_content
prosi jedynie widżet o dokonanie pomiaru samego siebie, ale nie ogranicza jego rozwinięcia w przypadku ewentualnych ograniczeńmatch_constraints
(0DP) będzie ograniczyć rozmiar widgetu przeciwko ograniczeniom ... ale nawet jeśli będzie je dopasowaćwrap_content
byłby mniejszy (Twój pierwszy przykład), który jest nie to, co chcesz, albo.Więc teraz nie masz szczęścia w tym konkretnym przypadku: - /
Teraz ... myślimy o dodaniu dodatkowych możliwości, aby
match_constraints
poradzić sobie z tym konkretnym scenariuszem (zachowując się tak, jakbywrap_content
rozmiar nie był większy niż ograniczenia).Nie mogę jednak obiecać, że ta nowa funkcja będzie działać przed wydaniem 1.0.
Edycja : dodaliśmy tę możliwość w wersji 1.0 z atrybutem
app:layout_constraintWidth_default="wrap"
(z szerokością ustawioną na 0dp). Jeśli ustawione, widżet będzie miał taki sam rozmiar, jak przy użyciu wrap_content, ale będzie ograniczony przez ograniczenia (tj. Nie będzie się rozszerzał poza nie)Aktualizacja Teraz te tagi są przestarzałe, zamiast tego użyj layout_width = "WRAP_CONTENT" i layout_constrainedWidth = "true".
źródło
match_constraints
na złożony, możliwy do rysowania będzie po prawej stronie, nawet jeśli jest bardzo krótki tekst.app:layout_constraintWidth_default="wrap"
też użyłem i v1.0.2 biblioteki, ale to nie pomagaZaktualizowano (ConstraintLayout 1.1. +)
Używaj
app:layout_constrainedWidth="true"
zandroid:layout_width="wrap_content"
Wcześniej (przestarzałe):
app:layout_constraintWidth_default="wrap"
zandroid:layout_width="0dp"
źródło
Tak, jak wspomniałem w odpowiedzi udzielonej przez Nikolasa Roarda , należy dodać
app:layout_constraintWidth_default="wrap"
i ustawić szerokość na 0dp. Aby ustawić bąbelek w prawo, należy ustawić wartość 1,0 dlalayout_constraintHorizontal_bias
.Oto ostateczny kod źródłowy:
<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/chat_message" android:layout_width="0dp" android:layout_height="wrap_content" android:padding="16dp" android:layout_marginTop="8dp" android:layout_marginStart="64dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintWidth_default="wrap" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:background="@drawable/chat_message_bubble" android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." /> </android.support.constraint.ConstraintLayout>
W efekcie wygląda to tak:
źródło
app:layout_constraintHorizontal_bias="1.0"
Podobnie jak inne odpowiedzi już powiedziane, od ConstraintLayout 1.0 jest to możliwe, ale od najnowszej wersji (1.1.x) zmienili sposób, w jaki to robisz.
Od wydania ConstraintLayout 1.1 stare atrybuty
app:layout_constraintWidth_default="wrap"
i są obecnie przestarzałe .app:layout_constraintHeight_default="wrap"
Jeśli chcesz zapewnić
wrap_content
zachowanie, ale nadal egzekwować ograniczenia w swoim Widoku, powinieneś ustawić jego szerokość i / lub wysokość nawrap_content
połączenie z atrybutamiapp:layout_constrainedWidth=”true|false”
i / lubapp:layout_constrainedHeight=”true|false”
, jak podano w dokumentach :Jeśli chodzi o najnowszą wersję, zanim odpowiem na to pytanie, ConstraintLayout jest w wersji 1.1.2 .
źródło
@ nicolas-roard odpowiada
app:layout_constraintWidth_default="wrap"
iandroid:layout_width="0dp"
jest teraz WYCOFANE .Śmiało i użyj
app:layout_constrainedWidth="true"
iandroid:layout_width="wrap_content"
.Nie wiem, powód wycofania. Ale ma rację w kodzie źródłowym ConstraintLayout
źródło
Używam tego
app:layout_constraintEnd_toEndOf="parent"
źródło
Powinieneś wymienić
android:layout_width="wrap_content"
z
android:layout_width="match_parent"
z TextView, a następnie odpowiednio dostosuj dopełnienie i marginesy. Zaktualizowałem Twój kod,
<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="wrap_content"> <TextView android:id="@+id/chat_message" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_marginBottom="8dp" android:layout_marginEnd="10dp" android:layout_marginLeft="60dp" android:layout_marginRight="10dp" android:layout_marginStart="60dp" android:layout_marginTop="8dp" android:padding="16dp" app:layout_constraintTop_toTopOf="parent" tools:background="#c9c7c7" tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." />
Otrzymasz ten wynik
źródło