UniversalLayout 1.1
UniversalLayout使用過(guò)程各種不方便的改進(jìn),更新中窖梁。
UniversalLayout 的產(chǎn)生
讀了鴻神幾篇關(guān)于Android適配的的文章刮刑,如果既要使用PercentLayout又要使用AutoLayot臀晃,感覺使用起來(lái)還是特別麻煩搓扯,同時(shí)AutoLayout的設(shè)計(jì)方式使用上不方便,依懶Activity愤惰、只能使用一種設(shè)計(jì)尺寸苇经、預(yù)覽不方便,于是用自己的空閑時(shí)間寫了這個(gè)庫(kù)宦言,發(fā)現(xiàn)Bug歡迎提出扇单。新手寫博客文采不好請(qǐng)見諒,廢話不多說(shuō)開始介紹奠旺。
UniversalLayout主要是基于Google percent庫(kù)進(jìn)行擴(kuò)展的蜘澜,代碼的基礎(chǔ)有大部分內(nèi)容直接copy自鴻神的項(xiàng)目(Android 增強(qiáng)版百分比布局庫(kù) 為了適配而擴(kuò)展),自己重寫太麻煩响疚,修改了原庫(kù)的一些Bug鄙信,同時(shí)加入了AutoLayout的支持,實(shí)現(xiàn)方式跟AutoLayout不同忿晕,AutoLayout使用實(shí)在是麻煩装诡。簡(jiǎn)單的來(lái)說(shuō)這是一個(gè)即支持PercenLayout又支持AutoLayout為了方便使用產(chǎn)生的庫(kù),偷偷告訴你還可以直接在布局里預(yù)覽的哦不挑屏幕的践盼。
UniversalLayout 的原理
關(guān)于UniversalLayout的原理暫時(shí)就不解析了鸦采,實(shí)在沒把握講明白以后有空再說(shuō)(基本是不可能的),想了解的先閱讀Android 百分比布局庫(kù)(percent-support-lib) 解析與擴(kuò)展和Android 增強(qiáng)版百分比布局庫(kù) 為了適配而擴(kuò)展原理都是一樣的宏侍,都是基于percent修改來(lái)的赖淤。
UniversalLayout 的使用之PercentLayout
針對(duì)百分比的使用很簡(jiǎn)單蜀漆,跟Android 增強(qiáng)版百分比布局庫(kù) 為了適配而擴(kuò)展的方法基本一致谅河,無(wú)非就是參數(shù)名的percent改成universal
<?xml version="1.0" encoding="utf-8"?>
<silicar.tutu.universal.UniversalLinearLayout
android:orientation="vertical"
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
style="@style/LayoutWrapWrap"
android:textColor="@android:color/white"
app:layout_marginTopUniversal="1%"
android:background="#666"
android:text="Width 100%sw Height 8%sw TextSize 5%ws"
app:layout_textSizeUniversal="5%s"
app:layout_widthUniversal="100%s"
app:layout_heightUniversal="8%sw"/>
<TextView
style="@style/LayoutWrapWrap"
app:layout_marginTopUniversal="1%"
android:background="#666"
android:textColor="@android:color/white"
android:text="Width 100%sh Height 8%sh TextSize 5%sh"
app:layout_textSizeUniversal="5%sh"
app:layout_widthUniversal="100%sh"
app:layout_heightUniversal="8%s"/>
<silicar.tutu.universal.UniversalLinearLayout
android:orientation="vertical"
android:background="#aaa"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_marginUniversal="5%s"
app:childStyle="@style/Design320x568">
<TextView
style="@style/LayoutWrapWrap"
android:textColor="@android:color/white"
app:layout_marginTopUniversal="1%"
android:background="#666"
android:text="Parent Margin 5%s TextSize 5%s"
app:layout_textSizeUniversal="5%s"/>
<TextView
style="@style/LayoutWrapWrap"
android:textColor="@android:color/white"
app:layout_marginTopUniversal="1%"
android:background="#666"
android:text="Width 50%w Height 15%w TextSize 5%w"
app:layout_textSizeUniversal="5%"
app:layout_widthUniversal="50%"
app:layout_heightUniversal="15%w"/>
<TextView
style="@style/LayoutWrapWrap"
android:textColor="@android:color/white"
app:layout_marginTopUniversal="1%"
android:background="#666"
android:text="Width 50%sw Height 15%sw TextSize 5%sw"
app:layout_textSizeUniversal="5%s"
app:layout_widthUniversal="50%s"
app:layout_heightUniversal="15%sw"/>
<TextView
style="@style/LayoutWrapWrap"
app:layout_marginTopUniversal="1%"
android:background="#666"
android:textColor="@android:color/white"
android:text="Width 50%h Height 15%h TextSize 5%h"
app:layout_textSizeUniversal="5%h"
app:layout_widthUniversal="50%h"
app:layout_heightUniversal="15%"/>
<TextView
style="@style/LayoutWrapWrap"
app:layout_marginTopUniversal="1%"
android:background="#666"
android:textColor="@android:color/white"
android:text="Width 50%sh Height 15%sh TextSize 5%sh"
app:layout_textSizeUniversal="5%sh"
app:layout_widthUniversal="50%sh"
app:layout_heightUniversal="15%s"/>
</silicar.tutu.universal.UniversalLinearLayout>
</silicar.tutu.universal.UniversalLinearLayout>
適配的時(shí)候建議寬度作為基礎(chǔ),Android的屏幕比不一定都是9:16确丢,不同的手機(jī)會(huì)有不同的顯示尤其是魅族這類奇葩機(jī)型
Nexus 4預(yù)覽效果(768x1280)
Galaxy Nexus 預(yù)覽效果(720x1280)
可見不同比例的手機(jī)顯示的效果不同
UniversalLayout 的使用之AutoLayout
這才是重點(diǎn)用法跟AutoLayout不同绷耍,使用簡(jiǎn)單方便多了。
-
定義一個(gè)Style樣式存放設(shè)計(jì)的尺寸鲜侥,多個(gè)尺寸就定義多個(gè)
<style name="Design320x568"> <item name="layout_widthDesign">320px</item> <item name="layout_heightDesign">568px</item> </style>
為了方便使用我們多定義幾個(gè)其他的
<style name="Design640x1136"> <item name="layout_widthDesign">640px</item> <item name="layout_heightDesign">1136px</item> </style> <style name="LayoutWrapWrap"> <item name="android:layout_width">wrap_content</item> <item name="android:layout_height">wrap_content</item> </style>
-
在xml布局中加入我們的樣式就行了褂始,順帶介紹下工作原理了。很簡(jiǎn)單的就是把設(shè)計(jì)的尺寸加入到LayoutParams里描函,每個(gè)UniversalLayout的子控件都有一個(gè)自己的設(shè)計(jì)尺寸崎苗。那不是得每個(gè)都寫尺寸信息之不累死人也會(huì)煩死人狐粱,所以才用到style,當(dāng)然不需要每個(gè)寫胆数,也不需要每個(gè)都添加style肌蜻,只要在繼承UniversalLayout的父控件加個(gè)childStyle,子控件就會(huì)默認(rèn)使用指定的style必尼,如果子控件設(shè)置了Design會(huì)覆蓋掉默認(rèn)style蒋搜,這樣一來(lái)就算設(shè)計(jì)換了尺寸有多個(gè)尺寸,我們只要改下style就OK了是不是很方便判莉,原理自行閱讀源碼豆挽。
<silicar.tutu.universal.UniversalLinearLayout android:orientation="vertical" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent" app:childStyle="@style/Design320x568"> <TextView style="@style/LayoutWrapWrap" android:textColor="@android:color/white" app:layout_marginTopUniversal="5a" android:background="#666" android:text="Design Width 320 Height 568 TextSize 16aw Width 320a" app:layout_textSizeUniversal="16a" app:layout_widthUniversal="320a"/> <TextView style="@style/Design640x1136" android:layout_width="wrap_content" android:layout_height="wrap_content" android:textColor="@android:color/white" app:layout_marginTopUniversal="5a" android:background="#666" android:text="Design Width 640 Height 1136 TextSize 16aw Width 320a" app:layout_textSizeUniversal="16a" app:layout_widthUniversal="320a"/> <TextView style="@style/LayoutWrapWrap" android:textColor="@android:color/white" app:layout_marginTopUniversal="5a" android:background="#666" android:text="Width 320aw Height 25aw TextSize 16aw" app:layout_textSizeUniversal="16a" app:layout_widthUniversal="320a" app:layout_heightUniversal="25aw"/> <TextView style="@style/LayoutWrapWrap" app:layout_marginTopUniversal="5a" android:background="#666" android:textColor="@android:color/white" android:text="Width 320ah Height 25ah TextSize 16ah" app:layout_textSizeUniversal="16ah" app:layout_widthUniversal="320ah" app:layout_heightUniversal="25a"/> <TextView style="@style/LayoutWrapWrap" android:textColor="@android:color/white" app:layout_marginTopUniversal="5a" android:background="#666" android:text="Width 160aw Height 60aw TextSize 16aw" app:layout_textSizeUniversal="16a" app:layout_widthUniversal="160a" app:layout_heightUniversal="60aw"/> <TextView style="@style/LayoutWrapWrap" app:layout_marginTopUniversal="5a" android:background="#666" android:textColor="@android:color/white" android:text="Width 160ah Height 60ah TextSize 16ah" app:layout_textSizeUniversal="16ah" app:layout_widthUniversal="160ah" app:layout_heightUniversal="60a"/> </silicar.tutu.universal.UniversalLinearLayout>
Nexus 4預(yù)覽效果(768x1280),同樣建議以寬度為基準(zhǔn)
-
在代碼中使用UniversalLayout這有兩種情況券盅,一種父控件是UniversalLayout的帮哈,另一種是普通布局的,沒錯(cuò)都能用锰镀。
-
父控件是UniversalLayout
UniversalLinearLayout.LayoutParams params = (UniversalLinearLayout.LayoutParams) codeView.getLayoutParams(); UniversalLayoutInfo info = params.getUniversalLayoutInfo(); info.widthUniversal.value = 0.8f; info.widthUniversal.basemode = UniversalLayoutInfo.BaseMode.PERCENT_WIDTH; info.heightUniversal.value = 50; codeView.requestLayout();
-
普通布局但汞,這功能后來(lái)添加的,把計(jì)算方法移到UniversalLayoutInfo里互站,不影響效率私蕾,懶得動(dòng)手改UniversalLayoutHelp,哪位有空f(shuō)ork幫忙改不勝感謝
UniversalLayoutInfo info2 = new UniversalLayoutInfo(); info2.widthDesign = 640; info2.heightDesign = 1136; info2.widthUniversal = new UniversalLayoutInfo.UniversalVal(320, UniversalLayoutInfo.BaseMode.AUTO_WIDTH); info2.heightUniversal = new UniversalLayoutInfo.UniversalVal(100, UniversalLayoutInfo.BaseMode.AUTO_WIDTH); codeView2.getLayoutParams().width = info2.getUniversalSize(info2, info2.widthUniversal); codeView2.getLayoutParams().height = info2.getUniversalSize(info2, info2.heightUniversal); codeView2.requestLayout();
-
UniversalLayout 的導(dǎo)入
暫時(shí)沒心思折騰bintray胡桃,先用JitPack代替也不麻煩
- 在項(xiàng)目根目錄build.gradle添加repositories踩叭,注意是項(xiàng)目根目錄的,不是項(xiàng)目的build.gradle
repositories { //其他maven庫(kù)... maven { url "https://jitpack.io" } }
- 在項(xiàng)目的build.gradle添加dependencies
dependencies { compile 'com.github.brady9308:sic-universal-layout:1.0.1' //v7包引用沖突可以這樣去掉 //compile 'com.android.support:appcompat-v7:23.1.1' //compile ('com.github.brady9308:sic-universal-layout:1.0.1'){ // exclude module:'appcompat-v7' //} }
eclipse自己查看項(xiàng)目遷移翠胰,沒心思折騰
GitHub地址:https://github.com/brady9308/sic-universal-layout
本作品采用知識(shí)共享署名-非商業(yè)性使用-相同方式共享 4.0 國(guó)際許可協(xié)議進(jìn)行許可容贝。轉(zhuǎn)載請(qǐng)保留作者及原文鏈接