Context Menu.Android
1.1.4
ตรวจสอบโปรเจ็กต์นี้บน dribbble
ตรวจสอบโครงการนี้บน Behance
สำหรับการใช้งานจริง โปรดดูที่โมดูล app
เพิ่มลงใน root build.gradle ที่ส่วนท้ายของที่เก็บข้อมูล:
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
เพิ่มการพึ่งพา
dependencies {
implementation 'com.github.Yalantis:Context-Menu.Android:1.1.4'
}
MenuObject ซึ่งประกอบไปด้วยไอคอนหรือไอคอนและคำอธิบาย คุณสามารถใช้สิ่ง drawable, resource, bitmap, color เป็นรูปภาพ:
menuObject.drawable = ...
menuObject.setResourceValue(...)
menuObject.setBitmapValue(...)
menuObject.setColorValue(...)
คุณสามารถตั้งค่า Image ScaleType :
menuObject.scaleType = ScaleType.FIT_XY
คุณสามารถใช้ resource, drawable, color เป็นพื้นหลัง:
menuObject.setBgResourceValue(...)
menuObject.setBgDrawable(...)
menuObject.setBgColorValue(...)
ตอนนี้คุณสามารถเพิ่มลักษณะที่ปรากฏของข้อความสำหรับชื่อเมนูได้อย่างง่ายดาย:
In your project styles create style for text appearance
(For better visual effect extend it from TextView.DefaultStyle):
<style name="TextViewStyle" parent="TextView.DefaultStyle">
<item name="android:textStyle">italic|bold</item>
<item name="android:textColor">#26D0EB</item>
</style>
And set it's id to your MenuObject :
val bitmapDrawable = BitmapDrawable(
resources,
BitmapFactory.decodeResource(resources, R.drawable.icn_3)
)
val menuObject = MenuObject("Add to friends").apply {
drawable = bitmapDrawable
menuTextAppearanceStyle = R.style.TextViewStyle
}
คุณสามารถใช้ color ใดก็ได้เป็นสีข้อความ:
menuObject.textColor = ...
คุณสามารถตั้ง color ใดก็ได้เป็นสีตัวแบ่ง:
menuObject.dividerColor = ...
ตัวอย่าง:
val close = MenuObject().apply { setResourceValue(R.drawable.icn_close) }
val send = MenuObject("Send message").apply { setResourceValue(R.drawable.icn_1) }
val addFriend = MenuObject("Add to friends").apply {
drawable = BitmapDrawable(
resources,
BitmapFactory.decodeResource(resources, R.drawable.icn_3)
)
}
val menuObjects = mutableListOf<MenuObject>().apply {
add(close)
add(send)
add(addFriend)
}
newInstance ของ ContextMenuDialogFragment ซึ่งรับวัตถุ MenuParams val menuParams = MenuParams(
actionBarSize = resources.getDimension(R.dimen.tool_bar_height).toInt(),
menuObjects = getMenuObjects(),
isClosableOutside = false
// set other settings to meet your needs
)
// If you want to change the side you need to add 'gravity' parameter,
// by default it is MenuGravity.END.
// For example:
val menuParams = MenuParams(
actionBarSize = resources.getDimension(R.dimen.tool_bar_height).toInt(),
menuObjects = getMenuObjects(),
isClosableOutside = false,
gravity = MenuGravity.START
)
val contextMenuDialogFragment = ContextMenuDialogFragment.newInstance(menuParams)
ContextMenuDialogFragment override fun onCreateOptionsMenu(menu: Menu?): Boolean {
menuInflater.inflate(R.menu.menu_main, menu)
return true
}
override fun onOptionsItemSelected(item: MenuItem?): Boolean {
item?.let {
when (it.itemId) {
R.id.context_menu -> {
showContextMenuDialogFragment()
}
}
}
return super.onOptionsItemSelected(item)
}
contextMenuDialogFragment = menuItemClickListener = { view, position ->
// do something here
}
contextMenuDialogFragment = menuItemLongClickListener = { view, position ->
// do something here
}
เพื่อประสบการณ์ที่ดีขึ้น ขนาดรายการเมนูควรเท่ากับความสูงของ ActionBar
newInstance ของ ContextMenuDialogFragment ได้รับวัตถุ MenuParams ที่มีฟิลด์:
menuObjects - รายการวัตถุ MenuObject
animationDelay - ความล่าช้าเป็นมิลลิวินาทีหลังจากเปิดแฟรกเมนต์และก่อนปิด ซึ่งจะทำให้แอนิเมชั่นราบรื่นขึ้นบนอุปกรณ์ที่ช้า
animationDuration - ระยะเวลาของภาพเคลื่อนไหวทุกชิ้นในหน่วยมิลลิวินาที
isClosableOutside - หากสามารถปิดเมนูได้เมื่อสัมผัสไปยังพื้นที่ที่ไม่ใช่ปุ่ม
isFitSystemWindows - หากเป็นจริง การใช้งานเริ่มต้นของ fitSystemWindows(Rect) จะถูกดำเนินการ
isClipToPadding - จริงในการตัดรายการย่อยเข้ากับช่องว่างภายในของกลุ่ม มิฉะนั้นจะเป็นเท็จ
พารามิเตอร์สองตัวสุดท้ายอาจมีประโยชน์หากคุณใช้พารามิเตอร์ Translucent ในธีมของคุณ:
<item name="android:windowTranslucentStatus">true</item>
หากต้องการคง Context Menu ไว้ด้านล่างแถบสถานะ ให้ตั้งค่า fitSystemWindows เป็น true และ clipToPadding เป็น false
menuObject.textColor ได้รับการแก้ไขแล้วrtlgravity สำหรับ MenuParamssetClosableOutsidesetAnimationDuration ไม่ทำงานสำหรับปัญหาเหตุการณ์ที่เปิดอยู่UsageContextMenuDialogFragment newInstance เก่าเลิกใช้แล้ว ใช้อันสากลใหม่ที่ได้รับ MenuParamsMenuParams.setClosableOutside(boolean)MenuObject การตั้งค่ารูปภาพถูกย้ายไปยังวิธีการMenuObject , พื้นหลัง, สีข้อความ, สีตัวแบ่งOnMenuItemLongClickListener (การใช้งาน: เหมือนกับ OnMenuItemClickListener ตรวจสอบแอปตัวอย่าง) com.yalantis.contextmenu.lib.ContextMenuDialogFragment.ItemClickListener ->
com.yalantis.contextmenu.lib.interfaces.OnMenuItemClickListener
com.yalantis.contextmenu.lib.ContextMenuDialogFragment.ItemClickListener.onItemClick(...) ->
com.yalantis.contextmenu.lib.interfaces.OnMenuItemClickListener.onMenuItemClick(...)
เรายินดีเป็นอย่างยิ่งหากคุณส่งลิงก์ไปยังโครงการของคุณที่คุณใช้ส่วนประกอบของเรา เพียงส่งอีเมลไปที่ [email protected] และแจ้งให้เราทราบหากคุณมีคำถามหรือข้อเสนอแนะเกี่ยวกับแอนิเมชั่น
ป.ล. เราจะเผยแพร่ความเจ๋งเพิ่มเติมที่รวมอยู่ในโค้ดและบทช่วยสอนเกี่ยวกับวิธีทำให้ UI สำหรับ Android (iOS) ดีกว่าดีกว่า คอยติดตาม!
Copyright 2019, Yalantis
Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
