Neue Artikelanzahl zum Symbol auf der Schaltfläche hinzufügen - Android

Ich bin Entwickler. Ich muss das unten gezeigte Design implementieren. Ich habe bereits eine funktionierende App, frage mich aber, wie ich das überhaupt angehen soll? Insbesondere interessiert mich, wie die Anzahl der "neuen" Elemente unter Registerkarten angezeigt wird. Was ich weiß, ist, neue Symbole mit roten Punkten zu erstellen und sie nur anzuzeigen, wenn neue Inhalte verfügbar sind.

Aber ich habe keine Ahnung, wie ich diese runden Kreise über den Titel schweben lassen und die Nummer darin anzeigen kann. Hat jemand einen Vorschlag, wonach auch gesucht werden soll? Proben? Richtungen?

Zweite Frage zur Trennung von Aktivitäten. Sollte ich die Kontrolle übernehmen, um solche Schaltflächen zu kombinieren und sie nur bei Aktivitäten aufzublasen? Andernfalls kann ich Aktivitäten mit Registerkarten erstellen, bin mir aber nicht sicher, ob es möglich ist, sie so zu gestalten, dass sie so aussehen.

Machen Sie Ihr Abzeichen zu einem TextView, damit Sie den numerischen Wert durch Aufrufen auf einen beliebigen Wert einstellen können setText(). Legen Sie den Hintergrund von TextViewals XML- <shape>Zeichen fest, mit dem Sie einen durchgezogenen Kreis oder einen Verlaufskreis mit einem Rahmen erstellen können. Ein XML-Zeichen wird an die Ansicht angepasst, da die Größe mit mehr oder weniger Text geändert wird.

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>

Sie müssen sich jedoch ansehen, wie das Oval / der Kreis mit großen 3-4-stelligen Zahlen skaliert. Wenn dieser Effekt unerwünscht ist, versuchen Sie es mit einem abgerundeten Rechteck wie unten. Bei kleinen Zahlen sieht das Rechteck immer noch wie ein Kreis aus, wenn die Radien zusammenlaufen.

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>

Wenn der skalierbare Hintergrund erstellt wurde, fügen Sie ihn einfach wie folgt zum Hintergrund von a hinzu 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"/>

Schließlich können diese TextViewAbzeichen in Ihrem Layout über den entsprechenden Schaltflächen / Registerkarten platziert werden. Ich würde dies wahrscheinlich tun, indem ich jeden Knopf mit seinem Abzeichen in einem RelativeLayoutContainer gruppiere , wie folgt:

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

Hoffentlich sind das genug Informationen, um Sie zumindest in die richtige Richtung zu lenken!

Android ViewBadger

Eine einfache Möglichkeit, eine bestimmte Android-Ansicht zur Laufzeit zu "kennzeichnen", ohne dies im Layout berücksichtigen zu müssen.

Fügen Sie eine .jarDatei in Ihrem libs-Ordner hinzu

Klicken Sie hier, um das Beispiel herunterzuladen

siehe Beispiel auf Github

Einfaches Beispiel:

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

Einfachster Hack, indem Sie nur Stil geben 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" />

für die Leute, die nach Xamarin Android suchen, kann diesen Code verwenden

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

}

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

Nur um hinzuzufügen. Wenn jemand eine gefüllte Kreisblase mit der Ringform anstelle des Ovals implementieren möchte, finden Sie hier das Codebeispiel für das Hinzufügen der Blasenzahl zu den Schaltflächen der Aktionsleiste. Dies kann jedoch zu jeder Schaltfläche hinzugefügt werden.

(nenne es 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>

Möglicherweise müssen Sie die Dicke an Ihre Bedürfnisse anpassen.

Das Ergebnis wird ungefähr so ​​aussehen:

Hier ist das Layout für die Schaltfläche (nennen Sie es 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>

Im Menü Element erstellen:

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

Um onCreateOptionsMenuauf den Menüpunkt zu verweisen:

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

Legen Sie nach Erhalt der Benachrichtigung für Nachrichten die Anzahl fest:

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

Dieser Code verwendet Iconify-fontawesome .

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