史上最优美的 Android 原生 UI 框架 XUI 使用指南

用户头像
关注
发布于: 2020 年 12 月 07 日
史上最优美的Android原生UI框架XUI使用指南





项目简介



XUI是一个简洁而又优雅的Android原生UI框架,解放你的双手!



XUI可以说是我花费心血最多的开源项目了,目前稍微大一点的项目我都会选择引入它。XUI几乎涵盖了目前Android开发所需要的所有组件,可以说有了XUI之后,可以大大提高我们的开发效率,让我们可以将精力很多地放在业务功能和数据处理上。可以说XUI是目前Github上组件最全、文档最详细、案例(200+)数量最多的Android原生UI库。



目前XUI在github上已经拥有2.6k的star量, 如果你喜欢的话,欢迎点击star收藏! 项目地址: https://github.com/xuexiangjys/XUI



设计原由



相信做过Android的人都知道Android原生组件在国内很不受设计师的待见,至于Google推行的Material Design设计风格更是无人问津,这就导致了设计师给出的原型图几乎是清一色的IOS风格,更尴尬的是,网上Android相关的开源UI库是少之又少,这可就为难死我们了,几乎所有的基础组件都需要自己重写。之前也写过React和Vue,发现它们都有非常方便的UI库,而且使用起来也非常方便,直接在示例代码的基础上修修改改就能大致上实现自己想要的效果,极大地提高了开发的效率。



设计思路



在开始着手做这样一个开源库之前,我是一点思路都没有的。好在在2017年的某一天,我接触到了QMUI,通过阅读它的源码,我发现它的设计思路非常好,可以通过设置不同的主题样式、组件属性等实现不同的组件效果,非常灵活;除此之外,它还对UI主题风格做了较为详细的制定和归类,可以说很有启发意义。于是我就遵循了QMUI的思路,开启了XUI的编写。



解决痛点



  • 简洁优雅,尽可能少得引用资源文件的数量,项目库整体大小不足1M。

  • 组件丰富,提供了绝大多数我们在开发者常用的功能组件。

  • 使用简单,为方便快速开发,提高开发效率,对api进行了优化,提供一键式接入。

  • 样式统一,框架提供了一系列统一的样式,使UI整体看上去美观和谐。

  • 兼容性高,框架还提供了3种不同尺寸设备的样式(4.5英寸、7英寸和10英寸),并且最低兼容到Android 17, 让UI兼容性更强。

  • 扩展性强,各组件提供了丰富的属性和样式API,可以通过设置不同的样式属性,构建不同风格的UI。






演示项目



通过查看演示Demo的实现,可以快速高效地掌握UI组件的使用。



项目架构



项目页面主要使用XPage页面框架自动搭建,结构非常清晰。项目主要分为"组件"、"工具"和"拓展"三个部分。



  • 组件:组件页面主要包含了UI框架中所有组件的使用Demo样例,在"com.xuexiang.xuidemo.fragment.components"包下,点击查看



  • 工具:工具页面主要包含了UI框架中所有辅助工具的使用Demo样例,在"com.xuexiang.xuidemo.fragment.utils"包下,点击查看



  • 拓展:扩展页面主要包含了功能比较复杂的第三方UI组件集成Demo样例,在"com.xuexiang.xuidemo.fragment.expands"包下,点击查看



项目结构如下图:





Demo主页面如下图:





Demo体验





视频教程



[video(video-eApV1zI8-1604244082983)(type-bilibili)(url-https://player.bilibili.com/player.html?aid=90832054)(image-https://ss.csdn.net/p?http://i1.hdslb.com/bfs/archive/dd394bac5fbfc9d812bdb415a99362bf33481e41.jpg)(title-XUI系列)]



如何在项目中使用XUI: https://www.bilibili.com/video/BV1w7411c7Hy/



快速集成










集成指南



添加Gradle依赖



1.先在项目根目录的 build.gradle 的 repositories 添加:



allprojects {
repositories {
...
maven { url "https://jitpack.io" }
}
}



【注意】切记不要跳过这一步,因为XUI目前只发布在jitpack平台上,跳过这一步会导致ERROR: Failed to resolve: com.github.xuexiangjys:XUI:x.x.x错误!!!



2.然后在dependencies添加:



dependencies {
...
//androidx项目
implementation 'com.github.xuexiangjys:XUI:1.1.5'

implementation 'androidx.appcompat:appcompat:1.1.0'
implementation 'androidx.recyclerview:recyclerview:1.1.0'
implementation 'com.google.android.material:material:1.1.0'
implementation 'com.github.bumptech.glide:glide:4.11.0'
}



【注意】如果你的项目目前还未使用androidx,请使用如下配置:



dependencies {
...
//support项目
implementation 'com.github.xuexiangjys:XUI:1.0.9-support'

implementation 'com.android.support:appcompat-v7:28.0.0'
implementation 'com.android.support:recyclerview-v7:28.0.0'
implementation 'com.android.support:design:28.0.0'
implementation 'com.github.bumptech.glide:glide:4.8.0'
}



初始化XUI设置



1.在Application最顶部初始化设置(必须)



XUI.init(this); //初始化UI框架
XUI.debug(true); //开启UI框架调试日志




2.调整应用的基础主题(必须)



必须设置应用的基础主题,否则组件将无法正常使用!必须保证所有用到XUI组件的窗口的主题都为XUITheme的子类,这非常重要!!!



基础主题类型:



  • 大平板(10英寸, 240dpi, 1920*1200):XUITheme.Tablet.Big



  • 小平板(7英寸, 320dpi, 1920*1200):XUITheme.Tablet.Small



  • 手机(4.5英寸, 320dpi, 720*1280):XUITheme.Phone



<style name="AppTheme" parent="XUITheme.Phone">

<!-- 自定义自己的主题样式 -->

<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>

</style>


当然也可以在Activity刚开始时调用如下代码动态设置主题



@Override
protected void onCreate(Bundle savedInstanceState) {
XUI.initTheme(this);
super.onCreate(savedInstanceState);
...
}



3.调整字体库(对字体无要求的可省略)



(1)设置你需要修改的字体库路径(assets下)

//设置默认字体为华文行楷,这里写你的字体库
XUI.getInstance().initFontStyle("fonts/hwxk.ttf");



(2)在项目的基础Activity中加入如下代码注入字体.



注意:1.1.4版本之后使用如下设置注入

@Override
protected void attachBaseContext(Context newBase) {
//注入字体
super.attachBaseContext(ViewPumpContextWrapper.wrap(newBase));
}



注意:1.1.3版本及之前的版本使用如下设置注入

@Override
protected void attachBaseContext(Context newBase) {
//注入字体
super.attachBaseContext(CalligraphyContextWrapper.wrap(newBase));
}



混淆配置



-keep class com.xuexiang.xui.widget.edittext.materialedittext.** { *; }







常见问题



接入的问题



1.如何快速上手XUI,提升UI开发的效率?



  • 首先,请先仔细按照接入文档接入XUI框架,不要跳步骤或者漏步骤,一步一步按照说明来接入。除此之外,我也提供了[视频教程](https://www.bilibili.com/video/av90832054)供大家学习。





  • 最后,出现问题可以查阅使用说明文档或者研究Demo的使用,确保自己的用法是正确合理的,不要想当然。源码阅读能力强的可直接翻看[XUI的项目源码](https://github.com/xuexiangjys/XUI/tree/master/xuilib), 如果发现框架确实存在问题也可以点击[提交Issue清单](https://github.com/xuexiangjys/XUI/issues/new?assignees=xuexiangjys&labels=bug&template=bugreport.md&title=),将问题反馈给我解决。



2.为什么我增加XUI依赖后会报错:`ERROR: Failed to resolve: com.github.xuexiangjys:XUI:x.x.x`?



答:这句话的意思是:无法解析到XUI的依赖。出现这种情况的原因是你没有配置远程依赖仓库jitpack地址。这里建议你不要自以为是,老老实实按照使用说明文档来引入依赖。



3.为什么我在使用XUI中的组件时,会报错说R文件找不到`android.content.res.Resources$NotFoundException: File res/drawable/xxxxx.xml from drawable resource ID ...`、属性获取不到`Failed to resolve attribute at index ...`或者布局解析出错`android.view.InflateException:Binary XML file line #xx:Error inflating class <unknow>....`?



  • 首先,你需要确认的是你当前组件所在的窗口(Activity)所使用的主题是否继承了XUITheme主题,如果没有,请按照接入文档正确接入。这里需要说明的是,XUI不同于其他开源组件库,他是一套统一的UI框架,有一套严格统一的属性样式标准,其中绝大多数组件和资源都使用了规范化的XUI样式主题属性,因此不使用XUITheme将无法正常使用XUI框架。



  • 其次,如果你也使用了XUI主题,那么请查看你使用的context是否是所在窗口的context,组件中传入的context一定不要使用XUI.getContext()之类的,不懂的自己去复习一下Android的基础吧,这里给个讲Android中的Context和[Android中Context的类型](https://www.cnblogs.com/chenxibobo/p/6136693.html), 自己去看吧。



  • 然后,如果你context也没使用错的话,那么请查看一下当前报错设备的系统版本。因为在Android5.0(21)以下在drawable中使用?attr引用主题属性的话,也会导致R文件找不到的问题。而且同样是在Android5.0(21)以下,如果你使用vector加载SVG图片的话,同样也会导致R文件找不到,因为在Android5.0(21)以下系统是不支持加载SVG图片的。



  • 最后,如果以上都检查过但问题依然存在,你可以尝试升级XUI至最新版本(注意最新版本只支持AndroidX)。如果升级了问题依然存在,那么就要考虑是不是你的用法有问题了,建议多看看XUI项目中的演示Demo,点击查看学习演示Demo的用法



4.XUI有支持Support和AndroidX的版本吗?



答:最新的版本是只支持AndroidX的。从XUI 1.0.5以后,是支持AndroidX的版本,1.0.5之前的版本是支持Support的版本。这里我建议使用最新版本(AndroidX版本),因为之前的版本可能存在一些兼容性的bug,并在后面的版本被逐一修复。如果你依然想使用Support版本的话,要么你就使用1.0.5之前的版本(存在一些低版本兼容性的bug),要么你就clone一下当前最新版本的源码,将其改为Support版本本地导入依赖使用。



【这里考虑到还有一大部分人在使用support,为了方便大家使用,我在当前较为稳定的1.0.9版本上修改了一个支持support的版本1.0.9-support供大家过渡使用。】



5.Glide版本冲突问题怎么解决?



答:XUI依赖的Glide版本在1.1.3之前必须是4.8.0, 1.1.3及之后使用的是4.11.0。



6.XUI支持全局性的字体修改吗?



答:XUI是支持全局性的字体修改的。详情参见接入文档



7.XUI支持自定义属于自己的主题吗?如何自定义主题以符合设计师给出的UI风格。



答:XUI是支持自定义主题的。详情参见如何自定义自己的主题



演示Demo相关的问题



1.为什么XUIDemo项目我运行不起来?



答:演示Demo的程序跑通是肯定没有任何问题的。这里推荐使用Android Studio 3.4.1以上的版本打开运行。详情参见如何运行Demo程序。除此之外,请不要修改gradle的版本,因为升级gradle版本可能导致依赖加载失败的问题.



2.演示Demo中的"组件"、"工具"和"拓展"都包含了什么内容?



答:"组件"中主要包含了XUI对外提供的绝大多数组件的使用案例,"工具"中主要包含XUI对外提供辅助工具的使用案例。

而"拓展"中包含的则是一些第三方常用的UI组件库使用案例,非XUI中提供的内容。详情参见演示Demo介绍






资源链接





微信公众号



更多资讯内容,欢迎扫描关注我的个人微信公众号:【我的Android开源之旅】





发布于: 2020 年 12 月 07 日阅读数: 51
用户头像

关注

知行合一,上善若水 2020.12.06 加入

微信公众号:我的Android开源之旅。 五年工作经验,四年架构经验,六年Github开源经验, 擅长设计模式,架构设计,移动设备通讯。热爱技术,常年活跃在各大移动开发社区,对前沿技术保持高度的学习和关注。

评论

发布
暂无评论
史上最优美的Android原生UI框架XUI使用指南