Android適配(圖片、佈局)

Android適配


首先屏幕適配這個問題已經困擾了我很久,一直沒有找到很好的解決辦法,看了鴻洋大神的博客感覺發現了新大陸一樣,以後適配可以像web開發一樣利用百分比來控制控件的大小和排版了,谷歌給我們提供了percent-support的庫,包含了PercentRelativeLayout和PercentFrameLayout,也就是說可以在這兩個中使用百分比來處理屏幕適配問題,但是大家熟知的LinearLayout卻沒有,需要自己寫。
但是哦,鴻神對其進行了改寫並上傳到github上,從此適配只需要引入這一個庫就好了
附上大神博客
http://blog.csdn.net/lmj623565791/article/details/45460089
http://blog.csdn.net/lmj623565791/article/details/46695347
http://blog.csdn.net/lmj623565791/article/details/46767825
第一篇是基礎的適配,第二篇是percent-support庫以及自定義percentLinearLayout,第三篇則是對官方庫的改寫和改進,我覺得很有用~真的很有用,十分感謝這種無私的大神!簡直是誰用誰知道。
因爲原理很多,也有一些不明白的地方,所以總結一下,方便以後的適配,詳細的原理將慢慢的研究。

一、佈局的適配和排版
1.首先引入庫
對於Android Studio 用戶我們直接使用就好
我在使用的時候應該是出到1.1.1版本
dependencies {
	...
    compile 'com.zhy:percent-support-extends:1.1.1'
}
至於這個庫,詳細地址在這裏,大家可以到這裏去查看https://bintray.com/hongyangandroid/maven/android-screen-support-ext/view#files/com/zhy/percent-support-extends

2.當上述代碼複製後會出現提示,點擊Sync Now重新build Gradle就好


3.刷新後我們就可以使用這三個佈局了


4.有一些基本的屬性
layout_widthPercent、layout_heightPercent、 
layout_marginPercent、layout_marginLeftPercent、 
layout_marginTopPercent、layout_marginRightPercent、 
layout_marginBottomPercent、layout_marginStartPercent、layout_marginEndPercent。
layout_textSizePercent

5.首先是PercentFrameLayout(百分比框架佈局)
<com.zhy.android.percent.support.PercentFrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    >
    <com.zhy.android.percent.support.PercentFrameLayout
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ff1234"
        android:layout_gravity="center"
        app:layout_heightPercent="50%"
        app:layout_widthPercent="50%">
        <com.zhy.android.percent.support.PercentFrameLayout
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#50b9b6"
            android:layout_gravity="center"
            app:layout_heightPercent="50%w"
            app:layout_widthPercent="50%w">
            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layout_marginPercent="10%"
                android:background="#12ff5d"
                android:text="text margin 10%"
                app:layout_textSizePercent="10%"
                android:gravity="center"
                />
        </com.zhy.android.percent.support.PercentFrameLayout>
    </com.zhy.android.percent.support.PercentFrameLayout>

</com.zhy.android.percent.support.PercentFrameLayout>
他的實現效果是


這裏看到有的width或者是height是以xx%+w的格式 這個w可以換成h表示以父佈局的寬或者是高來判定,這樣我們可以利用它實現正方形和邊距的問題
當寬高設定的時候同時以父佈局的寬或者是高來給定百分比就可以來設定了

!!一般我們適配的時候會因爲文字大小的問題造成困擾,我們現在可以利用textSizePercent來設置文字的大小十分的方便

6.PercentRelativeLayout佈局
<com.zhy.android.percent.support.PercentRelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent">
    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="30%"
        app:layout_widthPercent="70%"
        android:background="#49ab8a"
        android:gravity="center"
        android:text="W 70% H 30%"/>
    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="10%"
        app:layout_widthPercent="10%"
        android:background="#efe17b"
        android:layout_toRightOf="@+id/text1"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_heightPercent="20%"
        app:layout_widthPercent="60%"
        android:background="#c55f40"
        android:layout_below="@+id/text1"
        app:layout_marginLeftPercent="10%w"
        android:gravity="center"
        android:text="W 60% H 20% M 10%"/>
</com.zhy.android.percent.support.PercentRelativeLayout>

他的實現效果


7.PercentLinearLayout和ScrollView嵌套使用
<ScrollView android:layout_height="match_parent"
    android:layout_width="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:android="http://schemas.android.com/apk/res/android">
    <com.zhy.android.percent.support.PercentLinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ff44aacc"
            android:gravity="center"
            android:text="width:60%,height:5%,ts:3%"
            android:textColor="#ffffff"
            app:layout_heightPercent="5%"
            app:layout_marginBottomPercent="5%"
            app:layout_textSizePercent="3%"
            app:layout_widthPercent="60%"/>

        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ff4400cc"
            android:gravity="center"
            android:text="width:70%,height:10%"
            android:textColor="#ffffff"
            app:layout_heightPercent="10%"
            app:layout_marginBottomPercent="5%"
            app:layout_widthPercent="70%"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ff44aacc"
            android:gravity="center"
            android:text="w:80%,h:15%,textSize:5%"
            android:textColor="#ffffff"
            app:layout_heightPercent="15%"
            app:layout_marginBottomPercent="5%"
            app:layout_textSizePercent="5%"
            app:layout_widthPercent="80%"/>
        <TextView
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:background="#ff4400cc"
            android:gravity="center"
            android:text="width:90%,height:5%"
            android:textColor="#ffffff"
            app:layout_heightPercent="20%"
            app:layout_marginBottomPercent="5%"
            app:layout_widthPercent="90%"/>

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#ff44aacc"
            android:gravity="center"
            android:text="width:100%,height:25%"
            android:textColor="#ffffff"
            app:layout_heightPercent="25%"
            app:layout_marginBottomPercent="5%"
            />

        <TextView
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:background="#ff44aacc"
            android:gravity="center"
            android:text="width:100%,height:30%"
            android:textColor="#ffffff"
            app:layout_heightPercent="30%"
            app:layout_marginBottomPercent="5%"
            />

    </com.zhy.android.percent.support.PercentLinearLayout>
</ScrollView>

這裏LinearLayout和Scrollview結合使用,那麼我們這裏的百分比就是整個屏幕的寬高了
上面佈局的大致使用基本已經算是可以進行適配了,至於具體可以看下上面鴻神的鏈接


!!!!!!!!!
但是還要說的是,我們適配的話圖片怎麼辦,圖片適配如何實現呢?圖片也可以像上面那樣控制大小,但是有一些問題是這個庫也無法解決的,所以接下來要看如何進行圖片適配。
二、圖片的適配
可能大家現在的適配都跟我差不多將圖片扔到不同的文件夾中去,然後讓他自己調用,那麼這樣你的包會變大,如果只是切一套圖的話那麼你需要調用這個文件夾中的圖片,但是這樣圖片容易失真拉伸,並且佔用的內存也會變高,那麼怎麼辦呢?
谷歌的小弟博客寫的很清楚,我也是看了他的博客和視頻才學習到這麼好的適配方法
附上鍊接
http://blog.csdn.net/lfdfhl/article/details/52735103

他的視頻鏈接
http://stay4it.com/course/28

1.爲什麼會造成這樣的事情
加入我們將一張圖片扔到xxhpi的文件夾下,而當前的手機是240dpi的那麼系統就會將這個圖片進行適配,然後顯示出來,如果沒有固定他的寬高那麼,那麼他的寬高就會擴大2倍,而內存則會擴大4倍,這是我們不能忍的事情。
2.解決辦法呢,就是首先我們不讓系統對其進行適配,然後按照分辨率的不同顯示不同的大小進行適配。
(1)創建一個新的文件夾mipmap-nodpi
(2)因爲這個方法只需要切一張圖那麼,我們就按照最大的適配分辨率,設置圖片的寬高就好,單位是px。

以這張圖爲例,在佈局中直接設置他的寬高就行。
    <ImageView
        android:id="@+id/imageView"
        android:layout_width="426px"
        android:layout_height="240px"
        android:src="@mipmap/ceshi"/>

爲了方便起見並且利用上面的庫,我們在他旁邊設置一個帶背景的TextView寬度爲60.5是經過計算在1920*1080分辨率下除去圖片寬度所剩下的大致百分比,也就是說如果換了分辨率圖片和TextView仍然不重合那麼就說明適配成功了。

這是1920*1080分辨率下的佈局
(3)代碼部分
首先我們要得到縮放的比例
先設置標準的寬度
//標準切圖得到的分辨率寬度
    private static final float BASE_SCREEN_WIDTH_FLOAT = 1080;
然後得到屏幕實際分辨率得到縮放比
displayMetrics = getResources().getDisplayMetrics();
        int widthPixels = displayMetrics.widthPixels;
        scale = (float)widthPixels / BASE_SCREEN_WIDTH_FLOAT;

然後我們進行縮放就行
 public void scaleViewSize(View view) {
        if (null != view) {
            //利用縮放比得到實際應該設置的padding也就是確定他的位置
            int paddingLeft = getScaleValue(view.getPaddingLeft());
            int paddingTop = getScaleValue(view.getPaddingTop());
            int paddingRight = getScaleValue(view.getPaddingRight());
            int paddingBottom = getScaleValue(view.getPaddingBottom());
            view.setPadding(paddingLeft, paddingTop, paddingRight, paddingBottom);

            ViewGroup.LayoutParams layoutParams = view.getLayoutParams();

            if (null != layoutParams) {

                if (layoutParams.width > 0) {
                    layoutParams.width = getScaleValue(layoutParams.width);
                }

                if (layoutParams.height > 0) {
                    layoutParams.height = getScaleValue(layoutParams.height);
                }

                if (layoutParams instanceof ViewGroup.MarginLayoutParams) {
                    ViewGroup.MarginLayoutParams marginLayoutParams = (ViewGroup.MarginLayoutParams) layoutParams;
                    int topMargin = getScaleValue(marginLayoutParams.topMargin);
                    int leftMargin = getScaleValue(marginLayoutParams.leftMargin);
                    int bottomMargin = getScaleValue(marginLayoutParams.bottomMargin);
                    int rightMargin = getScaleValue(marginLayoutParams.rightMargin);
                    marginLayoutParams.topMargin = topMargin;
                    marginLayoutParams.leftMargin = leftMargin;
                    marginLayoutParams.bottomMargin = bottomMargin;
                    marginLayoutParams.rightMargin = rightMargin;
                }
            }
            view.setLayoutParams(layoutParams);
        }
    }
上個方法調用的生成適配後數據的方法
private  int getScaleValue(float topMargin) {
    int result = (int) (scale*topMargin);
    return result;
}


這樣我們圖片適配也就完成了。感謝谷歌的小弟和鴻洋大神的博客~


附上上面的實例代碼~


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章