在現在大部分的信息發佈類應用,都有這樣的一個功能:當後臺數據更新,比如有系統消息或者是用戶間有互動的時候,通過在控件上顯示一個小紅點來提示用戶有新的信息。一般來說,這種業務需求,我們可以在佈局文件中隱藏一個小紅點,然後當檢測到有數據更新的時候,我們將隱藏的小紅點顯示即可。但是這種方案,存在一些弊端,比如使用不方便,需要在很多界面添加小紅點的佈局,而且使用起來不靈活。
今天這篇文章,給大家介紹一個開源第三方控件——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();