BadgeView(View上添加提醒)的应用与分析

BadgeView是一个应用非常广泛的在任意控件上显示提醒的工具类。
   


不仅在控件上,在任意布局中均可使用。代码托管在github(作者上一次更新还在3年前)   https://github.com/jgilfelt/android-viewbadger

下载下来可以直接将源代码拷贝到自己的工程中,也可以使用提供的jar包

使用方法非常简单,只要有一个控件的对象实例即可,比如在一个线性布局上显示:
    
    LinearLayout content=(LinearLayout) findViewById(R.id.container);
    BadgeView view=new BadgeView(this,content);
    view.setText("warn");
    view.show();

效果图:

也可以设置成其它位置和其它颜色

    Button btn=(Button) findViewById(R.id.btn1);//在按钮的点击事件中,显示一个BadgeView
    btn.setOnClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
        // TODO Auto-generated method stub
        BadgeView btnView=new BadgeView(MainActivity.this,v);
        btnView.setText("测试");
        btnView.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);
        btnView.setTextColor(Color.BLACK);
        btnView.setBadgeBackgroundColor(Color.RED);
        btnView.show();
        }
    });

效果图:



除了使用show方法来实现显示效果外,还可以使用toggle方法来增加更多的显示效果,将上方代码稍加变化

    Button btn=(Button) findViewById(R.id.btn1);//在按钮的点击事件中,显示一个BadgeView
    btnView = new BadgeView(MainActivity.this,btn);
    btnView.setText("测试");
    btnView.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);
    btnView.setTextColor(Color.BLACK);
    btnView.setBadgeBackgroundColor(Color.RED);
    
    btn.setOnClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
        // TODO Auto-generated method stub
//        btnView.show();
        btnView.toggle();
        }
    });

可以实现当点击按钮时显示,再次按下时隐藏。toggle方法调用时可以传入两个动画的对象,来显示或隐藏提醒

    Button btn=(Button) findViewById(R.id.btn1);//在按钮的点击事件中,显示一个BadgeView
    btnView = new BadgeView(MainActivity.this,btn);
    btnView.setText("测试");
    btnView.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);
    btnView.setTextColor(Color.BLACK);
    btnView.setBadgeBackgroundColor(Color.RED);
    
    btn.setOnClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
        // TODO Auto-generated method stub
//        btnView.show();
        TranslateAnimation animIn = new TranslateAnimation(0, 0, -100, 0);//显示时的动画
        animIn.setInterpolator(new BounceInterpolator());
        animIn.setDuration(1000);
        TranslateAnimation animOut = new TranslateAnimation(0, 0, 0, 100);//隐藏时的动画
        animOut.setInterpolator(new BounceInterpolator());
        animOut.setDuration(1000);
        
        btnView.toggle(animIn,animOut);
        }
    });


显示的提醒如果是数字的话,还可以实现自增功能。

Button btn=(Button) findViewById(R.id.btn1);//在按钮的点击事件中,显示一个BadgeView
    btnView = new BadgeView(MainActivity.this,btn);
    btnView.setText("0");
    btnView.setBadgePosition(BadgeView.POSITION_BOTTOM_LEFT);
    btnView.setTextColor(Color.BLACK);
    btnView.setBadgeBackgroundColor(Color.RED);
    
    btn.setOnClickListener(new OnClickListener() {
        
        @Override
        public void onClick(View v) {
        // TODO Auto-generated method stub
        
        if (btnView.isShown()) {
            btnView.increment(1);
        }else {
            btnView.show();
        }
        
        
        }
    });
每次点击按钮,数字都会加一

.... 


可以在Listview的每个条目当中当中使用。代码如下。

   private ListView lv;
    private static final String[] str = { "周星星""成龙""李连杰""周星星""成龙",
        "李连杰""周星星""成龙""李连杰" };

lv = (ListView) findViewById(R.id.lv);
    lv.setAdapter(new BaseAdapter() {
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
        ViewHolder holder;
        if (convertView == null) {
            holder = new ViewHolder();
            convertView = LayoutInflater.from(MainActivity.this)
                .inflate(android.R.layout.simple_list_item_2null);
            holder.text = (TextView) convertView
                .findViewById(android.R.id.text1);
            holder.badge = new BadgeView(MainActivity.this, holder.text);
            holder.badge.setBadgeBackgroundColor(Color.GREEN);
            holder.badge.setTextColor(Color.BLACK);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }
        holder.text.setText(str[position]);
        holder.badge.setText(position + "");
        holder.badge.show();
        return convertView;
        }
        @Override
        public long getItemId(int position) {
        return position;
        }
        @Override
        public Object getItem(int position) {
        return position;
        }
        @Override
        public int getCount() {
        return str.length;
        }
    });


效果图


BadegView本身也是一种控件(继承了TextView),可以直接在xml文件中定义实现。

    <com.readystatesoftware.viewbadger.BadgeView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="这里是一个BadgeView的控件"
                android:id="@+id/badge"
                android:layout_gravity="center" />

效果图:


到这里文章就结束了。如果你想使用了解更多,请参考github上示例代码。















posted @ 2014-04-29 15:29  linwoain  阅读(4305)  评论(0编辑  收藏  举报