在現在大部分的資訊釋出類應用，都有這樣的一個功能：當後臺資料更新，比如有系統訊息或者是使用者間有互動的時候，通過在控制元件上顯示一個小紅點來提示使用者有新的資訊。一般來說，這種業務需求，我們可以在佈局檔案中隱藏一個小紅點，然後當檢測到有資料更新的時候，我們將隱藏的小紅點顯示即可。但是這種方案，存在一些弊端，比如使用不方便，需要在很多介面新增小紅點的佈局，而且使用起來不靈活。

今天這篇文章，給大家介紹一個開源第三方控制元件——BadgeView，來實現相同的功能，而且使用起來非常的方便，非常強大。

先看一下介面效果圖

我們可以看到，效果非常棒，各種需求都能滿足，而且還可以新增自定義的動畫效果，瞬間讓你的APP變得高大上！

下面，具體介紹BadgeView的各種效果的使用

// 預設的badge效果
		View target = findViewById(R.id.default_target);
		BadgeView badge = new BadgeView(this, target);
		badge.setText("1");
		badge.show();

		// 設定位置
		btnPosition = (Button) findViewById(R.id.position_target);
		badge1 = new BadgeView(this, btnPosition);
		badge1.setText("12");
		badge1.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);
		btnPosition.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				badge1.toggle();
			}
		});

		// 設定顯示文字/字型顏色/背景顏色
		btnColour = (Button) findViewById(R.id.colour_target);
		badge2 = new BadgeView(this, btnColour);
		badge2.setText("New!");
		badge2.setTextColor(Color.BLUE);
		badge2.setBadgeBackgroundColor(Color.YELLOW);
		badge2.setTextSize(12);
		btnColour.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				badge2.toggle();
			}
		});

		// 預設動畫效果
		btnAnim1 = (Button) findViewById(R.id.anim1_target);
		badge3 = new BadgeView(this, btnAnim1);
		badge3.setText("84");
		btnAnim1.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				badge3.toggle(true);
			}
		});

		// 使用者自定義動畫
		btnAnim2 = (Button) findViewById(R.id.anim2_target);
		badge4 = new BadgeView(this, btnAnim2);
		badge4.setText("123");
		badge4.setBadgePosition(BadgeView.POSITION_TOP_LEFT);
		badge4.setBadgeMargin(15);
		badge4.setBadgeBackgroundColor(Color.parseColor("#A4C639"));
		btnAnim2.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				// 設定進入的移動動畫，設定了插值器，可以實現顫動的效果
				TranslateAnimation anim = new TranslateAnimation(-100, 0, 0, 0);
				anim.setInterpolator(new BounceInterpolator());
				// 設定動畫的持續時間
				anim.setDuration(1000);
				// 設定退出的移動動畫
				TranslateAnimation anim2 = new TranslateAnimation(0, -100, 0, 0);
				anim2.setDuration(500);
				badge4.toggle(anim, anim2);
			}
		});

		// 設定使用者自定義的背景圖片
		btnCustom = (Button) findViewById(R.id.custom_target);
		badge5 = new BadgeView(this, btnCustom);
		badge5.setText("37");
		badge5.setBackgroundResource(R.drawable.badge_ifaux);
		badge5.setTextSize(16);
		btnCustom.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				badge5.toggle(true);
			}
		});

		// 在tab上顯示一個小紅點
		TabWidget tabs = (TabWidget) findViewById(android.R.id.tabs);

		btnTab = (Button) findViewById(R.id.tab_btn);
		badge7 = new BadgeView(this, tabs, 2);
		badge7.setText("5");
		btnTab.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				badge7.toggle();
			}
		});

		// 可以被點選的badge
		btnClick = (Button) findViewById(R.id.click_target);
		badge6 = new BadgeView(this, btnClick);
		badge6.setText("click me");
		badge6.setBadgeBackgroundColor(Color.BLUE);
		badge6.setTextSize(16);
		//設定點選事件
		badge6.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				Toast.makeText(DemoActivity.this, "clicked badge",
						Toast.LENGTH_SHORT).show();
			}
		});
		btnClick.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				badge6.toggle();
			}
		});

		// 紅點數字可以自增長的badge
		btnIncrement = (Button) findViewById(R.id.increment_target);
		badge8 = new BadgeView(this, btnIncrement);
		badge8.setText("0");
		btnIncrement.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if (badge8.isShown()) {
					badge8.increment(1);
				} else {
					badge8.show();
				}
			}
		});
 

BadgeView badge;
		View target;

		// *** test linear layout container ***

		target = findViewById(R.id.linear_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();

		// *** test relative layout container ***

		target = findViewById(R.id.relative_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();

		// *** test frame layout container ***

		target = findViewById(R.id.frame_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();

		// *** test table layout container ***

		target = findViewById(R.id.table_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();

		// *** test linear layout ***

		target = findViewById(R.id.linear_group_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();

		// *** test relative layout ***

		target = findViewById(R.id.relative_group_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();

		// *** test frame layout ***

		target = findViewById(R.id.frame_group_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();

		// *** test table layout ***

		target = findViewById(R.id.tablerow_group_target);
		badge = new BadgeView(this, target);
		badge.setText("OK");
		badge.show();
 

最後直接給出下載連結吧，自己看最明白~

點選下載