Android通用布局UniversalLayout

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

Nexus 4預(yù)覽效果(768x1280)

Galaxy Nexus

Galaxy Nexus 預(yù)覽效果(720x1280)

可見不同比例的手機(jī)顯示的效果不同

UniversalLayout 的使用之AutoLayout

這才是重點(diǎn)用法跟AutoLayout不同绷耍,使用簡(jiǎn)單方便多了。

  1. 定義一個(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>
    
  2. 在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>
    
    AutoLayout

    Nexus 4預(yù)覽效果(768x1280),同樣建議以寬度為基準(zhǔn)

  3. 在代碼中使用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代替也不麻煩

  1. 在項(xiàng)目根目錄build.gradle添加repositories踩叭,注意是項(xiàng)目根目錄的,不是項(xiàng)目的build.gradle
    repositories {
        //其他maven庫(kù)...
        maven { url "https://jitpack.io" }
    }
    
    
  2. 在項(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)保留作者及原文鏈接

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市之景,隨后出現(xiàn)的幾起案子斤富,更是在濱河造成了極大的恐慌,老刑警劉巖锻狗,帶你破解...
    沈念sama閱讀 211,290評(píng)論 6 491
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件满力,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡轻纪,警方通過(guò)查閱死者的電腦和手機(jī)油额,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,107評(píng)論 2 385
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)刻帚,“玉大人潦嘶,你說(shuō)我怎么就攤上這事〕缰冢” “怎么了掂僵?”我有些...
    開封第一講書人閱讀 156,872評(píng)論 0 347
  • 文/不壞的土叔 我叫張陵航厚,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我锰蓬,道長(zhǎng)阶淘,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,415評(píng)論 1 283
  • 正文 為了忘掉前任互妓,我火速辦了婚禮溪窒,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘冯勉。我一直安慰自己澈蚌,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,453評(píng)論 6 385
  • 文/花漫 我一把揭開白布灼狰。 她就那樣靜靜地躺著宛瞄,像睡著了一般。 火紅的嫁衣襯著肌膚如雪交胚。 梳的紋絲不亂的頭發(fā)上份汗,一...
    開封第一講書人閱讀 49,784評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音蝴簇,去河邊找鬼杯活。 笑死,一個(gè)胖子當(dāng)著我的面吹牛熬词,可吹牛的內(nèi)容都是我干的旁钧。 我是一名探鬼主播,決...
    沈念sama閱讀 38,927評(píng)論 3 406
  • 文/蒼蘭香墨 我猛地睜開眼互拾,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼歪今!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起颜矿,我...
    開封第一講書人閱讀 37,691評(píng)論 0 266
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤寄猩,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后骑疆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體田篇,經(jīng)...
    沈念sama閱讀 44,137評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,472評(píng)論 2 326
  • 正文 我和宋清朗相戀三年封断,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了斯辰。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,622評(píng)論 1 340
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡坡疼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出衣陶,到底是詐尸還是另有隱情柄瑰,我是刑警寧澤闸氮,帶...
    沈念sama閱讀 34,289評(píng)論 4 329
  • 正文 年R本政府宣布,位于F島的核電站教沾,受9級(jí)特大地震影響蒲跨,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜授翻,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,887評(píng)論 3 312
  • 文/蒙蒙 一或悲、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧堪唐,春花似錦巡语、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,741評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至合陵,卻和暖如春枢赔,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背拥知。 一陣腳步聲響...
    開封第一講書人閱讀 31,977評(píng)論 1 265
  • 我被黑心中介騙來(lái)泰國(guó)打工踏拜, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人低剔。 一個(gè)月前我還...
    沈念sama閱讀 46,316評(píng)論 2 360
  • 正文 我出身青樓执隧,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親户侥。 傳聞我的和親對(duì)象是個(gè)殘疾皇子镀琉,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,490評(píng)論 2 348

推薦閱讀更多精彩內(nèi)容