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

来源：互联网发布：淘宝卖家信用度编辑：程序博客网时间：2024/05/14 18:19

原创~~~仿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

1 0