बटन पर आइकन के लिए नई आइटम गणना जोड़ें - Android

Question

मैं डेवलपर हूं। मुझे नीचे दिखाए गए डिजाइन को लागू करने की आवश्यकता है। मेरे पास पहले से ही कार्यात्मक ऐप है, लेकिन आश्चर्य है कि यह कैसे अप्रोच करें? पार्टिकुलर, मुझे दिलचस्पी है कि टैब्स के तहत "न्यू" आइटमों की संख्या कैसे दिखाई जाए। मुझे क्या पता कैसे करना है - लाल डॉट्स के साथ नए आइकन बनाएं और नया सामान उपलब्ध होने पर उन्हें केवल प्रदर्शित करें।

लेकिन मुझे पता नहीं है कि कैसे उन गोल घेरे को शीर्षक के ऊपर फ्लोट किया जाए और अंदर नंबर दिखाएं। किसी को भी सुझाव है कि क्या भी देखने के लिए है? नमूने? दिशा-निर्देश?

गतिविधियों को अलग करने के बारे में दूसरा प्रश्न। क्या मुझे इस तरह से बटनों को संयोजित करने के लिए नियंत्रण बनाना चाहिए और इसे गतिविधियों पर बढ़ाना चाहिए? अन्यथा मैं वर्जित गतिविधि बना सकता हूं, लेकिन मुझे यकीन नहीं है कि अगर यह संभव है तो इसे इस तरह से देखने के लिए स्टाइल करना संभव है।

Answer 1

अपना बैज बनाओ TextView, जिससे आप कॉल करके अपनी पसंद का संख्यात्मक मान सेट कर सकते हैं setText()। TextViewXML <shape>ड्रॉबल की पृष्ठभूमि सेट करें , जिसके साथ आप एक सीमा के साथ एक ठोस या ढाल सर्कल बना सकते हैं। XML ड्रॉबल दृश्य को फिट करने के लिए स्केल करेगा क्योंकि यह अधिक या कम टेक्स्ट के साथ आकार बदलता है।

रेस / drawable / badge_circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="oval">
  <solid
    android:color="#F00" />
  <stroke
    android:width="2dip"
    android:color="#FFF" />
  <padding
    android:left="5dip"
    android:right="5dip"
    android:top="5dip"
    android:bottom="5dip" />
</shape>

आपको यह देखना होगा कि बड़े 3-4 अंकों की संख्या के साथ अंडाकार / वृत्त कैसे होता है। यदि यह प्रभाव अवांछनीय है, तो नीचे की तरह एक गोल आयत दृष्टिकोण का प्रयास करें। छोटी संख्या के साथ, आयत अभी भी एक सर्कल की तरह दिखेगा, क्योंकि रेडी एक साथ अभिसरण करता है।

रेस / drawable / badge_circle.xml:

<shape xmlns:android="http://schemas.android.com/apk/res/android"
  android:shape="rectangle">
  <corners
    android:radius="10dip"/>
  <solid
    android:color="#F00" />
  <stroke
    android:width="2dip"
    android:color="#FFF" />
  <padding
    android:left="5dip"
    android:right="5dip"
    android:top="5dip"
    android:bottom="5dip" />
</shape>

स्केलेबल पृष्ठभूमि के साथ, आप बस इसे एक की पृष्ठभूमि में जोड़ते हैं TextView, जैसे:

<TextView
  android:layout_width="wrap_content"
  android:layout_height="wrap_content" 
  android:text="10"
  android:textColor="#FFF"
  android:textSize="16sp"
  android:textStyle="bold"
  android:background="@drawable/badge_circle"/>

अंत में, इन TextViewबैज को उपयुक्त लेआउट / टैब के शीर्ष पर आपके लेआउट में रखा जा सकता है। मैं संभवत: प्रत्येक बटन को इसके बैज के साथ एक RelativeLayoutकंटेनर में समूहित करके करूंगा , जैसे:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="wrap_content"
  android:layout_height="wrap_content">
  <Button
    android:id="@+id/myButton"
    android:layout_width="65dip"
    android:layout_height="65dip"/>
  <TextView
    android:id="@+id/textOne"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignTop="@id/myButton"
    android:layout_alignRight="@id/myButton" 
    android:text="10"
    android:textColor="#FFF"
    android:textSize="16sp"
    android:textStyle="bold"
    android:background="@drawable/badge_circle"/>
</RelativeLayout>

उम्मीद है कि कम से कम आपको सही दिशा में इंगित करने के लिए पर्याप्त जानकारी है!

Comments

क्या TableLayout के साथ ऐसा कुछ करना संभव है? मेरे पास बटन का एक 2x2 ग्रिड है और एक रिश्तेदार लेआउट एक रिश्तेदार लेआउट की तुलना में सेटअप करने के लिए एक दर्द का अधिक है, हालांकि मैं एलाइनटॉप और एलाइनराइट जैसे विशेषताओं का उपयोग नहीं कर सकता

— निक

NM मैंने इसे टेबल रो में एक सापेक्ष लेआउट डालकर हल किया! धन्यवाद, कोड महान काम करता है

— Nick

@FelipeMosso ovalउदाहरण के संस्करण का उपयोग करें और <size>चौड़ाई / ऊंचाई के लिए अनुपात प्रदान करने के लिए एक तत्व जोड़ें

— devunwired

काउंट आइकन मेरे मामले में उस बटन के पीछे छिपा है। एंड्रॉइड 5.0 पर। पता नहीं क्या गड़बड़ है। ग्राफिकल लेआउट में यह अच्छा दिखता है लेकिन डिवाइस में नहीं।

— ब्रज

अगर मैं काउंट आइकन के लिए बटन का उपयोग करता हूं, तो सब कुछ ठीक है, लेकिन अगर मैं टेक्स्टव्यू का उपयोग करता हूं तो यह शीर्ष पर दिखाने के बजाय मुख्य बटन के पीछे चला जाता है!

— ब्रज

Answer 2

Android ViewBadger

लेआउट में इसके लिए पूरा किए बिना रनटाइम पर किसी भी दिए गए Android दृश्य को "बैज" करने का एक सरल तरीका।

.jarअपने libs फ़ोल्डर में फ़ाइल जोड़ें

डाउनलोड करने के लिए क्लिक करेंउदाहरण

उदाहरण देखेंgithub पर

सरल उदाहरण:

View target = findViewById(R.id.target_view);
BadgeView badge = new BadgeView(this, target);
badge.setText("1");
badge.show();

Comments

इस पुस्तकालय को हटा दिया गया है।

— वॉनसुक

Answer 3

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" />

Answer 4

जो लोग Xamarin Android के लिए देख रहे हैं, वे इस कोड का उपयोग कर सकते हैं

public class CountDrawable : Drawable
{
    private float mTextSize;
    private Paint mBadgePaint;
    private Paint mTextPaint;
    private Rect mTxtRect = new Rect();

    private String mCount = "";
    private bool mWillDraw = false;


    public CountDrawable(Context context)
    {
        float mTextSize = context.Resources.GetDimension(Resource.Dimension.badge_count_textsize);
        mBadgePaint = new Paint();
        // mBadgePaint.SetCol(ContextCompat.GetColor(context.ApplicationContext, Resource.Color.background_color));
        mBadgePaint.Color = new Color(Color.Red);
        mBadgePaint.AntiAlias = true;
        mBadgePaint.SetStyle(Paint.Style.Fill);

        mTextPaint = new Paint();
        mTextPaint.Color = new Color(Color.White);
        mTextPaint.SetTypeface(Typeface.DefaultBold);
        mTextPaint.TextSize = mTextSize;
        mTextPaint.AntiAlias = true;
        mTextPaint.TextAlign = Paint.Align.Center;
    }


    public override void Draw(Canvas canvas)
    {
        if(!mWillDraw)
        {
            return;
        }



        Rect bounds = GetBounds;
        float width = bounds.Right - bounds.Left;
        float height = bounds.Bottom - bounds.Top;

        float radius = ((Math.Max(width, height) / 2)) / 2;
        float centerX = (width - radius - 1) + 5;
        float centerY = radius - 5;
        if (mCount.Length <= 2)
        {
            // Draw badge circle.
            canvas.DrawCircle(centerX, centerY, (int)(radius + 5.5), mBadgePaint);
        }
        else
        {
            canvas.DrawCircle(centerX, centerY, (int)(radius + 6.5), mBadgePaint);
        }

        mTextPaint.GetTextBounds(mCount, 0, mCount.Length, mTxtRect);
        float textHeight = mTxtRect.Bottom - mTxtRect.Top;
        float textY = centerY + (textHeight / 2f);
        if (mCount.Length > 2)
            canvas.DrawText("99+", centerX, textY, mTextPaint);
        else
            canvas.DrawText(mCount, centerX, textY, mTextPaint);
    }

    public Rect GetBounds { get; set; }


    public void setCount(String count)
    {
        mCount = count;

        // Only draw a badge if there are notifications.
       // mWillDraw = !count.equalsIgnoreCase("0");
        mWillDraw = !string.Equals(count, "0", StringComparison.OrdinalIgnoreCase);
       // invalidateSelf();
    }

    public override void SetAlpha(int alpha)
    {

    }

    public override void SetColorFilter(ColorFilter colorFilter)
    {

    }

    public override int Opacity
    {
        get;
    }

}

और मेनऐक्टिविटी में

public override bool OnCreateOptionsMenu(IMenu menu)
    {
        // return base.OnCreateOptionsMenu(menu);
        MenuInflater.Inflate(Resource.Menu.actionmenu, menu);
        // var dd = menu.FindItem(Resource.Id.icon_group);
        IMenuItem item = menu.FindItem(Resource.Id.ic_group);
        LayerDrawable icon = item.Icon as LayerDrawable;

        // LayerDrawable icon = (LayerDrawable)item.Icon;
        CountDrawable badge;
        Drawable reuse = icon.FindDrawableByLayerId(Resource.Id.ic_group_count);
        if (reuse != null && reuse is CountDrawable)
        {
            badge = (CountDrawable)reuse;
        }
        else
        {
            badge = new CountDrawable(this);

        }
        badge.setCount("8");
        badge.GetBounds=icon.Bounds;

        icon.Mutate();
        icon.SetDrawableByLayerId(Resource.Id.ic_group_count, badge);
        return true;
    }

Comments

मैं सर्कल को छोटा कैसे करूं?

— खलील

@ शेखिल ने स्कियाशर्प का उपयोग करने की कोशिश की

— रौनक शेठिया

Answer 5

बस जोड़ना है। यदि कोई अंडाकार के बजाय रिंग शेप का उपयोग करके एक भरा हुआ सर्कल बबल लागू करना चाहता है, तो एक्शन बार बटन में बबल काउंट को जोड़ने का कोड उदाहरण है। लेकिन इसे किसी भी बटन में जोड़ा जा सकता है।

(इसे नाम दें bage_circle.xml):

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="ring"
    android:useLevel="false"
    android:thickness="9dp"
    android:innerRadius="0dp"
    >

    <solid
        android:color="#F00"
        />
    <stroke
        android:width="1dip"
        android:color="#FFF" />

    <padding
        android:top="2dp"
        android:bottom="2dp"/>

</shape>

आपको अपनी आवश्यकता के अनुसार मोटाई को समायोजित करना पड़ सकता है।

परिणाम कुछ इस तरह होगा:

यहाँ बटन के लिए लेआउट है (इसे नाम दें badge_layout.xml):

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <com.joanzapata.iconify.widget.IconButton
        android:layout_width="44dp"
        android:layout_height="44dp"
        android:textSize="24sp"
        android:textColor="@color/white"
        android:background="@drawable/action_bar_icon_bg"
        android:id="@+id/badge_icon_button"/>

    <TextView
        android:id="@+id/badge_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignTop="@id/badge_icon_button"
        android:layout_alignRight="@id/badge_icon_button"
        android:layout_alignEnd="@id/badge_icon_button"
        android:text="10"
        android:paddingEnd="8dp"
        android:paddingRight="8dp"
        android:paddingLeft="8dp"
        android:gravity="center"
        android:textColor="#FFF"
        android:textSize="11sp"
        android:background="@drawable/badge_circle"/>
</RelativeLayout>

मेनू में आइटम बनाएं:

<item
        android:id="@+id/menu_messages"
        android:showAsAction="always"
        android:actionLayout="@layout/badge_layout"/>

में onCreateOptionsMenuमेनू आइटम करने के लिए मिलता संदर्भ:

    itemMessages = menu.findItem(R.id.menu_messages);

    badgeLayout = (RelativeLayout) itemMessages.getActionView();
    itemMessagesBadgeTextView = (TextView) badgeLayout.findViewById(R.id.badge_textView);
    itemMessagesBadgeTextView.setVisibility(View.GONE); // initially hidden

    iconButtonMessages = (IconButton) badgeLayout.findViewById(R.id.badge_icon_button);
    iconButtonMessages.setText("{fa-envelope}");
    iconButtonMessages.setTextColor(getResources().getColor(R.color.action_bar_icon_color_disabled));

    iconButtonMessages.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            if (HJSession.getSession().getSessionId() != null) {

                Intent intent = new Intent(getThis(), HJActivityMessagesContexts.class);
                startActivityForResult(intent, HJRequestCodes.kHJRequestCodeActivityMessages.ordinal());
            } else {
                showLoginActivity();
            }
        }
    });

संदेशों के लिए सूचना प्राप्त करने के बाद, गिनती सेट करें:

itemMessagesBadgeTextView.setText("" + count);
itemMessagesBadgeTextView.setVisibility(View.VISIBLE);
iconButtonMessages.setTextColor(getResources().getColor(R.color.white));

यह कोड Iconify-fontawesome का उपयोग करता है ।

compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'