如何完全模仿工具栏中的“操作"项目视图，以进行自定义? [英] How to fully mimic Action item view in the toolbar, for a customized one?
问题描述
我有一个动作项目不是很标准.它具有自己的布局，因为我未能为其创建漂亮的Drawable(在 此处 ).
I have an action item that's not quite standard. It has its own layout, because I've failed to create a nice Drawable for it (written about it here).
基本上，它只是一个TextView，其背景包裹了显示的短文本.
Basically, it's just a TextView with a background that wraps its short text that it shows.
可悲的是，我找不到一种完全模仿它的外观像正常人一样的方法:
Sadly I can't find a way of fully mimic it to look like normal ones:
- 波纹效果(可能在旧版本上也可能是简单的单击效果)没有相同的颜色和大小.
- 长按它不会有吐司
- 也许其他我没注意到的东西?
以下是屏幕截图，以说明两者之间的差异:
Here are screenshots to demonstrate the differences:
新的非标准操作项:
原生操作项:
对于波纹效果的颜色，我想可以使用"colorControlHighlight"，但是我无法正确确定默认使用哪种颜色.我查看了支持库的"values.xml"文件，并注意到它是"ripple_material_dark"颜色(或"ripple_material_light"颜色，以防工具栏为白色)，但这似乎有点像hack.
For the color of the ripple effect, I think I can use "colorControlHighlight", but I can't find out which color is the one used by default, correctly. I've looked inside the "values.xml" file of the support library, and noticed that it's "ripple_material_dark" color (or "ripple_material_light", in case the toolbar is supposed to be white) , but this seems a bit like a hack.
不确定大小，但查看布局检查器，我认为该视图具有填充:
Not sure about the size, but looking at the layout inspector, I think the view has padding:
我还注意到工具栏的视图类名称是ActionMenuItemView.我试图查看它的代码(这里也可能在线提供)，但是没有注意到那里提到的有关背景的任何内容.对于填充，我认为它只是尝试将图标放在中间:
I've also noticed that the view class name of the toolbar is ActionMenuItemView . I tried to look at its code (probably avaialble online too, here) , but didn't notice anything mentioned there about background. For padding I think it just tries to put the icon in the middle:
无论如何，这是POC的当前代码:
Anyway, this is the current code of the 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类?也许与我尝试过的解决方案完全不同?
- How do I set the same background as a normal action item?
- How do I put the toast like a normal action item?
- Are there other things that are different between normal action item and one that I set with a layout?
- In other words, is it possible to fully mimic native action items? Maybe using the
ActionMenuItemViewclass somehow? Maybe a very different solution from what I tried?
对于操作项的背景，我使它有点像原始的，但是还是不一样.单击效果似乎有点不同，而且我还没有找到如何在长时间单击后显示动作项的吐司.结果如下:
for the background of the action items, I made it a bit like the original ones, but it's still not the same. Clicking effect seems a tiny bit different, and I haven't found how to show the toast of the action item upon long clicking on it. Here's the result:
无论如何，这就是我所做的:
Anyway, here's what I did:
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>
drawable/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>
colors.xml
<color name="clicking_semi_white_ripple_color">#33ffffff</color>
values/dimens.xml
<dimen name="action_item_background_size">48dp</dimen>
values-v21/dimens.xml
<dimen name="action_item_background_size">40dp</dimen>
推荐答案
以下代码将使用您的布局来填充日期的标准菜单项.作为标准菜单项，它将显示您正在寻找的所有特征，并应与将来对菜单项行为的更改兼容.
The following code will use your layout to populate a standard menu item for the date. As a standard menu item, it will exhibit all the characteristics that you are looking for and should be compatible with future changes to a menu item's behavior.
基本概念是用装箱日期填充布局，并使用其绘图缓存创建一个位图，然后将其用作菜单项图标的可绘制对象.
The basic concept is to inflate the layout with the boxed date and use its drawing cache to create a bitmap that is then used as the drawable for the menu item's icon.
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更改为以下内容:
Since go_to_today_action_item.xml now doesn't need the extra views to mimic standard menu item behavior, it can be stripped down. In fact, the menu item icon appears too small without adjustments. Change go_to_today_action_item.xml to the following:
<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" />
这篇关于如何完全模仿工具栏中的“操作"项目视图，以进行自定义?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
