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

问题描述

我指的是this answer。

它起作用了，可以让我在导航抽屉菜单中的购物车前数，但是如何将计数器TextView围成一个圈？

我想要的是：

我从上面的链接中得到的是它仅显示文本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"

        />

活动：-

 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

            }
        }

    })
}

解决方法

似乎您链接的答案在某些方面已经过时，但是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"/>

然后在“活动”或“片段”中，为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的{​​{1}}属性和可见性。