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;
}


这样我们图片适配也就完成了。感谢谷歌的小弟和鸿洋大神的博客~


附上上面的实例代码~


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