如何为可移动图像创建裁剪图层

Question

我想要实现的是下面的截图：

它具有以下内容：

1. 背景图层（在这种情况下，红色但理想情况下可以支持任何图像，如图案）
2. 中间的旋转图片
3. 图片周围旋转的黑框（理想情况下可以支持任何9个补丁背景）
4. 黑色框架周围的半透明层（目前黑色，alpha~50％）

在最终产品中，用户可以移动图片以从中选择某个区域。框架和半透明层将保持固定。

我正在寻找一个简单的解决方案来创建它。我尝试使用多个LinearLayouts和ImageViews创建布局，但我似乎无法正确使用。

我觉得有一个简单的解决方案，我只是不考虑。也许这甚至可以在一个自定义的drawable中完成。

Answer 1

整个透明层可以使用一个自定义drawable实现。您只需要一个ImageView和FrameLayout的布局，它将成为透明层：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <!-- This ImageView holds the picture you want to crop -->
    <ImageView
        android:layout_width="250dp"
        android:layout_height="250dp"
        android:src="@drawable/ic_launcher"
        android:layout_centerInParent="true"/>

    <!-- This is your transparent layer -->
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@drawable/crop_border"/>

</RelativeLayout>

您分配给FrameLayout的自定义绘图需要看起来像这样：

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- This is the transparent border -->
    <item>
        <shape
               android:innerRadius="0dp"
               android:shape="rectangle"
               android:thicknessRatio="1.9"
               android:useLevel="false" >

            <solid android:color="@android:color/transparent" />

            <stroke
                android:width="100dp"
                android:color="#AA0A0A0A" />
        </shape>
    </item>

    <!-- This is the black frame of the picture -->
    <item android:top="100dp" android:left="100dp" android:right="100dp" android:bottom="100dp">
        <shape
            android:innerRadius="0dp"
            android:shape="rectangle"
            android:thicknessRatio="1.9"
            android:useLevel="false" >

            <solid android:color="@android:color/transparent" />

            <stroke
                android:width="10dp"
                android:color="#FF0A0A0A" />
        </shape>
    </item>
</layer-list>

结果将如下所示：

如果您想要旋转整个内容，则只需在xml中的android:rotation="25"上设置RelativeLayout。