BadgeView的使用介紹

在現在大部分的信息發布類應用，都有這樣的一個功能：當后台數據更新，比如有系統消息或者是用戶間有互動的時候，通過在控件上顯示一個小紅點來提示用戶有新的信息。一般來說，這種業務需求，我們可以在布局文件中隱藏一個小紅點，然后當檢測到有數據更新的時候，我們將隱藏的小紅點顯示即可。但是這種方案，存在一些弊端，比如使用不方便，需要在很多界面添加小紅點的布局，而且使用起來不靈活。

今天這篇文章，給大家介紹一個開源第三方控件——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();

其實都大同小異，使用方式基本一樣。

最后直接給出下載鏈接吧，自己看最明白~

點擊下載