Fügen Sie dem Symbol auf der Schaltfläche eine neue Elementanzahl hinzu – Android

Question 1

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, wie man neue Symbole mit roten Punkten erstellt und sie einfach anzeigt, wenn neue Inhalte verfügbar sind.

Aber ich habe keine Ahnung, wie man diese runden Kreise über dem Titel schweben lässt UND die Nummer darin anzeigt. Hat jemand einen Vorschlag, wonach auch gesucht werden soll? Proben? Richtungen?

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

Question 2

Machen Sie Ihr Abzeichen a TextView, sodass Sie den numerischen Wert durch Aufrufen auf einen beliebigen Wert festlegen können setText(). Legen Sie den Hintergrund fest TextView als XML <shape> Drawable, mit dem Sie einen Voll- oder Farbverlaufskreis mit Rand erstellen können. Ein XML-Drawable wird skaliert, um es an die Ansicht anzupassen, wenn 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 einen Ansatz mit abgerundeten Rechtecken wie unten. Bei kleinen Zahlen sieht das Rechteck immer noch wie ein Kreis aus, da 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>

Nachdem Sie den skalierbaren Hintergrund erstellt haben, fügen Sie ihn einfach zum Hintergrund einer TextView, so:

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

Endlich diese TextView Abzeichen können in Ihrem Layout über den entsprechenden Schaltflächen/Registerkarten platziert werden. Ich würde dies wahrscheinlich tun, indem ich jede Schaltfläche mit ihrem Abzeichen in a gruppiere RelativeLayout Behälter, etwa so:

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

Question 3

Android ViewBadger

Eine einfache Möglichkeit, eine bestimmte Android-Ansicht zur Laufzeit mit einem „Badge“ zu versehen, ohne sie im Layout berücksichtigen zu müssen.

Hinzufügen .jar Datei in Ihrem libs-Ordner

Klicken Sie hier zum Herunterladen Beispiel

sehen Beispiel auf github

Einfaches Beispiel:

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

Question 4

Einfachster Hack, indem Sie Stil verleihen TextView nur.

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

Question 5

Nur um hinzuzufügen. Wenn jemand eine gefüllte kreisförmige Blase mit der Ringform anstelle der ovalen Form implementieren möchte, finden Sie hier das Codebeispiel zum Hinzufügen der Blasenanzahl zu den Schaltflächen der Aktionsleiste. Dies kann jedoch zu jeder Schaltfläche hinzugefügt werden.

(nennen Sie 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 in etwa so aussehen:

Hier ist das Layout für die Schaltfläche (name it 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"/>

In onCreateOptionsMenu Verweis auf den Menüpunkt abrufen:

    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.+'

Question 6

für die Leute, die nach Xamarin Android Can Use This Code suchen

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