# 1. Coil

img

Coil 是 Android 上的一个全新的图片加载框架,它的全名叫做 coroutine image loader , 即协程图片加载库。与传统的图片加载库 Glide,Picasso 或 Fresco 等相比。该具有轻量(只有大约 1500 个方法)、快、易于使用、更现代的 API 等优势。

它支持 GIF 和 SVG,并且可以执行四个默认转换: 模糊圆形裁剪灰度圆角

示例如下:

1
2
3
4
5
imageView.load(“https://www.example.com/image.jpg") {
crossfade(true)
placeholder(R.drawable.image)
transformations(CircleCropTransformation())
}

并且是全用 Kotlin 编写,如果你是纯 Kotlin 项目的话,那么这个库应该是你的首选。

Github 地址:github.com/coil-kt/coi…

# 2. MultiSearchView

img

该库具有一个非常酷的 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
<!-- Search Text Style. -->
<style name="SearchTextStyle">
<!-- Custom values write to here for SearchEditText. -->
<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

img

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 {
// Required ONLY when setting minSdkVersion to 20 or lower
multiDexEnabled true
}

compileOptions {
// Flag to enable support for the new language APIs
coreLibraryDesugaringEnabled true
// Sets Java compatibility to Java 8
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
img img
BottomBarActivity EqualBottomBarActivity
------------------------------------------------------------ ------------------------------------------------------------
img img

Bubble Navigation 是一个轻巧的库,可通过大量自定义选项轻松制作精美的导航栏。

它有很多非常的特性:

  • 针对不同用例的两种类型的 NavigationViews
    • BubbleNavigationConstraintView (支持 spread spreadinside , 和 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" />

<!-- Add more child items here - max upto 5 -->

</com.gauravk.bubblenavigation.BubbleNavigationConstraintView>

Github 文档很完善,有很多示例,更多用法和属性可去 Github 了解。

Github:github.com/gauravk95/b…

# 5. FabFilter

img

这是一个有趣的项目,它不是一个直接可用的库,而是一个示例应用程序,展示了 使用不使用 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

img

一个炫酷的、有趣的 SeekBar 动画库。

RubberPicker 库包含 RubberSeekBarRubberRangePicker ,其灵感来自 CubertoiOS橡胶范围选择器

使用示例:

布局文件中配置

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"/>

<!-- Similar attributes can be applied for RubberRangePicker as well-->
<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) {}
})


//Similarly for RubberRangePicker
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)
//.withBackgroundColorResource(R.color.color)
.withOverlayView(view)
.withImagesMargin(R.dimen.margin)
//.withImageMarginPixels(margin)
.withContainerPadding(R.dimen.padding)
//.withContainerPadding(R.dimen.paddingStart, R.dimen.paddingTop, R.dimen.paddingEnd, R.dimen.paddingBottom)
//.withContainerPaddingPixels(padding)
//.withContainerPaddingPixels(paddingStart, paddingTop, paddingEnd, paddingBottom)
.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();

//add the default style placeholder
broccoli.addPlaceholders('activity', 'view_id', 'view_id');

or
//add the default style placeholder
broccoli.addPlaceholders('view1', 'view2', 'view3');

or

//add the custom style placeholder
broccoli.addPlaceholder(new PlaceholderParameter.Builder()
.setView('view')
.setAnimation('scaleAnimation');
.setDrawable(DrawableUtils.createRectangleDrawable(placeHolderColor, 0))
.build());

or
//add the custom style placeholder with gradient animation
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
// Example of injection using koin, your DI system might differ
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…

# 13. IndicatorScrollView

该库为 NestedScrollView 添加了逻辑,使它可以在滚动时,更改对指示器进行动态响应。

README 文件包含开始项目所需的所有信息,例如如何使用 IndicatorScrollViewIndicatorViewIndicatorItem 。目前,它的版本为 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…

img

这是一个示例项目,它展示了如何使用 MotionLayout 来实现一个炫酷的轮播图。

文档几乎没有任何说明,但是如果你最近也在探索 MotionLayout,这将是一个很好示例。

Github: github.com/faob-dev/Mo…

# 总结

以上就是本期的开源项目推荐,如果你也有好玩的、有趣的、强大的开源项目,也可以推荐给博主,欢迎评论区留言讨论。

Edited on Views times