README.md 10.3 KB
Newer Older
H
hongyangAndroid 已提交
1
# AndroidAutoLayout
张鸿洋 已提交
2
[DEPRECATED]Android屏幕适配方案,直接填写设计图上的像素尺寸即可完成适配。
H
Init.  
hongyangAndroid 已提交
3

张鸿洋 已提交
4
>目前没有精力,已停止维护,使用前务必看明白代码,明确该方案可以解决自身问题,有扩展代码能力,否则不建议使用。
H
hongyangAndroid 已提交
5

张鸿洋 已提交
6
非常感谢 : 吃土豆的人 的协作。
H
hongyangAndroid 已提交
7

张鸿洋 已提交
8

张鸿洋 已提交
9
>推荐使用[AndroidAutoSize](https://github.com/JessYanCoding/AndroidAutoSize)
张鸿洋 已提交
10 11 12 13 14

AndroidAutoSize目前作者一直在维护,私下也有一些交流,也是 AndroidAutoLayout 3年的使用者,自研了[AndroidAutoSize](https://github.com/JessYanCoding/AndroidAutoSize), 在目前本库已经没有精力维护的情况下,推荐使用;如果使用了本库,迁移成本也非常低,[迁移指南](https://github.com/JessYanCoding/AndroidAutoSize/issues/90)



H
hongyangAndroid 已提交
15 16 17 18
## 效果图

最大幅度解决适配问题,并且最大化方便开发者。

H
hongyangAndroid 已提交
19 20


H
hongyangAndroid 已提交
21 22
so,看下用法:

H
hongyangAndroid 已提交
23
<img src="autolayout_08.png"/>
H
hongyangAndroid 已提交
24 25


H
hongyangAndroid 已提交
26
<img src="autolayout_09.png"/>
H
hongyangAndroid 已提交
27 28 29

你没有看错,拿到设计稿,在布局文件里面直接填写对应的px即可,px:这里的px并非是Google不建议使用的px,在内部会进行转化处理。

30
ok,拿一些实际项目的页面,看下不同分辨率下的效果:
H
hongyangAndroid 已提交
31

32
左为:768 * 1280 ; 右为:1080 * 1920
H
hongyangAndroid 已提交
33

34
<img src="preview/preview_01.png" width="800px"/>
H
hongyangAndroid 已提交
35

36
<img src="preview/preview_02.png" width="800px"/>
H
hongyangAndroid 已提交
37

38
<img src="preview/preview_03.png" width="800px"/>
H
hongyangAndroid 已提交
39 40 41



42
上述两个机器的分辨率差距挺大了,但是完美实现了适配,最为重要的是:
H
hongyangAndroid 已提交
43 44 45 46 47 48 49 50 51 52

* 再也不用拿着设计稿去想这控件的宽高到底取多少dp
* 再也不用去为多个屏幕去写多个dimens
* 再也不用去计算百分比了(如果使用百分比控件完成适配)
* 再也不用去跟UI MM去解释什么是dp了

你所要做的就是抄抄设计稿上面的px,直接写入布局文件。

还有很多好处,比如上面的Item里面元素比较多,如果标识的比较全面,一个FrameLayout,里面的View填写各种marginLeft,marginTop就能完美实现,几乎不需要嵌套了。

53
## 引入
H
hongyangAndroid 已提交
54 55 56 57 58 59 60 61 62 63 64

* Android Studio

[autolayout](autolayout)引入

```xml
dependencies {
    compile project(':autolayout')
}
```

65 66 67 68
也可以直接

```
dependencies {
张鸿洋 已提交
69
    compile 'com.zhy:autolayout:1.4.5'
70 71 72
}
```

73 74
* Eclipse

H
hongyangAndroid 已提交
75
建议使用As,方便版本更新。实在不行,只有复制粘贴源码了。
76

77 78
## 用法

79 80
### 第一步:

H
hongyangAndroid 已提交
81 82 83
在你的项目的AndroidManifest中注明你的`设计稿`的尺寸。

```xml
84 85 86 87
<meta-data android:name="design_width" android:value="768">
</meta-data>
<meta-data android:name="design_height" android:value="1280">
</meta-data>
H
hongyangAndroid 已提交
88 89 90
    
```

91
### 第二步:
H
hongyangAndroid 已提交
92

93 94 95 96 97 98 99 100
让你的Activity继承自`AutoLayoutActivity`.


非常简单的两个步骤,你就可以开始愉快的编写布局了,详细可以参考sample。



## 其他用法
H
hongyangAndroid 已提交
101

102
如果你不希望继承`AutoLayoutActivity`,可以在编写布局文件时,将
H
hongyangAndroid 已提交
103 104 105 106

* LinearLayout -> AutoLinearLayout
* RelativeLayout -> AutoRelativeLayout
* FrameLayout -> AutoFrameLayout
H
hongyangAndroid 已提交
107

108 109
这样也可以完成适配。

H
hongyangAndroid 已提交
110 111 112 113 114
## 目前支持属性

* layout_width
* layout_height
* layout_margin(left,top,right,bottom)
H
hongyangAndroid 已提交
115
* pading(left,top,right,bottom)
H
hongyangAndroid 已提交
116
* textSize
H
hongyangAndroid 已提交
117
* maxWidth, minWidth, maxHeight, minHeight
H
hongyangAndroid 已提交
118 119


120 121
## 配置

H
hongyangAndroid 已提交
122
默认使用的高度是设备的可用高度,也就是不包括状态栏和底部的操作栏的,如果你希望拿设备的物理高度进行百分比化:
123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138

可以在Application的onCreate方法中进行设置:

```java
public class UseDeviceSizeApplication extends Application
{
    @Override
    public void onCreate()
    {
        super.onCreate();
        AutoLayoutConifg.getInstance().useDeviceSize();
    }
}

```

139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158
## 预览

大家都知道,写布局文件的时候,不能实时的去预览效果,那么体验真的是非常的不好,也在很大程度上降低开发效率,所以下面教大家如何用好,用对PreView(针对该库)。

首先,你要记得你设计稿的尺寸,比如 `768 * 1280`

然后在你的PreView面板,选择于设计图分辨率一致的设备:


<img src="autolayout_07.png" width="480px"/>

然后你就可以看到`最为精确的`预览了:

<img src="autolayout_06.png" width="480px"/>

两个注意事项:

1. 你们UI给的设计图的尺寸并非是主流的设计图,该尺寸没找到,你可以自己去新建一个设备。
2. 不要在PreView中去查看所有分辨率下的显示,是看不出来适配效果的,因为有些计算是动态的。

159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214
## 扩展

对于其他继承系统的FrameLayout、LinearLayout、RelativeLayout的控件,比如`CardView`,如果希望再其内部直接支持"px"百分比化,可以自己扩展,扩展方式为下面的代码,也可参考[issue#21](https://github.com/hongyangAndroid/AndroidAutoLayout/issues/21)

```
package com.zhy.sample.view;

import android.content.Context;
import android.support.v7.widget.CardView;
import android.util.AttributeSet;

import com.zhy.autolayout.AutoFrameLayout;
import com.zhy.autolayout.utils.AutoLayoutHelper;

/**
 * Created by zhy on 15/12/8.
 */
public class AutoCardView extends CardView
{
    private final AutoLayoutHelper mHelper = new AutoLayoutHelper(this);

    public AutoCardView(Context context)
    {
        super(context);
    }

    public AutoCardView(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    public AutoCardView(Context context, AttributeSet attrs, int defStyleAttr)
    {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public AutoFrameLayout.LayoutParams generateLayoutParams(AttributeSet attrs)
    {
        return new AutoFrameLayout.LayoutParams(getContext(), attrs);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
    {
        if (!isInEditMode())
        {
            mHelper.adjustChildren();
        }
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }


}
```

215

H
hongyangAndroid 已提交
216 217
## 注意事项

218 219
### ListView、RecyclerView类的Item的适配

H
hongyangAndroid 已提交
220 221 222 223
**sample中包含ListView、RecyclerView例子,具体查看sample**

* 对于ListView

H
hongyangAndroid 已提交
224
对于ListView这类控件的item,默认根局部写“px”进行适配是无效的,因为外层非AutoXXXLayout,而是ListView。但是,不用怕,一行代码就可以支持了:
225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249

```java
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
    ViewHolder holder = null;
    if (convertView == null)
    {
        holder = new ViewHolder();
        convertView = LayoutInflater.from(mContext).inflate(R.layout.list_item, parent, false);
        convertView.setTag(holder);
        //对于listview,注意添加这一行,即可在item上使用高度
        AutoUtils.autoSize(convertView);
    } else
    {
        holder = (ViewHolder) convertView.getTag();
    }

    return convertView;
}
```

注意` AutoUtils.autoSize(convertView);`这行代码的位置即可。demo中也有相关实例。


H
hongyangAndroid 已提交
250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271
* 对于RecyclerView

```java
public ViewHolder(View itemView)
{
      super(itemView);
      AutoUtils.autoSize(itemView);
}

//...
@Override
public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType)
{
     View convertView = LayoutInflater.from(mContext).inflate(R.layout.recyclerview_item, parent, false);
     return new ViewHolder(convertView);
}

```

一定要记得`LayoutInflater.from(mContext).inflate`使用三个参数的方法!


272
### 指定设置的值参考宽度或者高度
273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290

由于该库的特点,布局文件中宽高上的1px是不相等的,于是如果需要宽高保持一致的情况,布局中使用属性:

 `app:layout_auto_basewidth="height"`,代表height上编写的像素值参考宽度。
 
 `app:layout_auto_baseheight="width"`,代表width上编写的像素值参考高度。

如果需要指定多个值参考宽度即:

`app:layout_auto_basewidth="height|padding"`

用|隔开,类似gravity的用法,取值为:

* width,height
* margin,marginLeft,marginTop,marginRight,marginBottom
* padding,paddingLeft,paddingTop,paddingRight,paddingBottom
* textSize.

291
### TextView的高度问题
H
hongyangAndroid 已提交
292

H
add FAQ  
hongyangAndroid 已提交
293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309
设计稿一般只会标识一个字体的大小,比如你设置textSize="20px",实际上TextView所占据的高度肯定大于20px,字的上下都会有一定的间隙,所以一定要灵活去写字体的高度,比如对于text上下的margin可以选择尽可能小一点。或者选择别的约束条件去定位(比如上例,选择了marginBottom)


## 常见问题

###(1)导入后出现`org/gradle/api/publication/maven/internal/DefaultMavenFactory`

最简单的方式,通过`compile 'com.zhy:autolayout:x.x.x'`进行依赖使用,如果一定要以module引用,参考该issue[#74](https://github.com/hongyangAndroid/AndroidAutoLayout/issues/74)

###(2)RadioGroup,Toolbar等控件中的子View无法完成适配

这个其实上文已经提到过了,需要自己扩展。不过这个很多使用者贡献了他们的扩展类可以直接使用,
参考[autolayout-widget](https://github.com/hongyangAndroid/AndroidAutoLayout/tree/master/widgetsample),
如果没有发现你需要的容器类,那么你就真的需要自行扩展了,当然如果你完成了扩展,可以给我发个PR,或者让我知道,我可以加入到
`autolayout-widget`中方便他人,ps:需要用到哪个copy就好了,不要直接引用`autolayout-widget`,因为其引用了大量的库,可能很多
库你是用不到的。

H
hongyangAndroid 已提交
310 311 312 313 314 315 316 317 318 319 320
###(3)java.lang.IllegalStateException: You need to use a Theme.AppCompat theme (or descendant) with this activity.

这个问题是因为默认AutoLayoutActivity会继承自AppCompatActivity,所以默认需要设置
Theme.AppCompat的theme;

如果你使用的依旧是FragmentActivity等,且不考虑使用AppCompatActivity,
你可以选择自己编写一个`MyAutoLayoutActivity extends 目前你使用的Activity基类`,例如
`MyAutoLayoutActivity extends FragmentActivity`,然后将该库中AutoLayoutActivity中的逻辑
拷贝进去即可,以后你就继承你的`MyAutoLayoutActivity`就好了。

ps:还是建议尽快更新SDK版本使用`AppCompatActivity`.
H
hongyangAndroid 已提交
321 322


323

H
hongyangAndroid 已提交
324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340
## 其他信息

作者信息:

* [hongyangAndroid](https://github.com/hongyangAndroid)
* 吃土豆的人


灵感来自:

* [android-percent-support-lib-sample](https://github.com/JulienGenoud/android-percent-support-lib-sample)
* [android-percent-support-extend](https://github.com/hongyangAndroid/android-percent-support-extend)
* [Android 屏幕适配方案](http://blog.csdn.net/lmj623565791/article/details/45460089)




H
Init.  
hongyangAndroid 已提交
341 342 343