# 1. Coil
Coil 是 Android 上的一个全新的图片加载框架,它的全名叫做 coroutine image loader
, 即协程图片加载库。与传统的图片加载库 Glide,Picasso 或 Fresco 等相比。该具有轻量(只有大约 1500 个方法)、快、易于使用、更现代的 API 等优势。
它支持 GIF 和 SVG,并且可以执行四个默认转换: 模糊
, 圆形裁剪
, 灰度
和 圆角
。
示例如下:
1 2 3 4 5 imageView.load(“https: crossfade(true ) placeholder(R.drawable.image) transformations(CircleCropTransformation()) }
并且是全用 Kotlin 编写,如果你是纯 Kotlin 项目的话,那么这个库应该是你的首选。
Github 地址:github.com/coil-kt/coi…
# 2. MultiSearchView
该库具有一个非常酷的 Search View
动画!
使用非常简单,并且可以自定义,你可以在在 styles.xml
下添加自定义样式。
示例代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <com.iammert.library.ui.multisearchviewlib.MultiSearchView android:layout_width ="match_parent" android:layout_height ="wrap_content" /> multiSearchView.setSearchViewListener(object : MultiSearchView.MultiSearchViewListener{ override fun onItemSelected(index: Int, s: CharSequence) { } override fun onTextChanged(index: Int, s: CharSequence) { } override fun onSearchComplete(index: Int, s: CharSequence) { } override fun onSearchItemRemoved(index: Int) { } })
自定义样式:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 <style name ="SearchTextStyle" > <item name ="android:focusable" > true</item > <item name ="android:focusableInTouchMode" > true</item > <item name ="android:enabled" > true</item > <item name ="android:hint" > Search</item > <item name ="android:imeOptions" > actionSearch</item > <item name ="android:textSize" > 18sp</item > <item name ="android:maxLength" > 15</item > <item name ="android:inputType" > textCapSentences</item > <item name ="android:textColorHint" > #80999999</item > <item name ="android:textColor" > #000</item > </style >
然后,您应该将样式设置为 MultiSearchView
下的 app:searchTextStyle
。
Github 地址:github.com/iammert/Mul…
# 3. CalendarView
CalendarView
是一个高度可定制化的日历组件库,用 recycleView 实现。
它有如下特性:
单一或范围选择
周历或者月历模式
边界日期
自定义日历视图
水平或者垂直滚动模式
完全可定制的视图
该库的文档也非常全面,并包含许多示例。此外,还有一个示例应用程序展示了库的所有功能。
它是用纯 Kotlin 编写的,并在 MIT 许可下发布。如果您需要在应用程序中使用日历视图,这是一个不错的选择。
注意:该库通过 Java 8+ API 使用了 java.time 类,以便向后兼容,因为这些类是在 Java 8 中添加的。
因此,需要在 app 的 build.gradle
中添加如下配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 android { defaultConfig { multiDexEnabled true } compileOptions { coreLibraryDesugaringEnabled true sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } } dependencies { coreLibraryDesugaring 'com.android.tools:desugar_jdk_libs:<latest-version>' }
Github: github.com/kizitonwose…
# 4. Bubble Navigation
FloatingTopBarActivity
TopBarActivity
BottomBarActivity
EqualBottomBarActivity
------------------------------------------------------------
------------------------------------------------------------
Bubble Navigation
是一个轻巧的库,可通过大量自定义选项轻松制作精美的导航栏。
它有很多非常的特性:
针对不同用例的两种类型的 NavigationViews
:
BubbleNavigationConstraintView
(支持 spread spread
, inside
, 和 packed
莫斯)
BubbleNavigationLinearView
(允许平均分配,使用权重或 packed 模式)
高度可定制化
您可以添加小红点,它具有 BubbleToggleView
来创建新的 UI 组件,而不仅仅是导航
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 <com.gauravk.bubblenavigation.BubbleNavigationConstraintView android:id ="@+id/top_navigation_constraint" android:layout_width ="match_parent" android:layout_height ="wrap_content" android:layout_marginBottom ="380dp" android:background ="@color/white" android:elevation ="4dp" android:padding ="12dp" app:bnc_mode ="spread" > <com.gauravk.bubblenavigation.BubbleToggleView android:id ="@+id/c_item_rest" android:layout_width ="wrap_content" android:layout_height ="wrap_content" app:bt_active ="true" app:bt_colorActive ="@color/search_active" app:bt_colorInactive ="@color/search_inactive" app:bt_icon ="@drawable/ic_restaurant" app:bt_shape ="@drawable/transition_background_drawable_restaurant" app:bt_title ="@string/restaurant" app:bt_padding ="@dimen/internal_padding" app:bt_titlePadding ="@dimen/title_padding" /> </com.gauravk.bubblenavigation.BubbleNavigationConstraintView >
Github 文档很完善,有很多示例,更多用法和属性可去 Github 了解。
Github:github.com/gauravk95/b…
# 5. FabFilter
这是一个有趣的项目,它不是一个直接可用的库,而是一个示例应用程序,展示了 使用
和 不使用
MotionLayout
两种方式来实现的高级 UI 动画。
详细的实现细节可以看看 Medium 上的系列文章:
“Complex UI/Animations on Android”
“Complex UI/Animations on Android — featuring MotionLayout”
Github:github.com/nikhilpanju…
# 6.android-showcase
android-showcase
是一个非常优秀的开源项目,它是一个展示应用程序,展示了如何使用 Kotlin 和最新的 Jetpack 技术栈来开发一个 APP。
该项目为您带来了一系列最佳实践,工具和解决方案:
100% Kotlin
现代架构 (feature modules, clean architecture, Model-View-ViewModel, Model-View-Intent)
Android Jetpack 组件
单 Activity 模式,使用 Navigation 导航
看完这个项目,在模块化,Clean 体系结构,测试、设置 CI / CD 工具,等方面,你将会受到启发。感谢作者的开源。
Github:github.com/igorwojda/a…
# 7. Croppy
Croppy
是一个 Android 图片裁剪库。
它有很多强大的特性:
双指缩放
裁剪任意大小
按照长宽比例裁剪
显示裁剪后的 Bitmap
自动居中裁剪
全面的动画使用体验
更多使用细节请看 Github。
Github: github.com/lyrebirdstu…
# 8. RubberPicker
一个炫酷的、有趣的 SeekBar 动画库。
RubberPicker
库包含 RubberSeekBar
和 RubberRangePicker
,其灵感来自 Cuberto
的 iOS橡胶范围选择器
。
使用示例:
布局文件中配置
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 <com.jem.rubberpicker.RubberSeekBar ... app:minValue ="20" app:maxValue ="80" app:elasticBehavior ="cubic" app:dampingRatio ="0.3" app:stiffness ="300" app:stretchRange ="24dp" app:defaultThumbRadius ="16dp" app:normalTrackWidth ="4dp" app:highlightTrackWidth ="8dp" app:normalTrackColor ="#AAAAAA" app:highlightTrackColor ="#BA1F33" app:defaultThumbInsideColor ="#FFF" app:highlightDefaultThumbOnTouchColor ="#CD5D67" /> <com.jem.rubberpicker.RubberRangePicker ... app:minValue ="0" app:maxValue ="100" app:elasticBehavior ="linear" app:dampingRatio ="0.4" app:stiffness ="400" app:stretchRange ="36dp" app:defaultThumbRadius ="16dp" app:normalTrackWidth ="4dp" app:highlightTrackWidth ="8dp" app:normalTrackColor ="#AAAAAA" app:highlightTrackColor ="#BA1F33" app:defaultThumbInsideColor ="#CFCD5D67" app:highlightDefaultThumbOnTouchColor ="#CD5D67" />
或者,在代码中动态配置:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 val rubberSeekBar = RubberSeekBar(this )rubberSeekBar.setMin(20 ) rubberSeekBar.setMax(80 ) rubberSeekBar.setElasticBehavior(ElasticBehavior.CUBIC) rubberSeekBar.setDampingRatio(0.4F ) rubberSeekBar.setStiffness(1000F ) rubberSeekBar.setStretchRange(50f ) rubberSeekBar.setThumbRadius(32f ) rubberSeekBar.setNormalTrackWidth(2f ) rubberSeekBar.setHighlightTrackWidth(4f ) rubberSeekBar.setNormalTrackColor(Color.GRAY) rubberSeekBar.setHighlightTrackColor(Color.BLUE) rubberSeekBar.setHighlightThumbOnTouchColor(Color.CYAN) rubberSeekBar.setDefaultThumbInsideColor(Color.WHITE) val currentValue = rubberSeekBar.getCurrentValue()rubberSeekBar.setCurrentValue(currentValue + 10 ) rubberSeekBar.setOnRubberSeekBarChangeListener(object : RubberSeekBar.OnRubberSeekBarChangeListener { override fun onProgressChanged (seekBar: RubberSeekBar , value: Int , fromUser: Boolean ) {} override fun onStartTrackingTouch (seekBar: RubberSeekBar ) {} override fun onStopTrackingTouch (seekBar: RubberSeekBar ) {} }) val rubberRangePicker = RubberRangePicker(this )rubberRangePicker.setMin(20 ) ... rubberRangePicker.setHighlightThumbOnTouchColor(Color.CYAN) val startThumbValue = rubberRangePicker.getCurrentStartValue()rubberRangePicker.setCurrentStartValue(startThumbValue + 10 ) val endThumbValue = rubberRangePicker.getCurrentEndValue()rubberRangePicker.setCurrentEndValue(endThumbValue + 10 ) rubberRangePicker.setOnRubberRangePickerChangeListener(object : RubberRangePicker.OnRubberRangePickerChangeListener{ override fun onProgressChanged (rangePicker: RubberRangePicker , startValue: Int , endValue: Int , fromUser: Boolean ) {} override fun onStartTrackingTouch (rangePicker: RubberRangePicker , isStartThumb: Boolean ) {} override fun onStopTrackingTouch (rangePicker: RubberRangePicker , isStartThumb: Boolean ) {} })
更多、更详细的使用请看 Github。
Github:github.com/Chrisvin/Ru…
# 9. Switcher
一个炫酷的 Switcher 切换动画库,真是的太可爱了,我前面也写过文章专门介绍过:
炫酷!从未见过如此 Q 弹的 Switcher
它的灵感来自于 Dribble 上 Oleg Frolov
的设计。
Github: github.com/bitvale/Swi…
# 10. StfalconImageViewer
StfalconImageViewer
是一个图片查看库, 该库简单且可定制。它包含一个 全屏图像查看器
,具有共享的图像过渡支持 , 捏合缩放功能
以及 滑动手势来关闭
手势。
Github 文档说明了如何使用每个功能。同样值得注意的是:该库与所有最受欢迎的图像处理库(例如 Picasso,Glide 等)兼容。
所有可配置项如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 StfalconImageViewer.Builder<String>(this , images, ::loadImage) .withStartPosition(startPosition) .withBackgroundColor(color) .withOverlayView(view) .withImagesMargin(R.dimen.margin) .withContainerPadding(R.dimen.padding) .withHiddenStatusBar(shouldHideStatusBar) .allowZooming(isZoomingAllowed) .allowSwipeToDismiss(isSwipeToDismissAllowed) .withTransitionFrom(targeImageView) .withImageChangeListener(::onImageChanged) .withDismissListener(::onViewerDismissed) .withDismissListener(::onViewerDismissed)
更详细的使用请看 Github。
Github: github.com/stfalcon-st…
# 11. Broccoli
Broccoli
是一个 show View Loading 库,也就是我常说的骨架屏 ,在内容加载的时候,显示一个占位符。
该库带有很平滑的动画效果,你可以配合 RecyclerView 一起使用,等待加载内容时,再也不枯燥了。
示例:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 Broccoli broccoli = new Broccoli(); broccoli.addPlaceholders('activity' , 'view_id' , 'view_id' ); or broccoli.addPlaceholders('view1' , 'view2' , 'view3' ); or broccoli.addPlaceholder(new PlaceholderParameter.Builder() .setView('view' ) .setAnimation('scaleAnimation' ); .setDrawable(DrawableUtils.createRectangleDrawable(placeHolderColor, 0 )) .build()); or broccoli.addPlaceholder(new PlaceholderParameter.Builder() .setView('view' ) .setDrawable(new BroccoliGradientDrawable(Color.parseColor("#DDDDDD" ), Color.parseColor("#CCCCCC" ), 0 , 1000 , new LinearInterpolator()) .build()); broccoli.show();
更多使用请看 Github。
Github: github.com/samlss/Broc…
# 12. Orbit MVI
这是一个用于 Kotlin 和 Android 的 Model-View-Intent (MVI)框架。它的灵感来自 Jake Wharton,RxFeedback 和 Mosby 的 “Managing State with RxJava”。
根据 ReadMe 所说:
Orbit 在您的 redux 实现周围提供了尽可能小的结构,以使其易于使用,但您仍可以使用 RxJava 的强大功能。
redux 系统可能如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 data class State (val total: Int = 0 )data class AddAction (val number: Int )sealed class SideEffect { data class Toast (val text: String) : SideEffect() } class CalculatorViewModel : OrbitViewModel <State, SideEffect > (State(), { perform("addition" ) .on<AddAction>() .sideEffect { post(SideEffect.Toast("Adding ${event.number} " )) } .reduce { currentState.copy(currentState.total + event.number) } ... })
activity /fragment 中:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 private val viewModel by viewModel<CalculatorViewModel>()override fun onCreate () { ... addButton.setOnClickListener { viewModel.sendAction(AddAction) } } override fun onStart () { viewModel.connect(this , ::handleState, ::handleSideEffect) } private fun handleState (state: State ) { ... } private fun handleSideEffect (sideEffect: SideEffect ) { when (sideEffect) { is SideEffect.Toast -> toast(sideEffect.text) } }
详细使用请看 Github。
Github: github.com/babylonheal…
该库为 NestedScrollView
添加了逻辑,使它可以在滚动时,更改对指示器进行动态响应。
README 文件包含开始项目所需的所有信息,例如如何使用 IndicatorScrollView
, IndicatorView
和 IndicatorItem
。目前,它的版本为 1.0.2
,是根据 Apache 2.0 许可发布的。它支持 API 16 及更高版本。
文档示例很详细,更多使用相关请看 Github。
Github: github.com/skydoves/In…
# 14. Cyanea
Cyanea
是一个 Android 主题引擎库。
它允许那你动态更换应用主题,它内置了很多主题如:
Theme.Cyanea.Dark
Theme.Cyanea.Dark.LightActionBar
Theme.Cyanea.Dark.NoActionBar
Theme.Cyanea.Light
Theme.Cyanea.Light.DarkActionBar
Theme.Cyanea.Light.NoActionBar
更多详细信息请看 Github。
Github: github.com/jaredrummle…
# 15. Android MotionLayout Carousel
这是一个示例项目,它展示了如何使用 MotionLayout
来实现一个炫酷的轮播图。
文档几乎没有任何说明,但是如果你最近也在探索 MotionLayout,这将是一个很好示例。
Github: github.com/faob-dev/Mo…
# 总结
以上就是本期的开源项目推荐,如果你也有好玩的、有趣的、强大的开源项目,也可以推荐给博主,欢迎评论区留言讨论。