How to create a crop layer for a moveable image

问题

What I am trying to achieve is the screenshot below:

It has the following:

1. Background layer (in this case, red but ideally could support any image such as a pattern)
2. Rotated picture in the middle
3. Rotated black frame around the picture (ideally could support any 9 patch background)
4. Semi-transparent layer around the black frame (currently black with alpha ~ 50%)

In the final product the user will be able to move the picture around to select a certain area from it. The frame and semi-transparent layer will remain fixed.

I am looking for a simple solution to create this. I have tried to create the layout with multiple LinearLayouts and ImageViewsbut I just don't seem to be able to get it right.

I have a feeling there is a simple solution I am just not considering. Maybe this even can be done completely in a custom drawable.

回答1:

The whole transparent layer can be implemented with one single custom drawable. You just need a layout with the ImageView and a FrameLayout which is going to be the transparent layer:

<?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>

The custom drawable you assign to the FrameLayout needs to look something like this:

<?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>

The result will then look like this:

If you want to rotate the whole thing then you just need to set android:rotation="25" on the RelativeLayout in xml.

来源：https://stackoverflow.com/questions/28591405/how-to-create-a-crop-layer-for-a-moveable-image