仿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