Не удается добиться хорошего перекрытия с RelativeLayout

ProgramBox

Не удается добиться хорошего перекрытия с RelativeLayout

Post author:admin
Запись опубликована:6 мая, 2023
Post category:Вопросы по программированию

#android #overlapping #android-relativelayout

#Android #перекрытие #android-relativelayout

Вопрос:

Я хотел бы сделать презентацию, подобную этой: (сделано с Gimp ) Хорошая часть с 03 сентября.

И на данный момент я получаю только что-то вроде этого : Плохой результат

Мой XML-файл макета на данный момент выглядит следующим образом :

 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@ id/itemRoot"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="4sp"
android:orientation="vertical">
<LinearLayout
    android:id="@ id/bigbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_marginTop="20px"
android:background="#caced4"
android:clipChildren="false"
android:onClick="itemClicked">
    <RelativeLayout
    android:id="@ id/box"
    android:layout_marginTop="-10px"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    >
        <TableLayout android:id="@ id/TableLayout01"
        android:layout_width="40dip" 
        android:layout_height="40dip"
        android:background="@drawable/corner"
        >
        <TextView android:text="03 sept."
        android:background="#424e5f" 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="3px"
        android:layout_marginBottom="3px"
        android:layout_marginRight="3px"
        android:layout_marginTop="3px"
        android:id="@ id/itemPubdate" 
        android:gravity="center" android:textStyle="bold"/>
        </TableLayout>
    </RelativeLayout>
    <LinearLayout 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:paddingLeft="4sp">
        <TextView android:id="@ id/itemTitle"
        android:text="Arrêtez moi ces répondeurs d'email"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="2"
        android:textColor="#424e5f"
        android:textSize="13sp"
        android:textStyle="bold"/>
        <TextView android:id="@ id/itemDescription"
        android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="#000000"
        android:maxLines="3"
        android:textSize="11sp"/>
    </LinearLayout>
</LinearLayout>

Я пробовал много комбинаций с android:clipChildren="false" без какого-либо хорошего результата.. Если у кого-то есть решение для этого… это мне очень поможет.

Спасибо,

Ответ №1:

Вы также могли бы попробовать упрощенный макет, например:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@ id/itemRoot" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:paddingBottom="4sp">
    <LinearLayout android:paddingLeft="45dip" android:background="#caced4"
        android:layout_width="fill_parent" android:layout_height="wrap_content" 
        android:orientation="vertical" android:layout_marginTop="10dp"
        android:clipChildren="false" android:onClick="itemClicked">
        <TextView android:id="@ id/itemTitle"
            android:text="Arrêtez moi ces répondeurs d'email"
            android:layout_width="wrap_content" android:layout_height="wrap_content" 
            android:maxLines="2" android:textColor="#424e5f" android:textSize="13sp"
            android:textStyle="bold" />
        <TextView android:id="@ id/itemDescription"
            android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
            android:layout_width="wrap_content" android:layout_height="wrap_content" 
            android:textColor="#000000" android:maxLines="3" android:textSize="11sp" />
    </LinearLayout>
    <TableLayout android:id="@ id/TableLayout01" android:background="@drawable/corner"
        android:layout_width="40dip" android:layout_height="40dip">
        <TextView android:id="@ id/itemPubdate" android:text="03 sept."
            android:background="#424e5f" android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="3px" android:layout_marginBottom="3px"
            android:layout_marginRight="3px" android:layout_marginTop="3px"
            android:gravity="center" android:textStyle="bold" />
    </TableLayout>
</RelativeLayout>

или, подумав немного больше об этом, воспользуйтесь всеми преимуществами RelativeLayout .
Это содержало бы только ваш элемент календаря ( TableLayout ) и два TextViews , но для этого вам, вероятно, понадобится пользовательский drawable (простой однотонный с android:top="10dp" набором.

Обновление:
С RelativeLayout помощью двух пользовательских чертежей (из которых у вас уже частично есть: corner ) вы можете добиться такого макета:

пример макета с перекрытием

Для такого результата вам нужно
row_layout.xml:

 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@ id/itemRoot" android:layout_width="match_parent"
    android:layout_height="wrap_content" android:padding="4sp"
    android:background="@drawable/overlap" android:onClick="itemClicked">
    <TextView android:id="@ id/itemPubdate" android:text="03 sept."
        android:background="@drawable/overlap_calendar" 
        android:layout_width="40dip" android:layout_height="40dip"
        android:gravity="center" android:textStyle="bold" />
    <TextView android:id="@ id/itemTitle" android:paddingLeft="5sp"
        android:text="Arrêtez moi ces répondeurs d'email"
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:maxLines="2" android:textColor="#424e5f" android:textSize="13sp"
        android:textStyle="bold" android:ellipsize="end"
        android:layout_toRightOf="@id/itemPubdate" android:paddingTop="10dp"/>
    <TextView android:id="@ id/itemDescription" android:paddingLeft="5sp"
        android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
        android:layout_width="wrap_content" android:layout_height="wrap_content" 
        android:textColor="#000000" android:maxLines="3" android:textSize="11sp"
        android:layout_toRightOf="@id/itemPubdate"
        android:layout_below="@id/itemTitle" />
</RelativeLayout>

и двумя ссылочными чертежами
res/drawable/overlap.xml:

 <?xml version="1.0" encoding="UTF-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:top="10dp" android:bottom="2dp" android:left="2dp" 
        android:right="2dp">
        <shape>
            <solid android:color="#caced4" />
            <stroke android:width="3dp" color="#caced4" />
            <padding android:left="2dp" android:top="2dp" android:right="2dp"
                android:bottom="2dp" />
        </shape>
    </item>
</layer-list>

и res/drawable/overlap_calendar.xml:

 <?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <solid android:color="#f0f0f0" />
            <corners android:bottomRightRadius="3dp"
                android:bottomLeftRadius="3dp" android:topLeftRadius="3dp"
                android:topRightRadius="3dp" />
        </shape>
    </item>
    <item android:top="2dp" android:left="2dp" android:right="2dp"
        android:bottom="2dp">
        <shape android:shape="rectangle">
            <solid android:color="#424e5f" />
            <corners android:bottomRightRadius="3dp"
                android:bottomLeftRadius="3dp" android:topLeftRadius="3dp"
                android:topRightRadius="3dp" />
        </shape>
    </item>
</layer-list>

Ответ №2:

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

 <LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@ id/itemRoot"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:paddingBottom="4sp"
    android:orientation="vertical"
>
    <RelativeLayout
        android:layout_height="wrap_content"
        android:layout_width="fill_parent"
    >
        <View
            android:layout_width="fill_parent"
            android:background="#caced4"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@ id/bigbox"
            android:layout_alignTop="@ id/bigbox"
        ></View>
        <RelativeLayout
            android:layout_height="wrap_content"
            android:layout_width="wrap_content"
            android:id="@ id/box"
        >
            <TableLayout
                android:layout_width="40dip"
                android:id="@ id/TableLayout01"
                android:background="@drawable/corner"
                android:layout_height="40dip"
            >
                <TextView
                    android:textStyle="bold"
                    android:text="03 sept."
                    android:gravity="center"
                    android:layout_marginRight="3px"
                    android:id="@ id/itemPubdate"
                    android:layout_marginBottom="3px"
                    android:layout_width="wrap_content"
                    android:layout_marginTop="3px"
                    android:background="#424e5f"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="3px"
                ></TextView>
            </TableLayout>
        </RelativeLayout>
        <LinearLayout
            android:id="@ id/bigbox"
            android:layout_height="wrap_content"
            android:layout_marginTop="20px"
            android:onClick="itemClicked"
            android:layout_width="match_parent"
            android:clipChildren="false"
            android:orientation="horizontal"
            android:layout_toRightOf="@ id/box"
        >
            <LinearLayout
                android:id="@ id/linearLayout1"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:paddingLeft="4sp"
                android:orientation="vertical"
            >
                <TextView
                    android:textStyle="bold"
                    android:maxLines="2"
                    android:text="Arrêtez moi ces répondeurs d'email"
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textColor="#424e5f"
                    android:id="@ id/itemTitle"
                    android:textSize="13sp"
                ></TextView>
                <TextView
                    android:maxLines="3"
                    android:text="Qui, suite à l'envoi d'un email, n'a pas reçu etc."
                    android:layout_height="wrap_content"
                    android:layout_width="wrap_content"
                    android:textColor="#000000"
                    android:id="@ id/itemDescription"
                    android:textSize="11sp"
                ></TextView>
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>
</LinearLayout>