如何将带圆圈的计数器添加到导航抽屉中的项目

Question

我指的是。

它成功了，在导航抽屉菜单中的购物车前面给我计数，但我该如何将计数器 TextView 放在一个圆圈内？

我想要的是：

我从上面link得到的是，它只显示文本2，而不是在一个圆圈中。

我的代码：

菜单：--

      <item
        android:id="@+id/MyCart"
        android:icon="@drawable/ic_shopping_cart_black_24dp"
        android:title="My Cart"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        app:actionViewClass="android.widget.TextView"

        />

activity:--

 val  slideshow =
        MenuItemCompat.getActionView(navigationView!!.menu.findItem(R.id.MyCart)) as TextView
    //Gravity property aligns the text

    slideshow.setGravity(Gravity.CENTER_VERTICAL);
    slideshow.setTypeface(null,Typeface.BOLD);                                                                                                                    slideshow.setTextColor(getResources().getColor(R.color.colorAccent));
    //count is added


    RetrofitClient.instancecart.listcart(token).enqueue( object :
        Callback<CartResponse> {
        override fun onFailure(call: Call<CartResponse>, t: Throwable) {
            Toast.makeText(applicationContext,"falied", Toast.LENGTH_LONG).show()
        }

        override fun onResponse(
            call: Call<CartResponse>,
            response: Response<CartResponse>
        ) {

            val res=response
            if (response.isSuccessful) {

                val retro: String = response.body()!!.count.toString()

                slideshow.setText(retro) //retrofit api count

            }
        }

    })
}

Answer 1

您链接的答案似乎在某些方面已经过时，而且 TextView 的样式选项也有限。所以你可以这样做：设置 actionLayout 而不是 actionViewClass.

首先，创建一个可绘制的圆形 XML 资源（我们称之为 res/drawable/navdrawer_counterbackground.xml）：

<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval">
    <solid android:color="#ff0000"/>
</shape>

然后为您的柜台创建布局。我们称它为 res/layout/nav_counter.xml。 FrameLayout 允许我们在 TextView 周围添加引力，因此它可以在菜单项中垂直居中。请注意，TextView 的 ID 为 counter。 TextView的布局宽高控制圆的大小

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/counter"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_gravity="center"
        android:background="@drawable/nav_counterbackground"
        android:gravity="center"
        android:textColor="#ffffff"
        android:textStyle="bold"
        tools:text="99+">
    </TextView>
</FrameLayout>

将此布局分配给您的菜单项：

        <item
            android:id="@+id/nav_itemwithcounter"
            android:icon="@drawable/ic_whatever"
            android:title="@string/menu_whatever"
            app:actionLayout="@layout/nav_counter"/>

然后在您的 Activity 或 Fragment 中，为 TextView 创建一个属性：

private lateinit var counterView: TextView

在 onCreate()/onViewCreated() 中您可以获得导航视图并使用它来获取您的 TextView 引用：

val navView: NavigationView = findViewById(R.id.nav_view)
counterView = navView.menu.findItem(R.id.nav_itemwithcounter).actionView.findViewById(R.id.counter)

并且您可以随时更新 text 属性和此 counterView 的可见性。

如何将带圆圈的计数器添加到导航抽屉中的项目

How to add a circled counter to an item in a navigation drawer

android

menu

kotlin

navigation-drawer