安卓开发:角标显示未读消息数

项目中有个聊天页面,在Tab栏需要显示未读消息,好像哪个项目都有这样的需求,,,
在网上找了有好多BadgeView这样的控件,可以实现各式各样效果,但是我又不想要那么多主题,就自己写了一个,很简单的控件

首先上布局文件,很简单,就是几个布局嵌套,位置自由控制

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

    <ImageView
        android:id="@+id/main_tab_img"
        android:layout_width="34dp"
        android:layout_height="34dp"
        android:layout_centerHorizontal="true" />

    <TextView
        android:id="@+id/main_tab_tv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/main_tab_img"
        android:layout_centerHorizontal="true"
        android:textColor="@color/tm_selector_hei2lan"
        android:textSize="12dp" />

    <TextView
        android:id="@+id/main_tab_badge"
        android:layout_width="wrap_content"
        android:layout_height="20dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="6dp"
        android:layout_marginTop="2dp"
        android:background="@drawable/ease_unread_count_bg"
        android:gravity="center"
        android:minWidth="20dp"
        android:textColor="@color/white"
        android:textSize="12dp"
        android:visibility="gone" />
</merge>

不要奇怪为什么用merge标签,就是为了少嵌套一层
跟普通的自定义View没什么区别,定义需要声明的属性

<declare-styleable name="CustomTabView">
        <attr name="tab_text" format="string" />
        <attr name="tab_badge" format="string" />
        <attr name="tab_img_src" format="reference|integer" />
        <attr name="tab_checked" format="boolean" />
        <attr name="tab_selected" format="boolean" />
        <attr name="tab_badge_isshow" format="boolean" />
    </declare-styleable>

最后就是用代码控制这几个控件了
首先要获取到布局并绑定控件

View.inflate(context, R.layout.custom_main_tab, this);
        main_tab_img = (ImageView) findViewById(R.id.main_tab_img);
        main_tab_tv = (TextView) findViewById(R.id.main_tab_tv);
        main_tab_badge = (TextView) findViewById(R.id.main_tab_badge);

然后读取xml中声明的属性

        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CustomTabView);
        if (attributes != null) {
            //处理图片
            int tabImg = attributes.getResourceId(R.styleable.CustomTabView_tab_img_src, -1);
            main_tab_img.setImageResource(tabImg);
            //处理文字
            String tabTv = attributes.getString(R.styleable.CustomTabView_tab_text);
            main_tab_tv.setText(tabTv);
            //处理徽章
            String tabBadgeTv = attributes.getString(R.styleable.CustomTabView_tab_badge);
            boolean tabBadgeShow = attributes.getBoolean(R.styleable.CustomTabView_tab_badge_isshow, false);
            main_tab_badge.setText(tabBadgeTv);
            if (tabBadgeShow) {
                main_tab_badge.setVisibility(VISIBLE);
            } else {
                main_tab_badge.setVisibility(GONE);
            }

            attributes.recycle();
        }

然后是暴露出去方法来控制布局的显示形式
这个是用来标识当前是否被选中

public void setChecked(boolean isCheck) {
        if (isCheck) {
            main_tab_img.setSelected(true);
            main_tab_tv.setSelected(true);
        } else {
            main_tab_img.setSelected(false);
            main_tab_tv.setSelected(false);
        }
    }

用来标识当前有多少未读消息
(我写的是多于99就显示99+,可以自己改)

public void setTabBadge(int badgeInt) {
        if (badgeInt <= 0) {
            main_tab_badge.setVisibility(GONE);
        } else if (badgeInt > 99) {
            main_tab_badge.setVisibility(VISIBLE);
            main_tab_badge.setText("99+");
        } else {
            main_tab_badge.setVisibility(VISIBLE);
            main_tab_badge.setText(badgeInt + "");
        }
    }

下面的是更改上面的图片、文字、文字颜色

public void setTabImg(int imgRes) {
        main_tab_img.setImageResource(imgRes);
    }

    public void setTabTv(String tvStr) {
        main_tab_tv.setText(tvStr);
    }

    public void setTabTvColor(int tvColor) {
        main_tab_tv.setTextColor(tvColor);
    }

ok结束,等会上源码

—————–更新————–

加上了双击事件的监听,也是项目中的需求。哈哈哈
我用GestureDetector来监听双击事件的,完美,不需要自定义
上代码:下面这个方法是暴漏给外部调用的

public void setOnDoubleClick(OnDoubleClick onDoubleClick) {
        //回调接口
        this.onDoubleClick = onDoubleClick;
        setOnTouchListener(new OnTouchListener() {
            @Override
            public boolean onTouch(View v, MotionEvent event) {
                return gestureDetector.onTouchEvent(event);
            }
        });
    }

接下来的就是监听双击的方法

private GestureDetector gestureDetector = new GestureDetector(getContext(), new 
GestureDetector.SimpleOnGestureListener() {
        //发生确定的单击时执行
        @Override
        public boolean onSingleTapConfirmed(MotionEvent e) {
            return super.onSingleTapConfirmed(e);
        }

        //双击发生时的通知
        @Override
        public boolean onDoubleTap(MotionEvent e) {
            onDoubleClick.doubleClick();
            return super.onDoubleTap(e);
        }

        //双击手势过程中发生的事件,包括按下、移动和抬起事件
        @Override
        public boolean onDoubleTapEvent(MotionEvent e) {
            return super.onDoubleTapEvent(e);
        }
    });

最后通过回调接口把事件回调出去

public interface OnDoubleClick {
    void doubleClick();
}

源码马上到。。。

源码:http://download.youkuaiyun.com/download/ximen_qing/9790125

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值