社区微信群开通啦，扫一扫抢先加入社区官方微信群
社区微信群
技术群里面经常有人问到一些炫酷的UI效果实现方法，有时候我都是给一个相同或者相似效果的Github链接，有同学私信给我说，大佬，怎么这些效果你都能找到？你是怎么搜索的，或者有其他什么秘方？会利用Google、百度等搜索工具搜索是一方面，另一个重要的方面是：记录搜藏，当看到一个炫酷的效果的时候，记得收藏起来，记录到自己云笔记或者收藏夹里，看得多了，印象就比较深刻，当遇到类似效果的时候，到自己记录收藏的地方找就是了。今天为大家推荐我所收藏的一些炫酷实用的效果的开源库（选择其中10个）。
1、DiscreteScrollView
DiscreteScrollView
简介：DiscreteScrollView 是基于RecyclerView 实现的一个横向滑动列表，当前Item显示在屏幕中央并且可以左右滑动，有点像ViewPager,但是可以快速滑动。提供了简单的API来实现炫酷的动画效果。
效果展示：
2、MaterialViewPager
Github: https://github.com/pinguo-zhouwei/MaterialViewPager
简介： 和名字一样，Material Design 效果的ViewPager, 效果很nice,请看gif
效果展示(有多重模式)：
Titlebar Logo
Fading Logo
Hide Logo and Toolbar
Sticky Toolbar
Transparent Toolbar
Standard
3、BoomMenu
Github: https://github.com/pinguo-zhouwei/BoomMenu
简介： 传统的菜单是不是看得有些厌倦了，boom …爆炸效果的菜单了解一下？功能强大、效果炫酷，有很多种模式。
效果展示：
4、LayoutManagerGroup
Github: https://github.com/DingMouRen/LayoutManagerGroup
简介： 自定义RecyclerView 的LayoutManager实现几种炫酷的效果。
效果展示：
EchelonLayoutManager
SkidRightLayoutManager
SlideLayoutManager
5、Android-SpinKit
Github: https://github.com/ybq/Android-SpinKit
简介： Android 自定义View 的方式实现的各种炫酷的动画，特别精致和优美，以前专门写文章介绍过。
效果展示：
6、Matisse
Github: https://github.com/zhihu/Matisse
简介： Matisse是知乎开源的一个本地选择照片和视频的库，UI设计得非常精美。有如特性：
可以在Fragment/Activity 中使用
选择照片的格式包括：PNG、JPEG 、GIF.视频格式包括：MPEG, MP4
支持不同的主题并且可以自定义主题
支持不同的图片加载方式（Picasso、Glide等）
自定义过滤规则
效果展示：
Zhihu Style
Dracula Style
Preview
7、CosmoCalendar
Github: https://github.com/ApplikeySolutions/CosmoCalendar
简介： 一个高度自定义的日历库，UI精美，支持多种模式。
效果展示：
单个日期选择
多个日期选择
选择一个范围日期
自定义
8、CardStackView
Github： https://github.com/loopeer/CardStackView
简介： 三种炫酷的列表卡片滑动动画，分别为：alldown, updown, updownstack
效果展示：
9、CalendarExaple
Github: https://github.com/codbking/CalendarExaple
简介： 这是一个高仿钉钉和小米的日历控件，支持快速滑动，界面缓存。想要定制化UI，使用起来非常简单，就像使用ListView一样
一些特点：
可以自定义日历控件UI
支持快速滑动
支持农历和阳历
界面UI缓存和日历数据缓存
扩展view支持listView的滑动
效果展示：
10、MZBannerView
Github： https://github.com/pinguo-zhouwei/MZBannerView
简介： 仿魅族BannerView,图片轮播控件,支持多种模式切换：普通ViewPager使用，普通Banner使用，仿魅族Banner使用。
效果展示：
11. Broccoli
Github: github.com/samlss/Broc…
Broccoli是一个show View Loading 库，也就是我常说的骨架屏，在内容加载的时候，显示一个占位符。
该库带有很平滑的动画效果，你可以配合RecyclerView一起使用，等待加载内容时，再也不枯燥了。
示例：
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();
12. Orbit MVI
Github: github.com/babylonheal…
这是一个用于Kotlin和Android的Model-View-Intent （MVI）框架。它的灵感来自Jake Wharton，RxFeedback和Mosby的“Managing State with RxJava”。
根据ReadMe所说：
Orbit在您的redux实现周围提供了尽可能小的结构，以使其易于使用，但您仍可以使用RxJava的强大功能。
redux系统可能如下所示：
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 中：
// 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)
}
}
13. IndicatorScrollView
Github： github.com/skydoves/In…
IndicatorScrollView
IndicatorScrollView
该库为NestedScrollView添加了逻辑，使它可以在滚动时，更改对指示器进行动态响应。
README文件包含开始项目所需的所有信息，例如如何使用IndicatorScrollView，IndicatorView和IndicatorItem。目前,它的版本为1.0.2，是根据Apache 2.0许可发布的。它支持API 16及更高版本。
14. Cyanea
Github: github.com/jaredrummle…
Cyanea 是一个Android 主题引擎库。
它允许那你动态更换应用主题，它内置了很多主题如：
Theme.Cyanea.Dark
Theme.Cyanea.Dark.LightActionBar
Theme.Cyanea.Dark.NoActionBar
Theme.Cyanea.Light
Theme.Cyanea.Light.DarkActionBar
Theme.Cyanea.Light.NoActionBar
15. Android MotionLayout Carousel
Github: github.com/faob-dev/Mo…
这是一个示例项目，它展示了如何使用MotionLayout来实现一个炫酷的轮播图。
文档几乎没有任何说明，但是如果你最近也在探索MotionLayout，这将是一个很好示例。
16. Coil
并且是全用Kotlin编写，如果你是纯Kotlin项目的话，那么这个库应该是你的首选。
Github地址：github.com/coil-kt/coi…
Coil是Android上的一个全新的图片加载框架，它的全名叫做 coroutine image loader,即协程图片加载库。与传统的图片加载库Glide，Picasso或Fresco等相比。该具有轻量（只有大约1500个方法）、快、易于使用、更现代的API等优势。
它支持GIF和SVG，并且可以执行四个默认转换： 模糊，圆形裁剪，灰度和圆角。
示例如下：
imageView.load(“https://www.example.com/image.jpg") {
crossfade(true)
placeholder(R.drawable.image)
transformations(CircleCropTransformation())
}
17. MultiSearchView
Github地址：github.com/iammert/Mul…
该库具有一个非常酷的Search View 动画！
使用非常简单，并且可以自定义，你可以在在styles.xml下添加自定义样式。
示例代码：
<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) {
}
})
自定义样式：
<!-- 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。
18 . CalendarView
Github: github.com/kizitonwose…
CalendarView是一个高度可定制化的日历组件库，用recycleView实现。
它有如下特性：
单一或范围选择
周历或者月历模式
边界日期
自定义日历视图
水平或者垂直滚动模式
完全可定制的视图
该库的文档也非常全面，并包含许多示例。此外，还有一个示例应用程序展示了库的所有功能。
它是用纯Kotlin编写的，并在MIT许可下发布。如果您需要在应用程序中使用日历视图，这是一个不错的选择。
注意：该库通过Java 8+ API使用了java.time类，以便向后兼容，因为这些类是在Java 8中添加的。
因此，需要在app的build.gradle 中添加如下配置：
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>'
}
19. Bubble Navigation
Github:github.com/gauravk95/b…
FloatingTopBarActivity
TopBarActivity
BottomBarActivity
EqualBottomBarActivity
Bubble Navigation是一个轻巧的库，可通过大量自定义选项轻松制作精美的导航栏。
它有很多非常的特性：
针对不同用例的两种类型的NavigationViews：
BubbleNavigationConstraintView（支持spreadspread，inside, 和 packed莫斯）
BubbleNavigationLinearView（允许平均分配，使用权重或packed模式）
高度可定制化
您可以添加小红点，它具有BubbleToggleView来创建新的UI组件，而不仅仅是导航
示例：
<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>
20. FabFilter
Github:github.com/nikhilpanju…
这是一个有趣的项目，它不是一个直接可用的库，而是一个示例应用程序，展示了使用和不使用 MotionLayout两种方式来实现的高级UI动画。
详细的实现细节可以看看Medium上的系列文章：
“Complex UI/Animations on Android”
“Complex UI/Animations on Android — featuring MotionLayout”
21.android-showcase
Github：github.com/igorwojda/a…
android-showcase是一个非常优秀的开源项目，它是一个展示应用程序，展示了如何使用Kotlin和最新的Jetpack 技术栈来开发一个APP。
该项目为您带来了一系列最佳实践，工具和解决方案：
100% Kotlin
现代架构 (feature modules, clean architecture, Model-View-ViewModel, Model-View-Intent)
Android Jetpack组件
单Activity模式，使用Navigation导航
看完这个项目，在模块化，Clean体系结构，测试、设置CI / CD工具，等方面，你将会受到启发。感谢作者的开源。
22 . Croppy
Github: github.com/lyrebirdstu…
Croppy是一个Android图片裁剪库。
它有很多强大的特性：
双指缩放
裁剪任意大小
按照长宽比例裁剪
显示裁剪后的Bitmap
自动居中裁剪
全面的动画使用体验
23. RubberPicker
Github：github.com/Chrisvin/Ru…
一个炫酷的、有趣的SeekBar动画库。
RubberPicker库包含RubberSeekBar和RubberRangePicker，其灵感来自Cuberto的iOS橡胶范围选择器。
使用示例：
布局文件中配置
<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"/>
或者，在代码中动态配置：
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) {}
})
24. Switcher
Github: github.com/bitvale/Swi…
一个炫酷的Switcher 切换动画库，真是的太可爱了，我前面也写过文章专门介绍过：
它的灵感来自于 Dribble上Oleg Frolov 的设计。
25. StfalconImageViewer
Github: github.com/stfalcon-st…
StfalconImageViewer是一个图片查看库，
该库简单且可定制。它包含一个全屏图像查看器，具有共享的图像过渡支持，捏合缩放功能以及滑动手势来关闭手势。
Github文档说明了如何使用每个功能。同样值得注意的是：该库与所有最受欢迎的图像处理库（例如Picasso，Glide等）兼容。
所有可配置项如下：
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)
如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！
