Android中简单实现贴纸功能labelview

借鉴:https://www.jianshu.com/p/4a16d831c574

虽然目前项目里没有遇到过这个功能,但是以防以后遇到后再去上网查,所以在此记录,这个还是比较简单的,直接看代码。

 一、依赖

1. 在根目录下(工程Project)的build.gradle中添加

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

2. 在项目(Module)的build.gradle中添加

implementation 'com.github.open-android:labelview:0.1.0'

二、布局实现

1. Button

<com.lid.lib.LabelButtonView
        android:id="@+id/labelbutton"
        android:layout_width="200dp"
        android:layout_height="48dp"
        android:background="#03a9f4"
        android:gravity="center"
        android:text="Button"
        android:textColor="#ffffff"
        app:label_backgroundColor="#C2185B"
        app:label_distance="20dp"
        app:label_height="20dp"
        app:label_orientation="RIGHT_TOP"
        app:label_text="HD"
        app:label_textSize="12sp"
        app:label_textStyle="BOLD"/>

2. ImageView

<com.lid.lib.LabelImageView
        android:id="@+id/image1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="centerCrop"
        android:src="@mipmap/ic_launcher"
        app:label_backgroundColor="#C2185B"
        app:label_orientation="LEFT_TOP"
        app:label_text="CHINA"
        app:label_textStyle="ITALIC"/>

3. TextView

<com.lid.lib.LabelTextView
        android:id="@+id/text"
        android:layout_width="wrap_content"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:layout_marginTop="8dp"
        android:background="#212121"
        android:gravity="center"
        android:padding="16dp"
        android:text="TextView"
        android:textColor="#ffffff"
        app:label_backgroundColor="#03A9F4"
        app:label_distance="15dp"
        app:label_orientation="LEFT_TOP"
        app:label_text="POP"
        app:label_textSize="10sp"
        app:label_textStyle="BOLD_ITALIC"/>

三、属性

1. app:label_backgroundColor="#C2185B"    贴纸颜色

2. app:label_distance="20dp"    距离角落的距离

3. app:label_height="20dp"      贴纸的宽度

4. app:label_text="HD"    贴纸的文本内容

5. app:label_textSize="12sp"    贴纸的文本内容的大小

6. app:label_textStyle="BOLD"     贴纸的文本内容的样式

7. app:label_orientation="RIGHT_TOP"  贴纸的位置

  • LEFT_TOP:代表左上方,为默认值
  • RIGHT_TOP:代表右上方
  • LEFT_BOTTOM:代表左下方
  • RIGHT_BOTTOM:代表右下方

四、高级使用(自定义)

如果我们要在自定义视图中打标签怎么办,其实很简单,一般只需要四步就可以:

  • 创建一个视图类继承你需要打标签视图
  • 使用LabelViewHelper的对象作为新类的成员变量
  • 在构造方法和onDraw方法中调用LabelViewHelper中的方法
  • 在其他相关方法中调用LabelViewHelper中的方法
public class LabelXXXView extends YourView {
    LabelViewHelper utils;
    public LabelXXXView(Context context) {
        this(context, null);
    }
    public LabelXXXView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }
    public LabelXXXView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        utils = new LabelViewHelper(context, attrs, defStyleAttr);
    }
    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        utils.onDraw(canvas, getMeasuredWidth(), getMeasuredHeight());
    }
    public void setLabelHeight(int height) {
        utils.setLabelHeight(this, height);
    }
    public int getLabelHeight() {
        return utils.getLabelHeight();
    }
    public void setLabelDistance(int distance) {
        utils.setLabelDistance(this, distance);
    }
    public int getLabelDistance() {
        return utils.getLabelDistance();
    }
    public boolean isLabelVisual() {
        return utils.isLabelVisual();
    }
    public void setLabelVisual(boolean enable) {
        utils.setLabelVisual(this, enable);
    }
    public int getLabelOrientation() {
        return utils.getLabelOrientation();
    }
    public void setLabelOrientation(int orientation) {
        utils.setLabelOrientation(this, orientation);
    }
    public int getLabelTextColor() {
        return utils.getLabelTextColor();
    }
    public void setLabelTextColor(int textColor) {
        utils.setLabelTextColor(this, textColor);
    }
    public int getLabelBackgroundColor() {
        return utils.getLabelBackgroundColor();
    }
    public void setLabelBackgroundColor(int backgroundColor) {
        utils.setLabelBackgroundColor(this, backgroundColor);
    }
    public String getLabelText() {
        return utils.getLabelText();
    }
    public void setLabelText(String text) {
        utils.setLabelText(this, text);
    }
    public int getLabelTextSize() {
        return utils.getLabelTextSize();
    }
    public void setLabelTextSize(int textSize) {
        utils.setLabelTextSize(this, textSize);
    }
}

当然,我们对自定义View打标签并不总是按上面的方法来进行的。
比如,我要给EditText打标签,按照上面的方法来,结果是这样的

我们发现下面的横线不见了,怎么回事啊。
这是因为EditText一般没有自定义属性,就调用了下面这个构造方法:

public EditText(Context context, AttributeSet attrs) {
        this(context, attrs, com.android.internal.R.attr.editTextStyle);
    }  

可以看到这个构造方法里面自动给它添加了一个com.android.internal.R.attr.editTextStyle样式,正是这个样式才使EditText下面有横线。而按照上面的四步来,我们就丢失了这个样式,现在我们想要这个样式怎么办。别担心,很简单,在原来四步的基础上保持不变,修改第三个构造方法就可以了,将

public LabelEditView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context,attrs,defStyleAttr);
        utils = new LabelViewHelper(context, attrs, defStyleAttr);
    }  

修改为:

public LabelEditView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs);
        utils = new LabelViewHelper(context, attrs, defStyleAttr);
    }  

我们来看看修改后的界面:

对于这两种情况,xml中的定义是一样的:

<com.example.zyt.mylabelview.LabelEditTextView
        app:label_backgroundColor="#03A9F4"
        app:label_distance="15dp"
        app:label_orientation="RIGHT_TOP"
        app:label_text="微信"
        app:label_textSize="10sp"
        android:layout_width="200dp"
        android:layout_height="48dp" />

 

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: LabelView 技术是一种用于 Android 应用程序的自定义视图技术。它允许在一个视图的周围添加标签,以突出显示视图的重要性或其他信息。LabelView 可以轻松地添加到布局,并可以自定义颜色、位置和文本等属性。这种技术可以应用于各种场景,例如在列表项添加标记、突出显示关键信息等。使用 LabelView 技术可以增强应用程序的用户体验,并使界面更加直观和易于理解。 ### 回答2: labelView 技术是一种用来在视图层级添加标签或标记的技术。它可以在一个视图上方或下方叠加一个带有文本或图标的小标签,以便更好地传达信息或提供额外的功能。 使用 labelView 技术可以提升用户界面的可用性和可理解性。通过为视图添加标签,用户可以更容易地识别和理解视图的用途或功能。例如,在一个图像展示应用,我们可以使用 labelView 技术在每个图像的右上角添加一个标签,标识图像的来源或类别。 此外,labelView 技术还可以用来提供额外的交互功能。标签上可以添加按钮、交互链接或其他交互元素,以便用户能够直接从标签上执行某些操作。例如,在一个电子商务应用,我们可以在产品的标签上添加一个按钮,用于将该产品添加到购物车或进行其他操作。 在实现 labelView 技术时,我们可以使用各种技术和框架。例如,在 Android 平台上,我们可以使用 Android 的自定义视图或第三方库来创建 labelView。在 iOS 平台上,我们可以使用 iOS 的自定义视图或第三方库来实现。 总而言之,labelView 技术是一种在视图层级添加标签或标记的技术,它可以提升用户界面的可用性和可理解性,并为用户提供额外的交互功能。通过适当使用 labelView 技术,我们可以增强应用程序的用户体验。 ### 回答3: labelView 技术是一种用于显示标签的技术。标签是用来标识和描述数据的元素,通常用于在界面上显示数据的名称、类别或者其他相关信息。而 labelView 技术则是一种让标签显示更加美观和易读的技术。 labelView 技术可以通过改变标签的字体、字号、颜色、背景等样式属性来使其更加吸引人的目光。通过采用合适的字体和颜色搭配,可以让标签更加清晰易读,增强用户对标签的关注和辨识度。 此外,labelView 技术还可以通过设置标签的布局、对齐方式、间距等来使其在界面的位置更加恰当和整齐。通过将标签与其他元素进行合理的排列和组合,可以提升整体界面的美观度和可用性。 labelView 技术还可以根据需要对标签进行动态的内容更新和交互操作。通过编程方式,可以实现实时更新标签的内容,使其显示最新的信息。同时,还可以为标签添加交互功能,如点击事件、长按事件等,以便用户与标签进行交互操作,提供更加灵活和便捷的使用体验。 总之,labelView 技术是一种用于美化和优化标签显示的技术,可以提升标签的吸引力、易读性和布局效果,增强用户对标签的关注和使用体验。在各种应用场景labelView 技术都有着广泛的应用和重要的作用。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值