Android实现图片一边的三角形边框效果

要实现在Android中图片一边的三角形边框效果，可以使用如下步骤：

步骤1：自定义Drawable

我们首先需要自定义一个Drawable，它将使用ShapeDrawable创建一个矩形形状，并在其中添加一个三角形形状，用于显示样式的边框。以下是自定义Drawable的代码示例：

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

    <stroke android:width="2dp" android:color="@color/border_color"/>
    <solid android:color="@color/transparent"/>

    <corners android:radius="8dp" />

    <padding android:left="5dp" android:top="5dp"
             android:right="5dp" android:bottom="5dp"/>

    <size android:width="120dp" android:height="40dp"/>
    <gradient android:angle="315" android:startColor="@color/start_color" android:endColor="@color/end_color"/>

    <item android:bottom="10dp" android:left="0dp" android:right="0dp" android:top="0dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <stroke android:width="2dp" android:color="@color/border_color"/>
            <solid android:color="@color/transparent"/>
        </shape>
    </item>

    <item android:bottom="-5dp" android:left="0dp" android:right="0dp" android:top="35dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <stroke android:width="5dp" android:color="@color/triangle_color" />
            <solid android:color="@color/transparent"/>
        </shape>
    </item>

</shape>

在代码中，我们设置<stroke>属性来添加边框，并使用<solid>属性来设置填充颜色。使用<corners>属性设置圆角的半径以使图像更圆润。使用<padding>属性来添加填充空间，制造出较大的边框。我们还可以使用<size>属性设置Drawable的尺寸和<gradient>属性添加渐变效果。

两个<item>标签被添加到代码中，第一个标签是用于添加矩形的形状，第二个用于添加三角形的形状。在第二个标签中，我们使用<stroke>属性添加三角形的边框，使其成为独特的形状。

步骤2：将自定义Drawable应用于ImageView

接下来，我们需要将这个自定义Drawable应用到一个ImageView上。我们需要在XML布局文件中创建一个新的ImageView，并将src属性设置为我们创建的Drawable资源。以下是在XML布局文件中创建ImageView的示例代码：

<ImageView
    android:id="@+id/image_view"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/border_image"/>

我们将Drawable资源的名称设置为“border_image”，因为我们的Drawable资源用于给图像添加边框。

实际操作示例

示例1

以下是一个完整示例代码，您可以创建一个新项目并在其中添加以下代码。这个例子展示了一个圆形形状的ImageView，它的边框是一个三角形。

• 首先，我们需要在res/drawable文件夹中创建一个新的xml文件，例如“circle_border.xml”。
  将以下代码复制到xml文件中：

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

    <stroke android:width="3dp" android:color="@color/border_color"/>
    <solid android:color="@color/transparent"/>

    <padding android:left="10dp" android:top="10dp"
             android:right="10dp" android:bottom="10dp"/>

    <size android:width="120dp" android:height="120dp"/>
    <gradient android:angle="315" android:startColor="@color/start_color" android:endColor="@color/end_color"/>

    <item android:bottom="-25dp" android:left="0dp" android:right="0dp" android:top="95dp">
        <shape xmlns:android="http://schemas.android.com/apk/res/android"
               android:shape="rectangle">
            <stroke android:width="5dp" android:color="@color/triangle_color" />
            <solid android:color="@color/transparent"/>
        </shape>
    </item>

</shape>

• 接下来，我们需要在res/values/colors.xml文件中添加以下颜色值：

<resources>
    <color name="border_color">#CC0000</color>
    <color name="transparent">#00000000</color>
    <color name="start_color">#00FF00</color>
    <color name="end_color">#FF0000</color>
    <color name="triangle_color">#CC0000</color>
</resources>

• 在res/layout/activity_main.xml文件中，我们可以添加以下代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                xmlns:tools="http://schemas.android.com/tools"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                tools:context=".MainActivity">

    <ImageView
        android:id="@+id/image_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/circle_border"/>

</RelativeLayout>

• 最后，我们可以在MainActivity.java文件中添加以下代码：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
}

运行我们的应用程序，我们可以看到一个圆形形状的ImageView，它的边框是一个红色的三角形。

示例2

这个示例将显示如何使用代码实现一个矩形ImageView并添加三角形边框，，在代码中，创建triangularBorderDrawable函数来创建我们自定义Drawable并返回给ImageView。以下是代码示例：

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ImageView imageView = findViewById(R.id.image_view);
        imageView.setBackground(triangularBorderDrawable());
    }

    private Drawable triangularBorderDrawable() {
        ShapeDrawable shapeDrawable = new ShapeDrawable();

        Paint paint = shapeDrawable.getPaint();
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(2f);
        paint.setStyle(Paint.Style.STROKE);

        Path path = new Path();
        path.moveTo(0, 0);
        path.lineTo(90, 0);
        path.lineTo(90, 90);
        shapeDrawable.setShape(new RectShape());
        shapeDrawable.setIntrinsicHeight(90);
        shapeDrawable.setIntrinsicWidth(90);
        shapeDrawable.setBounds(50, 50, 140, 140);
        shapeDrawable.setPadding(new Rect(5,5,5,5));
        shapeDrawable.setShaderFactory(new ShapeDrawable.ShaderFactory() {
            @Override
            public Shader resize(int width, int height) {
                return new LinearGradient(0,0,0,height,new int[]{Color.BLUE,Color.WHITE},new float[]{0.3f,1f}, Shader.TileMode.CLAMP);
            }
        });

        shapeDrawable.setPathEffect(new PathDashPathEffect(
                makeTriangularPath(), 10, 0, PathDashPathEffect.Style.ROTATE));
        return shapeDrawable;
    }

    private Path makeTriangularPath() {
        Path p = new Path();
        p.moveTo(0, 0);
        p.lineTo(10, 10);
        p.lineTo(0, 20);
        p.close();
        return p;
    }
}

此代码创建一个ShapeDrawable，并使用其一些方法来设置其属性，例如颜色，边框宽度和Padding，PathEffect等。然后，TrianglePath函数用于创建一个Path对象，该对象定义三角形形状。最后，Drawable返回到ImageView的背景，以显示自定义Drawable的效果。

我们需要在xml中创建ImageView并将其id设置为image_view，如下所示：

<ImageView
    android:id="@+id/image_view"
    android:layout_width="90dp"
    android:layout_height="90dp"
    android:layout_marginTop="50dp"
    android:background="@drawable/triangle_border"/>

运行我们的应用程序，我们可以看到一个矩形的ImageView，其边框是一个蓝色渐变的三角形。