web-dev-qa-db-fra.com

Ajouter un nouveau nombre d'éléments à l'icône sur le bouton - Android

Je suis développeur. Je dois mettre en œuvre la conception illustrée ci-dessous. J'ai déjà une application fonctionnelle, mais je me demande comment aborder cette question? En particulier, je voudrais savoir comment afficher le nombre d'éléments "nouveaux" sous des onglets. Ce que je sais comment faire - c’est créer de nouvelles icônes avec des points rouges et les afficher lorsque de nouveaux éléments sont disponibles.

Mais je ne sais pas comment faire flotter ces cercles sur le titre ET afficher le numéro à l'intérieur. Quelqu'un at-il des suggestions sur ce que trop chercher? Des échantillons? Instructions?

Deuxième question sur la séparation des activités. Devrais-je faire le contrôle pour combiner des boutons comme celui-ci et simplement le gonfler sur les activités? Sinon, je peux créer une activité à onglets mais je ne suis pas sûr qu'il soit possible de la styliser pour qu'elle ressemble à ceci.

Portion of top navigation

androidandroid-layout
77
katit

Faites de votre badge une TextView, vous permettant de définir la valeur numérique comme bon vous semble en appelant setText(). Définissez l’arrière-plan de la variable TextView sous la forme d’un dessin XML <shape>, avec lequel vous pouvez créer un cercle solide ou un cercle dégradé avec une bordure. Un dessin XML sera redimensionné pour s’adapter à la vue lorsqu’il redimensionnera avec plus ou moins de texte.

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>

Vous devrez cependant regarder comment l'ovale/cercle évolue avec de grands nombres de 3 à 4 chiffres. Si cet effet est indésirable, essayez une approche de rectangle arrondi comme ci-dessous. Avec de petits nombres, le rectangle ressemblera toujours à un cercle lorsque les rayons convergeront.

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>

Avec l’arrière-plan évolutif créé, il vous suffit de l’ajouter à l’arrière-plan d’une TextView, comme suit:

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

Enfin, ces badges TextView peuvent être placés dans votre présentation au-dessus des boutons/onglets appropriés. Je ferais probablement cela en regroupant chaque bouton avec son badge dans un conteneur RelativeLayout, comme suit:

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

Si tout va bien, c'est assez d'informations pour au moins vous faire pointer dans la bonne direction!

152
Devunwired

Au lieu d'utiliser ovale, vous pouvez utiliser la forme en anneau pour dessiner un cercle parfaitement rempli.

S'il vous plaît voir ma réponse ici .

enter image description here

15
Abdullah Umer

ViewBadger Android

Un moyen simple de "donner un badge" à une vue Android donnée au moment de l'exécution sans avoir à la gérer dans la mise en page.

Ajouter le fichier .jar dans votre dossier libs

Cliquez pour télécharger Exemple

voir Exemple sur github

Exemple simple:

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

Le hack le plus simple en donnant du style à TextView uniquement.

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

 Result

2
Aks4125

Juste pour ajouter. Si quelqu'un souhaite implémenter une bulle de cercle rempli en utilisant la forme d'anneau au lieu d'ovale, voici l'exemple de code permettant d'ajouter le nombre de bulles aux boutons de la barre d'action. Mais cela peut être ajouté à n'importe quel bouton.

(nommez-le 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>

Vous devrez peut-être ajuster l'épaisseur en fonction de vos besoins.

Le résultat sera quelque chose comme ça:

enter image description here

Voici la disposition pour le bouton (nommez-le 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>

Dans Menu créer un article:

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

Dans onCreateOptionsMenu obtenez une référence à l'élément de menu:

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

Après avoir reçu une notification pour les messages, définissez le nombre:

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

Ce code utilise Iconify-fontawesome .

compile 'com.joanzapata.iconify:Android-iconify-fontawesome:2.1.+'
0
Abdullah Umer

pour les personnes qui recherchent Xamarin Android peut utiliser ce code 

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

}

Et dans MainActivity 

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;
    }
0
Ronak Shethia