BadgedView
chaossss
111
Visit GitHub RepoBadges

BadgedView

English Version

BadgedView 能够为任意一个 View 添加矩形或三角形标签。

BadgedImageView 就是 Plaid虎扑体育 用来给图片添加标签的控件。原作者的实现里,只能为 ImageView 添加 Badge,我看了看他的代码(开源)发现这个控件其实蛮简单的,想法挺好,但是代码写的不是特别好。而且我觉得应该能将这个控件应用到任意一个 View 上边,所以我根据我的想法实现了 BadgedView。

效果图:

#Feature

Implemented

  • 设置标签内的文字
  • 设置标签背景颜色
  • 自定义标签形状、文字
  • 将标签应用于任意 View
  • 可在标签所在布局设置长宽比例
  • 设置矩形标签或三角形标签在视图中的位置
  • 为任意 View 添加矩形、三角形、圆形标签

Processing

  • 添加其他样式的标签
  • 不需要实现子类就能为每一个 View 添加任意多的标签

#Usage

##Dependency

###Min SDK:2.3.3

###Add Dependency

在项目的 build.gradle 里添加:

dependencies {
    ...
    compile 'com.github.chaossss:BadgedView:1.1.1'
}

##Attr

Attr usage
app:badgeText 设置标签中显示的文字
app:badgeTextSize 设置标签中显示的文字大小
app:badgeTextColor 设置标签中显示的文字颜色
app:badgePadding 设置标签中文字和标签边界的间距
app:badgeWidthRatio 设置标签布局的长宽比
app:badgeHeightRatio 设置标签布局的长宽比
app:badgeCornerRadius 设置矩形标签圆角的半径
app:recbadgeGravity(RecBadgedView) 设置矩形标签的位置
app:tribadgeGravity(TriBadgedView) 设置三角标签的位置

##API

API usage
showBadge(boolean show) 显示标签
setBadgeText(String newText) 设置标签显示文字

##Customize BadgedView

  1. 继承 BadgedView,父类 BadgedView 已经有了标签常用的属性
  2. 在子类添加你所需要的特定的属性域
  3. 重写 initBadge(Context context) 和 draw(Canvas canvas) 方法以实现你的需求

如果需要自定义标签:

  1. 继承 BaseBadge
  2. 在子类添加你所需要的特定的属性域
  3. 重写 initBadge(),在其中对 badge 完成你所需要的标签的绘制工作

##Activity

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private RecBadgedView anyView;
    private RecBadgedView scaleView;
    private RecBadgedView regularView;

    private TriBadgedView triView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        anyView = (RecBadgedView) findViewById(R.id.badge_any_view);
        scaleView = (RecBadgedView) findViewById(R.id.badge_scale_view);
        regularView = (RecBadgedView) findViewById(R.id.badge_regular_view);

        triView = (TriBadgedView) findViewById(R.id.badge_tri_view);

        anyView.setBadgeText("I'm badge");
        anyView.setOnClickListener(this);
        anyView.showBadge(true);

        scaleView.showBadge(true);
        regularView.showBadge(true);

        triView.showBadge(true);
    }

    @Override
    public void onClick(View v) {
        if(anyView.isBadgeVisible()){
            anyView.showBadge(false);
        } else {
            anyView.showBadge(true);
        }
    }
}

##XML

<?xml version="1.0" encoding="utf-8"?>
<ScrollView 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"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <com.chaos.customview.badgeview.view.RecBadgedView
            android:id="@+id/badge_scale_view"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:foreground="?selectableItemBackground"
            app:recbadgeGravity="bottom|right"
            app:badgeWidthRatio="2"
            app:badgeHeightRatio="4"
            app:badgeColor="@color/colorAccent"
            app:badgeText="@string/lab_gif" >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/gem"/>
        </com.chaos.customview.badgeview.view.RecBadgedView>

        <com.chaos.customview.badgeview.view.RecBadgedView
            android:id="@+id/badge_regular_view"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:foreground="?selectableItemBackground"
            app:badgeColor="@color/colorAccent"
            app:recbadgeGravity="bottom|left"
            app:badgeText="@string/lab_gif" >
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/hebe"/>
        </com.chaos.customview.badgeview.view.RecBadgedView>

        <com.chaos.customview.badgeview.view.RecBadgedView
            android:id="@+id/badge_any_view"
            android:layout_width="200dp"
            android:layout_height="200dp"
            android:foreground="?selectableItemBackground"
            app:recbadgeGravity="top|right"
            app:badgeText="@string/lab_gif" >
            <Button
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:text="btn"/>
        </com.chaos.customview.badgeview.view.RecBadgedView>

        <com.chaos.customview.badgeview.view.TriBadgedView
            android:id="@+id/badge_tri_view"
            android:layout_width="200dp"
            android:layout_height="200dp"
            app:badgeText="@string/lab_gif">
            <ImageView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scaleType="fitXY"
                android:src="@mipmap/hebe"/>
        </com.chaos.customview.badgeview.view.TriBadgedView>
    </LinearLayout>
</ScrollView>
Become a better Android Developer
Millions of developers are learning at MindOrks

Online Training Program

Featured Blogs

Our Team

MindOrks is Certainly one of the best online blog to stay on top of all the Android development news, coding and design patterns. Finally a blog I can count on to keep myself updated with latest and greatest things happening in Android world.

Vipul Shah
Android Developer
Microsoft

Become Pro in Android by watching videos

OUR LEARNERS WORK AT