বোতামে আইকনে নতুন আইটেম গণনা যুক্ত করুন - অ্যান্ড্রয়েড

Question

আমি বিকাশকারী। আমি নীচে প্রদর্শিত নকশা বাস্তবায়ন করা প্রয়োজন। আমার কাছে ইতিমধ্যে কার্যকরী অ্যাপ্লিকেশন রয়েছে তবে অবাক করে কীভাবে এটি কীভাবে যায়? বিশদ বিবরণ, আমি ট্যাবগুলির অধীনে কীভাবে "নতুন" আইটেমের সংখ্যা প্রদর্শন করতে আগ্রহী। আমি কীভাবে জানি যে - লাল বিন্দু সহ নতুন আইকন তৈরি করা এবং যখন নতুন জিনিস পাওয়া যায় কেবল তখন সেগুলি প্রদর্শিত হয়।

তবে কীভাবে এই বৃত্তাকার চেনাশোনাগুলি শিরোনামের শীর্ষে এবং ভিতরে নম্বর প্রদর্শন করা যায় তা আমার কোনও ধারণা নেই। কারও কাছে কী কী সন্ধান করার পরামর্শ রয়েছে? নমুনা? দিকনির্দেশ?

কার্যক্রম আলাদা করার বিষয়ে দ্বিতীয় প্রশ্ন আমি কি এই জাতীয় বোতামগুলি একত্রিত করতে এবং এটি ক্রিয়াকলাপগুলিতে স্ফীত করা উচিত? অন্যথায় আমি ট্যাবড ক্রিয়াকলাপ তৈরি করতে পারি তবে এটির মতো দেখতে এটি স্টাইল করা সম্ভব কিনা তা আমি নিশ্চিত নই।

Answer 1

আপনার ব্যাজকে একটি করুন TextView, আপনাকে কল করে আপনার পছন্দসই জিনিসের সংখ্যাসূচক মান সেট করার অনুমতি দেয় setText()। TextViewএক্সএমএল <shape>অঙ্কনযোগ্য হিসাবে এর পটভূমি সেট করুন , যার সাহায্যে আপনি একটি সীমানা সহ একটি শক্ত বা গ্রেডিয়েন্ট বৃত্ত তৈরি করতে পারেন। একটি এক্সএমএল অঙ্কনযোগ্য কম-বেশি পাঠ্যের সাথে আকার পরিবর্তন করায় দৃশ্যটি ফিট করতে স্কেল করবে।

পুনরায় / অঙ্কনযোগ্য / ব্যাজ_সার্কেল.এক্সএমএল:

<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 টি সংখ্যার সাথে কীভাবে স্কেল করে। যদি এই প্রভাবটি অনাকাঙ্ক্ষিত হয় তবে নীচের মতো বৃত্তাকার আয়তক্ষেত্রের পদ্ধতির চেষ্টা করুন। অল্প সংখ্যার সাথে, আয়তক্ষেত্রটি রেডিয়াই একসাথে একত্রিত হওয়ায় এখনও একটি বৃত্তের মতো দেখাবে।

পুনরায় / অঙ্কনযোগ্য / ব্যাজ_সার্কেল.এক্সএমএল:

<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

টেবিললআউট দিয়ে এর অনুরূপ কিছু করা কি সম্ভব? আমার বোতামগুলির 2x2 গ্রিড রয়েছে এবং আপেক্ষিক বিন্যাসের তুলনায় আপেক্ষিক বিন্যাসটি সেটআপ করার জন্য অনেক বেশি ব্যথা হয় তবে আমি এলিগান্টপ এবং অ্যালাইনরাইটের মতো বৈশিষ্ট্যগুলি ব্যবহার করতে পারি না

— নিক

এনএম আমি কেবলমাত্র টেবিল সারিতে একটি আপেক্ষিক বিন্যাস রেখে এটি সমাধান করেছি! ধন্যবাদ, কোড দুর্দান্ত কাজ করে

— নিক

@ ফিলিপমোসো ovalউদাহরণটির সংস্করণটি ব্যবহার করুন এবং <size>প্রস্থ / উচ্চতার অনুপাত সরবরাহ করার জন্য একটি উপাদান যুক্ত করুন

— 5:48 এ 16

কাউন্ট আইকন আমার ক্ষেত্রে সেই বোতামটির পিছনে লুকিয়ে রয়েছে। অ্যান্ড্রয়েড 5.0 এ। কি হয়েছে জানি না। গ্রাফিকাল বিন্যাসে এটি দেখতে দুর্দান্ত তবে ডিভাইসে নয়।

— ব্রজ

আমি যদি কাউন্ট আইকনের জন্য বাটনটি ব্যবহার করি তবে সবকিছু ঠিকঠাক কাজ করে তবে আমি যদি টেক্সটভিউ ব্যবহার করি তবে এটি উপরে প্রদর্শিত না হয়ে মূল বোতামের পিছনে চলে যায়!

— ব্রজ

Answer 2

অ্যান্ড্রয়েড ভিউবেজার

বিন্যাসে এটির যত্ন ব্যতীত রানটাইমে কোনও প্রদত্ত অ্যান্ড্রয়েড ভিউ "ব্যাজ" দেওয়ার সহজ উপায়।

.jarআপনার libs ফোল্ডারে ফাইল যুক্ত করুন

উদাহরণ ডাউনলোড করতে ক্লিক করুন

গিথুবের উপর উদাহরণ দেখুন

সাধারণ উদাহরণ:

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

Comments

এই গ্রন্থাগারটি হ্রাস করা হয়েছে।

— wonuc

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

শুধু যোগ করতে। যদি কেউ ডিম্বাকৃতির পরিবর্তে রিং আকার ব্যবহার করে একটি পূর্ণ বৃত্ত বুদ্বুদ বাস্তবায়ন করতে চায় তবে অ্যাকশন বার বোতামগুলিতে বুদ্বুদ গণনা যুক্ত করার কোড উদাহরণ এখানে। তবে এটি যে কোনও বোতামে যুক্ত করা যেতে পারে।

(নাম দিন 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));

এই কোডটি আইকনফাই-ফন্টউভাল ব্যবহার করে ।

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

Answer 5

যে লোকেরা জামারিন অ্যান্ড্রয়েড খুঁজছেন তাদের জন্য এই কোডটি ব্যবহার করতে পারেন

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

আমি কীভাবে বৃত্তটিকে আরও ছোট করব?

— খলিল

@ খলিল স্কিয়াশার্প ব্যবহার করে তৈরি করার চেষ্টা করুন

— রোনাক শেঠিয়া