Полупрозрачная панель для ImageView

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

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#FFF" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/catwomen" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#7000"
        android:gravity="center"
        android:paddingBottom="15dp"
        android:paddingTop="15dp"
        android:text="Кошка - жена кота"
        android:textColor="#FFF"
        android:textSize="36sp"
        android:textStyle="bold" />
</RelativeLayout>

Как видно на скриншоте, текст лёг поверх картинки, немного захватив задние лапки и пушистый хвост.

А как поступить с более сложным случаем, когда нам нужно использовать два TextView поверх ImageView. В этом случае поместим текстовые метки в разметку LinearLayout, которую свою очередь сделаем полупрозрачной и поместим её уже поверх ImageView, как это делали в первом примере.

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="#FFF" >

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:src="@drawable/catwomen" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:background="#7000"
        android:orientation="vertical"
        android:paddingBottom="15dp"
        android:paddingTop="15dp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:shadowColor="#000"
            android:shadowDx="3"
            android:shadowDy="3"
            android:shadowRadius="6"
            android:text="Кошка - жена кота"
            android:textColor="#FFF"
            android:textSize="36sp"
            android:textStyle="bold" />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="И мать очаровательных котят"
            android:textColor="#CCC"
            android:textSize="12sp" />
    </LinearLayout>
</RelativeLayout>

Данный приём можно использовать не только для отдельных ImageView, но и для адаптеров к GridView, когда у каждой ячейки сеточной компоновки требуется разместить ImageView и подпись к нему.

По мотивам статьи Styling Android » Blog Archive » Transparency – Part 2

Реклама