web-dev-qa-db-ja.com

アクションアイテムの通知バッジAndroid

アクションバーに配置されたカート画像に通知バッジを追加し、プログラムで操作します。ヘルプはありますか？

androidandroid-layoutandroid-actionbarbadge
26
Subrat Pani

MenuItemのcustom layoutを作成することにより、ActionBarにカスタムMenuItemを表示できます。カスタムレイアウトを設定するには、メニュー項目属性app:actionLayoutを使用する必要があります。

以下の手順に従って、Badge on Cartアクションアイテムを作成します。結果については、添付のimageを参照してください。

  1. ImageView（カートアイコン用）およびTextView（カウント値用）を使用してカスタムレイアウトを作成します

layout/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>
  1. badgeを使用して、描画可能な円形Shape背景を作成します。

drawable/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>
  1. custom layoutをメニューitemに追加します。

menu/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>
  1. 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);
                }
            }
        }
    }

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

}

出力：

enter image description here

136
Ferdous Ahamed

おそらく、より高速で簡単になります ソリューション 。たとえばxml：

    <ru.nikartm.support.ImageBadgeView
    Android:id="@+id/ibv_icon2"
    Android:layout_width="80dp"
    Android:layout_height="80dp"
    Android:layout_marginTop="30dp"
    Android:layout_gravity="center"
    Android:padding="10dp"
    app:ibv_badgeValue="100"
    app:ibv_badgeTextSize="12sp"
    app:ibv_fixedBadgeRadius="15dp"
    app:ibv_badgeTextStyle="bold"
    app:ibv_badgeTextColor="#ffffff"
    app:ibv_badgeColor="#00ACC1"
    app:ibv_badgeLimitValue="false"
    Android:src="@drawable/ic_shopping_cart" />

またはプログラムで：

imageBadgeView.setBadgeValue(27)
            .setBadgeOvalAfterFirst(true)
            .setBadgeTextSize(16)
            .setMaxBadgeValue(999)
            .setBadgeTextFont(typeface)
            .setBadgeBackground(getResources().getDrawable(R.drawable.rectangle_rounded))
            .setBadgePosition(BadgePosition.BOTTOM_RIGHT)
            .setBadgeTextStyle(Typeface.NORMAL)
            .setShowCounter(true)
            .setBadgePadding(4);

Screen

これが役立つことを願っています。

4
Javis

スタイルを与えることによる最も単純なハック。

        <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

4
Aks4125
    **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`
                    }

                }
            });
0
Asif Ali