Czy możliwe jest uzyskanie ujemnego marginesu na układ wiązań, aby uzyskać nakładanie się? Próbuję, aby obraz był wyśrodkowany w układzie i miał widok tekstu, tak aby nakładał się na x dp. Próbowałem ustawić ujemną wartość marginesu, ale bez powodzenia. Byłoby wspaniale, gdyby był sposób na osiągnięcie tego.
118
Odpowiedzi:
Wyjaśnienie: Poniższa odpowiedź pozostaje aktualna, ale chcę wyjaśnić kilka rzeczy. Oryginalne rozwiązanie umieści widok z de facto ujemnym przesunięciem w stosunku do innego widoku, jak podano, i pojawi się w układzie, jak pokazano.
Innym rozwiązaniem jest użycie właściwości translationY, zgodnie z sugestią Amira Khorsandi tutaj . Wolę to rozwiązanie jako prostsze z jednym zastrzeżeniem: tłumaczenie następuje po układzie , więc widoki ograniczone do widoku przesuniętego nie będą zgodne z tłumaczeniem.
Na przykład poniższy kod XML wyświetla dwa TextViews bezpośrednio pod obrazem. Każdy widok jest ograniczony od góry do dołu z widokiem, który pojawia się bezpośrednio nad nim.
A teraz przetłumaczyć „Say My Name” TextView przez
50dp
określającDaje to następujące efekty:
W „Say my name” TextView przesunął się zgodnie z oczekiwaniami, ale „Say it” TextView nie zastosował go jak moglibyśmy się spodziewać. Dzieje się tak, ponieważ tłumaczenie następuje po układzie . Mimo że widok przesuwa układ posta, nadal można go kliknąć w nowej pozycji.
Więc, IMO, idź z translationX i translationY dla ujemnych marginesów w ConstraintLayout, jeśli powyższe zastrzeżenie nie wpływa na twój układ; w przeciwnym razie użyj widżetu przestrzeni, jak opisano poniżej.
Oryginalna odpowiedź
Chociaż nie wydaje się, że ujemne marże będą obsługiwane w programie
ConstraintLayout
, istnieje sposób na osiągnięcie tego efektu za pomocą dostępnych i obsługiwanych narzędzi. Oto obraz, na którym tytuł obrazu nakłada się22dp
od dołu obrazu - w rzeczywistości-22dp
margines:Osiągnięto to za pomocą
Space
widżetu z dolnym marginesem równym żądanemu przesunięciu.Space
Widżet czym ma dolną zamocowaną na dnieImageView
. Teraz wszystko, co musisz zrobić, to ograniczyć górną częśćTextView
z tytułem obrazu do dołuSpace
widżetu.TextView
Zostanie umieszczony w dolnej częściSpace
widoku ignorując margines, który został ustawiony.Poniżej znajduje się kod XML, który zapewnia ten efekt. Zaznaczę, że używam,
Space
ponieważ jest lekki i przeznaczony do tego typu zastosowań, ale mógłbym użyć innego typuView
i uczynić go niewidocznym. (Prawdopodobnie będziesz jednak musiał dokonać korekt.) Możesz również zdefiniować aView
z zerowymi marginesami i wysokością żądanego marginesu wstawki i ograniczyć górną częśćTextView
do górnej krawędzi wstawkiView
.Jeszcze innym podejściem byłoby nałożenie
TextView
górnej częściImageView
przez wyrównanie górnych / dolnych / lewych / prawych i dokonanie odpowiednich korekt marginesów / dopełnienia. Zaletą podejścia przedstawionego poniżej jest to, że ujemny margines można utworzyć bez wielu obliczeń. To wszystko, co oznacza, że istnieje kilka sposobów podejścia do tego.Aktualizacja: szybką dyskusję i prezentację tej techniki można znaleźć w poście na blogu Google Developers Medium .
Ujemny margines dla
ConstraintLayout
XMLźródło
ImageView
jest wyśrodkowany na rodzicu,TextView
nakłada się powyżejImageView
. NastępnieSpace
powoduje błąd, gdy aplikacja wraca z tła. Myślę, że 0dp, 0dp sprawia pewne problemy. A co z po prostu użyjGuideline
.Innym sposobem jest użycie
translationX
lub wtranslationY
ten sposób:będzie działać jak
android:layout_marginRight="-25dp"
źródło
Postępuj zgodnie z tymi dwoma kwestiami:
https://code.google.com/p/android/issues/detail?id=212499 https://code.google.com/p/android/issues/detail?id=234866
źródło
To jest to, co odkryłem po godzinach prób znalezienia rozwiązania.
Rozważmy dwa obrazy, obraz1 i obraz2. Obraz2 ma być umieszczony na górze image1, umieszczonym w prawym dolnym rogu.
Przykład nakładających się widoków
Możemy użyć widżetu Space do nakładania się widoków.
Powiąż cztery boki widżetu Przestrzeń odpowiednio z czterema bokami obrazu1. W tym przykładzie ogranicz lewą stronę elementu image2 z prawą stroną widżetu Space i górną stroną image2 z dolną stroną widżetu Space. Spowoduje to powiązanie obrazu2 z widżetem Przestrzeń, a ponieważ widżet Przestrzeń jest ograniczony ze wszystkich stron, możemy zdefiniować wymagane odchylenie poziome lub pionowe, które przesunie obraz2 zgodnie z wymaganiami.
Dodatkowo, aby umieścić obraz2 na środku dołu obrazu1, możemy ograniczyć lewą i prawą stronę obrazu2 odpowiednio lewą i prawą stroną widżetu Space. Podobnie, możemy umieścić obraz2 w dowolnym miejscu, zmieniając ograniczenia obrazu2 za pomocą widżetu Space.
źródło
Znalazłem sposób, aby to zrobić o wiele prostsze.
Zasadniczo należy mieć ImageView, a następnie w widoku tekstu dodać górne ograniczenie, aby dopasować górne ograniczenie obrazu i po prostu dodać górny margines TextView, aby dopasować, aby uzyskać zachowanie typu -ve marginesu.
źródło
To pomoże wielu
W moim przypadku chcę mieć taki projekt:
Oznacza, że chcę, aby mój obraz był wyświetlany w połowie ich szerokości, więc w zasadzie potrzebuję ujemnego marginesu połowy rzeczywistej szerokości obrazu, ale cały mój układ w układzie z ograniczeniami i układzie z ograniczeniami nie dopuszcza ujemnego marginesu, więc osiągnąłem to za pomocą poniższego kodu
Tak więc ImageView zakończy się na początku wytycznych. a efekt jest taki sam, jak ujemna marża na początku 50 dp.
A także, jeśli szerokość widoku nie jest stała i jest wyrażona w procentach, dzięki czemu można umieścić wytyczne w procentach i osiągnąć dowolny efekt
Miłego kodowania :)
źródło
Musisz tylko użyć widżetu Space w swoim układzie
źródło
To stare pytanie, ale bardzo często zadawane. Najszybszym sposobem osiągnięcia tego jest ograniczenie górnej i dolnej części widoku, do którego chcesz zakotwiczyć, na przykład:
Spowoduje to wyśrodkowanie go w dolnej linii widoku, wyśrodkowany w poziomie.
źródło
Prosty sposób.
Nie jestem pewien, jak najlepiej.
Po prostu zawiń za pomocą LinearLayout
źródło