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

作者: xuexiangjys | 来源:发表于2020-11-01 23:35 被阅读0次

image

项目简介

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主页面

Demo体验

点击下载Demo体验效果

视频教程

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

快速集成

Android空壳模板工程(自动集成了XUI、XUtil、XAOP、XPage、XUpdate、XHttp2等): https://github.com/xuexiangjys/TemplateAppProject
简化版的Android空壳模版工程(自动集成了XUI、XUtil、XAOP、XPage等): https://github.com/xuexiangjys/TemplateSimpleProject

集成指南

添加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框架，不要跳步骤或者漏步骤，一步一步按照说明来接入。除此之外，我也提供了视频教程供大家学习。
其次，按照正确使用XUI的姿势的说明，来使用XUI。
最后，出现问题可以查阅使用说明文档或者研究Demo的使用，确保自己的用法是正确合理的，不要想当然。源码阅读能力强的可直接翻看XUI的项目源码, 如果发现框架确实存在问题也可以点击提交Issue清单,将问题反馈给我解决。

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的类型, 自己去看吧。
然后，如果你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介绍。

资源链接

XUI系列教学视频: https://space.bilibili.com/483850585/channel/detail?cid=104998
XUI使用文档: https://github.com/xuexiangjys/XUI/wiki
Android空壳模板工程(自动集成了XUI、XUtil、XAOP、XPage、XUpdate、XHttp2等): https://github.com/xuexiangjys/TemplateAppProject
简化版的Android空壳模版工程(自动集成了XUI、XUtil、XAOP、XPage等): https://github.com/xuexiangjys/TemplateSimpleProject

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

项目简介

设计原由

设计思路

解决痛点

演示项目

项目架构

Demo体验

视频教程

快速集成

集成指南

添加Gradle依赖

初始化XUI设置

混淆配置

常见问题

接入的问题

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

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

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

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

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

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

演示Demo相关的问题

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

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

资源链接

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我的Android开源之旅

精选案例

Android UI

Android轮子

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

项目简介

设计原由

设计思路

解决痛点

演示项目

项目架构

Demo体验

视频教程

快速集成

集成指南

添加Gradle依赖

初始化XUI设置

混淆配置

常见问题

接入的问题

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

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

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

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

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

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

演示Demo相关的问题

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

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

资源链接

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

我的Android开源之旅

精选案例

Android UI

Android轮子

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