Как да центрирате подравняването на 3 бутона едно до друго вертикално ConstraintLayout
?
За да бъде ясно, искам да преобразувам тази проста структура на оформлението в плосък потребителски интерфейс ConstraintLayout
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:orientation="vertical">
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</FrameLayout>
Получих най-близкото решение, както следва
<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/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintBottom_toTopOf="@+id/button2"
/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
tools:layout_conversion_absoluteHeight="48dp"
tools:layout_conversion_absoluteWidth="88dp"
tools:layout_conversion_absoluteX="148dp"
tools:layout_conversion_absoluteY="259dp"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintTop_toBottomOf="@+id/button"
app:layout_constraintRight_toRightOf="parent"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintLeft_toLeftOf="parent"
tools:layout_conversion_absoluteHeight="48dp"
tools:layout_conversion_absoluteWidth="88dp"
tools:layout_conversion_absoluteX="148dp"
tools:layout_conversion_absoluteY="307dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2"
app:layout_constraintRight_toRightOf="parent"/>
</android.support.constraint.ConstraintLayout>
Но ясно, можете да видите, че получената продукцияне съвпада с изискваната. Не искам никаква разлика или интервал между 3-те бутона, всичко, което искам, е да центрирам подравняването на тези 3 бутона една до друга вертикално, точно както са в един LinearLayout
който има вертикална ориентация.
Отговори:
18 за отговор № 1Правилното решение
Добре е, че сте създали веригатамежду тези три изгледа. С веригата можете да посочите "стил" на веригата и това ще повлияе върху начина, по който се разпространяват изгледите по оста на веригата. Стилът на веригата може да се контролира от бутона "верига" точно под изгледа:
Кликнете върху него няколко пъти, за да превключвате между всичките три режима:
разпространение (по подразбиране)
Както виждаш - packed
е това, което искате.
Настройването на стила на веригата ще доведе до добавянето на следния атрибут към първото дете във веригата, така че можете да го направите и от XML:
app:layout_constraintVertical_chainStyle="packed"
Naive разтвор
Предложеното решение в другия отговор може да изглеждакакто работи, но в действителност не е подходящо решение за вашия проблем. Помислете за случая, когато имате изгледи с различни височини, позволявайки да кажете, че долната е по-голяма. Това решение ще заключи средния изглед в центъра и ще позиционира други изгледи отгоре и отдолу. Това няма да доведе до "центрирана група" (само средният изглед ще бъде центриран). Можете да видите сравнението на изображението по-долу:
6 за отговор № 2
От редактора на оформлението на Android Studio,
плъзнете и пуснете три бутона в редактора на Layout на Android Studio,
Изберете тези бутони заедно с плъзгане на мишката
Поставете ги вертикално, като използвате бутона "пакет" в "Редактор на оформление"
Центрирайте ги хоризонтално, като използвате бутона "Align-Center horizontally"
Центрирайте ги вертикално, като използвате бутона "Align-Center vertically"
пакет всички тези три бутона в a вертикално опакована верига използвайки
app:layout_constraintVertical_chainStyle="packed"
добавете наляво и надясно ограничения за всички тези три бутона като
parent
<?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:layout_editor_absoluteY="25dp"
tools:layout_editor_absoluteX="0dp">
<Button
android:id="@+id/button1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintBottom_toTopOf="@+id/button2"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<Button
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_conversion_absoluteHeight="48dp"
tools:layout_conversion_absoluteWidth="88dp"
tools:layout_conversion_absoluteX="148dp"
tools:layout_conversion_absoluteY="259dp"
app:layout_constraintVertical_chainStyle="packed"
app:layout_constraintBottom_toTopOf="@+id/button3"
app:layout_constraintTop_toBottomOf="@+id/button1"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
<Button
android:id="@+id/button3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
tools:layout_conversion_absoluteHeight="48dp"
tools:layout_conversion_absoluteWidth="88dp"
tools:layout_conversion_absoluteX="148dp"
tools:layout_conversion_absoluteY="307dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintTop_toBottomOf="@+id/button2"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintLeft_toLeftOf="parent"/>
</android.support.constraint.ConstraintLayout>
1 за отговор № 3
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toStartOf="parent"