تحقق من هذا المشروع على dribbble
تحقق من هذا المشروع على Behance
لتنفيذ العمل، قم بإلقاء نظرة على وحدة app
قم بإضافته في 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(...)
يمكنك ضبط 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
of ContextMenuDialogFragment
كائن MenuParams
الذي يحتوي على الحقول:
menuObjects
- قائمة كائنات MenuObject،
animationDelay
- تأخير بالمللي بعد فتح الجزء وقبل إغلاقه، مما سيجعل الرسوم المتحركة أكثر سلاسة على الأجهزة البطيئة،
animationDuration
- مدة كل قطعة من الرسوم المتحركة بالمللي،
isClosableOutside
- إذا كان من الممكن إغلاق القائمة عند اللمس إلى منطقة غير الأزرار،
isFitSystemWindows
- إذا كان صحيحًا، فسيتم تنفيذ التنفيذ الافتراضي لـ fitSystemWindows(Rect)،
isClipToPadding
- صحيح لقص الأطفال إلى حشوة المجموعة، وخطأ بخلاف ذلك.
قد تكون المعلمتان الأخيرتان مفيدتين إذا كنت تستخدم معلمات شفافة في قالبك:
<item name="android:windowTranslucentStatus">true</item>
للبقاء Context Menu
أسفل شريط الحالة، قم بتعيين fitSystemWindows
على true و clipToPadding
على false.
menuObject.textColor
rtl
gravity
لـ MenuParams
setClosableOutside
.setAnimationDuration
الذي لا يعمل مع مشكلة الحدث المفتوح.Usage
.ContextMenuDialogFragment
newInstance
القديمة. استخدم واحدًا عالميًا جديدًا تلقى MenuParams
.MenuParams.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] وأخبرنا إذا كان لديك أي أسئلة أو اقتراحات بخصوص الرسوم المتحركة.
ملاحظة: سنقوم بنشر المزيد من الروعة المغلفة في التعليمات البرمجية وبرنامج تعليمي حول كيفية جعل واجهة المستخدم لنظام 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.