仿QQ微信底部的带消息数量

原创~~~仿QQ微信底部的带消息数量
菜鸟的起飞之路

问题思路:

1.利用FragmentTabhost 作为主页面, 下方三个切换按钮

2.用每个按钮为一个view ,view 的布局如下图1

3.每个切换view的图片写一个selector,作为页面切换画面

4.在view中,右上角有一个textview,作为可变的消息数目

,

图1, tabhost_item 的布局如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:paddingTop="5dp"
android:paddingBottom="5dp"
android:orientation="vertical">

<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<ImageView
android:id="@+id/imageview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:focusable="false"
android:scaleType="centerInside"
android:src="@drawable/contacts">

</ImageView>

<TextView
android:id="@+id/main_tab_unread_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="@drawable/bg_new_msg_count"
android:gravity="center"
android:textSize="6dp"
android:padding="2dp"

android:textColor="@android:color/white"
android:visibility="invisible"
android:layout_alignParentTop="true"
android:layout_toRightOf="@+id/imageview"
android:layout_toEndOf="@+id/imageview"
android:layout_gravity="right|top" />
</FrameLayout>
<TextView
android:id="@+id/textview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textColor="@drawable/common_tab_color"
android:textSize="10sp"></TextView>

</LinearLayout>

5.在activity中设置,将main_tab_unread_tv赋值给全局变量tv_count,并进行赋值

/**
* 给Tab按钮设置图标和文字
*/
private View getTabItemView(int index) {
View view = layoutInflater.inflate(R.layout.tabhost_item, null);
ImageView imageView = (ImageView) view.findViewById(R.id.imageview);
imageView.setImageResource(mImageViewArray[index]);
TextView main_tab_unread_tv = (TextView) view.findViewById(R.id.main_tab_unread_tv);
TextView textView = (TextView) view.findViewById(R.id.textview);
textView.setText(tabHostTagArray[index]);

if (index == 0) {//假如仅有通知界面需要显示消息数,提取tv_count作为全局变量进行操作,隐藏或显示
tv_count=main_tab_unread_tv;
if (counts>0){
tv_count.setVisibility(View.VISIBLE);
tv_count.setText(counts+"");
}else{
tv_count.setVisibility(View.INVISIBLE);
}
}
return view;
}
public void setMegWidget(int megWidget) {
Log.e("setMegWidget~~~~~~~", "megWidget" + counts);
if (counts>0) {
tv_count.setVisibility(View.VISIBLE);
tv_count.setText(counts+"");
}else {
tv_count.setVisibility(View.INVISIBLE);
}
}

public void notifyMsgChanged(int count) {//在massagefragment中调用,或者请求网络查看 未读消息个数,

counts=count;
setMegWidget(counts);
}

6.在fragment中进行更新,进行赋值

private void initView(View view) {//在massagefragment中调用,或者请求网络查看 未读消息个数,
////模拟调用  添加 模拟数据
mainActivity. notifyMsgChanged(2);//假设接收到两个未读消息

}

附带Demo github地址:https://github.com/ccj659/QQTabDemo.git