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

66次阅读

共计 6186 个字符,预计需要花费 16 分钟才能阅读完成。

我的项目简介

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 体验

视频教程

https://www.bilibili.com/vide…

如何在我的项目中应用 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 开源之旅】

正文完
 0