借鉴: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" />