android - 如何完全模仿工具栏中的操作项视图，以进行自定义？

Question

背景

我有一个不太标准的行动项目。它有自己的布局，因为我没有为它创建一个漂亮的 Drawable（写在这里）。

基本上，它只是一个带有背景的 TextView，它包装了它显示的短文本。

问题

可悲的是，我找不到一种完全模仿它看起来像正常的方法：

涟漪效应（也可能是旧版本上的简单点击效果）没有相同的颜色和大小。
当我长按它时没有吐司
也许还有其他我没有注意到的事情？

以下是演示差异的屏幕截图：

新的非标准行动项目：

原生操作项：

我试过的

对于波纹效果的颜色，我想我可以使用“colorControlHighlight”，但我无法正确找出默认使用的颜色。我查看了支持库的“values.xml”文件，并注意到它是“ripple_material_dark”颜色（或“ripple_material_light”，以防工具栏应该是白色的），但这看起来有点像黑客.

不确定大小，但查看布局检查器，我认为视图有填充：

我还注意到工具栏的视图类名称是ActionMenuItemView. 我试图查看它的代码（可能也可以在线获得，这里），但没有注意到那里提到的有关背景的任何内容。对于填充，我认为它只是试图将图标放在中间：

无论如何，这是 POC 的当前代码：

MainActivity.kt

class MainActivity : AppCompatActivity() {
    lateinit var goToTodayView: View
    lateinit var goToTodayTextView: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(toolbar)
        goToTodayView = LayoutInflater.from(this).inflate(R.layout.go_to_today_action_item, toolbar, false)
        goToTodayTextView = goToTodayView.goToTodayTextView
        goToTodayTextView.setBackgroundDrawable(AppCompatResources.getDrawable(this, R.drawable.ic_backtodate))
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        menu.add("goToToday").setActionView(goToTodayView).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
        menu.add("asd").setIcon(R.drawable.abc_ic_menu_copy_mtrl_am_alpha).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS) //for comparison
        return super.onCreateOptionsMenu(menu)
    }
}

go_to_today_action_item.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize"
    android:background="?attr/selectableItemBackgroundBorderless" android:backgroundTint="#fff" android:clickable="true"
    android:focusable="true">

    <TextView
        android:id="@+id/goToTodayTextView" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="center" android:gravity="center" android:text="1"
        android:textColor="#fff" android:textSize="12dp" tools:background="@drawable/ic_backtodate" tools:layout_gravity="center"/>
</FrameLayout>

问题

如何设置与普通操作项相同的背景？
我如何把吐司当作一个正常的动作项目？
普通操作项和我使用布局设置的操作项之间是否还有其他不同之处？
换句话说，是否可以完全模仿原生动作项目？也许以ActionMenuItemView某种方式使用课程？也许与我尝试的解决方案非常不同？

编辑：对于动作项目的背景，我让它有点像原来的，但它仍然不一样。点击效果似乎有点不同，我还没有找到如何在长时间点击时显示操作项的吐司。结果如下：

无论如何，这就是我所做的：

go_to_today_action_item.xml

<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="?attr/actionBarSize" android:layout_height="?attr/actionBarSize" android:clickable="true"
    android:focusable="true">

    <ImageView
        android:layout_width="@dimen/action_item_background_size"
        android:layout_height="@dimen/action_item_background_size" android:layout_gravity="center"
        android:background="@drawable/action_item_selector" android:duplicateParentState="true"/>

    <TextView
        android:id="@+id/goToTodayTextView" android:layout_width="wrap_content" android:layout_height="wrap_content"
        android:layout_gravity="center" android:gravity="center" android:text="31" android:textColor="#fff"
        android:textSize="12dp" tools:background="@drawable/ic_backtodate" tools:layout_gravity="center"/>
</FrameLayout>

可绘制/action_item_selector.xml

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_pressed="true">
        <shape android:shape="rectangle">
            <solid android:color="@color/clicking_semi_white_ripple_color"/>
        </shape>
    </item>
    <item android:drawable="@android:color/transparent"/>
</selector>

drawable-v21/action_item_selector.xml

<ripple xmlns:android="http://schemas.android.com/apk/res/android"
        android:color="@color/clicking_semi_white_ripple_color">
    <item android:id="@android:id/mask">
        <shape android:shape="oval">
            <solid android:color="@android:color/white"/>
        </shape>
    </item>
</ripple>

颜色.xml

<color name="clicking_semi_white_ripple_color">#33ffffff</color>

值/尺寸.xml

<dimen name="action_item_background_size">48dp</dimen>

值-v21/dimens.xml

<dimen name="action_item_background_size">40dp</dimen>

score 2 · Accepted Answer

以下代码将使用您的布局来填充日期的标准菜单项。作为标准菜单项，它将展示您正在寻找的所有特征，并且应该与将来对菜单项行为的更改兼容。

基本概念是使用装箱日期扩展布局，并使用其绘图缓存创建位图，然后将其用作菜单项图标的可绘制对象。

MainActivity.kt

class MainActivity : AppCompatActivity() {
    private var goToTodayView: View? = null
    private var goToTodayTextView: TextView? = null
    private val textDrawable: TextDrawable? = null
    private var mOptionsMenu: Menu? = null

    public override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        setSupportActionBar(findViewById<View>(R.id.toolbar) as Toolbar)
        testWithCustomViews()
    }

    private fun updateDateView() {
        if (mOptionsMenu == null)
            return
        goToTodayView!!.invalidate()
        goToTodayView!!.buildDrawingCache()
        val bmp = Bitmap.createBitmap(goToTodayView!!.drawingCache)
        val d = BitmapDrawable(resources, bmp)
        mOptionsMenu!!.getItem(0).icon = d
    }

    private fun testWithCustomViews() {
        val toolbar = findViewById<View>(R.id.toolbar) as Toolbar

        goToTodayView = LayoutInflater.from(this).inflate(R.layout.go_to_today_action_item, toolbar, false)
        goToTodayView!!.measure(View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED),
                View.MeasureSpec.makeMeasureSpec(0, View.MeasureSpec.UNSPECIFIED))
        goToTodayView!!.layout(0, 0, goToTodayView!!.measuredWidth, goToTodayView!!.measuredHeight)
        goToTodayTextView = goToTodayView!!.findViewById(R.id.goToTodayTextView)
        goToTodayTextView!!.setBackgroundDrawable(AppCompatResources.getDrawable(this, R.drawable.ic_backtodate))
        goToTodayView!!.isDrawingCacheEnabled = true
        val handler = Handler()
        val runnable = object : Runnable {
            internal var i = 0

            override fun run() {
                if (isFinishing || isDestroyed)
                    return
                goToTodayTextView!!.text = (i + 1).toString()
                i = (i + 1) % 31
                updateDateView()
                handler.postDelayed(this, 1000)
            }
        }
        runnable.run()
    }

    override fun onCreateOptionsMenu(menu: Menu): Boolean {
        mOptionsMenu = menu
        menu.add("goToToday").setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
        updateDateView()
        menu.add("asd").setIcon(R.drawable.abc_ic_menu_copy_mtrl_am_alpha).setShowAsAction(MenuItem.SHOW_AS_ACTION_ALWAYS)
        return super.onCreateOptionsMenu(menu)
    }
}

由于go_to_today_action_item.xml现在不需要额外的视图来模拟标准菜单项行为，因此可以将其剥离。事实上，菜单项图标在没有调整的情况下显得太小了。更改go_to_today_action_item.xml 为以下内容：

<TextView
    android:id="@+id/goToTodayTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:background="@drawable/ic_backtodate"
    android:gravity="center"
    android:text="31"
    android:textColor="#fff"
    android:textSize="12dp"
    tools:layout_gravity="center" />

android - 如何完全模仿工具栏中的操作项视图，以进行自定义？

背景

问题

我试过的

问题

1 回答 1

Related

Reference