Android UI设计细节问题(一)

距离上一次的安卓ui设计知识分享有很长一段时间了，其实安卓ui设计有很多细节需要注意，我也一直没有时间去整理并发布上来。

今天就先给大家分享一个。

很多设计师喜欢从ios出发进行设计工作，原因是因为ios平台的单位与photoshop的单位统一，不需要去理解单位不同而带来的换算问题。

我很庆幸当年在“少林寺”苦练的时候是从安卓ui设计出师的，所以对安卓方面的研究相对会更加深刻些，个人认为能把安卓设计做好的ui 设计师，ios也不会难倒他；反之就不太好说了。

我听到很多同学说到“对于安卓，我一般都不标注，把源文件，素材拿给程序员，程序员自己去调试适配。”

我想对这类同学说：“要不然整个ui你都别做了，甚至不用上班得了。”

在我看来

第一：标注，切图，甚至是点9图的制作都应该是设计师的工作，因为只有他们最了解设计稿，最清楚布局，最终ui编程的结果是用设计师来做ui review的。

第二：你多学一方面的技术，又怎么滴呢？你还没有成为大神，不是随便画几笔点睛之笔，剩下的就拿给马仔帮你做完吧。你会标注，会切图，会做点9图，甚至懂一点代码，你比其他ui设计师就高逼格一格层级。你妈会知道的。

－－－－－－－－－－－－－－－－－－－－不太华丽的分割线－－－－－－－－－－－－－－－－－－－－－

项目背景：某app的某个活动页面(由于保密协议的规定，我修改了设计稿的部分内容)

设计平台：Android

入手屏幕：720*1280

安卓ui设计师的系列知识在我之前的帖子里有详细的描述，在这里就不做说明了。

下面有一个页面：

分析设计稿中的素材资源，我们大概分成以下几部分：

切出素材，按照安卓适配的规则，我们只切当前分辨率设计稿中的素材，并放到相应的文件夹中，即可适配当前分辨率的机器，以及当前分辨率以下分辨率的机器：

做好标注工作，标注数值时针对mdpi计算的：

交付给程序员所有文件，也许有的同学已经发现过这样的结果了，最终在各类分辨率机器上看到的是这样的：

产生这个结果的原因是：安卓会根据分辨率相应的倍数关系缩放图片资源，比如mdpi使用的是xhdpi的资源缩小50%，hdpi使用的是xhdpi的资源缩小75%，然而mdpi机器的纵向分辨率 却不是 xhdpi机器纵向分辨率的50%，hdpi机器的纵向分辨率 却不是 xhdpi机器纵向分辨率的75%。而另外一方面，你对于各图片的各类外边距已经设定为了一个最终的固定的值。纵向分辨率的倍数关系 还  赶不上 屏幕的倍数关系。于是就出现来上图的结果。

下图为解释：

解决的办法

1－－－－ui设计解决，不靠别人：

计算纵向分辨率的倍数关系，并为其他分辨率提供素材资源

这样做的结果是，对于每个分辨率的资源文件夹都放置来素材资源(只是尺寸不一样)，可想而之，最终的安装文件会因为过多的图片资源而变得非常大，这一点是移动互联网开发的一个禁忌。

好在这样上中下，上中中下，上上中中下下……等布局的页面不会很多，也不会对最终的apk包产生太大的问题。

2－－－－求助万能的程序员gg

很久之前，我意识到这个问题，也一直在用办法1，后来我开始思考，能不能用程序的办法去解决，凭着我对程序的大概了解，思路应该是 程序去读取drawable－xhdpi文件夹中的素材资源，遇到hdpi的机器，或者mdpi的机器，就将这些图片资源缩小相应的倍数(0.38倍，0.63倍)，仅仅是一个乘法的计算，应该不会牺牲太大的性能，程序gg一定会同意的。带着这个思路，我去麻烦了程序员写了一个代码段，今后碰到这样的问题，就再也不用麻烦我切那么多图了，so easy～

代码段如下(代码过敏者可直接跳过)：

－－－－－－－－－－－－

package com.nd.mms.ui;

import android.app.Activity;

import android.content.Context;

import android.graphics.Matrix;

import android.graphics.drawable.Drawable;

import android.util.AttributeSet;

import android.view.Display;

import android.view.ViewTreeObserver;

import android.view.WindowManager;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

/**

 * 根据分辨率去缩放图片

 * 

 * @author lxl

 * 

 */

public class ScaleImageView extends ImageView implements ViewTreeObserver.OnGlobalLayoutListener {

private final Matrix baseMatrix = new Matrix();

private final Matrix drawMatrix = new Matrix();

private final Matrix suppMatrix = new Matrix();

private boolean isfirst = true;

public ScaleImageView(Context context, AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

init(context);

}

public ScaleImageView(Context context, AttributeSet attrs) {

super(context, attrs);

init(context);

}

private int screenWidth;

public ScaleImageView(Context context) {

super(context);

init(context);

}

private void init(Context context) {

WindowManager m = ((Activity) context).getWindowManager();

Display d = m.getDefaultDisplay(); // 获取屏幕宽、高用

screenWidth = d.getWidth();

}

/**

* 依据图片宽高比例，设置图像初始缩放等级和位置

*/

public void configPosition() {

isfirst = false;

super.setScaleType(ScaleType.MATRIX);

float scale = 1.0f;

if (screenWidth == 480 || screenWidth == 320 || screenWidth == 240) {// hdpi和mdpi、ldpi

scale = 0.8f;

} else {

return;

}

Drawable d = getDrawable();

if (d == null) {

return;

}

float viewWidth = getWidth();

float viewHeight = getHeight();

// background的区域

if (this.getLayoutParams() instanceof RelativeLayout.LayoutParams) {

RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) this.getLayoutParams();

viewWidth = (int) (viewWidth * scale);

viewHeight = (int) (viewHeight * scale);

params.width = (int) viewWidth;

params.height = (int) viewHeight;

this.setLayoutParams(params);

} else if (this.getLayoutParams() instanceof LinearLayout.LayoutParams) {

LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) this.getLayoutParams();

viewWidth = (int) (viewWidth * scale);

viewHeight = (int) (viewHeight * scale);

params.width = (int) viewWidth;

params.height = (int) viewHeight;

this.setLayoutParams(params);

}

// //src的区域

final int drawableWidth = d.getIntrinsicWidth();

final int drawableHeight = d.getIntrinsicHeight();

baseMatrix.reset();

// 缩放

baseMatrix.postScale(scale, scale);

// 移动居中

baseMatrix.postTranslate((viewWidth - drawableWidth * scale) / 2, (viewHeight - drawableHeight * scale) / 2);

resetMatrix();

}

/**

* Resets the Matrix back to FIT_CENTER, and then displays it.s

*/

private void resetMatrix() {

if (suppMatrix == null) {

return;

}

suppMatrix.reset();

setImageMatrix(getDisplayMatrix());

}

protected Matrix getDisplayMatrix() {

drawMatrix.set(baseMatrix);

drawMatrix.postConcat(suppMatrix);

return drawMatrix;

}

@Override

public void onGlobalLayout() {

// 调整视图位置

if (isfirst) {

configPosition();

}

}

@Override

protected void onAttachedToWindow() {

super.onAttachedToWindow();

getViewTreeObserver().addOnGlobalLayoutListener(this);

}

@Override

protected void onDetachedFromWindow() {

super.onDetachedFromWindow();

getViewTreeObserver().removeGlobalOnLayoutListener(this);

}

}

－－－－－－－－－－－

你的团队可以直接使用这段代码，你和程序员只用关注代码中的 “scale = 0.8f;”，当然这是一个最基本的值，你还可以尝试把这个 缩小倍数 调节得更大，那么产生前面问题的可能性就更小。具体的结果，你可以和程序员gg 去慢慢调试。

－－－－－－－－－－－－－－－－－－－－不太华丽的分割线－－－－－－－－－－－－－－－－－－－－－

再回过头去看看设计稿，如果用sketch，这种效果图能很容易的做出来吗？

所以，还是那句话：重要的是想法，用什么工具都是浮云。

我没有在站酷上放作品，我不是什么大神，没有什么惊人之作，我只是一个爱分享，喜欢赞扬别人的默默无闻的设计师罢了，我的作品地址可以问我要，lofter互粉。