史上最優(yōu)美的Android原生UI框架XUI使用指南

image

項(xiàng)目簡介

XUI是一個(gè)簡潔而又優(yōu)雅的Android原生UI框架，解放你的雙手竣贪！

XUI可以說是我花費(fèi)心血最多的開源項(xiàng)目了，目前稍微大一點(diǎn)的項(xiàng)目我都會(huì)選擇引入它犁钟。XUI幾乎涵蓋了目前Android開發(fā)所需要的所有組件米苹，可以說有了XUI之后，可以大大提高我們的開發(fā)效率万搔，讓我們可以將精力很多地放在業(yè)務(wù)功能和數(shù)據(jù)處理上胡桨。可以說XUI是目前Github上組件最全瞬雹、文檔最詳細(xì)昧谊、案例(200+)數(shù)量最多的Android原生UI庫。

目前XUI在github上已經(jīng)擁有2.6k的star量, 如果你喜歡的話,歡迎點(diǎn)擊star收藏! 項(xiàng)目地址: https://github.com/xuexiangjys/XUI

設(shè)計(jì)原由

相信做過Android的人都知道Android原生組件在國內(nèi)很不受設(shè)計(jì)師的待見酗捌，至于Google推行的Material Design設(shè)計(jì)風(fēng)格更是無人問津呢诬，這就導(dǎo)致了設(shè)計(jì)師給出的原型圖幾乎是清一色的IOS風(fēng)格，更尷尬的是胖缤，網(wǎng)上Android相關(guān)的開源UI庫是少之又少尚镰，這可就為難死我們了，幾乎所有的基礎(chǔ)組件都需要自己重寫哪廓。之前也寫過React和Vue狗唉，發(fā)現(xiàn)它們都有非常方便的UI庫，而且使用起來也非常方便撩独，直接在示例代碼的基礎(chǔ)上修修改改就能大致上實(shí)現(xiàn)自己想要的效果敞曹，極大地提高了開發(fā)的效率。

設(shè)計(jì)思路

在開始著手做這樣一個(gè)開源庫之前综膀，我是一點(diǎn)思路都沒有的。好在在2017年的某一天局齿，我接觸到了QMUI,通過閱讀它的源碼剧劝，我發(fā)現(xiàn)它的設(shè)計(jì)思路非常好，可以通過設(shè)置不同的主題樣式抓歼、組件屬性等實(shí)現(xiàn)不同的組件效果讥此，非常靈活；除此之外谣妻，它還對UI主題風(fēng)格做了較為詳細(xì)的制定和歸類萄喳，可以說很有啟發(fā)意義。于是我就遵循了QMUI的思路蹋半，開啟了XUI的編寫他巨。

解決痛點(diǎn)

  • 簡潔優(yōu)雅，盡可能少得引用資源文件的數(shù)量减江，項(xiàng)目庫整體大小不足1M染突。
  • 組件豐富，提供了絕大多數(shù)我們在開發(fā)者常用的功能組件辈灼。
  • 使用簡單份企，為方便快速開發(fā)，提高開發(fā)效率巡莹，對api進(jìn)行了優(yōu)化司志，提供一鍵式接入甜紫。
  • 樣式統(tǒng)一，框架提供了一系列統(tǒng)一的樣式骂远，使UI整體看上去美觀和諧棵介。
  • 兼容性高，框架還提供了3種不同尺寸設(shè)備的樣式（4.5英寸吧史、7英寸和10英寸）邮辽，并且最低兼容到Android 17, 讓UI兼容性更強(qiáng)。
  • 擴(kuò)展性強(qiáng)贸营，各組件提供了豐富的屬性和樣式API吨述，可以通過設(shè)置不同的樣式屬性，構(gòu)建不同風(fēng)格的UI钞脂。

演示項(xiàng)目

通過查看演示Demo的實(shí)現(xiàn)揣云，可以快速高效地掌握UI組件的使用。

項(xiàng)目架構(gòu)

項(xiàng)目頁面主要使用XPage頁面框架自動(dòng)搭建冰啃，結(jié)構(gòu)非常清晰邓夕。項(xiàng)目主要分為"組件"、"工具"和"拓展"三個(gè)部分阎毅。

  • 組件：組件頁面主要包含了UI框架中所有組件的使用Demo樣例焚刚，在"com.xuexiang.xuidemo.fragment.components"包下，點(diǎn)擊查看扇调。

  • 工具：工具頁面主要包含了UI框架中所有輔助工具的使用Demo樣例矿咕，在"com.xuexiang.xuidemo.fragment.utils"包下，點(diǎn)擊查看狼钮。

  • 拓展：擴(kuò)展頁面主要包含了功能比較復(fù)雜的第三方UI組件集成Demo樣例碳柱，在"com.xuexiang.xuidemo.fragment.expands"包下，點(diǎn)擊查看

項(xiàng)目結(jié)構(gòu)如下圖：

項(xiàng)目結(jié)構(gòu)

Demo主頁面如下圖:

Demo主頁面

Demo體驗(yàn)

點(diǎn)擊下載Demo體驗(yàn)效果

視頻教程

如何在項(xiàng)目中使用XUI: https://www.bilibili.com/video/BV1w7411c7Hy/

快速集成

集成指南

添加Gradle依賴

1.先在項(xiàng)目根目錄的 build.gradle 的 repositories 添加:

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

【注意】切記不要跳過這一步，因?yàn)閄UI目前只發(fā)布在jitpack平臺(tái)上毁枯，跳過這一步會(huì)導(dǎo)致ERROR: Failed to resolve: com.github.xuexiangjys:XUI:x.x.x錯(cuò)誤４鹊蕖！种玛！

2.然后在dependencies添加:

dependencies {
  ...
  //androidx項(xiàng)目
  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'
}

【注意】如果你的項(xiàng)目目前還未使用androidx藐鹤，請使用如下配置：

dependencies {
  ...
  //support項(xiàng)目
  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設(shè)置

1.在Application最頂部初始化設(shè)置（必須）

XUI.init(this); //初始化UI框架
XUI.debug(true);  //開啟UI框架調(diào)試日志

2.調(diào)整應(yīng)用的基礎(chǔ)主題（必須）

必須設(shè)置應(yīng)用的基礎(chǔ)主題瓤檐，否則組件將無法正常使用！必須保證所有用到XUI組件的窗口的主題都為XUITheme的子類娱节，這非常重要Ｄ域取！肄满！

基礎(chǔ)主題類型：

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

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

  • 手機(jī)（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>

當(dāng)然也可以在Activity剛開始時(shí)調(diào)用如下代碼動(dòng)態(tài)設(shè)置主題

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

3.調(diào)整字體庫（對字體無要求的可省略）

（1）設(shè)置你需要修改的字體庫路徑（assets下）

//設(shè)置默認(rèn)字體為華文行楷谴古，這里寫你的字體庫
XUI.getInstance().initFontStyle("fonts/hwxk.ttf");

（2）在項(xiàng)目的基礎(chǔ)Activity中加入如下代碼注入字體.

注意：1.1.4版本之后使用如下設(shè)置注入

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

注意：1.1.3版本及之前的版本使用如下設(shè)置注入

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

混淆配置

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

常見問題

接入的問題

1.如何快速上手XUI，提升UI開發(fā)的效率稠歉？

  • 首先掰担，請先仔細(xì)按照接入文檔接入XUI框架，不要跳步驟或者漏步驟怒炸，一步一步按照說明來接入带饱。除此之外，我也提供了視頻教程供大家學(xué)習(xí)阅羹。

  • 其次勺疼，按照正確使用XUI的姿勢的說明，來使用XUI捏鱼。

  • 最后执庐，出現(xiàn)問題可以查閱使用說明文檔或者研究Demo的使用，確保自己的用法是正確合理的穷躁，不要想當(dāng)然耕肩。源碼閱讀能力強(qiáng)的可直接翻看XUI的項(xiàng)目源碼, 如果發(fā)現(xiàn)框架確實(shí)存在問題也可以點(diǎn)擊提交Issue清單,將問題反饋給我解決。

2.為什么我增加XUI依賴后會(huì)報(bào)錯(cuò)：ERROR: Failed to resolve: com.github.xuexiangjys:XUI:x.x.x问潭？

答：這句話的意思是：無法解析到XUI的依賴。出現(xiàn)這種情況的原因是你沒有配置遠(yuǎn)程依賴倉庫jitpack地址婚被。這里建議你不要自以為是狡忙，老老實(shí)實(shí)按照使用說明文檔來引入依賴。

3.為什么我在使用XUI中的組件時(shí)址芯，會(huì)報(bào)錯(cuò)說R文件找不到android.content.res.Resources$NotFoundException: File res/drawable/xxxxx.xml from drawable resource ID ...灾茁、屬性獲取不到Failed to resolve attribute at index ...或者布局解析出錯(cuò)android.view.InflateException:Binary XML file line #xx:Error inflating class <unknow>....？

  • 首先谷炸，你需要確認(rèn)的是你當(dāng)前組件所在的窗口（Activity）所使用的主題是否繼承了XUITheme主題北专，如果沒有，請按照接入文檔正確接入旬陡。這里需要說明的是拓颓，XUI不同于其他開源組件庫，他是一套統(tǒng)一的UI框架描孟，有一套嚴(yán)格統(tǒng)一的屬性樣式標(biāo)準(zhǔn)驶睦，其中絕大多數(shù)組件和資源都使用了規(guī)范化的XUI樣式主題屬性砰左，因此不使用XUITheme將無法正常使用XUI框架。

  • 其次场航，如果你也使用了XUI主題缠导，那么請查看你使用的context是否是所在窗口的context，組件中傳入的context一定不要使用XUI.getContext()之類的溉痢，不懂的自己去復(fù)習(xí)一下Android的基礎(chǔ)吧僻造，這里給個(gè)講Android中的Context和Android中Context的類型, 自己去看吧。

  • 然后孩饼，如果你context也沒使用錯(cuò)的話髓削，那么請查看一下當(dāng)前報(bào)錯(cuò)設(shè)備的系統(tǒng)版本。因?yàn)樵贏ndroid5.0（21）以下在drawable中使用?attr引用主題屬性的話捣辆，也會(huì)導(dǎo)致R文件找不到的問題蔬螟。而且同樣是在Android5.0（21）以下，如果你使用vector加載SVG圖片的話汽畴，同樣也會(huì)導(dǎo)致R文件找不到旧巾，因?yàn)樵贏ndroid5.0（21）以下系統(tǒng)是不支持加載SVG圖片的。

  • 最后忍些，如果以上都檢查過但問題依然存在鲁猩，你可以嘗試升級XUI至最新版本（注意最新版本只支持AndroidX）。如果升級了問題依然存在罢坝，那么就要考慮是不是你的用法有問題了廓握，建議多看看XUI項(xiàng)目中的演示Demo，點(diǎn)擊查看學(xué)習(xí)演示Demo的用法嘁酿。

4.XUI有支持Support和AndroidX的版本嗎隙券？

答：最新的版本是只支持AndroidX的。從XUI 1.0.5以后闹司，是支持AndroidX的版本娱仔，1.0.5之前的版本是支持Support的版本。這里我建議使用最新版本（AndroidX版本）游桩，因?yàn)橹暗陌姹究赡艽嬖谝恍┘嫒菪缘腷ug牲迫，并在后面的版本被逐一修復(fù)。如果你依然想使用Support版本的話借卧，要么你就使用1.0.5之前的版本（存在一些低版本兼容性的bug）盹憎，要么你就clone一下當(dāng)前最新版本的源碼，將其改為Support版本本地導(dǎo)入依賴使用铐刘。

【這里考慮到還有一大部分人在使用support陪每，為了方便大家使用，我在當(dāng)前較為穩(wěn)定的1.0.9版本上修改了一個(gè)支持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支持自定義屬于自己的主題嗎辆飘？如何自定義主題以符合設(shè)計(jì)師給出的UI風(fēng)格啦辐。

答：XUI是支持自定義主題的。詳情參見如何自定義自己的主題蜈项。

演示Demo相關(guān)的問題

1.為什么XUIDemo項(xiàng)目我運(yùn)行不起來芹关？

答：演示Demo的程序跑通是肯定沒有任何問題的。這里推薦使用Android Studio 3.4.1以上的版本打開運(yùn)行紧卒。詳情參見如何運(yùn)行Demo程序侥衬。除此之外,請不要修改gradle的版本,因?yàn)樯塯radle版本可能導(dǎo)致依賴加載失敗的問題.

2.演示Demo中的"組件"、"工具"和"拓展"都包含了什么內(nèi)容跑芳？

答："組件"中主要包含了XUI對外提供的絕大多數(shù)組件的使用案例轴总，"工具"中主要包含XUI對外提供輔助工具的使用案例。
而"拓展"中包含的則是一些第三方常用的UI組件庫使用案例博个，非XUI中提供的內(nèi)容怀樟。詳情參見演示Demo介紹。

資源鏈接

技術(shù)交流

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末着绊，一起剝皮案震驚了整個(gè)濱河市谐算，隨后出現(xiàn)的幾起案子，更是在濱河造成了極大的恐慌归露，老刑警劉巖洲脂，帶你破解...
    沈念sama閱讀 218,682評論 6贊 507
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件，死亡現(xiàn)場離奇詭異，居然都是意外死亡恐锦，警方通過查閱死者的電腦和手機(jī)往果，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,277評論 3贊 395
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來一铅，“玉大人陕贮，你說我怎么就攤上這事∨似” “怎么了肮之？”我有些...
    開封第一講書人閱讀 165,083評論 0贊 355
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵，是天一觀的道長卜录。 經(jīng)常有香客問我戈擒，道長，這世上最難降的妖魔是什么艰毒？ 我笑而不...
    開封第一講書人閱讀 58,763評論 1贊 295
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任筐高，我火速辦了婚禮，結(jié)果婚禮上丑瞧，老公的妹妹穿的比我還像新娘柑土。我一直安慰自己，他們只是感情好嗦篱，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,785評論 6贊 392
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布冰单。 她就那樣靜靜地躺著，像睡著了一般灸促。 火紅的嫁衣襯著肌膚如雪诫欠。 梳的紋絲不亂的頭發(fā)上，一...
    開封第一講書人閱讀 51,624評論 1贊 305
  • 城市分裂傳說
    那天浴栽，我揣著相機(jī)與錄音荒叼，去河邊找鬼。 笑死典鸡，一個(gè)胖子當(dāng)著我的面吹牛被廓，可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播萝玷，決...
    沈念sama閱讀 40,358評論 3贊 418
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼嫁乘，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了球碉？” 一聲冷哼從身側(cè)響起蜓斧，我...
    開封第一講書人閱讀 39,261評論 0贊 276
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎睁冬，沒想到半個(gè)月后挎春，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體，經(jīng)...
    沈念sama閱讀 45,722評論 1贊 315
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,900評論 3贊 336
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年直奋，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了能庆。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,030評論 1贊 350
  • 活死人
    序言：一個(gè)原本活蹦亂跳的男人離奇死亡脚线，死狀恐怖搁胆，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情殉挽，我是刑警寧澤丰涉，帶...
    沈念sama閱讀 35,737評論 5贊 346
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站斯碌，受9級特大地震影響一死，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜傻唾，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,360評論 3贊 330
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一投慈、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧冠骄，春花似錦伪煤、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,941評論 0贊 22
  • 一樁弒父案抱既，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至扁誓，卻和暖如春防泵，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背蝗敢。 一陣腳步聲響...
    開封第一講書人閱讀 33,057評論 1贊 270
  • 情欲美人皮
    我被黑心中介騙來泰國打工捷泞， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留，地道東北人寿谴。 一個(gè)月前我還...
    沈念sama閱讀 48,237評論 3贊 371
  • 代替公主和親
    正文 我出身青樓锁右，卻偏偏與公主長得像，于是被迫代替她去往敵國和親讶泰。 傳聞我的和親對象是個(gè)殘疾皇子咏瑟，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,976評論 2贊 355