安卓中的屏幕适配往往是一件令人头痛的事情,多种多样的屏幕分辨率给我们的适配工作带来了很大的麻烦。Google官方建议我们使用dp
代替px
,但是设计师给到我们的设计图中大多标注的都是px
,让我们在写xml文件的时候很是不爽,相信没有一个程序员愿意在编写xml文件上花费大量时间。回想起刚刚接触安卓时的野蛮适配,按照设计图标注的px
值除以二作为dp
值直接怼到布局文件上,考虑到当时320dpi的设备还是比较多的,测试一些主流机型还凑合可以看看。当然,对于比较复杂的布局,或者想要适配更多分辨率的机型,这种方法显然是没有任何意义的。
那么有没有办法可以做到一劳永逸的屏幕适配?直接照抄设计图的px
值,无论是控件宽高,还是margin,通通抄下来就可以了。这种方案乍看违背了Google的官方建议,但是我们想一下,为什么需要使用dp
?因为dp
在不同dpi的屏幕中可以代表不同的像素值,dp
和px
的转化公式如下:
px = dp * (dpi / 160)
在160dpi的屏幕中,1dp就是1px,而在320dpi的屏幕中,1dp是2px。显而易见,使用dp的目的是为了使得在xml中编写的固定数值,在不同dpi的屏幕中有不同的体现。这里的不同的体现可以理解为不同的像素值大小。我们的需求就可以理解为在xml中编写的数字比如50,在480800,7201280的屏幕中被转化为不同的像素值,只不过使用dp
系统自动帮我们完成了转化过程,倘若我们自己来进行转化,使用px
当然也是可以的。我们要做的是,根据设计图尺寸直接在xml中编写,计算设计图大小与屏幕大小的比例,对所有数字进行转化,这样必定是适配屏幕的。
直接上代码分析:
public static final int BASE_WIDTH=720;//设计图宽高
public static final int BASE_HEIGHT=1280;
public static float mScale=1f;//缩放比例
/**
* 计算缩放比例
*/
public static void initScaleValue(Context context){
DisplayMetrics displayMetrics=context.getResources().getDisplayMetrics();
mScale=(float) (displayMetrics.widthPixels)/BASE_WIDTH;
}
这里我们需要指定设计图的尺寸,并计算出与屏幕尺寸的比值。通常,initScaleValue()
方法可以在application
的onCreate()
方法中调用。
/**
* 对任意View进行缩放
*/
public static void initScaleView(View v) {
if (v != null) {
if (v instanceof ViewGroup) {
scaleViewGroup((ViewGroup) v);
} else {
scaleView(v);
}
}
}
initScaleView()
是对外提供的对任意View进行缩放的方法。我们也正是通过这个方法来进行适配的,包括Activity布局,Fragment布局,适配器中Item的布局,只要将View作为参数传递进去,就可以可以进行缩放了。当然,仍然要做到一劳永逸,我们不需要对每个布局文件都写一遍这个方法,如下所示:
ScaleUtils.initScale(ButterKnife.findById(this, android.R.id.content));
在BaseActivity的onCreate()
方法中这样处理就可以了。下面来具体看一下scaleViewGroup()
和scaleView()
方法。
/**
* 循环遍历ViewGroup
*/
private static void scaleViewGroup(ViewGroup viewGroup) {
for (int i = 0; i < viewGroup.getChildCount(); i++) {
View v = viewGroup.getChildAt(i);
if (v instanceof ViewGroup) {
scaleViewGroup((ViewGroup) v);
} else {
scaleView(v);
}
}
}
/**
* 对View进行处理
*/
private static void scaleView(View v) {
Object hasScaled = v.getTag(R.id.is_scale_tag);
if (hasScaled instanceof Boolean) {
if ((Boolean) hasScaled) return;
}
if (v instanceof TextView){
processScaleTextView((TextView)v);
}else {
processScaleView(v);
}
v.setTag(R.id.is_scale_tag,true);
}
可以看到,scaleViewGroup()
最终还是调用的scaleView()
,因为ViewGroup还是由一系列View组成的。我们只需要对ViewGroup的子节点循环遍历,一旦发现子节点仍然是ViewGroup,递归调用scaleViewGroup()
,直到所有ViewGroup中的子View都调用了scaleView()
方法。在scaleView()
方法中,我们首先需要判断该View是否已经缩放过,避免重复缩放。然后对于TextView
,我们需要特殊处理,不仅需要缩放控件的大小,margin等,还要对其字体大小进行适配。先来看一下对TextView
的处理。
/**
* 处理TextView
*/
private static void processScaleTextView(TextView view) {
if (view==null)return;
processScaleView(view);
processScaleTextSize(view);
}
/**
* 缩放TextView字体大小
*/
private static void processScaleTextSize(TextView view) {
if (view==null)return;
Object hasScaled=view.getTag(R.id.is_scale_font_size_tag);
if (hasScaled instanceof Boolean){
if ((Boolean)hasScaled)return;
}
float size=view.getTextSize();
size*=mScale;
view.setTextSize(TypedValue.COMPLEX_UNIT_PX,size);
}
对于Textview,首先还是要调用processScaleView()
方法对控件进行缩放,然后调用processScaleTextSize()
对字体大小进行缩放,注意也要判断是否已经缩放过。然后看一下processScaleView()
方法具体是怎么对控件进行缩放的。
private static void processScaleView(View v) {
if (v == null) return;
int left = getScalePxValue(v.getPaddingLeft());
int top = getScalePxValue(v.getPaddingTop());
int right = getScalePxValue(v.getPaddingRight());
int bottom = getScalePxValue(v.getPaddingBottom());
v.setPadding(left, top, right, bottom);
if (v instanceof TextView) {
Drawable[] drawables = ((TextView) v).getCompoundDrawables();
setCompoundDrawablesWithIntrinsicBounds((TextView) v, drawables[0], drawables[1], drawables[2], drawables[3]);
((TextView) v).setCompoundDrawablePadding(getScalePxValue(((TextView) v).getCompoundDrawablePadding()));
}
v.setLayoutParams(scaleParams(v.getLayoutParams()));
}
首先对控件的padding
进行缩放,getScalePxValue()
方法回根据mScale
对原来的数值进行改变,
public static int getScalePxValue(int value) {
if (value <= 4) {
return value;
}
return (int) Math.ceil(mScale * value);
}
如果是TextView
,还要对TextView
上下左右的四个Drawable进行缩放。
private static void setCompoundDrawablesWithIntrinsicBounds(TextView view,
Drawable left, Drawable top, Drawable right, Drawable bottom) {
if (left != null) {
scaleBoundsDrawable(left);
}
if (right != null) {
scaleBoundsDrawable(right);
}
if (top != null) {
scaleBoundsDrawable(top);
}
if (bottom != null) {
scaleBoundsDrawable(bottom);
}
view.setCompoundDrawables(left, top, right, bottom);
}
public static Drawable scaleBoundsDrawable(Drawable drawable) {
drawable.setBounds(0, 0,
getScalePxValue(drawable.getIntrinsicWidth()),
getScalePxValue(drawable.getIntrinsicHeight()));
return drawable;
}
最后,对于任意View都要进行的是scaleParams
方法,即对控件本身的宽高以及margin进行缩放。
public static ViewGroup.LayoutParams scaleParams(
ViewGroup.LayoutParams params) {
if (params == null) {
throw new RuntimeException("params not's null");
}
if (params.width > 0) {
params.width = getScalePxValue(params.width);
}
if (params.height > 0) {
params.height = getScalePxValue(params.height);
}
if (params instanceof ViewGroup.MarginLayoutParams) {
ViewGroup.MarginLayoutParams lp = (ViewGroup.MarginLayoutParams) params;
lp.topMargin = getScalePxValue(lp.topMargin);
lp.leftMargin = getScalePxValue(lp.leftMargin);
lp.bottomMargin = getScalePxValue(lp.bottomMargin);
lp.rightMargin = getScalePxValue(lp.rightMargin);
}
return params;
}
这样就一劳永逸的解决了屏幕适配的问题。当我们拿到设计图的时候,询问一下设计图的尺寸,直接照抄设计师的标注就可以了!
有任何疑问,欢迎加群讨论:261386924