...適用於您的 Android 專案的靈活、易於使用、全整合的抽屜式庫。
包含哪些內容 • 設定 • 遷移指南? • WIKI / 常見問題 • 用戶 • 範例應用程式
如果您從 < 8.0.0 升級,請遵循遷移指南
最新版本可在 Maven Central 上取得。
implementation( " com.mikepenz:materialdrawer:9.0.1 " )
// required support lib modules
implementation " androidx.appcompat:appcompat: ${ versions.appcompat } "
implementation " androidx.recyclerview:recyclerview: ${ versions.recyclerView } "
implementation " androidx.annotation:annotation: ${ versions.annotation } "
implementation " com.google.android.material:material:1.5.0-alpha05 " // requires at least 1.5.0-x
implementation " androidx.constraintlayout:constraintlayout: ${ versions.constraintLayout } "
NavController 支援@ Maven Central。
// Add for NavController support
implementation " com.mikepenz:materialdrawer-nav: ${ lastestMaterialDrawerRelease } "
Android-Iconics 支援 @ Maven Central 。
// Add for Android-Iconics support
implementation " com.mikepenz:materialdrawer-iconics: ${ lastestMaterialDrawerRelease } "
Drawer
加入 XML 中MaterialDrawerSliderView
必須作為DrawerLayout
的子級提供,並且將充當滑桿
< androidx.drawerlayout.widget. DrawerLayout xmlns : android = " http://schemas.android.com/apk/res/android "
xmlns : app = " http://schemas.android.com/apk/res-auto "
android : id = " @+id/root "
android : layout_width = " match_parent "
android : layout_height = " match_parent "
android : fitsSystemWindows = " true " >
.. . your content .. .
< com.mikepenz.materialdrawer.widget. MaterialDrawerSliderView
android : id = " @+id/slider "
android : layout_width = " wrap_content "
android : layout_height = " match_parent "
android : layout_gravity = " start "
android : fitsSystemWindows = " true " / >
< / androidx.drawerlayout.widget. DrawerLayout >
DrawerStyle
加入您的主題中< style name = " SampleApp.DayNight " parent = " Theme.Material3.DayNight.NoActionBar " >
...
< item name = " materialDrawerStyle " >@style/Widget.MaterialDrawerStyle</ item >
< item name = " materialDrawerHeaderStyle " >@style/Widget.MaterialDrawerHeaderStyle</ item >
...
</ style >
偉大的。您的抽屜現在可以使用了。
將 v9.x 與 Material 3 主題一起使用需要
Material3
主題作為活動的基礎。
// if you want to update the items at a later time it is recommended to keep it in a variable
val item1 = PrimaryDrawerItem (). apply { nameRes = R .string.drawer_item_home; identifier = 1 }
val item2 = SecondaryDrawerItem (). apply { nameRes = R .string.drawer_item_settings; identifier = 2 }
// get the reference to the slider and add the items
slider.itemAdapter.add(
item1,
DividerDrawerItem (),
item2,
SecondaryDrawerItem (). apply { nameRes = R .string.drawer_item_settings }
)
// specify a click listener
slider.onDrawerItemClickListener = { v, drawerItem, position ->
// do something with the clicked item :D
false
}
// set the selection to the item with the identifier 1
slider.setSelection( 1 )
// set the selection to the item with the identifier 2
slider.setSelection(item2)
// set the selection and also fire the `onItemClick`-listener
slider.setSelection( 1 , true )
預設情況下,當單擊抽屜項目時,它將成為新選定的項目。如果這不是預期的行為,您可以使用isSelectable = false
對此項目停用它:
SecondaryDrawerItem (). apply { nameRes = R .string.drawer_item_dialog; isSelectable = false }
// modify an item of the drawer
item1. apply {
nameText = " A new name for this drawerItem " ; badge = StringHolder ( " 19 " )
badgeStyle = BadgeStyle (). apply { textColor = ColorHolder .fromColor( Color . WHITE ); color = ColorHolder .fromColorRes( R .color.md_red_700) }
}
// notify the drawer about the updated element. it will take care about everything else
slider.updateItem(item1)
// to update only the name, badge, icon you can also use one of the quick methods
slider.updateName( 1 , " A new name " )
// the result object also allows you to add new items, remove items, add footer, sticky footer, ..
slider.addItem( DividerDrawerItem ())
slider.addStickyFooterItem( PrimaryDrawerItem (). apply { nameTest = " StickyFooter " })
// remove items with an identifier
slider.removeItem( 2 )
// open / close the drawer
slider.drawerLayout?.openDrawer(slider)
slider.drawerLayout?.closeDrawer(slider)
// get the reference to the `DrawerLayout` itself
slider.drawerLayout
// Create the AccountHeader
headerView = AccountHeaderView ( this ). apply {
attachToSliderView(slider) // attach to the slider
addProfiles(
ProfileDrawerItem (). apply { nameText = " Mike Penz " ; descriptionText = " [email protected] " ; iconRes = R .drawable.profile; identifier = 102 }
)
onAccountHeaderListener = { view, profile, current ->
// react to profile changes
false
}
withSavedInstance(savedInstanceState)
}
MaterialDrawer 提供了 Android-Iconics 函式庫的擴充。這允許您使用任何字體的圖示建立DrawerItems
。
選擇您需要的字體。可用字體
// Add for Android-Iconics support
implementation " com.mikepenz:materialdrawer-iconics: ${ lastestMaterialDrawerRelease } "
// fonts
implementation ' com.mikepenz:google-material-typeface:x.y.z@aar ' // Google Material Icons
implementation ' com.mikepenz:fontawesome-typeface:x.y.z@aar ' // FontAwesome
// now you can simply use any icon of the Google Material Icons font
PrimaryDrawerItem (). apply { iconicsIcon = GoogleMaterial . Icon .gmd_wb_sunny }
// Or an icon from FontAwesome
SecondaryDrawerItem (). apply { iconicsIcon = FontAwesomeBrand . Icon .fab_github }
對於高級用例。請查看提供的範例活動。
MaterialDrawer 支援從 URL 取得圖像並將其設定為設定檔圖示。由於 MaterialDrawer 不包含 ImageLoading 庫,開發人員可以選擇自己的實作(Picasso、Glide,...)。必須在透過 URL 載入第一個圖像之前完成此操作。 (應該在應用程式中完成,但加載第一張圖像之前的任何其他位置也可以工作)
// initialize and create the image loader logic
DrawerImageLoader . init ( object : AbstractDrawerImageLoader () {
override fun set ( imageView : ImageView , uri : Uri , placeholder : Drawable ) {
Picasso .get().load(uri).placeholder(placeholder).into(imageView)
}
override fun cancel ( imageView : ImageView ) {
Picasso .get().cancelRequest(imageView)
}
/*
override fun set(imageView: ImageView, uri: Uri, placeholder: Drawable, tag: String?) {
super.set(imageView, uri, placeholder, tag)
}
override fun placeholder(ctx: Context): Drawable {
return super.placeholder(ctx)
}
override fun placeholder(ctx: Context, tag: String?): Drawable {
return super.placeholder(ctx, tag)
}
*/
})
可以在範例應用程式中找到 GLIDE v4 的現實(有關 glide v3 範例,請參閱標籤 v6.1.1)
// Since 8.1.0 the drawer includes core ktx 1.3.0 which requires jvm 1.8
kotlinOptions {
jvmTarget = "1.8"
}
建立您的自訂風格。如果您不需要自訂主題,請參閱下一節,以了解如何透過覆蓋原始顏色來設定顏色。
// define a custom drawer style
< style name = " Widget.MaterialDrawerStyleCustom " parent = " Widget.MaterialDrawerStyle " >
< item name = " materialDrawerInsetForeground " >#4000</ item >
<!-- MaterialDrawer specific values -->
< item name = " materialDrawerBackground " >?colorSurface</ item >
< item name = " materialDrawerPrimaryText " >@color/color_drawer_item_text</ item >
< item name = " materialDrawerPrimaryIcon " >@color/color_drawer_item_text</ item >
< item name = " materialDrawerSecondaryText " >@color/color_drawer_item_text</ item >
< item name = " materialDrawerSecondaryIcon " >@color/color_drawer_item_text</ item >
< item name = " materialDrawerDividerColor " >?colorOutline</ item >
< item name = " materialDrawerSelectedBackgroundColor " >?colorSecondaryContainer</ item >
</ style >
// define a custom header style
< style name = " Widget.MaterialDrawerHeaderStyleCustom " parent = " " >
< item name = " materialDrawerCompactStyle " >true</ item >
< item name = " materialDrawerHeaderSelectionText " >?colorOnSurface</ item >
< item name = " materialDrawerHeaderSelectionSubtext " >?colorOnSurface</ item >
</ style >
// define the custom styles for the theme
< style name = " SampleApp " parent = " Theme.Material3.Light.NoActionBar " >
...
< item name = " materialDrawerStyle " >@style/Widget.MaterialDrawerStyleCustom</ item >
< item name = " materialDrawerHeaderStyle " >@style/Widget.MaterialDrawerHeaderStyleCustom</ item >
...
</ style >
覆蓋整個MaterialDrawer的BezelImageView的Style
< style name = " BezelImageView " >
< item name = " biv_maskDrawable " >@drawable/material_drawer_rectangle_mask</ item >
< item name = " biv_drawCircularShadow " >false</ item >
< item name = " biv_selectorOnPress " >@color/material_drawer_primary</ item >
< item name = " android:scaleType " >centerInside</ item >
</ style >
(請隨時向我發送新項目)
米羅斯瓦夫·斯坦尼克 - GitHub
Lunae Luman - 標題圖片的 Behance
Copyright 2021 Mike Penz
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.