[Android] Google की तरह एक्शनबार अधिसूचना गिनती आइकन (बैज) है


Answers

अगर कोई ऐसा कुछ चाहता है तो मैं बस अपना कोड साझा करूंगा:

  • लेआउट / मेनू / menu_actionbar.xml

    <?xml version="1.0" encoding="utf-8"?>
    
    <menu xmlns:android="http://schemas.android.com/apk/res/android">
        ...
        <item android:id="@+id/menu_hotlist"
            android:actionLayout="@layout/action_bar_notifitcation_icon"
            android:showAsAction="always"
            android:icon="@drawable/ic_bell"
            android:title="@string/hotlist" />
        ...
    </menu>
    
  • लेआउट / action_bar_notifitcation_icon.xml

    नोट शैली और एंड्रॉइड: क्लिक करने योग्य गुण। ये लेआउट को बटन के आकार को बनाते हैं और स्पर्श करते समय पृष्ठभूमि ग्रे बनाते हैं।

    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:gravity="center"
        android:layout_gravity="center"
        android:clickable="true"
        style="@android:style/Widget.ActionButton">
    
        <ImageView
            android:id="@+id/hotlist_bell"
            android:src="@drawable/ic_bell"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_margin="0dp"
            android:contentDescription="bell"
            />
    
        <TextView xmlns:android="http://schemas.android.com/apk/res/android"
            android:id="@+id/hotlist_hot"
            android:layout_width="wrap_content"
            android:minWidth="17sp"
            android:textSize="12sp"
            android:textColor="#ffffffff"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="@null"
            android:layout_alignTop="@id/hotlist_bell"
            android:layout_alignRight="@id/hotlist_bell"
            android:layout_marginRight="0dp"
            android:layout_marginTop="3dp"
            android:paddingBottom="1dp"
            android:paddingRight="4dp"
            android:paddingLeft="4dp"
            android:background="@drawable/rounded_square"/>
    </RelativeLayout>
    
  • drawable-xhdpi / ic_bell.png

    एक 64x64 पिक्सेल छवि जिसमें सभी तरफ से 10 पिक्सेल चौड़े पैडिंग हैं। आपके पास 8 पिक्सेल चौड़े पैडिंग होने चाहिए, लेकिन मुझे लगता है कि अधिकांश डिफ़ॉल्ट आइटम उस से थोड़ा छोटे होते हैं। बेशक, आप अलग-अलग घनत्व के लिए विभिन्न आकारों का उपयोग करना चाहेंगे।

  • drawable / rounded_square.xml

    यहां, # एफएफ 222222 (अल्फा # एफ (पूरी तरह से दृश्यमान) के साथ रंग # 222222) मेरे एक्शन बार का पृष्ठभूमि रंग है।

    <?xml version="1.0" encoding="utf-8"?>
    
    <shape
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:shape="rectangle">
        <corners android:radius="2dp" />
        <solid android:color="#ffff0000" />
        <stroke android:color="#ff222222" android:width="2dp"/>
    </shape>
    
  • com / ubergeek42 / WeechatAndroid / WeechatActivity.java

    यहां हम इसे क्लिक करने योग्य और अद्यतन करने योग्य बनाते हैं! मैंने एक सार श्रोता बनाया जो ऑनलक्लिक पर टोस्ट सृजन प्रदान करता है, कोड एक्शनबारशेलॉक के स्रोतों से लिया गया था।

    private int hot_number = 0;
    private TextView ui_hot = null;
    
    @Override public boolean onCreateOptionsMenu(final Menu menu) {
        MenuInflater menuInflater = getSupportMenuInflater();
        menuInflater.inflate(R.menu.menu_actionbar, menu);
        final View menu_hotlist = menu.findItem(R.id.menu_hotlist).getActionView();
        ui_hot = (TextView) menu_hotlist.findViewById(R.id.hotlist_hot);
        updateHotCount(hot_number);
        new MyMenuItemStuffListener(menu_hotlist, "Show hot message") {
            @Override
            public void onClick(View v) {
                onHotlistSelected();
            }
        };
        return super.onCreateOptionsMenu(menu);
    }
    
    // call the updating code on the main thread,
    // so we can call this asynchronously
    public void updateHotCount(final int new_hot_number) {
        hot_number = new_hot_number;
        if (ui_hot == null) return;
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (new_hot_number == 0)
                    ui_hot.setVisibility(View.INVISIBLE);
                else {
                    ui_hot.setVisibility(View.VISIBLE);
                    ui_hot.setText(Integer.toString(new_hot_number));
                }
            }
        });
    }
    
    static abstract class MyMenuItemStuffListener implements View.OnClickListener, View.OnLongClickListener {
        private String hint;
        private View view;
    
        MyMenuItemStuffListener(View view, String hint) {
            this.view = view;
            this.hint = hint;
            view.setOnClickListener(this);
            view.setOnLongClickListener(this);
        }
    
        @Override abstract public void onClick(View v);
    
        @Override public boolean onLongClick(View v) {
            final int[] screenPos = new int[2];
            final Rect displayFrame = new Rect();
            view.getLocationOnScreen(screenPos);
            view.getWindowVisibleDisplayFrame(displayFrame);
            final Context context = view.getContext();
            final int width = view.getWidth();
            final int height = view.getHeight();
            final int midy = screenPos[1] + height / 2;
            final int screenWidth = context.getResources().getDisplayMetrics().widthPixels;
            Toast cheatSheet = Toast.makeText(context, hint, Toast.LENGTH_SHORT);
            if (midy < displayFrame.height()) {
                cheatSheet.setGravity(Gravity.TOP | Gravity.RIGHT,
                        screenWidth - screenPos[0] - width / 2, height);
            } else {
                cheatSheet.setGravity(Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, height);
            }
            cheatSheet.show();
            return true;
        }
    }
    
Question

क्या Google एंड्रॉइड की तरह गिनती के साथ एक्शन बार अधिसूचना आइकन दिखाने के लिए एक एंड्रॉइड मानक बैज या विधि है?

यदि नहीं, तो इसे बनाने का सबसे अच्छा तरीका क्या है?
मैं एंड्रॉइड के लिए नया हूँ, कृपया मदद करें।




इन सवालों के जवाबों को देखने का प्रयास करें, विशेष रूप से दूसरा, जिसमें नमूना कोड है:

Android में मेनू आइटम पर गतिशील मानों को कैसे कार्यान्वित करें

एक्शनबार आइकन पर टेक्स्ट कैसे प्राप्त करें?

जो मैं देखता हूं, उससे आपको अपना कस्टम ActionView कार्यान्वयन बनाना होगा। एक विकल्प एक कस्टम Drawable हो सकता है। ध्यान दें कि एक्शन बार के लिए अधिसूचना गिनती का कोई मूल कार्यान्वयन नहीं होता है।

संपादित करें: जिस कोड को आप ढूंढ रहे थे, कोड के साथ: नमूना कार्यान्वयन के साथ कस्टम अधिसूचना देखें




मुझे ActionView आधारित समाधान पसंद नहीं हैं, मेरा विचार है:

  1. TextView साथ एक लेआउट बनाएं, कि TextView एप्लिकेशन द्वारा पॉप्युलेट किया जाएगा
  2. जब आपको MenuItem बनाने की आवश्यकता होती है:

    2.1। लेआउट फुलाओ

    2.2। कॉल measure() और layout() (अन्यथा view 0px x 0px होगा, यह अधिकांश उपयोग मामलों के लिए बहुत छोटा है)

    2.3। TextView के पाठ को सेट करें

    2.4। दृश्य के "स्क्रीनशॉट" बनाओ

    2.6। 2.4 पर बनाए गए बिटमैप के आधार पर MenuItem आइकन सेट करें

  3. फायदा!

तो, परिणाम कुछ ऐसा होना चाहिए

  1. लेआउट बनाएं यहां एक साधारण उदाहरण है
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/counterPanel"
    android:layout_width="32dp"
    android:layout_height="32dp"
    android:background="@drawable/ic_menu_gallery">
    <RelativeLayout
        android:id="@+id/counterValuePanel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" >

        <ImageView
            android:id="@+id/counterBackground"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/unread_background" />

        <TextView
            android:id="@+id/count"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="1"
            android:textSize="8sp"
            android:layout_centerInParent="true"
            android:textColor="#FFFFFF" />
    </RelativeLayout>
</FrameLayout>

@drawable/unread_background यह है कि हरे रंग की @drawable/unread_background की पृष्ठभूमि, @drawable/ic_menu_gallery वास्तव में यहां आवश्यक नहीं है, यह केवल आईडीई में लेआउट के परिणाम का पूर्वावलोकन करने के लिए है।

  1. कोड onPrepareOptionsMenu / onPrepareOptionsMenu में कोड जोड़ें

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        getMenuInflater().inflate(R.menu.menu_main, menu);
    
        MenuItem menuItem = menu.findItem(R.id.testAction);
        menuItem.setIcon(buildCounterDrawable(count, R.drawable.ic_menu_gallery));
    
        return true;
    }
    
  2. बिल्ड-द-आइकन विधि कार्यान्वित करें:

    private Drawable buildCounterDrawable(int count, int backgroundImageId) {
        LayoutInflater inflater = LayoutInflater.from(this);
        View view = inflater.inflate(R.layout.counter_menuitem_layout, null);
        view.setBackgroundResource(backgroundImageId);
    
        if (count == 0) {
            View counterTextPanel = view.findViewById(R.id.counterValuePanel);
            counterTextPanel.setVisibility(View.GONE);
        } else {
            TextView textView = (TextView) view.findViewById(R.id.count);
            textView.setText("" + count);
        }
    
        view.measure(
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED));
        view.layout(0, 0, view.getMeasuredWidth(), view.getMeasuredHeight());
    
        view.setDrawingCacheEnabled(true);
        view.setDrawingCacheQuality(View.DRAWING_CACHE_QUALITY_HIGH);
        Bitmap bitmap = Bitmap.createBitmap(view.getDrawingCache());
        view.setDrawingCacheEnabled(false);
    
        return new BitmapDrawable(getResources(), bitmap);
    }
    

पूरा कोड यहां है: https://github.com/cvoronin/ActionBarMenuItemCounter




कस्टम आकार और आकर्षित करने के बजाय इनबिल्ट एंड्रॉइड तंत्र का उपयोग क्यों न करें? आप TextView में बैज शैली का उपयोग कर सकते हैं और अपनी थीम के अनुसार कस्टम शैली का उपयोग कर सकते हैं।

चीयर्स। :)

        <TextView
                android:id="@+id/fabCounter"
                style="@style/Widget.Design.FloatingActionButton"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_alignParentEnd="true"
                android:layout_centerVertical="true"
                android:layout_marginEnd="10dp"
                android:padding="5dp"
                android:text="10"
                android:textColor="@android:color/black"
                android:textSize="14sp" />




Links