Android通用布局UniversalLayout

UniversalLayout 1.1

UniversalLayout使用過(guò)程各種不方便的改進(jìn)，更新中。

UniversalLayout 的產(chǎn)生

讀了鴻神幾篇關(guān)于Android適配的的文章，如果既要使用PercentLayout又要使用AutoLayot，感覺(jué)使用起來(lái)還是特別麻煩，同時(shí)AutoLayout的設(shè)計(jì)方式使用上不方便，依懶Activity、只能使用一種設(shè)計(jì)尺寸、預(yù)覽不方便，于是用自己的空閑時(shí)間寫(xiě)了這個(gè)庫(kù)，發(fā)現(xiàn)Bug歡迎提出。新手寫(xiě)博客文采不好請(qǐng)見(jiàn)諒，廢話(huà)不多說(shuō)開(kāi)始介紹。

UniversalLayout主要是基于Google percent庫(kù)進(jìn)行擴(kuò)展的，代碼的基礎(chǔ)有大部分內(nèi)容直接copy自鴻神的項(xiàng)目（Android 增強(qiáng)版百分比布局庫(kù) 為了適配而擴(kuò)展），自己重寫(xiě)太麻煩，修改了原庫(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í)在沒(méi)把握講明白以后有空再說(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ì)有不同的顯示尤其是魅族這類(lèi)奇葩機(jī)型

Nexus 4

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

Galaxy Nexus

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

可見(jiàn)不同比例的手機(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è)都寫(xiě)尺寸信息之不累死人也會(huì)煩死人，所以才用到style，當(dāng)然不需要每個(gè)寫(xiě)，也不需要每個(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的，另一種是普通布局的，沒(méi)錯(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í)沒(méi)心思折騰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)目遷移，沒(méi)心思折騰

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)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容