Android实战简易教程-第四十二枪（github实用控件推荐BadgeView-图标左上角消息提示控件）

微信和QQ的左上角消息提示大家都十分有印象，有强迫症的童鞋总是忍不住的要点掉它，我们怎么将这样一个小功能引入到自己的项目中呢？

github上有一款控件可以帮助我们实现这个功能，下面我们就看一下这个控件的使用吧。

下面我们看一下自带的实例,分别介绍了普通控件和ListView控件中如何使用消息提示控件，首先我们看一下普通控件的使用。

一、普通控件引入消息提示控件：

/* * ViewsFragment.java * BadgeViewDemo *  * Copyright (c) 2013 Stefan Jauker. * https://github.com/kodex83/BadgeView *  * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at *  * http://www.apache.org/licenses/LICENSE-2.0 *  * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.jauker.badgeview.example;import android.graphics.Color;import android.graphics.Typeface;import android.os.Bundle;import android.support.v4.app.Fragment;import android.util.Log;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.View.OnClickListener;import android.view.ViewGroup;import com.jauker.widget.BadgeView;public class ViewsFragment extends Fragment implements OnClickListener {    private BadgeView backgroundDrawableBadge;    private BadgeView backgroundShapeBadge;    private BadgeView backgroundDefaultBadge;    private BadgeView counterBadge;    private BadgeView gravityBadge;    private BadgeView textStyleBadge;    private BadgeView visibilityBadgeView;    /*     * (non-Javadoc)     *      * @see android.support.v4.app.Fragment#onCreateView(android.view.LayoutInflater, android.view.ViewGroup, android.os.Bundle)     */    @Override    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {        View layout = inflater.inflate(R.layout.fragment_views, null);        View backgroundDefaultView = layout.findViewById(R.id.backgroundDefault);        backgroundDefaultBadge = new BadgeView(getActivity());//初始化控件        backgroundDefaultBadge.setBadgeCount(42);        backgroundDefaultBadge.setTargetView(backgroundDefaultView);        View backgroundDrawableView = layout.findViewById(R.id.backgroundDrawable);        backgroundDrawableBadge = new BadgeView(getActivity());        backgroundDrawableBadge.setBadgeCount(88);        backgroundDrawableBadge.setBackgroundResource(R.drawable.badge_blue);//设置背景        backgroundDrawableBadge.setTargetView(backgroundDrawableView);        View backgroundShapeView = layout.findViewById(R.id.backgroundShape);        backgroundShapeBadge = new BadgeView(getActivity());        backgroundShapeBadge.setBadgeCount(47);        backgroundShapeBadge.setBackground(12, Color.parseColor("#9b2eef"));        backgroundShapeBadge.setTargetView(backgroundShapeView);        View counterView = layout.findViewById(R.id.counter);        counterView.setOnClickListener(this);        counterBadge = new BadgeView(getActivity());        counterBadge.setBadgeCount(-2);        counterBadge.setTargetView(counterView);        View gravityView = layout.findViewById(R.id.gravity);        gravityView.setOnClickListener(this);        gravityBadge = new BadgeView(getActivity());        gravityBadge.setBadgeGravity(Gravity.LEFT | Gravity.BOTTOM);        gravityBadge.setBadgeCount(4);        gravityBadge.setTargetView(gravityView);        View textStyleView = layout.findViewById(R.id.textStyle);        textStyleView.setOnClickListener(this);        textStyleBadge = new BadgeView(getActivity());        textStyleBadge.setBadgeCount(18);        textStyleBadge.setTargetView(textStyleView);        textStyleBadge.setTypeface(Typeface.create(Typeface.SANS_SERIF, Typeface.ITALIC));        textStyleBadge.setShadowLayer(2, -1, -1, Color.GREEN);        View visibilityView = layout.findViewById(R.id.visibility);        visibilityView.setOnClickListener(this);        visibilityBadgeView = new BadgeView(getActivity());        visibilityBadgeView.setBadgeCount(1);        visibilityBadgeView.setTargetView(visibilityView);        return layout;    }    /*     * (non-Javadoc)     *      * @see android.view.View.OnClickListener#onClick(android.view.View)     */    @Override    public void onClick(View v) {        switch (v.getId()) {            case R.id.counter: {                counterBadge.incrementBadgeCount(1);                break;            }            case R.id.gravity: {                gravityBadge.incrementBadgeCount(1);                Log.d(getClass().getName(), String.valueOf(gravityBadge.getBadgeCount() % 9));                if (gravityBadge.getBadgeCount() % 9 == 0) {                    gravityBadge.setBadgeGravity(Gravity.LEFT | Gravity.TOP);                } else if (gravityBadge.getBadgeCount() % 9 == 1) {                    gravityBadge.setBadgeGravity(Gravity.RIGHT | Gravity.BOTTOM);                } else if (gravityBadge.getBadgeCount() % 9 == 2) {                    gravityBadge.setBadgeGravity(Gravity.LEFT | Gravity.BOTTOM);                } else if (gravityBadge.getBadgeCount() % 9 == 3) {                    gravityBadge.setBadgeGravity(Gravity.RIGHT | Gravity.TOP);                } else if (gravityBadge.getBadgeCount() % 9 == 4) {                    gravityBadge.setBadgeGravity(Gravity.LEFT | Gravity.CENTER_VERTICAL);                } else if (gravityBadge.getBadgeCount() % 9 == 5) {                    gravityBadge.setBadgeGravity(Gravity.RIGHT | Gravity.CENTER_VERTICAL);                } else if (gravityBadge.getBadgeCount() % 9 == 6) {                    gravityBadge.setBadgeGravity(Gravity.CENTER);                } else if (gravityBadge.getBadgeCount() % 9 == 7) {                    gravityBadge.setBadgeGravity(Gravity.CENTER_HORIZONTAL | Gravity.TOP);                } else if (gravityBadge.getBadgeCount() % 9 == 8) {                    gravityBadge.setBadgeGravity(Gravity.CENTER_HORIZONTAL | Gravity.BOTTOM);                }                break;            }            case R.id.visibility: {                visibilityBadgeView.setVisibility(visibilityBadgeView.getVisibility() == View.GONE ? View.VISIBLE : View.GONE);                break;            }            default:                break;        }    }}

这里主要有几个方法需要注意：

1.

setBadgeCount(42);//一般用来表示消息的个数

2.

setBackgroundResource(R.drawable.badge_blue);//设置消息提示背景图片

3.

setBadgeGravity(Gravity.LEFT | Gravity.BOTTOM);//设置消息提示的位置

4.

setBackground(12, Color.parseColor("#9b2eef"));//设置背景颜色

5.

setTypeface(Typeface.create(Typeface.SANS_SERIF, Typeface.ITALIC));//设置显示字体

6.

setTargetView(counterView);//不要忘了添加这个，设置显示在哪个控件上

运行效果如下：

二、ListView引入消息提示控件：

代码如下:

/* * ListFragment.java * BadgeViewDemo *  * Copyright (c) 2013 Stefan Jauker. * https://github.com/kodex83/BadgeView *  * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at *  * http://www.apache.org/licenses/LICENSE-2.0 *  * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */package com.jauker.badgeview.example;import android.content.Context;import android.os.Bundle;import android.view.Gravity;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.TextView;import com.jauker.widget.BadgeView;/** * Demonstrates the BadgeView with a ListView. * Based on Android API-Demos -> List14 */public class ListFragment extends android.support.v4.app.ListFragment {    @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setListAdapter(new ListAdapter(getActivity()));    }    private static class ListAdapter extends BaseAdapter {        private static final String[] DATA = Cheeses.sCheeseStrings;        private LayoutInflater mInflater;        private Context mContext;        public ListAdapter(Context context) {            // Cache the LayoutInflate to avoid asking for a new one each time.            mInflater = LayoutInflater.from(context);            mContext = context;        }        /**         * The number of items in the list is determined by the number of speeches         * in our array.         *          * @see android.widget.ListAdapter#getCount()         */        @Override        public int getCount() {            return DATA.length;        }        /**         * Since the data comes from an array, just returning the index is         * sufficent to get at the data. If we were using a more complex data         * structure, we would return whatever object represents one row in the         * list.         *          * @see android.widget.ListAdapter#getItem(int)         */        @Override        public Object getItem(int position) {            return position;        }        /**         * Use the array index as a unique id.         *          * @see android.widget.ListAdapter#getItemId(int)         */        @Override        public long getItemId(int position) {            return position;        }        /**         * Make a view to hold each row.         *          * @see android.widget.ListAdapter#getView(int, android.view.View, android.view.ViewGroup)         */        @Override        public View getView(int position, View convertView, ViewGroup parent) {            ViewHolder holder;            if (convertView == null) {                convertView = mInflater.inflate(R.layout.list_row_badge, null);                holder = new ViewHolder();                holder.text = (TextView) convertView.findViewById(android.R.id.text1);                holder.badge = new BadgeView(mContext);                holder.badge.setTargetView(holder.text);                holder.badge.setBadgeGravity(Gravity.CENTER_VERTICAL | Gravity.RIGHT);//设置显示位置                holder.badge.setBadgeMargin(0, 0, 8, 0);//设置边距                convertView.setTag(holder);            } else {                holder = (ViewHolder) convertView.getTag();            }            holder.text.setText(DATA[position]);            holder.badge.setBadgeCount(DATA[position].length());//字母长度            return convertView;        }        static class ViewHolder {            TextView text;            BadgeView badge;        }    }}

注意几个方法：

1.

setBadgeGravity(Gravity.CENTER_VERTICAL | Gravity.RIGHT);//设置显示位置

2.

setBadgeMargin(0, 0, 8, 0);//设置边距

3.

setBadgeCount(DATA[position].length());//设置显示的数字为字母长度

运行实例：

最后再介绍一下引入工程的方法：

将工程：

拷入到你的项目的同级目录，然后导入：

你就可以像上面Demo那样使用本控件了。

喜欢的朋友关注我的博客、关注微信公众号：

多谢您的支持！