Question

我在添加到操作栏中的购物车图像上添加通知徽章并以编程方式对其进行操作。任何帮助？

Answer 1

通过为MenuItem创建ActionBar，您可以在custom layout上显示自定义MenuItem。要设置自定义布局，您必须使用菜单项属性app:actionLayout。

按照以下步骤在Badge操作项上创建Cart。请参阅附件image了解结果。

使用ImageView（针对购物车图标）和TextView（针对计数值）创建自定义布局

<强>布局/ custom_action_item_layout.xml：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout
    style="?attr/actionButtonStyle"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:focusable="true">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_action_cart"/>

    <TextView
        android:id="@+id/cart_badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_gravity="right|end|top"
        android:layout_marginEnd="-5dp"
        android:layout_marginRight="-5dp"
        android:layout_marginTop="3dp"
        android:background="@drawable/badge_background"
        android:gravity="center"
        android:padding="3dp"
        android:textColor="@android:color/white"
        android:text="0"
        android:textSize="10sp"/>

</FrameLayout>

使用badge创建可绘制的圆形Shape背景。

<强>抽拉/ badge_background.xml：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

    <solid android:color="@android:color/holo_red_dark"/>
    <stroke android:color="@android:color/white" android:width="1dp"/>

</shape>

将custom layout添加到菜单item。

菜单/ main_menu.xml

<menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" > <item android:id="@+id/action_cart" android:icon="@drawable/ic_action_cart" android:title="Cart" app:actionLayout="@layout/custom_action_item_layout" app:showAsAction="always"/> </menu>

在 MainActivity 中，添加以下代码：

<强> MainActivity.java：

public class MainActivity extends AppCompatActivity { ................ ...................... TextView textCartItemCount; int mCartItemCount = 10; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); ..................... ............................ } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main_menu, menu); final MenuItem menuItem = menu.findItem(R.id.action_cart); View actionView = MenuItemCompat.getActionView(menuItem); textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge); setupBadge(); actionView.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { onOptionsItemSelected(menuItem); } }); return true; } @Override public boolean onOptionsItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.action_cart: { // Do something return true; } } return super.onOptionsItemSelected(item); } private void setupBadge() { if (textCartItemCount != null) { if (mCartItemCount == 0) { if (textCartItemCount.getVisibility() != View.GONE) { textCartItemCount.setVisibility(View.GONE); } } else { textCartItemCount.setText(String.valueOf(Math.min(mCartItemCount, 99))); if (textCartItemCount.getVisibility() != View.VISIBLE) { textCartItemCount.setVisibility(View.VISIBLE); } } } } .................. .............................. }

<强>输出：

Answer 2

通过给予风格最简单的黑客。

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

Answer 3

使用 Material Components for Android (1.3.0)。

val badge = BadgeDrawable.create(context)
BadgeUtils.attachBadgeDrawable(badge, toolbar, R.id.your_menu_item)

Answer 4

    **Create a custom_layout**

    ////////

    <?xml version="1.0" encoding="utf-8"?>
    <FrameLayout
        style="?attr/actionButtonStyle"
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:clipToPadding="false"
        android:focusable="true">

        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:src="@drawable/notifications_white"/>

        <TextView
            android:id="@+id/cart_badge"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_marginLeft="55dp"
            android:layout_marginTop="3dp"
            android:background="@drawable/badge_background"
            android:gravity="center"
            android:padding="3dp"
            android:textColor="@android:color/white"
            android:text="0"
            android:textSize="10sp"
            android:visibility="gone"
            />

    </FrameLayout>

    //////

    **Create badge_background**
    /////

    <?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">

        <solid android:color="@android:color/holo_red_dark"/>
        <stroke android:color="@android:color/white" android:width="1dp"/>

    </shape>

    /////
    **Create main_menu**

////
    <menu
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto" >

        <item
            android:id="@+id/action_cart"
            android:icon="@drawable/notifications_white"
            android:title="Cart"
            app:actionLayout="@layout/custom_layout"
            app:showAsAction="always"/>

    </menu>

/////
    **In MainActivty.java**

         int count = 0;
        TextView textCartItemCount;

/// build a method inside your MainActivity ////

     @Override
        public boolean onCreateOptionsMenu(Menu menu) {
            getMenuInflater().inflate(R.menu.main_menu, menu);

            final MenuItem menuItem = menu.findItem(R.id.action_cart);

            View actionView = MenuItemCompat.getActionView(menuItem);
            textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge);

            setupBadge();

            actionView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    onOptionsItemSelected(menuItem);
                }
            });

            return true;
        }

        @Override
        public boolean onOptionsItemSelected(MenuItem item) {

            switch (item.getItemId()) {

                case R.id.action_cart: {
                    // Do something
                    return true;
                }
            }
            return super.onOptionsItemSelected(item);
        }

        private void setupBadge() {
    ///make a button in MainActivty layout
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (count >= 0) {
                        textCartItemCount.setVisibility(View.VISIBLE);
                        textCartItemCount.setText(String.valueOf(++count));
                    } else {
                        textCartItemCount.setVisibility(View.GONE);`enter code here`
                    }

                }
            });

Answer 5

此答案是对Ferdous Ahmed给出的答案的修改，因为我无法对此答案发表评论。

我只是重新发布 MainActivity

您可以通过为MenuItem创建自定义布局来在ActionBar上显示自定义MenuItem。要设置自定义布局，您必须使用菜单项属性app：actionLayout。

使用ImageView（用于购物车图标）和TextView（用于计数值）创建自定义布局

MainActivity：

public class MainActivity extends AppCompatActivity {
................
......................
TextView textCartItemCount;
int mCartItemCount = 10;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    .....................
    ............................
}

@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.main_menu, menu);

    **FrameLayout actionView = 
                  (FrameLayout)menu.findItem(R.id.action_cart).getActionView();
    textCartItemCount = (TextView) actionView.findViewById(R.id.cart_badge);**

    setupBadge();

    actionView.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            onOptionsItemSelected(menuItem);
        }
    });

    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {

    switch (item.getItemId()) {

        case R.id.action_cart: {
            // Do something
            return true;
        }
    }
    return super.onOptionsItemSelected(item);
}

private void setupBadge() {

    if (textCartItemCount != null) {
        if (mCartItemCount == 0) {
            if (textCartItemCount.getVisibility() != View.GONE) {
                textCartItemCount.setVisibility(View.GONE);
            }
        } else {
            textCartItemCount.setText(String.valueOf(Math.min(mCartItemCount, 99)));
            if (textCartItemCount.getVisibility() != View.VISIBLE) {
                textCartItemCount.setVisibility(View.VISIBLE);
            }
        }
    }
}

..................
..............................

}

Answer 6

使用https://github.com/nikartm/Image-Support可以创建带有更多选项（例如最大计数限制等）的徽章。

layout_menu_cart.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout style="?attr/actionButtonStyle"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:clipToPadding="false"
    android:focusable="true"
    android:clickable="true"
    xmlns:tools="http://schemas.android.com/tools">

    <ru.nikartm.support.ImageBadgeView
        android:id="@+id/cart_menu_icon"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:src="@drawable/ic_shopping_cart_black"
        tools:ibv_badgeValue="101"
        app:ibv_maxBadgeValue="99"
        app:ibv_badgeTextSize="7sp"
        app:ibv_fixedBadgeRadius="7dp"
        app:ibv_badgeTextStyle="bold"
        app:ibv_badgeTextColor="#ffffff"
        app:ibv_badgeColor="@color/colorAccent"
        app:ibv_badgeLimitValue="true" />

</FrameLayout>

main_menu.xml

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto">
    <item
        android:id="@+id/menu_cart"
        android:title="Cart"
        android:icon="@drawable/ic_shopping_cart_black"
        app:actionLayout="@layout/layout_menu_cart"
        app:showAsAction="always"/>
</menu>

YourActivity.kt

val menuItem = menu.findItem(R.id.menu_cart) as MenuItem
val actionView = menuItem.actionView

actionView.findViewById<ImageBadgeView>(R.id.cart_menu_icon).badgeValue = count

Answer 7

                val cartCount = Utility.getPreference(MainApplication.instance.getContext(), Constants.PREF_CART_COUNT)
                Log.e("cart_count", cartCount)
                if (cartCount.isNotEmpty()) {
                    val rl = RelativeLayout(this)
                    val paramsRR = LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT)
                    paramsRR.gravity = Gravity.CENTER
                    rl.layoutParams = paramsRR

                    val iv = ImageView(this)
                    iv.loadFromUrl(iconUrl[i])
                    val params = LinearLayout.LayoutParams(getPixel(24f).toInt(), getPixel(23f).toInt())
                    params.setMargins(getPixel(10f).toInt(), 0, getPixel(10f).toInt(), 0)
                    params.gravity = Gravity.CENTER
                    iv.setPadding(4, 4, 4, 4)
                    iv.layoutParams = params

                    val tv = TextView(this)
                    val paramsRl = LinearLayout.LayoutParams(getPixel(12f).toInt(), getPixel(12f).toInt())
                    paramsRl.setMargins(getPixel(25f).toInt(), 0, getPixel(10f).toInt(), 0)
                    params.gravity = Gravity.RIGHT
                    tv.setPadding(8, 0, 4, 8)
                    tv.text = cartCount
                    tv.setTextSize(8f)
                    tv.setTextColor(Color.parseColor("#E31119"))
                    tv.setBackgroundResource(R.drawable.badge_background)
                    tv.layoutParams = paramsRl

                    rl.addView(iv)
                    rl.addView(tv)

                    ll_options_items?.addView(rl)

Answer 8

您可以使用材料设计徽章组件：

https://material.io/develop/android/components/badging

适用于：implementation "com.google.android.material:material:1.3.0+"

动作项Android上的通知徽章

8 个答案: