Комбинация макетов ограничений SPREAD и PACKED

Я хочу создать следующий ConstraintLayout :

введите описание изображения здесь

Другими словами, я хочу иметь цепочку, в которой все элементы разложены и упакованы только вторые и третьи. Я могу сделать это, удалив третий элемент из цепочки и применив к нему следующий код:

app:layout_constraintTop_toBottomOf="@+id/second_element"

это работает как ожидалось.

НО

В случае небольшого устройства, где эта цепь сдвинута, третий элемент будет выше четвертого элемента . Как это:

введите описание изображения здесь

В этом случае мне нужно, чтобы он был расположен равномерно:

введите описание изображения здесь

Спасибо за любую помощь.

Всего 3 ответа


Попробуй это,

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
    android:orientation="vertical">

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonOne"
        android:layout_width="wrap_content"
        app:layout_constraintVertical_chainStyle="packed"
        android:layout_height="wrap_content"
        app:layout_constraintVertical_bias="0"
        app:layout_constraintBottom_toTopOf="@+id/buttonTwo"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonTwo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/buttonThree"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonOne" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonThree"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/buttonFour"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonTwo" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonFour"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toTopOf="@+id/buttonFive"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonThree" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/buttonFive"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/buttonFour" />

</androidx.constraintlayout.widget.ConstraintLayout>

Представления 2 и 3 могут быть объединены в их собственную группу представлений, и группа представлений будет участвовать в цепочке. Это будет работать, но промежуток между этими двумя видами будет постоянным и может выглядеть странно на маленьком экране, если этот интервал выглядит больше, чем другой интервал.

Другой подход состоит в том, чтобы удалить третий элемент из цепочки, как вы уже упоминали, но искать совпадение между третьим и четвертым элементами. Когда есть перекрытие, цепь может быть модифицирована, чтобы включать все элементы в расположении упакованной цепи. Код для этого будет выглядеть примерно так:

class MainActivity : AppCompatActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val constraintLayout = findViewById<ConstraintLayout>(R.id.mainLayout)
        constraintLayout.doOnLayoutChange {
            val tv3 = findViewById<View>(R.id.textView3)
            val tv4 = findViewById<View>(R.id.textView4)
            if (tv4.top < tv3.bottom) {
                val constraintSet = ConstraintSet()
                constraintSet.clone(constraintLayout)
                constraintSet.createVerticalChain(
                    ConstraintSet.PARENT_ID,
                    ConstraintSet.TOP,
                    ConstraintSet.PARENT_ID,
                    ConstraintSet.BOTTOM,
                    intArrayOf(
                        R.id.textView1,
                        R.id.textView2,
                        R.id.textView3,
                        R.id.textView4,
                        R.id.textView5
                    ),
                    null,
                    ConstraintSet.CHAIN_SPREAD
                )
                constraintSet.applyTo(constraintLayout)
            }
        }
    }
}

inline fun View.doOnLayoutChange(crossinline f: () -> Unit) =
    addOnLayoutChangeListener(object : View.OnLayoutChangeListener {
        override fun onLayoutChange(
            v: View?,
            left: Int,
            top: Int,
            right: Int,
            bottom: Int,
            oldLeft: Int,
            oldTop: Int,
            oldRight: Int,
            oldBottom: Int
        ) {
            removeOnLayoutChangeListener(this)
            f()
        }
    })

Надеюсь, этот код поможет вам, он реагирует на все размеры экрана устройства. Если вы найдете правильный ответ, пожалуйста, исправьте его.

activity_man.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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:context=".Activity_Camera">

    <Button
        android:id="@+id/first_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#03A9F4"
        android:padding="10dp"
        android:text="1"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.20" />

    <Button
        android:id="@+id/secon_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:backgroundTint="#F44336"
        android:padding="10dp"
        android:text="2"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.501"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/first_id"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/third_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:backgroundTint="#FF5722"
        android:padding="10dp"
        android:text="3"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/secon_id"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/four_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:backgroundTint="#8BC34A"
        android:padding="10dp"
        android:text="4"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/third_id"
        app:layout_constraintVertical_bias="0.0" />

    <Button
        android:id="@+id/five_id"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:backgroundTint="#673AB7"
        android:padding="10dp"
        android:text="5"
        android:textAlignment="center"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.50"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/four_id"
        app:layout_constraintVertical_bias="0.0" />

</androidx.constraintlayout.widget.ConstraintLayout>

Есть идеи?

10000