Как использовать ту же технику CSS «отрицательный запас» в макете?

Question

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

<?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:context=".HomeActivity">
    <TextView
    android:id="@+id/txt_home_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:elegantTextHeight="true"
    android:padding="30dp"
    android:text="Welcome!"
    android:textColor="#ffffff"
    android:textSize="28sp"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
<FrameLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginBottom="20dp">
    <ImageView
        android:id="@+id/home_logo"
        android:layout_width="90dp"
        android:layout_height="80dp"
        android:scaleType="fitCenter"
        android:src="@drawable/mylogo" />
</FrameLayout>
</android.support.constraint.ConstraintLayout>

Вот коробка:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#2d3669"></solid>
            <corners android:radius="50dp"></corners>
            <gradient android:angle="90"
                android:startColor="#392800"
                android:endColor="#faae03"/>
        </shape>
    </item>
</selector>

Я знаю в ConstraintLayout, как располагать предметы рядом друг с другом, но я могу 'не могу понять, как поставить лог на TextView, чтобы половина его осталась снаружи!Я не могу найти ключевое слово, которое приводит к таким примерам в Google.

Answer 1

Для этого есть как минимум 2 различных способа.

1. Якорь

Если вы хотите, чтобы центр логотипа находился точно по нижнему краю TextView, используйте CoordinatorLayout в качестве прямого родительского представления логотипа и TextView, а также используйте свойства XML app:layout_anchor и app:layout_anchorGravity для логотипа. , Для вашего примера значение app:layout_anchor будет идентификатором TextView, а значение app:layout_anchorGravity будет «нижним | концом».

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

2. Отрицательные поля (да)

Android фактически поддерживает отрицательные поля, хотя, вероятно, не с ConstraintLayout. Это определенно работает с RelativeLayout, хотя! Учитывая, что вы хотите, чтобы ваш ImageView перекрывал TextView, он будет выглядеть так:

<RelativeLayout
    ...

    <TextView
        android:id="@+id/myTextView"
        ... />

    <ImageView
        android:layout_below="@+id/myTextView"
        android:layout_marginTop="-30dp"
        ... />
 </RelativeLayout>

При выполнении этого также учитывайте порядок Z. В моем примере выше ImageView будет нарисован поверх TextView, потому что он объявлен после TextView в его родительском. Если бы ImageView был объявлен первым, TextView был бы нарисован поверх него.

Answer 2

Вот, пожалуйста:

<?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:context=".MainActivity"
    tools:layout_editor_absoluteY="81dp">

<TextView
    android:id="@+id/txt_home_title"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/box"
    android:elegantTextHeight="true"
    android:padding="30dp"
    android:text="Welcome!"
    android:textColor="#ffffff"
    android:textSize="28sp"
    tools:layout_editor_absoluteX="129dp"
    tools:layout_editor_absoluteY="0dp" />

<android.support.v4.widget.Space
    android:id="@+id/space"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:layout_marginBottom="32dp"
    app:layout_constraintBottom_toBottomOf="@+id/txt_home_title"
    app:layout_constraintLeft_toLeftOf="@id/txt_home_title"
    app:layout_constraintRight_toRightOf="@id/txt_home_title" />

<ImageView
    android:id="@+id/home_logo"
    android:layout_width="98dp"
    android:layout_height="84dp"
    android:scaleType="fitCenter"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintHorizontal_bias="0.687"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/space" />

</android.support.constraint.ConstraintLayout>

Выход:

Пояснение:

Мы не можем использовать отрицательную маржу в ConstraintLayout, поскольку официально не поддерживается , поэтому нам нужно обойти это. Добавьте пустой вид, т.е. Space между ImageView и TextView и установите android:layout_marginBottom="32dp" в Space вид, и все готово.

Я следовал за этим ответом CommonsWare.