Android實現圖片的三角形邊框

在每個圖片的某一側均可以展現出一個三角形的邊框視圖，就是我們的三角形標籤視圖。這個視圖在電商類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處進行閱讀！！！

帥照: