Question

我有一个包含两个大图像和一些叠加的布局。

在图像的顶部，有一个半透明的背景。这就是问题所在：

图像位于布局的水平中心，android:scaleType="fitCenter"。这是图像正确显示的方式。然而，半透明背景占据布局的整个宽度，而不是将其自身限制于图像视图。我想半透明条只能占据图像的宽度。

我怎样才能让半透明部分只占用图像，最好只用XML？

当前的XML布局（导致上图）：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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:orientation="vertical"
    android:layout_height="match_parent"
    android:background="#222">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="4dp"
        android:layout_gravity="center_horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/test_img_1"
            android:adjustViewBounds="true"
            android:layout_centerHorizontal="true"
            android:scaleType="fitCenter"/>

        <View android:id="@+id/blur_user"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:alpha="0.7"
            android:background="@color/colorPrimary"
            android:layout_alignParentBottom="true"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:text="Some text"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/user_choice"
            android:background="?attr/selectableItemBackground"/>
    </RelativeLayout>

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_margin="4dp"
        android:layout_gravity="center_horizontal">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:src="@drawable/test_img_1"
            android:adjustViewBounds="true"
            android:layout_centerHorizontal="true"
            android:scaleType="fitCenter"/>

        <View android:id="@+id/blur_installer"
            android:layout_width="match_parent"
            android:layout_height="36dp"
            android:alpha="0.7"
            android:background="@color/colorPrimary"
            android:layout_alignParentBottom="true"/>

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="36dp"
            android:gravity="center"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:text="Some text"/>

        <View
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/installer_choice"
            android:background="?attr/selectableItemBackground"/>
    </RelativeLayout>

</LinearLayout>

Answer 1

做了很多试验和错误，但都没有结果。正如@Msk在评论中所说，似乎没有办法只使用XML来实现这一点。所以我通过将这些行添加到onCreateView方法来解决它。它会监听图像的绘制时间，并相应地调整模糊。

    image.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
        @Override
        public void onGlobalLayout() {
            image.getViewTreeObserver().removeOnGlobalLayoutListener(this);
            ViewGroup.LayoutParams layoutParams = blurView.getLayoutParams();
            layoutParams.width = image.getWidth();
            blurView.setLayoutParams(layoutParams);
        }
    });

紧紧包装ViewGroup＆＃39;围绕ImageView进行缩放

1 个答案: