整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
別的UI給特別的你們！
排名不分先后，快速上手的移動端UI匯總（部分可能不那么簡單），希望對你有幫助，資源獲取方式在文末
ionic 是一個強大的 HTML5 應用程序開發框架(HTML5 Hybrid Mobile App Framework )。 可以幫助您使用 Web 技術，比如 HTML、CSS 和 Javascript 構建接近原生體驗的移動應用程序。
ionic 主要關注外觀和體驗，以及和你的應用程序的 UI 交互，特別適合用于基于 Hybird 模式的 HTML5 移動應用程序開發。
VUX 是基于 WeUI 和 Vue.js 的 移動端 UI 組件庫,提供豐富的組件滿足移動端(微信)頁面常用業務需求。
Touch UI是一套完全免費的高質量移動端UI框架。基于vue.js框架，我們精心打造了上百種的移動端UI組件，幾乎囊括了開發移動應用的所有細節，真正實現拿來即用，像搭積木一樣開發移動應用。
通過借鑒微信小程序的思想，Touch UI設計了與微信小程序相似的開發方式和API，希望通過這種方式降低學習成本，讓任何水平的開發者都能做出精美應用。另外，配合我們的小程序開發框架：Touch WX，可以將Touch UI做的H5應用直接轉成微信小程序。
Touch UI還提供了開發工具方便開發（微軟的VSCode編輯器+插件），開發工具集成了編譯環境，可以通過可視化菜單的方式對代碼進行編譯和項目輸出。通過在線更新插件的方式可以第一時間獲取Touch UI的更新。
FrozenUI 是一套基于移動端的UI庫輕量、精美、遵從手機 QQ 設計規范
適用于使用手Q規范設計的Web頁面，而針對非手Q規范的頁面，可通過修改變量定制界面主題。
可以按需選擇需要的組件，也可以采用cdn和combo的方式按需加載。
使用iconfont展示圖標，包含了按鈕，列表，表單，提示，彈窗等常用組件，新增文本，布局，1px， rem，文字截斷，占位，兩端留白，兩端對齊等解決方案，同時解決了移動端屏幕適配問題。
CSS使用模塊化的樣式命名和組織規范，使用sass編寫css代碼。
多端發布 – 開發一套代碼，發布六個平臺
SUI Mobile 是一套基于 Framework7 開發的UI庫。它非常輕量、精美，只需要引入我們的CDN文件就可以使用，并且能兼容到 iOS 6.0+ 和 Android 4.0+，非常適合開發跨平臺Web App。
輕量的UI庫
SUI Mobile 非常輕量，核心庫壓縮Gzip后的JS、CSS網絡傳輸體積總共只有52K，卻提供了20+個常用的組件。
對于只有HTML&CSS的組件，你只需要復制HTML代碼既可以使用。他的大部分JS組件都是獨立的 Zepto 插件，并且提供了 Zepto/jQuery 風格的API，你將會非常熟悉這種方式。
一只注重審美，且性能高效的移動端&微信UI。
YDUI Touch 專為移動端打造，在技術實現、交互設計上兼容主流移動設備，保證代碼輕、性能高。
使用 Flex 技術，靈活自如地對齊、收縮、擴展元素，輕松搞定移動頁面布局。
WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊為微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。
快速開發
結合BUI Fast插件,可以提高5倍以上的開發速度!
快速上手
一次學習,多平臺適用,跟你剛學前端一樣開發,只需要5分鐘就能快速上手
輕松定制
控件接口開放,UI效果及交互都可以輕松定制
多終端適配
一次開發,多平臺適配,完美還原設計稿,在微信,手機瀏覽器,安卓,IOS保持跟一致的效果.
BUI 是一個開放式的UI交互框架, 用于快速定制開發WebApp,微信,快應用,還可以開發混合移動應用 ( 例如: Bingotouch, Link, Cordova, DCloud, ApiCloud, Appcan ) , 釘釘的輕應用, 前海圓舟等第三方平臺.
Amaze UI Touch 專為移動打造，在技術實現、交互設計上只考慮主流移動設備，保證代碼輕、性能高。
只提供 UI 組件（View），對配套技術不做限定，方便用戶與現有技術棧快速整合，降低使用成本。
AUI Mobile jQuery Mobile bootstrap 等還有很多
今天小編就分享到這里
如果你是初級程序員可以研究別人的代碼提高技術，如果你喜歡搞網盟或者外包，可以讓你快速建站，還等什么趕快關注吧，我們會持續輸出相關資源
動端web開發框架、類庫和UI組件簡介，有需要的收藏一波。
react-native
一個基于React的創建原生APP的框架
html5-boilerplate
一個用來構建快速、強大、可適配的webapp的前端模板
ionic
領先的HTML5移動開發框架和SDK，利用你所熟知的web技術構建難以置信的移動應用，是AngularJS最好的朋友。
weui
由微信官方設計團隊為微信Web開發量身打造的框架，包含移動web應用開發中有用的組件和模塊
hammer.js
實現多點觸控的javascript庫
weex
阿里推出的跨平臺的移動端開發框架，具有輕量級、可擴展和高性能的特點
fastclick
一個消除移動端瀏覽器上的點擊事件的300ms的延遲
zepto
Zepto.jsisaminimalistJavaScriptlibraryformodernbrowsers,withajQuery-compatibleAPI
vux
基于Vue和Weui的移動端框架
wepy
騰訊團隊推出的小程序組件化開發框架
NativeScript
NativeScript是一個利用JavaScript等WEB技術創建原生APP的框架
Framework7
功能強大的創建iOS&AndroidAPP的HTML框架
mui
最接近原生APP體驗的高性能框架
ratchet
用簡單的HTML,CSS,和JavaScript組件創建移動應用
react-native-elements
ReactNativeUI組件庫
mint-ui
基于vue.js的移動端UI框架
amazeui
移動端優先的開源HTML5跨屏前端框架，俗稱妹子UI
jquery-mobile
jQuery移動開發框架
Mars
騰訊移動Web前端知識庫
interact.js
JavaScriptdraganddrop,resizingandmulti-touchgestureswithinertiaandsnappingformodernbrowsers(andalsoIE8+)
vant
有贊開發的基于Vue.js2.0的UI組件庫
OnsenUI
用來構建混合移動端APP的HTML5UI框架
muse-ui
基于Vue2.0和MaterialDesigin的UI組件庫
SUI-Mobile
SUIMobile(MSUI)是由阿里巴巴國際UED前端出品的一個手機端的UI庫，輕量精美。更多信息請參考官網
ant-design-mobile
一個可配置的移動端UI框架
TouchSwipe-Jquery-Plugin
TouchSwipeisajqueryplugintobeusedwithjQueryontouchinputdevicessuchasiPad,iPhoneetc.
jquery-weui
創建微信混合app的UI庫
jquery-ui-touch-punch
AduckpunchforaddingtoucheventstojQueryUI
device.js
Device.jsmakesiteasytowriteconditionalCSS_and/or_JavaScriptbasedondeviceoperatingsystem(iOS,Android,Blackberry,Windows,FirefoxOS,MeeGo),orientation(Portraitvs.Landscape),andtype(Tabletvs.Mobile).
react-native-ui-kitten
可定制和可重用的react-native組件包
iview-weapp
一套高質量的微信小程序UI組件庫
vonic
基于Vue.js和ionic組件的SPAUI框架
brick
UIWebComponentsforModernWebApps
app
App.js是一個用來創建移動webapp的輕量級JavaScriptUI框架，可以表現得像原生APP而又不犧牲性能和優雅
Lungo.js
一個給開發者提供的設計、構建、分享跨設備應用的框架
AlloyFinger
騰訊Web前端團隊推出的輕量級的多點觸控手勢庫
FooTable
jQueryplugintomakeHTMLtablesresponsive
vue-ydui
一個基于Vue2.x的移動端組件庫
wechat-h5-boilerplate
為騰訊微信優化的H5動效模板，幫助你快速構建全屏滾動型H5頁面
slip
通過滑動和拖動手勢操作列表的UI庫
mobi.css
一個關注于移動端的輕量級的、靈活的css框架，
vue-touch
Vue.js的Hammer.js包裝器
QuoJS
針對移動設備的微型JavaScript庫
pressure
:point_down::boom:JavaScriptlibraryforhandlingbothForceTouchand3DTouchontheweb
junior
一個創建類似原生APP的html5應用的前端框架
vum
為手機webapp打造的基于Vue.js構建的UI框架
mobiscroll
ThecustomizablemobileUIlibraryfortouchdeviceslikesmartphonesandtablets
zingtouch
一個JavaScript觸摸手勢檢測庫
montage
montagejs是一個優雅的、開源的HTML5框架。它提供了模塊化組件，雙向數據綁定，以及更多功能
pushy
Pushyisaresponsiveoff-canvasnavigationmenuusingCSStransforms&transitions
GMU
基于zepto的ui組件庫，適用于移動端
flex.css
flex.cssis是一個聲明式的布局框架，能夠兼容多個MVVM框架和瀏覽器
mobilebone
單頁切換骨架。適用于移動webAPP,Hybrid混合APP,Phonegap開發,無兼容要求單頁PC應用等
jquery.pep.js
Pep,alightweightpluginforkineticdragonmobile/desktop
Cloudajs
CloudaFramework-一個針對移動WebApp的實時JavaScriptRIA框架
jo
Jo(0.5.0)是一個輕量級的(~16K)創建HTML5應用的外殼。可以和PhoneGap,Chrome,Safari,Opera,FireFox,iOS,Android,BlackBerry10,Tizen,&WindowsPhone8+一起工作
touchui
高質量移動端UI框架
iosselect
一個簡潔好看的模仿ios的webapp下拉菜單
mand-mobile
面向金融場景的Vue移動端UI組件庫，豐富、靈活、實用，快速搭建優質的金融類產品
tabris-js
tabris.js-用JavaScript開發原生應用
aui
移動端UI快速布局解決方案（APICloudUI框架）
vue-carbon
基于vue開發的materialdesignui庫
cordova-plugin-ibeacon
AniBeaconpluginforPhonegap/Cordova3.xandupwards.SupportsbothiOSandAndroid(contributionsarewelcome)
touch.code.baidu.com
TouchOfficalSite
bindingx
阿里團隊推出的weex和ReactNative上富交互問題的一種解決方案
jQuery-Touch-Events
AcollectionofmobileeventpluginsforjQuery.
TinyNav.js
Responsivenavigationpluginthatweighsjust443bytes
Jingle
JingleUI是一個基于html5、css3開發輕量級的移動webapp框架，提供一些基本交互方式，幫助您更方便的開發移動應用。
light7
一個輕量級的易用的移動端UI框架
framework7-vue
基于Framework7和Vue構建iOS和Android應用
ydui
一只注重審美，且性能高效的移動端&微信UI
slip.js
移動端跟隨手指滑動組件，零依賴。
wepayui
微信支付場景化組件，wepayui源碼
BlendUI
BlendUI是Clouda+中的重要組成部分，他能讓webapp的用戶界面體驗和交互能和Native媲美
toucher
面向移動端的手勢類庫
touchjs
一個移動端手勢檢測庫
thumbs.js
Addtouchsupporttoyourbrowserwiththumbs.js-asmall,transparent,andsyntax-lesslibrary.
JMUI
移動Web開發UI組件庫
JM
面向Mobile的極致JavaScript庫
react-ui
為React打造的一套ionic風格的可復用UI組件庫
Zoomage.js
Zoomage.js-一個通過手勢縮放圖片的庫
touchSlider
TouchSliderjQueryPlugin
者博客
http://www.jianshu.com/u/0fa6f5d09040
文章目錄
前言
場景
實現方式
drawable屬性
Spannable使用
HTML顯示
總結
0
前言
在使用TextView的時候，我們經常需要在TextView中進行圖文混排，比如在QQ中聊天的消息中的表情，底部tab圖標等。
1
場景
2
實現方式
Android官方對TextView的圖文混排提供了支持，我們可以從以下三種方式實現TextView的圖文混排：
1.在TextView中使用Compound Drawable屬性；
2.在TextView中使用Spannable多樣式顯示；
3.在TextView中顯示HTML文本。
3
drawable屬性
在TextView中使用Compound Drawable屬性可以在文字的上下左右放置drawable，效果如下：
一共有兩種方式可以實現：XML布局設置和Java代碼設置。
1. xml布局
2. java代碼
注意：必須setBounds測量圖片邊界，否則不顯示。
3.缺陷
當TextView設置成固定大小時，由于文字距離邊界的距離過大，會導致文字與圖片之間設置的間距無效，如下圖。
解決方案：
①設置TextView的內填充
通過設置paddingLeft、paddingRight、paddingTop、paddingBottom來縮寫這個間距
②自定義TextView重新布局
a.先自定義屬性iconPadding來設置間距，并提供方法給外部調用。
b.重寫setCompoundDrawablesWithIntrinsicBounds方法來獲取我們設置的drawable寬高。
c.最后重寫onLayout方法。
可以先參考：Android技巧之drawablePadding的那些事（https://yuxingxin.com/2015/11/05/DrawablePadding/）,該篇文章只解決了左右失效的問題。后期會整理個解決圖文混排的工具庫，里面會有具體方案。
4
Spannable使用
1.簡介
setText(CharSequence text)中接收的是CharSequence。而SpannableString和SpannableStringBuilder是其實現類，是可以直接賦值的。并且兩者的setSpan方法可以設置一些格式對象（例如字體大小、下劃線、替換為圖片等），這就可以實現富文本了。
Spannable實現子類：SpannableString，SpannableStringBuilder（可變，類似于StringBuilder）。
Spannable中定義了抽象方法：setSpan(Object what, int start, int end, int flags)和removeSpan(Object what)。這兩個方法實現了對字符串的靈活編輯。
其中setSpan方法包含如下參數：
flags常用的有四種
通常在insert方式才生效，平時不生效，具體看：Explain the meaning of Span flags like SPAN_EXCLUSIVE_EXCLUSIVE。（https://stackoverflow.com/questions/9879233/explain-the-meaning-of-span-flags-like-span-exclusive-exclusive）
2.常用span類
3.使用方式
其中ImageSpan默認對其方式有兩種：ALIGN_BOTTOM及ALIGN_BASELINE。很可惜我們平常用的居中對其的方式沒有，不過可以通過自定義實現，后續會在開源出來。
4.效果
5
HTML顯示
一般顯示HTML內容有兩種方式：
使用 Android 提供的 WebView 控件。
通過將 HTML 內容轉化為 Spanned 格式在 TextView 中進行顯示。
現在大多數都用WebView的方式。但是并不是所有的場景下都適合使用 WebView 來顯示 HTML 內容，例如，如果應用要顯示的內容只是一部分 HTML 片段，就可以利用 TextView 來進行顯示，并且效率較高。
由于這種方式不太常用，就不深入介紹，里面可以實現的效果還是很好的。
1.簡介
Android 中的 TextView 組件常用于顯示文本內容，其實它也可以顯示 HTML 的內容。
簡單來講，這就需要先把 HTML 的內容以字符串的形式獲取后，經過 android.text.Html.fromHtml轉化成 Spanned 的格式，然后將其傳遞到 TextView 的 setText方法中，這樣就可以在 TextView 中顯示 HTML 頁面的內容了。
需要注意的是，并不是所有的 HTML 標簽在 TextView 中都是支持的，且官方文檔并沒有明確的說明支持 HTML 標簽列表，通過查看 Android 源代碼，可以得到簡單的支持列表。
下面的示例來介紹如何在 TextView 中顯示一段 HTML 內容，要顯示的這段 HTML 內容即包含超鏈接內容，也包含有圖片。
2.使用
fromHtml方法
source，就是包含 HTML 內容的字符串。Html.ImageGetter 和 Html.TagHandler 是兩個接口，提供給開發者繼承使用。
imageGetter， 如果要顯示圖片是需要被繼承的，重寫 getDrawable(String source)方法，用于獲取 HTML 里面的圖片來顯示在 TextView 中。
tagHandler，其作用是把 HTML 帶標記的文本內容字符串轉化成可以顯示效果的的 Spanned 字符串 。由于并非所有的 HTML 標簽都可以轉化，所以在使用時，用戶需要自己添加一些必要的標簽和處理方法時才會繼承使用的。
繼承ImageGetter
繼承于 ImageGetter，重寫 getDrawable (String source) 方法。通過異步操作，讀取本地/網絡資源，獲得drawable對象。
繼承TagHandler
繼承于 TagHandler，重寫了 handleTag方法。為了支持更多的標簽，例如為了支持<ul><ol><dd>和<li>標簽，這四個標簽是在 formHtml方法中本身是不支持。
如果開發者認為安卓 TagHandler 提供的默認標簽解析已經夠用，直接在 fromHtml方法中第三個參數的地方填寫 既可。
最后，通過 formHtml方法將 HTML 內容轉化為可供顯示的 SpannableString，將 SpannableString 通過 setText 方法放入 TextView 中，就可以顯示圖文并茂的內容了。
用戶交互
formHtml方法已經將 HTML 內容中的超鏈接和圖片轉義成為 UrlSpan 和 ImageSpan，進而在 TextView 中完成顯示。但是此時是沒有任何用戶交互的，用戶只能看到 HTML 的內容，下面介紹如何添加用戶交互功能。
要完成用戶交互，這里我們需要在 TextView 中還需要調用textView.setMovementMethod方法。
Android 提供了 LinkMovementMethod 類以實現了對于文本內容中超鏈接的遍歷，并且支持對于超鏈接的點擊事件。
所以只要在添加下面一行代碼，就可以使點擊 UrlSpan 能夠觸發打開鏈接的功能。
如果想要更多的用戶交互效果，可以自定義LinkMovementMethod 類，重寫onTouchEvent方法來實現。
3.效果
關于HTML顯示這部分，沒做具體實現。具體可以看：靈活高效的在 Android Native App 開發中顯示 HTML 內容（https://www.ibm.com/developerworks/cn/web/1407_zhangqian_androidhtml/index.html）,里面有具體源碼可以下載，HTML部分內容也是參考該篇文章完成的。
開源庫：html-textview
https://github.com/PrivacyApps/html-textview
6
總結
以上就是關于圖文混排的一些解決方案，相信通過這些了解，對于工作中的實際場景的使用大家會有適當的解決方案。由于實際應用較少，所以認識較為淺顯，可能有些地方描述不當，后期會考慮封裝個解決圖文混排的工具類，加深下理解。
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
