Düğmedeki simgeye yeni öğe sayısı ekle - Android

88

Ben geliştiriciyim. Aşağıda gösterilen tasarımı uygulamam gerekiyor. Zaten işlevsel bir uygulamam var ama buna nasıl yaklaşılacağını merak ediyor musunuz? Özellikle, "Yeni" öğelerin sayısının sekmeler altında nasıl gösterileceğiyle ilgileniyorum. Nasıl yapacağımı BİLİYORUM - kırmızı noktalı yeni simgeler oluşturmak ve yeni şeyler mevcut olduğunda bunları görüntülemek.

Ama bu yuvarlak çemberlerin başlığın üstünde durmasını ve içindeki numarayı göstermesini nasıl sağlayacağımı bilmiyorum. Neyi çok aradığına dair önerisi olan var mı? Örnekler? Talimatlar?

Faaliyetleri ayırmakla ilgili ikinci soru. Bunun gibi düğmeleri birleştirmek ve sadece etkinliklere şişirmek için kontrol yapmalı mıyım? Aksi takdirde sekmeli aktivite oluşturabilirim, ancak bu şekilde görünmesini sağlamak için biçimlendirmenin mümkün olup olmadığından emin değilim.

Üst gezinme bölümü

android  android-layout 
— Katit
kaynak

Yanıtlar:

165

TextViewArayarak istediğiniz herhangi bir şeye sayısal değeri ayarlamanıza olanak tanıyan rozetinizi bir hale getirin setText(). Öğesinin arka planını, kenarlıklı düz veya gradyan daire oluşturabileceğiniz TextViewbir XML <shape>çekilebilir olarak ayarlayın . Bir XML çizilebilir, az ya da çok metinle yeniden boyutlandırıldığında görünüme sığacak şekilde ölçeklenir.

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

Yine de oval / dairenin 3-4 basamaklı büyük sayılarla nasıl ölçeklendiğine bir göz atmanız gerekecek. Bu etki istenmiyorsa, aşağıdaki gibi yuvarlatılmış dikdörtgen bir yaklaşım deneyin. Küçük sayılarda, yarıçaplar birbirine yaklaştıkça dikdörtgen yine bir daire gibi görünecektir.

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

Oluşturulan ölçeklenebilir arka planla, bunu basitçe a'nın arka planına eklemeniz yeterlidir 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"/>

Son olarak, bu TextViewrozetler mizanpajınızda uygun düğmelerin / sekmelerin üstüne yerleştirilebilir. Bunu muhtemelen her düğmeyi rozetiyle birlikte bir RelativeLayoutkapsayıcıda gruplayarak yapardım , örneğin:

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

Umarım bu, en azından sizi doğru yöne yönlendirmek için yeterli bilgidir!

— devunwired
kaynak
TableLayout ile buna benzer bir şey yapmak mümkün mü? 2x2 bir düğme ızgaram var ve göreceli bir düzen, göreceli bir düzenden ziyade kurulum için daha zahmetli ancak aligntTop ve alignRight gibi özellikleri kullanamıyorum
— Nick
NM Bunu sadece tablo satırına göreceli bir düzen koyarak çözdüm! Teşekkürler, kod harika çalışıyor
— Nick
3
@FelipeMosso ovalÖrneğin sürümünü kullanın ve <size>genişlik / yükseklik oranlarını sağlamak için bir öğe ekleyin
— devunwired
4
Benim durumumda sayım simgesi o düğmenin arkasında saklanıyor. Android 5.0'da. Neyin yanlış olduğunu bilmiyorum. Grafik düzende iyi görünüyor ancak cihazda değil.
— Braj
1
Düğme için sayma simgesini kullanırsam, her şey yolunda gider ancak Textview kullanırsam, üstte görünmek yerine ana düğmenin arkasına gider!
— Braj
10

Android ViewBadger

Herhangi bir Android görünümüne çalışma zamanında, düzende hizmet vermek zorunda kalmadan "rozet" atmanın basit bir yolu.

.jarLibs klasörünüze dosya ekleyin

Örneği indirmek için tıklayın

github'daki örneğe bakın

Basit örnek:

View target = findViewById(R.id.target_view);
BadgeView badge = new BadgeView(this, target);
badge.setText("1");
badge.show();
— Mansukh Ahir
kaynak
4
Bu kitaplık kullanımdan kaldırılmıştır.
— wonsuc
4

TextViewSadece stil vererek en basit hackleme .

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

Sonuç

— Aks4125
kaynak
2

Sadece eklemek için. Birisi oval yerine halka şeklini kullanarak dolu bir daire balonu uygulamak isterse, kabarcık sayısını işlem çubuğu düğmelerine eklemenin kod örneğini burada bulabilirsiniz. Ancak bu, herhangi bir düğmeye eklenebilir.

(adlandırın 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>

İhtiyacınıza göre kalınlığı ayarlamanız gerekebilir.

Sonuç şöyle bir şey olacak:

görüntü açıklamasını buraya girin

Düğmenin düzeni şu şekildedir (adlandırın 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>

Menüde öğe oluştur:

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

Gelen onCreateOptionsMenuMenü öğesine olsun referansı:

    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();
            }
        }
    });

Mesajlar için bildirim aldıktan sonra, sayıyı ayarlayın:

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

Bu kod, Iconify-fontawesome kullanır .

compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'
— Abdullah Umer
kaynak
1

Xamarin Android'i arayanlar için Bu Kodu Kullanabilir 

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;
    }

}

Ve MainActivity'de 

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;
    }
— Ronak Shethia
kaynak
daireyi nasıl küçültürüm?
— khalil
@khalil SkiaSharp kullanarak oluşturmaya çalışın
— Ronak Shethia
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.