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上示例代碼。
















免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM