Размещение кнопки, перекрывающей два представления в Android

Я хотел бы разместить такую кнопку (перекрытие двух представлений, по центру):

Я попытался решить проблему с помощью RelativeLayout и отрицательного поля, но почему-то не могу перекрыть два представления. Вместо этого кнопка всегда помещается внизу изображения. Любые идеи?

Заранее спасибо за помощь!

Вот мой код:

<RelativeLayout
        android:layout_width = "match_parent"
        android:layout_height = "wrap_content">

        <ImageView
            android:id = "@+id/tour_image"
            android:layout_width = "match_parent"
            android:layout_height = "220dp" />

        <RelativeLayout
            android:layout_width = "wrap_content"
            android:layout_height = "wrap_content"
            android:layout_alignParentBottom = "true"
            android:layout_alignParentEnd = "true"
            android:layout_marginBottom = "-35dp"
            android:layout_marginEnd = "16dp">

            <Button
                android:id = "@+id/go_to_map_button"
                style = "@style/FloatingActionButton.Light"
                android:layout_width = "70dp"
                android:layout_height = "70dp"
                android:drawableTop = "@drawable/ic_directions_walk_color_24dp"
                android:paddingTop = "12dp"
                android:text = "@string/tour_button_show_map"
                android:textAllCaps = "true"
                android:textAppearance = "@style/p.Small"
                android:textColor = "@color/primary_main" />
        </RelativeLayout>
    </RelativeLayout>

Код приводит к следующему макету:

Размещение кнопки, перекрывающей два представления в Android

Вы также можете взглянуть на этот ответ :: stackoverflow.com/questions/24459352/…

— 27.03.2018 23:48

android android-layout

27.03.2018 22:42

Коллекции (ArrayList , HashSet , HashMap)

193

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

На мой взгляд, лучший способ справиться с этим - преобразовать существующий RelativeLayout верхнего уровня в ConstraintLayout. Руководство разработчика для ConstraintLayout доступно здесь: https://developer.android.com/training/constraint-layout/index.html

Если у вас есть ConstraintLayout верхнего уровня, вы можете расположить представление на краю двух представлений, ограничив верх и низ кнопки до края представления:

<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">

    <View
        android:id = "@+id/top"
        android:layout_width = "0dp"
        android:layout_height = "100dp"
        android:background = "#caf"
        app:layout_constraintTop_toTopOf = "parent"
        app:layout_constraintLeft_toLeftOf = "parent"
        app:layout_constraintRight_toRightOf = "parent"/>

    <View
        android:id = "@+id/bottom"
        android:layout_width = "0dp"
        android:layout_height = "100dp"
        android:background = "#fac"
        app:layout_constraintTop_toBottomOf = "@+id/top"
        app:layout_constraintLeft_toLeftOf = "parent"
        app:layout_constraintRight_toRightOf = "parent"/>

    <View
        android:id = "@+id/overlap"
        android:layout_width = "40dp"
        android:layout_height = "40dp"
        android:layout_marginRight = "24dp"
        android:background = "#fff"
        app:layout_constraintTop_toBottomOf = "@+id/top"
        app:layout_constraintRight_toRightOf = "@+id/top"
        app:layout_constraintBottom_toBottomOf = "@+id/top"/>

</android.support.constraint.ConstraintLayout>

Важной частью этого кода является то, что представление "перекрытия" имеет эти два ограничения:

app:layout_constraintTop_toBottomOf = "@+id/top"
app:layout_constraintBottom_toBottomOf = "@+id/top"

Они говорят «сопоставить мой верхний край с нижним краем другого вида» и «сопоставить мой нижний край с нижним краем другого вида». Очевидно, что это невозможно, так как вид имеет ненулевую высоту, и поэтому ConstraintLayout автоматически разместит его так, чтобы он был отцентрирован на краю другого вида. Более подробная информация доступна в руководстве разработчика, которое я указал выше.

Это решение сработало отлично. Большое спасибо за прекрасное объяснение!

— 28.03.2018 14:10

Отлично! Большое спасибо !

— 19.04.2021 12:04

27.03.2018 22:56