ボタンのアイコンに新しいアイテム数を追加-Android

87

私は開発者です。以下に示す設計を実装する必要があります。私はすでに機能的なアプリを持っていますが、これにアプローチする方法さえ疑問に思いますか？特に、タブの下に「新規」アイテムの数を表示する方法に興味があります。私が知っている方法は、赤い点で新しいアイコンを作成し、新しいものが利用可能になったときにそれらを表示することです。

しかし、それらの丸い円をタイトルの上に浮かせて、中に番号を表示する方法がわかりません。誰かが何を探すべきかについて提案がありますか？サンプル？行き方？

活動の分離に関する2番目の質問。このようなボタンを組み合わせて、アクティビティで膨らませるように制御する必要がありますか？そうしないと、タブ付きのアクティビティを作成する可能性がありますが、このようにスタイルを設定できるかどうかはわかりません。

トップナビゲーションの一部

android  android-layout 
— カティット
ソース

回答:

164

バッジをにするとTextView、を呼び出して数値を好きなように設定できますsetText()。の背景をTextViewXML<shape>ドローアブルとして設定します。これを使用して、境界線のある実線またはグラデーションの円を作成できます。XMLドローアブルは、テキストのサイズが増減すると、ビューに合わせて拡大縮小されます。

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>

ただし、楕円形/円が3〜4桁の大きな数字でどのように拡大縮小するかを確認する必要があります。この効果が望ましくない場合は、以下のような角丸長方形のアプローチを試してください。数値が小さい場合でも、半径が収束するため、長方形は円のように見えます。

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>

スケーラブルな背景を作成したら、次のように、の背景に追加するだけです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>

うまくいけば、それは少なくともあなたを正しい方向に向けさせるのに十分な情報です！

— devunwired
ソース
TableLayoutでこれと同様のことを行うことは可能ですか？ボタンの2x2グリッドがあり、相対レイアウトは相対レイアウトよりもセットアップが面倒ですが、aligntTopやalignRightなどの属性を使用できません
— Nick
NMテーブルの行に相対レイアウトを配置するだけで解決しました！おかげで、コードはうまく機能します
— Nick
3
@FelipeMossooval例のバージョンを使用し、<size>要素を追加して幅/高さの比率を提供します
— devunwired 2013
4
私の場合、カウントアイコンがそのボタンの後ろに隠れています。Android5.0の場合。何が悪いのかわからない。グラフィックレイアウトでは見栄えがしますが、デバイスではそうではありません。
— Braj 2015
1
カウントアイコンにボタンを使用すると、すべて正常に機能しますが、テキストビューを使用すると、上部に表示されるのではなく、メインボタンの後ろに表示されます。
— Braj 2015
10

Android ViewBadger

レイアウトで対応しなくても、実行時に特定のAndroidビューに「バッジ」を付ける簡単な方法。

.jarlibsフォルダーにファイルを追加します

クリックしてダウンロード例

githubの例を参照してください

簡単な例：

View target = findViewById(R.id.target_view);
BadgeView badge = new BadgeView(this, target);
badge.setText("1");
badge.show();
— Mansukh Ahir
ソース
4
このライブラリは非推奨です。
— wonsuc 2017
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" />

結果

— Aks4125
ソース
1

XamarinAndroidをお探しの方はこのコードを使用できます 

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

}

そして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;
    }
— ロナック・シェシア
ソース
円を小さくするにはどうすればよいですか？
— khalil
@khalilはSkiaSharpを使用して作成しようとします
— Ronak Shethia
1

追加するだけです。楕円形の代わりにリング形状を使用して塗りつぶされた円のバブルを実装したい場合は、アクションバーボタンにバブルカウントを追加するコード例を次に示します。ただし、これは任意のボタンに追加できます。

（名前を付けます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メニュー項目にGET参照：

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

このコードはIconify-fontawesomeを使用しています。

compile 'com.joanzapata.iconify:android-iconify-fontawesome:2.1.+'
— アブドラ・ウメル
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.