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

Posted Geek Song

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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\'
    }

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

<?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当中显示如下:

 

下面是位于右上角的视图

 

 

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

 

 

 

<?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>
<?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>
<?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处进行阅读!!!

 

以上是关于Android实现图片一边的三角形边框的主要内容,如果未能解决你的问题,请参考以下文章

android黑色边框如何去掉

android图像处理系列之五--给图片添加边框(中)

css设置div只显示某一边的边框

Flutter之Decoration(边框圆角阴影形状渐变背景图像等)

css3 代边框的小三角怎么做

关于怎么用border实现三角形。圆形。以及给边框家阴影效果。