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

Posted 2020-11-23 Geek Song

在每一个图片的某一侧都可以展示出一个三角形的边框视图，就是咱们的三角形标签视图。这个视图在电商类APP当中比较常用，使用过ebay的同学应该都还记得有些商品的左上角或者右上角都会显示一个三角形的边框，用于给人一个直观的商品正在促销，或者刚刚上线的直观感受。我们可以看看实现后的效果如下：

 

 

 

 

 在真实的APP当中，我们还会加上一个SrcollView控件，这样子才可以进行不断地上下浏览。我们这里主要是为了让大家明白这个视图是该如何实现的，就不演示SrcollView控件下的做法了，直接在线性布局下做一个简单的说明。由于在线性布局上面一共具有四张图，因此咱们可以先单独编写每一个imageview的自定义view，然后<include>的语法将他们组合起来，这样可以提高UI开发的效率，进行协同工作与开发。首先咱们先实现左上角和右上角的triangle view.

在build.gradle文件当中相应地方添加如下代码，导入相应的maven库：

allprojects {
        repositories {
            ...
            maven { url "https://jitpack.io" }
        }
}

之后在另一个build.gradle文件当中添加库：

dependencies {
            implementation \'com.github.shts:TriangleLabelView:1.1.2\'
    }

咱们的前期工作就这样做好啦，现在就开始正式编写咱们的每一个三角形边框视图啦，首先是第一个位于左上角的视图

一.card_left_top.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/image"
            android:scaleType="centerCrop"
            android:src="@drawable/s_image_2"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <jp.shts.android.library.TriangleLabelView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            app:backgroundColor="@color/yellow_900"
            app:corner="leftTop"
            app:labelBottomPadding="5dp"
            app:labelCenterPadding="0dp"
            app:labelTopPadding="10dp"
            app:primaryText="New"
            app:primaryTextColor="@color/yellow_500"
            app:primaryTextSize="16sp"
            app:secondaryText="01"
            app:secondaryTextColor="@color/yellow_100"
            app:secondaryTextSize="11sp" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

编写好后在preview当中显示如下：

 

下面是位于右上角的视图

 

二.card_right_top.xml：

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/image"
            android:scaleType="centerCrop"
            android:src="@drawable/s_image_4"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <jp.shts.android.library.TriangleLabelView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            app:backgroundColor="@color/teal_900"
            app:corner="rightTop"
            app:labelBottomPadding="5dp"
            app:labelCenterPadding="0dp"
            app:labelTopPadding="10dp"
            app:primaryText="New"
            app:primaryTextColor="@color/teal_500"
            app:primaryTextSize="16sp"
            app:secondaryText="01"
            app:secondaryTextColor="@color/teal_100"
            app:secondaryTextSize="11sp" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

 

 

 

三.card_right_buttom.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/image"
            android:scaleType="centerCrop"
            android:src="@drawable/s_image_3"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <jp.shts.android.library.TriangleLabelView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            app:backgroundColor="@color/pink_900"
            app:corner="rightBottom"
            app:labelTopPadding="10dp"
            app:labelCenterPadding="5dp"
            app:labelBottomPadding="0dp"
            app:primaryText="New"
            app:primaryTextColor="@color/pink_500"
            app:primaryTextSize="16sp"
            app:secondaryText="01"
            app:secondaryTextColor="@color/pink_100"
            app:secondaryTextSize="11sp" />
    </RelativeLayout>
</android.support.v7.widget.CardView>

四.card_left_buttom.xml：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <ImageView
            android:id="@+id/image"
            android:src="@drawable/s_image_1"
            android:scaleType="centerCrop"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
        <jp.shts.android.library.TriangleLabelView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            app:backgroundColor="@color/blue_900"
            app:corner="leftBottom"
            app:labelTopPadding="10dp"
            app:labelCenterPadding="5dp"
            app:labelBottomPadding="0dp"
            app:primaryText="New"
            app:primaryTextColor="@color/blue_500"
            app:primaryTextSize="16sp"
            app:secondaryText="01"
            app:secondaryTextColor="@color/blue_100"
            app:secondaryTextSize="11sp" />
    </RelativeLayout>

最后咱们整合一下就OK啦！整合后的主活动的代码为：

五.activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".Fragment2">

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">
        <include android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:id="@+id/left_top" layout="@layout/card_left_top" />
        <include android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:id="@+id/right_top" layout="@layout/card_right_top" />
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal">
        <include android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:id="@+id/left_bottom" layout="@layout/card_left_bottom" />
        <include android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:id="@+id/right_bottom" layout="@layout/card_right_bottom" />
    </LinearLayout>





</LinearLayout>

完事儿！github源码可以在https://github.com/shts/TriangleLabelView处进行阅读！！！