您的位置:首页 > 其它

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

2017-03-22 11:25 274 查看
项目中有个聊天页面,在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" />
<
beb0
;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.csdn.net/download/ximen_qing/9790125
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: