天天看点

FlycooLabelView显示角标效果

github上的一段开源代码,功能很简单,就是实现角标效果,如下:

FlycooLabelView显示角标效果

原理:

实现了一个LabelView类,继承View类,重写onDraw()、onMeasure()等方法,自定义界面

使用方法:

1、添加依赖 

compile 'com.flyco.labelview:FlycoLabelView_Lib:[email protected]'      

2、配置xml例子

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="200dp"
    android:scaleType="centerCrop"
    android:src="@mipmap/haha"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        lv:lv_text="Hot"
        lv:lv_text_size="12sp"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        lv:lv_background_color="#3F9FE0"
        lv:lv_gravity="TOP_RIGHT"
        lv:lv_text="二哈"
        lv:lv_text_size="12sp"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        lv:lv_background_color="#F6CE59"
        lv:lv_gravity="BOTTOM_LEFT"
        lv:lv_text="会员"
        lv:lv_text_all_caps="false"
        lv:lv_text_size="12sp"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        lv:lv_background_color="#EC7263"
        lv:lv_gravity="BOTTOM_RIGHT"
        lv:lv_text="new"/>
</FrameLayout>
<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginTop="40dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@mipmap/haha"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        lv:lv_fill_triangle="true"
        lv:lv_text="新"
        lv:lv_text_size="12sp"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        lv:lv_background_color="#3F9FE0"
        lv:lv_fill_triangle="true"
        lv:lv_gravity="TOP_RIGHT"
        lv:lv_text="大哈"
        lv:lv_text_size="12sp"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|left"
        lv:lv_background_color="#F6CE59"
        lv:lv_fill_triangle="true"
        lv:lv_gravity="BOTTOM_LEFT"
        lv:lv_text="会员"
        lv:lv_text_all_caps="false"
        lv:lv_text_size="12sp"/>

    <com.flyco.labelview.LabelView
        xmlns:lv="http://schemas.android.com/apk/res-auto"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|right"
        lv:lv_background_color="#EC7263"
        lv:lv_fill_triangle="true"
        lv:lv_gravity="BOTTOM_RIGHT"
        lv:lv_text="new"/>
</FrameLayout>
      

3、具体属性介绍

name format description
lv_text string 设置文字内容
lv_text_color color 设置文字颜色,默认#ffffff
lv_text_size dimension 设置文字大小,默认11sp
lv_text_bold boolean 设置文字是否支持加粗,默认true
lv_text_all_caps boolean 设置文字是否支持全部大写,默认true
lv_background_color color 设置背景颜色,默认"#FF4081"
lv_min_size dimension 设置LabelView所在矩形最小宽高,默认mFillTriangle?35dp:50dp
lv_padding dimension 设置文字上下padding,默认3.5dp,mFillTriangle为true时无效
lv_gravity enum 设置LabelView方向,支持左上或右上或左下或右下,默认左上
lv_fill_triangle boolean 设置是否填充三角区域,默认false

4、github源码地址

https://github.com/H07000223/FlycoLabelView