Android 徽章控件

Related tags

UI/UX badge badgeview
Overview

💗 BGABadgeView-Android 💗

Android Arsenal License Download

English Document

react-native-bga-badge-view

demo中演示了:

  • 微博底部tab显示最新微博条数
  • 微博列表用户头像显示显示右下角vip徽章
  • 微信消息界面用户新消息
  • 微信消息界面订阅号新消息
  • 使用v4包中的RoundedBitmapDrawable制作圆角头像
  • 拖拽删除徽章

爆炸效果参考的 ExplosionField 改成了只有一个View的情况,只刷新徽章附近的区域

效果图

badgeview

点击下载 Apk 或扫描下方二维码安装体验

Demo

添加 Gradle 依赖

  • maven { url 'https://jitpack.io' } 加入到 repositories 中
  • 添加如下依赖,末尾的「latestVersion」指的是徽章Download里的版本名称,请自行替换。
dependencies {
    implementation 'com.github.bingoogolapple.BGABadgeView-Android:api:latestVersion'
    annotationProcessor 'com.github.bingoogolapple.BGABadgeView-Android:compiler:latestVersion'
}

初始化徽章控件

  1. 在项目任意一个类上面添加 BGABadge 注解,例如新建一个类 BGABadgeInit 专门用于初始化徽章控件
  2. 需要哪些类具有徽章功能,就把那些类的 Class 作为 BGABadge 注解的参数「下面的代码块给出了例子,不需要的可以删掉对应的行」
@BGABadge({
        View.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeView,不想用这个类的话就删了这一行
        ImageView.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeImageView,不想用这个类的话就删了这一行
        TextView.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeFloatingTextView,不想用这个类的话就删了这一行
        RadioButton.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeRadioButton,不想用这个类的话就删了这一行
        LinearLayout.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeLinearLayout,不想用这个类的话就删了这一行
        FrameLayout.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeFrameLayout,不想用这个类的话就删了这一行
        RelativeLayout.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeRelativeLayout,不想用这个类的话就删了这一行
        FloatingActionButton.class, // 对应 cn.bingoogolapple.badgeview.BGABadgeFloatingActionButton,不想用这个类的话就删了这一行
        ...
        ...
        ...
})
public class BGABadgeInit {
}
  1. 再 AS 中执行 Build => Rebuild Project
  2. 经过前面三个步骤后就可以通过「cn.bingoogolapple.badgeview.BGABadge原始类名」来使用徽章控件了

接口说明

/**
 * 显示圆点徽章
 */
void showCirclePointBadge();

/**
 * 显示文字徽章
 *
 * @param badgeText
 */
void showTextBadge(String badgeText);

/**
 * 隐藏徽章
 */
void hiddenBadge();

/**
 * 显示图像徽章
 *
 * @param bitmap
 */
void showDrawableBadge(Bitmap bitmap);

/**
 * 设置拖动删除徽章的代理
 *
 * @param delegate
 */
void setDragDismissDelegage(BGADragDismissDelegate delegate);

/**
 * 是否显示徽章
 *
 * @return
 */
boolean isShowBadge();

/**
 * 是否可拖动
 *
 * @return
 */
boolean isDraggable();

/**
 * 是否正在拖动
 *
 * @return
 */
boolean isDragging();

自定义属性说明

属性名 说明 默认值
badge_bgColor 徽章背景色 Color.RED
badge_textColor 徽章文本的颜色 Color.WHITE
badge_textSize 徽章文本字体大小 10sp
badge_verticalMargin 徽章背景与宿主控件上下边缘间距离 4dp
badge_horizontalMargin 徽章背景与宿主控件左右边缘间距离 4dp
badge_padding 徽章文本边缘与徽章背景边缘间的距离 4dp
badge_gravity 徽章在宿主控件中的位置 BGABadgeImageView和BGABadgeRadioButton是右上方,其他控件是右边垂直居中
badge_draggable 是否开启拖拽删除徽章 false
badge_isResumeTravel 拖拽徽章超出轨迹范围后,再次放回到轨迹范围时,是否恢复轨迹 false
badge_borderWidth 徽章描边宽度 0dp
badge_borderColor 徽章描边颜色 Color.WHITE
badge_dragExtra 触发开始拖拽徽章事件的扩展触摸距离 4dp

关于我

个人主页 邮箱 BGA 系列开源库 QQ 群 GitHub 喵(专注于 GitHub 等一切与程序员有关的内容)
bingoogolapple.cn [email protected] BGA_CODE_CLUB GitHub喵

打赏支持

如果您觉得 BGA 系列开源库帮你节省了大量的开发时间,请扫描下方的二维码随意打赏,要是能打赏个 10.24 🐵 就太 👍 了。您的支持将鼓励我继续创作:octocat:

如果您目前正打算购买通往墙外的梯子,可以使用我的邀请码「YFQ9Q3B」购买 Lantern,双方都赠送三个月的专业版使用时间 🍻

License

Copyright 2015 bingoogolapple

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

   http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
Comments
  • 最新

    最新

    android studio 3.0中,26 版本编译出现以下错误。

    Unable to resolve dependency for ':app@debugAndroidTest/compileClasspath': Could not resolve cn.bingoogolapple:bga-badgeview:1.1.3.

    Could not resolve cn.bingoogolapple:bga-badgeview:1.1.3. Required by: project :app

    Could not resolve cn.bingoogolapple:bga-badgeview:1.1.3. > Could not get resource 'https://www.jitpack.io/cn/bingoogolapple/bga-badgeview/1.1.3/bga-badgeview-1.1.3.pom'. > Could not HEAD 'https://www.jitpack.io/cn/bingoogolapple/bga-badgeview/1.1.3/bga-badgeview-1.1.3.pom'. Received status code 401 from server: Unauthorized

    opened by yigepang 2
  • 重新放回时曲线不能绘制

    重新放回时曲线不能绘制

    拖拽徽章,当线断裂,再次放回到半径之内,曲线不能重新绘制

    // 处理断开事件 if (BGABadgeViewUtil.getDistanceBetween2Points(mDragCenter, mStickCenter) > mDismissThreshold) { mDismissAble = true; postInvalidate(); } else { mDismissAble = false; }

    在这里加上else体验会更好

    opened by yhsj0919 2
  • 为什么RadioGroup的监听没效果?

    为什么RadioGroup的监听没效果?

    代码: main_bottom.setOnCheckedChangeListener(tabCheckedListener); RadioGroup.OnCheckedChangeListener tabCheckedListener = new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup radioGroup, int i) { ((BGABadgeRadioButton) main_bottom.getChildAt(i)).setChecked(true); viewPager.setCurrentItem(i,false); } }; 里面的BGABadgeRadioButton 点击没反应

    opened by merhong2012 2
  • Exception when drag BGABadge

    Exception when drag BGABadge

    it's just disappear when i drag the bgabadgeview, i found an exception in:

    @Override
     public boolean onTouchEvent(MotionEvent event) {
         try {
             switch (event.getAction()) {
                 case MotionEvent.ACTION_DOWN:
                     handleActionDown(event);
                     break;
                 case MotionEvent.ACTION_MOVE:
                     handleActionMove(event);
                     break;
                 case MotionEvent.ACTION_UP:
                 case MotionEvent.ACTION_CANCEL:
                     handleActionUp(event);
                     break;
             }
         } catch (Exception e) {
             // 确保自己能被移除
             removeSelfWithException();
         }
         return true;
     }
    
     private void handleActionDown(MotionEvent event) {
         if (mExplosionAnimator == null && getParent() == null) {
             mDragRadius = Math.min(mBadgeViewHelper.getBadgeRectF().width() / 2, mMaxDragRadius);
             mStickRadius = mDragRadius - mDragStickRadiusDifference;
             mDismissThreshold = (int) (mStickRadius * 10);
    
             mDismissAble = false;
             mIsDragDisappear = false;
    
             mWindowManager.addView(this, mLayoutParams);
    
             updateDragPosition(event.getRawX(), event.getRawY());
         }
     }
    

    image

    p.s. the context is activity

    opened by t894924815 1
  • getNavigationBarHeight 的疑问

    getNavigationBarHeight 的疑问

    BGABadgeViewUtil 的 getNavigationBarHeight 里怎么写的是resources.getIdentifier("status_bar_height", "dimen", "android");,而内部调用的checkDeviceHasNavigationBar 里却检查的是 rs.getIdentifier("config_showNavigationBar", "bool", "android")。 第一个应该是navigation_bar_height吧?

    getNewStartY 里为什么不直接使用 getHeight,如果要手动计算可绘制高度,除了要减去状态栏的高度外,还要减去标题栏的高度(toolbar、custom toolbar...),标题栏高度这个不好处理。

    opened by TomeOkin 1
  • Wonderful Badge View

    Wonderful Badge View

    1,showCriclePointBadge 应该是笔误 showCirclePointBadge. 2,请教一下为什么要使用AppCompatCheckedTextView、AppCompatTextView、AppCompatRadioButton而不用CheckedTextView、TextView、RadioButton减少依赖?

    opened by cc1rr 1
  • 三步编译完成,引入xml文件中,运行报错

    三步编译完成,引入xml文件中,运行报错

    Caused by: android.view.InflateException: Binary XML file line #27: Error inflating class cn.bingoogolapple.badgeview.BGADragBadgeView Caused by: java.lang.NoSuchMethodException: [class android.content.Context, interface android.util.AttributeSet]

    opened by xyZangGit 0
  • BGABadgeRadioGroup 是无法正常构建的

    BGABadgeRadioGroup 是无法正常构建的

    错误: 对于RadioGroup(Context,AttributeSet,int), 找不到合适的构造器 构造器 RadioGroup.RadioGroup(Context)不适用 (实际参数列表和形式参数列表长度不同) 构造器 RadioGroup.RadioGroup(Context,AttributeSet)不适用 (实际参数列表和形式参数列表长度不同)

    1549957479 1

    opened by ShowMeThe 0
  • 注解生成的BGABadgeRadioButton无法点击选中

    注解生成的BGABadgeRadioButton无法点击选中

    无法点击BGABadgeRadioButton来触发以下事件 mTabRg.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() { @Override public void onCheckedChanged(RadioGroup group, int checkedId) { switch (checkedId) { case R.id.brb_main_home: ToastUtil.show("首页"); break; case R.id.brb_main_message: ToastUtil.show("消息"); break; case R.id.brb_main_discover: ToastUtil.show("发现"); break; case R.id.brb_main_me: ToastUtil.show("我"); break; } } });

    opened by yhyzgn 0
  • 徽章显示在了图片的中间而不是右上角

    徽章显示在了图片的中间而不是右上角

    我的布局是这样的

    <androidx.cardview.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="67dp"
            android:layout_marginTop="11dp"
            android:layout_marginLeft="13dp"
            android:layout_marginRight="13dp"
            app:cardBackgroundColor="#ffffff"
            app:cardCornerRadius="8dp"
            app:cardElevation="0dp">
    
            <LinearLayout
                android:orientation="horizontal"
                android:gravity="center_vertical"
                android:layout_width="match_parent"
                android:layout_height="match_parent">
    
                <LinearLayout
                    android:id="@+id/like_item"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">
    
                    <cn.bingoogolapple.badgeview.BGABadgeImageView
                        android:id="@+id/like_badge"
                        android:layout_width="24dp"
                        android:layout_height="22dp"
                        android:src="@drawable/ic_like_black" />
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="7dp"
                        android:text="点赞与喜欢"
                        android:textColor="#313131"
                        android:textSize="10sp" />
    
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/comment_item"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">
    
                    <cn.bingoogolapple.badgeview.BGABadgeImageView
                        android:layout_width="24dp"
                        android:layout_height="22dp"
                        android:src="@drawable/ic_comment_black" />
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="7dp"
                        android:text="评论"
                        android:textColor="#313131"
                        android:textSize="10sp" />
    
                </LinearLayout>
    
                <LinearLayout
                    android:id="@+id/follow_item"
                    android:orientation="vertical"
                    android:gravity="center"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1">
    
                    <cn.bingoogolapple.badgeview.BGABadgeImageView
                        android:layout_width="24dp"
                        android:layout_height="22dp"
                        android:src="@drawable/ic_follow_black" />
    
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_marginTop="7dp"
                        android:text="关注"
                        android:textColor="#313131"
                        android:textSize="10sp" />
    
                </LinearLayout>
    
            </LinearLayout>
    
        </androidx.cardview.widget.CardView>
    

    image

    徽章应该显示在右上角却显示在图片的中间

    opened by HenryWu01 0
  • 依赖包完全导入不了,不能使用

    依赖包完全导入不了,不能使用

    implementation 'com.github.bingoogolapple.BGABadgeView-Android:api:1.2.0' kapt 'com.github.bingoogolapple.BGABadgeView-Android:compiler:1.2.0' 依赖包完全导入不了,不能使用

    opened by jyjiawohao 2
  • 添加增量编译支持

    添加增量编译支持

    as 3.5 之后,as引入了注释处理器增量编译api支持,可以增加编译速度 BGABadge在这个版本下编译出现了以下警告

    w: [kapt] Incremental annotation processing requested, but support is disabled because the following processors are not incremental: cn.bingoogolapple.badgeview.compiler.BGABadgeProcessor (NON_INCREMENTAL).

    opened by chenfei0928 1
Owner
王浩
自助者天助之,学习ing
王浩
TourGuide is an Android library that aims to provide an easy way to add pointers with animations over a desired Android View

TourGuide TourGuide is an Android library. It lets you add pointer, overlay and tooltip easily, guiding users on how to use your app. Refer to the exa

Tan Jun Rong 2.6k Jan 5, 2023
Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your development.

Bubbles for Android Bubbles for Android is an Android library to provide chat heads capabilities on your apps. With a fast way to integrate with your

Txus Ballesteros 1.5k Jan 2, 2023
View that imitates Ripple Effect on click which was introduced in Android L (for Android 2.3+)

RippleView View that imitates Ripple Effect on click which was introduced in Android L. Usage For a working implementation, Have a look at the Sample

Muthuramakrishnan Viswanathan 1.2k Dec 30, 2022
A new canvas drawing library for Android. Aims to be the Fabric.js for Android. Supports text, images, and hand/stylus drawing input. The library has a website and API docs, check it out

FabricView - A new canvas drawing library for Android. The library was born as part of a project in SD Hacks (www.sdhacks.io) on October 3rd. It is cu

Antwan Gaggi 1k Dec 13, 2022
MarkdownView is an Android webview with the capablity of loading Markdown text or file and display it as HTML, it uses MarkdownJ and extends Android webview.

About MarkdownView (Markdown For Android) is an Android library that helps you display Markdown text or files (local/remote) as formatted HTML, and st

Feras Alnatsheh 1k Dec 20, 2022
SwipeBack for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swipe gesture

SwipeBack SwipeBack is for Android Activities to do pretty the same as the android "back-button" will do, but in a really intuitive way by using a swi

Hannes Dorfmann 697 Dec 14, 2022
A backport of the SwitchPreference component that was introduced on Android 4 (ICS / level 14). This port works on Android 2.1+ (Eclair MR1 / level 7).

Android Switch Preference Backport A backport of the SwitchPreference component that was introduced on Android 4 (ICS / level 14). This port works on

Benoit Lubek 498 Dec 29, 2022
Wizard Pager is a library that provides an example implementation of a Wizard UI on Android, it's based of Roman Nurik's wizard pager (https://github.com/romannurik/android-wizardpager)

Wizard Pager Wizard Pager is a library that provides an example implementation of a Wizard UI on Android, it's based of Roman Nurik's wizard pager (ht

Julián Suárez 520 Nov 11, 2022
Make your native android Toasts Fancy. A library that takes the standard Android toast to the next level with a variety of styling options. Style your toast from code.

FancyToast-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ... ma

Shashank Singhal 1.2k Dec 26, 2022
Make your native android Dialog Fancy. A library that takes the standard Android Dialog to the next level with a variety of styling options. Style your dialog from code.

FancyAlertDialog-Android Prerequisites Add this in your root build.gradle file (not your module build.gradle file): allprojects { repositories { ..

Shashank Singhal 350 Dec 9, 2022
Xamarin.Android provides open-source bindings of the Android SDK for use with .NET managed languages such as C#

Xamarin.Android Xamarin.Android provides open-source bindings of the Android SDK for use with .NET managed languages such as C#. Build Status Platform

Xamarin 1.8k Jan 5, 2023
A Tinder-like Android library to create the swipe cards effect. You can swipe left or right to like or dislike the content.

Swipecards Travis master: A Tinder-like cards effect as of August 2014. You can swipe left or right to like or dislike the content. The library create

Dionysis Lorentzos 2.3k Dec 9, 2022
Bootstrap style widgets for Android, with Glyph Icons

Android-Bootstrap Android Bootstrap is an Android library which provides custom views styled according to the Twitter Bootstrap Specification. This al

Bearded Hen 7.3k Jan 3, 2023
[] A fast PDF reader component for Android development

This project is no longer maintained. You can find a good replacement here, which is a fork relying on Pdfium instead of Vudroid/MuPDF for decoding PD

Joan Zapata 2.8k Dec 16, 2022
[] Define and render UI specs on top of your Android UI

dspec A simple way to define and render UI specs on top of your Android UI. Usage Enclose the target UI with a DesignSpecFrameLayout, usually the root

Lucas Rocha 561 Dec 16, 2022
A Material design Android pincode library. Supports Fingerprint.

LolliPin A Lollipop material design styled android pincode library (API 14+) To include in your project, add this to your build.gradle file: //Loll

Omada Health 1.6k Nov 25, 2022
Android Library to implement simple touch/tap/swipe gestures

SimpleFingerGestures An android library to implement simple 1 or 2 finger gestures easily Example Library The library is inside the libSFG folder Samp

Arnav Gupta 315 Dec 21, 2022
Android layout decorators : Injecting custom attributes in layout files, Using decorators to get rid of unnecessary class explosion with custom views

Decor Decor is a library that applies decorators to Android layout with additional attributes without the need to extend and create a custom View for

Mouna Cheikhna 304 Nov 25, 2022