/ / ConstraintLayout - центриране на изгледи един до друг вертикално или хоризонтално - Android, ориентиране на Android, центриране, android-constraintlayout

ConstraintLayout - центриране на изгледи едно до друго вертикално или хоризонтално - андроид, ориентиране на Android, центриране, андроид-constraintlayout

Как да центрирате подравняването на 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

Правилното решение

Добре е, че сте създали веригатамежду тези три изгледа. С веригата можете да посочите "стил" на веригата и това ще повлияе върху начина, по който се разпространяват изгледите по оста на веригата. Стилът на веригата може да се контролира от бутона "верига" точно под изгледа:

въведете описанието на изображението тук

Кликнете върху него няколко пъти, за да превключвате между всичките три режима:

разпространение (по подразбиране)
въведете описанието на изображението тук

spread_inside
въведете описанието на изображението тук

натъпкан
въведете описанието на изображението тук

Както виждаш - packed е това, което искате.
Настройването на стила на веригата ще доведе до добавянето на следния атрибут към първото дете във веригата, така че можете да го направите и от XML:

app:layout_constraintVertical_chainStyle="packed"

Naive разтвор

Предложеното решение в другия отговор може да изглеждакакто работи, но в действителност не е подходящо решение за вашия проблем. Помислете за случая, когато имате изгледи с различни височини, позволявайки да кажете, че долната е по-голяма. Това решение ще заключи средния изглед в центъра и ще позиционира други изгледи отгоре и отдолу. Това няма да доведе до "центрирана група" (само средният изглед ще бъде центриран). Можете да видите сравнението на изображението по-долу:

въведете описанието на изображението тук


6 за отговор № 2

От редактора на оформлението на Android Studio,

  1. плъзнете и пуснете три бутона в редактора на Layout на Android Studio,

  2. Изберете тези бутони заедно с плъзгане на мишката

  3. Поставете ги вертикално, като използвате бутона "пакет" в "Редактор на оформление"

  4. Центрирайте ги хоризонтално, като използвате бутона "Align-Center horizontally"

  5. Центрирайте ги вертикално, като използвате бутона "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"