0
点赞
收藏
分享

微信扫一扫

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);//不要忘了添加这个,设置显示在哪个控件上

运行效果如下:

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

二、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());//设置显示的数字为字母长度


运行实例:

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

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

将工程:

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

拷入到你的项目的同级目录,然后导入:

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

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


举报

相关推荐

0 条评论