【移動應用開發(fā)技術】Android如何實現(xiàn)圖片一邊的三角形邊框效果

【移動應用開發(fā)技術】Android如何實現(xiàn)圖片一邊的三角形邊框效果

這篇文章主要介紹了Android如何實現(xiàn)圖片一邊的三角形邊框效果，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓在下帶著大家一起了解一下。在每一個圖片的某一側都可以展示出一個三角形的邊框視圖，就是咱們的三角形標簽視圖。這個視圖在電商類APP當中比較常用，使用過ebay的同學應該都還記得有些商品的左上角或者右上角都會顯示一個三角形的邊框，用于給人一個直觀的商品正在促銷，或者剛剛上線的直觀感受。我們可以看看實現(xiàn)后的效果如下：

在真實的APP當中，我們還會加上一個SrcollView控件，這樣子才可以進行不斷地上下瀏覽。我們這里主要是為了讓大家明白這個視圖是該如何實現(xiàn)的，就不演示SrcollView控件下的做法了，直接在線性布局下做一個簡單的說明。由于在線性布局上面一共具有四張圖，因此咱們可以先單獨編寫每一個imageview的自定義view，然后<include>的語法將他們組合起來，這樣可以提高UI開發(fā)的效率，進行協(xié)同工作與開發(fā)。首先咱們先實現(xiàn)左上角和右上角的triangleview.在build.gradle文件當中相應地方添加如下代碼，導入相應的maven庫：allprojects

{

repositories

{

...

maven

{

url

"https://jitpack.io"

}

}

}之后在另一個build.gradle文件當中添加庫：dependencies

{

implementation

'com.github.shts:TriangleLabelView:1.1.2'

}咱們的前期工作就這樣做好啦，現(xiàn)在就開始正式編寫咱們的每一個三角形邊框視圖啦，首先是第一個位于左上角的視圖一.card_left_top.xml：<?xml

version="1.0"

encoding="utf-8"?>

<android.support.v7.widget.CardView

xmlns:android="/apk/res/android"

xmlns:app="/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="/apk/res/android"

xmlns:app="/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="/apk/res/android"

xmlns:app="/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="/apk/res/android"

xmlns:app="/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="/apk/res/android"

xmlns:tools="/tools"

xmlns:app="/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"