手把手教你使用XUI的正确姿势

青旅半醒 2021-12-17 07:49 318阅读 0赞

> 俗话说，代码是最好的老师，阅读源码是一个非常好的习惯。使用说明文档写得再仔细，也会有遗漏不足的地方，因此我鼓励大家在使用XUI的时候，结合演示Demo的代码进行开发，这样比一点一点翻文档有效的多！

由于[XUI][]是一个Android原生UI库，它不像WebUI库那样，可以很方便地在浏览器中直接看到代码和代码实时的运行效果，因此我才详细编写了XUI的演示Demo程序，大家可以下载或者自己运行（建议）XUI演示demo程序，找到自己想要使用的组件，然后找到对应的实现代码来使用XUI的组件，下面我将分步骤讲解。

### 1、下载/运行Demo程序 ###

> 在此之前，请确保正确引入了XUI，如果还没有引入的话，请先根据[如何引用][Link 1]的指示，一步一步引入XUI。

#### 下载Demo程序 ####

*  蒲公英下载【推荐】  
    ![在这里插入图片描述][20190703010719905.png]
 *  Github下载  
    ![在这里插入图片描述][20190703010741802.png]

#### 运行Demo程序【推荐】 ####

1.下载XUI源代码

git clone https://github.com/xuexiangjys/XUI.git

2.使用Android Studio打开XUI项目，这里推荐使用Android Studio 3.4.1以上的版本打开。

代码运行需要注意的几点:

*  网速慢的话，依赖库可能下载很慢（timeout），多试几次就行了。
 *  由于Demo中使用了我的另一个页面框架库[XPage][], demo中的代码有一个`AppPageConfig`的类是编译时自动生成的，如果提示类找不到的话是没有关系的，Build一下就出来了，当然你也可以直接运行。
 *  演示Demo的程序跑通是肯定没有任何问题的，如果你没有跑成功，请你检查自己的环境是否都配置正确了！

### 2、选择你想要使用的组件，找到对应的示例代码 ###

#### 找到演示页面的标题,决定搜索内容 ####

所有的演示页面理论上都是有标题的，有的还有副标题，如题下所示：

![图1][1]   ![图2][2]

搜索内容的公式如下:

//无副标题
    搜索内容 = 主标题;
    
    //有副标题
    搜索内容 = 主标题 + "\n" + 副标题;

下面我以上图2为例：

主标题：Dialog构建策略 —> 搜索内容: Dialog构建策略

主标题：MaterialDialog, 副标题：对话框。 —> 搜索内容: MaterialDialog`\\n`对话框

【切记】：千万不要少掉一个\\

#### 根据搜索内容进行搜索 ####

使用Android Studio的全文搜索进行搜索，选择带有`@Page`的类，示例图如下:

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWV4aWFuZ2p5cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]   ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWV4aWFuZ2p5cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]

选中结果后，该类基本上就是你所需要的示例代码所在的Fragment页面了，接下来的任务就是死抠示例代码的实现逻辑了！

## 相关阅读 ##

*  [XUI 一个简洁而优雅的Android原生UI框架，解放你的双手！][XUI _Android_UI]
 *  [XUI使用说明文档][XUI 1]

## 联系方式 ##

![在这里插入图片描述][20190116143126277.png]

## 微信公共号 ##

![在这里插入图片描述][20190116143230727.jpg]

[XUI]: https://github.com/xuexiangjys/XUI
[Link 1]: https://github.com/xuexiangjys/XUI/wiki/%E5%A6%82%E4%BD%95%E5%BC%95%E7%94%A8
[20190703010719905.png]: https://img-blog.csdnimg.cn/20190703010719905.png
[20190703010741802.png]: https://img-blog.csdnimg.cn/20190703010741802.png
[XPage]: https://github.com/xuexiangjys/XPage
[1]: https://img-blog.csdnimg.cn/20190703010820167.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dWV4aWFuZ2p5cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[2]: /images/20211217/7fd89b7ec93d45f39caf2ba91538be57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWV4aWFuZ2p5cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190703010954836.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly94dWV4aWFuZ2p5cy5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly94dWV4aWFuZ2p5cy5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70 1]: /images/20211217/6444ed562ab74eb3982c45f48ebe9c7f.png
[XUI _Android_UI]: https://xuexiangjys.blog.csdn.net/article/details/86507221
[XUI 1]: https://github.com/xuexiangjys/XUI/wiki
[20190116143126277.png]: /images/20211217/0728eeaee76d4486aa4804b927c01cb7.png
[20190116143230727.jpg]: /images/20211217/f02f8b9ced4841718b641a9948c6c786.png