距离上次安卓ui设计的知识共享已经很久了，其实安卓ui设计需要很多细节，我也没有时间整理发布。
今天我先和大家分享一个。
很多设计师喜欢从ios进行设计工作。 因为ios平台的单位与photoshop的单位统一，所以不需要理解单位差异带来的换算问题。
我当时在“少林寺”艰苦奋斗时从安卓用户界面设计中得到了老师，关于安卓的研究相对深入一些真是太好了。 我个人认为，能熟练进行安卓设计的用户界面设计师，ios也很难打败他； 反过来说不太好。
很多同学说：“至于安卓，我通常不加标签就把源文件、素材拿给程序员，程序员自己调试配型。”
对于这样的同学说法，“不然，整个用户界面都不做，不用上班。 ”。
在我看来
第一，制作标注、剪贴画、甚至积分9图应该是设计师的工作。 因为只有他们最了解设计稿，最了解布局，所以最终ui编程的结果是在设计器中制作ui review。
第二，你学了很多一方面的技术，怎么滴？ 你还没有成为大神。 不要一心一意地画画，接下来就拿去给标致的灰狼吧。 可以标注，可以剪切图，可以点9图，还懂一点代码，你被逼到了比其他ui设计师更高的水平。 你妈妈知道。
--------不太华丽的分割线-------
项目背景：某个APP的某个活动页面(由于保密协议的规定，修改了部分设计稿)。
设计平台：安卓
获得屏幕： 720*1280
安卓用户界面设计师的系列知识在我以前的帖子中有详细的说明，所以这里不做说明。
这些页面包括：
分析设计稿的素材资源，我们大致分为以下几个部分。
通过剪切素材，并根据Android拟合规则，仅剪切当前分辨率的设计文稿中的素材，然后将其放入相应的文件夹中，可以拟合当前分辨率的机器和分辨率低于当前分辨率的机器。
做了标注工作，在标注数值时对mdpi进行了计算：
提交给程序员的所有文件，有些同学可能已经发现了这样的结果，但最终可以在各种分辨率的机器上看到。
这是因为Android根据分辨率的倍数关系缩放图像资源。 例如，mdpi将xhdpi资源缩小50%，hdpi将xhdpi资源缩小75%，但mdpi机器的纵向分辨率不是xhdpi机器纵向分辨率的50%，hdpi机器的纵向分辨率是xhdpi机器的纵向分辨率另一方面，你对各图像的各种外缘距离被设定为最终的固定值。 纵向分辨率的倍数关系比不上屏幕的倍数关系。 于是就会得出上图所示的结果。
下图是说明。
解决方法
1----ui通过用户界面设计解决，不依赖他人：
计算纵向分辨率的倍数关系，为其他分辨率提供素材资源
其结果，对每个分辨率的资源文件夹配置素材资源(只是尺寸不同)，最终的安装文件由于图像资源过多而变得非常大被认为是移动互联网开发的禁忌。
好在这样布局上中下、上中下、上中中下……等页面并不多，最终的apk软件包也不会出现大问题。
2----向万能的程序员gg求助
很久以前，我注意到这个问题，一直在使用方法1。 之后，我开始思考能不能用程序的方法解决。 由于我对程序的了解，想法是程序读取drawable-xhdpi文件夹中的素材资源，遇到hdpi机器，或者mdpi机器，应该会将这些图像资源缩小到相应的倍数(0.38倍、0.63倍) 以后遇到这样的问题，就不用再剪那么多图了。 so easy~
代码段如下： 代码过敏者可以直接跳过。
-----------------
package com.nd.mms.ui；
导入安卓. app.activity；
导入安卓. content.context；
import android.graphics.Matrix；
导入安卓. graphics.drawable.drawable；
import Android.util.attributes et；
导入安卓. view.display；
import Android.view.viewtreeobserver；
导入Android.view.window manager；
import Android .构件. imageview；
p>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互粉。