android布局缩放比例缩放

❶ Android 平台设计规范有哪些

众所周知，安卓系统是开源的，国内又有超多的手机厂商，小米、魅族、华为、oppo、三星等，每一个品牌有属于自己的UI设计规范，但是我们主要分析UI界面尺寸规范。

1、字体

安卓系统中文采用的是思源黑体，英文字体为robot字体。

只使用偶数单位 24 pt，28 pt，36 pt等字体大小

2、mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi、dp、px到底是什么意思？

讲图标之前先来分析一下一排英文的意思：

mdpi、hdpi、 xhdpi、xxhdpi、xxxhdpi都是表示的屏幕密度大小，依次数值越大，其分辨率越高。常用的是xxhdpi和xxxhdpi。

dp是安卓系统专用的长度单位，设备独立像素的意思。不同设备有不同的显示效果,这个和设备硬件有关。多为图标使用，文字则用sp(放大像素)，主要用于字体显示best for textsize。

px是像素的意思， 不同设备显示效果相同。

安卓各屏幕密度关系如下：

垂直边距

①状态栏：24dp；②工具栏：56dp；③标题和列表项：48dp；④子标题：48dp；⑤内容区域间距离为8dp

6、切图

上周我们讲到iPhone 6与iPhone 6 Plus约是1.5的关系，而xhdpi的Android手机屏幕与xxdpi的屏幕刚好是1.5倍的关系，所以iPhone 6 Plus和xxhdip也可以共用一套切图，掌握好尺寸关系，能让工作变得简单很多。

7、界面适配

安卓多屏幕支持的基础是它能够管理应用程序的布局和位图可绘制对象的渲染以适当的方式对当前屏幕配置的能力。该系统处理的大部分工作由布局缩放以适合屏幕尺寸/密度和缩放位图可绘制在屏幕密度正确呈现您的应用程序在每个屏幕的配置，来优化用户界面设计，带来更良好的用户体验。

如何做到安卓界面适配呢？大家一定要很清楚的了解分辨率、屏幕大小、密度的关系；明白实际密度和系统密度的关系，dp、sp、px的区别；明白dp与px的转换。这里不做过多阐述，后期写一篇具体的~

安卓的界面规范就讲到这里，要明白设计界面规范的意义是确保设计的统一性与合理性，规范维护的是项目的统一，为了项目利益最大化，高效化。所以作为UI设计师的我们，如果一点设计规范不遵守，全靠自己想当然，那就别发给前端人员啦，他也看不懂。

❷ 移动开发安卓，xml中可以用百分比吗向我下面代码中的那样，可以一直报错呀

1. 在Android的界面布局中，使用XML布局文件时，不能直接使用百分比来定义控件的大小。
2. 如果你需要在动画XML中使用百分比，这是可行的。动画可以根据屏幕大小变化而缩放。
3. 如果你希望控件按照屏幕的百分比来分配空间，可以尝试使用线性布局（LinearLayout）的`weight`属性。
4. 在线性布局中，通过设置`weightSum`属性为1，然后为布局中的每个控件设置`weight`属性。这个属性值从0到1，代表控件占据布局空间的0%到100%。
5. 如果你发现上述方法不能满足你的需求，还想用百分比来分配控件，那么就只能在Java代码中动态设置控件的大小了。
6. 动态设置的步骤是：在Activity的初始化过程中，先获取屏幕的宽度，然后根据你想要的百分比计算出控件应该具有的宽度。
7. 最后，使用`LayoutParams`来修改控件的宽度。这种方法更加灵活，可以响应屏幕尺寸的变化。

❸ 【Android 动画】动画详解之补间动画（一）

之前很早就想写写Android 的动画，最近刚好有时间，大概聊一聊安卓动画。

个人习惯将动画分为：补间动画（透明度、旋转、位移、缩放）、帧动画、和属性动画，这一篇，我们先说说补间动画。
补间动画这个词出于flash，在两个关键帧（ 可以理解成动画开始和结束 ）中间需要做“补间动画”，才能实现图画的运动；插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的。
实际上，Android 的补间动画也是由我们指定动画开始、动画结束2个关键点，中间部分的动画由系统完成

在正式开始之前，我们先说下Android 系统的坐标系，屏幕左上角为坐标原点，假如屏幕为1080*1980，那么左上角为（0,0），右上角为（1080,0），左下角为（0,1980），右下角为（1080,1980）

所有动画有以下公共属性，注释比较详细，这里就不在详述了

ScaleAnimation有3种构造方法

我们先看第一种，其起始比例为0，缩放比例为1.4，即放大到1.4倍

效果如下：

第二种，pivotx,pivotY分别代表起始位置的x、y方向的坐标，我们设置为（100,100）

效果如下：

第三种，pivotXType和pivotYType有2种模式，RELATIVE_TO_SELF（相对于自身）和RELATIVE_TO_PARENT（相对于父布局），如果设置这个，pivotx,pivotY的值就应该是0-1的浮点数，这里分别对应xml中的%（自身）和%p（父布局）

TranslateAnimation有2种构造方法，和ScaleAnimation类似

效果如下：

效果如下：

RELATIVE_TO_PARENT

效果如下：

RotateAnimation有3种构造方法

顺时针720度

效果如下：

逆时针720度

效果如下：

效果如下：

再来RELATIVE_TO_PARENT

效果如下：

这是什么鬼？？？怎么跑到屏幕外面去了？
原来设置为RELATIVE_TO_PARENT时，旋转中心x方向应该为该空间离左边的边距+父布局宽度/2，y方向同理，而此时，我们布局中红色的Textview为居中状态，所以旋转中心为屏幕右下角。让我们来看个例子
修改布局如下：

效果如下：

这时，我们看到旋转中心x方向为离左边100dp处

AlphaAnimation只有1种构造方法

其中fromAlpha为动画开始的透明度；toAlpha为动画结束的透明度

效果如下：

效果如下：

AnimationSet是一个动画的集合，可以按照添加的顺序播放动画，让我们来看个例子，通过组合动画，实现旋转渐入动画

效果如下：

到这里，补间动画就介绍完了

参考资料： 自定义控件三部曲之动画篇

❹ 最流行的四种移动端布局方式，看这一篇文章就够了

众所周知，pc端呢目前处于一种三家分晋，即三种内核（webkit，blink，gecko），当然算上马上要更换内核的IE那就是四个。而我们的移动端呢，那就是万余基于webkit了，所以各位进行移动端web开发时，只考虑webkit的适配就可以了，怎么样，开不开心 ？

我们先来看看什么是视口，视口就是浏览器显示页面内容的屏幕区域。 视口可以分为布局视口、视觉视口和理想视口，他又可以分成一下四种

一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题。

iOS, Android基本都将这个视口分辨率设置为 980px，所以PC上的网页大多都能在手机上呈现，只不过元素看上去很小，一般默认可以通过手动缩放网页。

字面意思，它是用户正在看到的网站的区域。注意：是网站的区域。

我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度。

为了使网站在移动端有最理想的浏览和阅读宽度而设定

理想视口，对设备来讲，是最理想的视口尺寸

需要手动添写meta视口标签通知浏览器操作

meta视口标签的主要目的：布局视口的宽度应该与理想视口的宽度一致，简单理解就是设备有多宽，我们布局的视口就多宽

最标准的viewport设置

视口宽度和设备保持一致

视口的默认缩放比例1.0

不允许用户自行缩放

最大允许的缩放比例1.0

最小允许的缩放比例1.0

ps：注意二倍图或者三倍图问题

流式布局，就是百分比布局，也称非固定像素布局。

通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。

流式布局方式是移动web开发使用的比较常见的布局方式。

父盒子开启display：flex后，默认为不换行，所以使用flex-wrap：wrap；使其换行

使用justify-content: space-around; 使其子盒子主轴间距平均分配

使用align-content: space-around; 使其子盒子侧轴间距平均分配

方案1

①假设设计稿是750px

②假设我们把整个屏幕划分为15等份（划分标准不一可以是20份也可以是10等份）

③每一份作为html字体大小，这里就是50px

④那么在320px设备的时候，字体大小为320/15就是  21.33px

⑤用我们页面元素的大小除以不同的 html字体大小会发现他们比例还是相同的

⑥比如我们以750为标准设计稿

⑦一个100 100像素的页面元素在  750屏幕下，  就是 100/ 50  转换为rem  是  2rem 2rem  比例是1比1

⑧320屏幕下，  html字体大小为21.33  则 2rem=  42.66px  此时宽和高都是 42.66  但是宽和高的比例还是 1比1

⑨但是已经能实现不同屏幕下  页面元素盒子等比例缩放的效果

总结：

①最后的公式：页面元素的rem值 =  页面元素值（px） /  （屏幕宽度  /  划分的份数）

②屏幕宽度/划分的份数就是 htmlfont-size 的大小

③或者：页面元素的rem值 =  页面元素值（px） /  html font-size 字体大小

方案2

1.less+rem+媒体查询

2.lflexible.js+rem

响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。

原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。

父容器版心的尺寸划分

超小屏幕（手机，小于 768px）：设置宽度为 100%

小屏幕（平板，大于等于 768px）：设置宽度为 750px

中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px

大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px

但是我们也可以根据实际情况自己定义划分

直接拿Bootstrap 预先定义好的样式来使用

修改Bootstrap 原来的样式，注意权重问题

学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果

❺ 如何调整手机页面宽度如何调整手机页面宽度大小

华为手机如何调节屏幕比例？华为手机如何修改屏幕宽度？

版本:EMUI10.1.1

1.打开华为手机，用两个手指在桌面上缩放。

2.点击接下来打开的界面右下角的“桌面设置”按钮。

3.在后续界面中点击界面顶部的“桌面布局”设置项。

4.在自动弹出的下拉菜单中，选择按钮5次5。

温馨提示

不如换一些全局题材。用户可以下载他们需要的主题。华为手机一般自带主题软件，可以直接下载使用。

手机屏幕的大小有哪些分类？

手机的屏幕尺寸有以下几个规格，手机的品牌和型号不一样，手机的屏幕尺寸也是不一样的。

iPhoneX，5.8英寸，375x812像素;

iPhone8+(8+,7+,6S+,6+)，5.5英寸，414x736像素;

iPhone8(8,7,6S,6)，4.7英寸，375x667像素;

iPhoneSE（SE,5S,5C），4英寸，320x568像素;

AndroidOne，4.5英寸，320x569像素;

GooglePixel，5英寸，411x731像素;

GooglePixelXL，5.5英寸，411x731像素;

MotoX，4.7英寸，360x640像素;

MotoX二代，5.2英寸，360x640像素;

Nexus5，5英寸，360x640像素;

Nexus5X，5.2英寸，411x731像素;

Nexus6，6英寸，411x731像素;

Nexus6P，5.7英寸，411x731像素;

SamsungGalaxyS8，5.8英寸，360x740像素;

SamsungGalaxyS8+，6.2英寸，360x740像素;

SamsungGalaxyNote4，5.7英寸，480x853像素;

SamsungGalaxyNote5，5.7英寸，480x853像素;

SamsungGalaxyS5，5.1英寸，360x640像素;

SamsungGalaxyS7(S7,S6,S6Edge)，5.1英寸，360x640像素;

SamsungGalaxyS7Edge，5.5英寸，360x640像素;

SmartisanT2，4.95英寸，360x640像素;

SmartisanM1，5.15英寸，360x640像素;

SmartisanM1L，5.7英寸，480x853像素;

坚果Pro，5.5英寸，360x640像素;

OnePlus5，5.5英寸，360x640像素;

OnePlus3T，5.5英寸，360x640像素;

OppoR9s(R9s,R11)，5.5英寸，360x640像素;

OppoR9sPlus(R9sPlus,R11Plus)，6英寸，360x640像素;

OppoA57，5.2英寸，360x640像素;

OppoA59s，5.5英寸，360x640像素;

OppoA37，5英寸，360x640像素;

小米MIX2，5.99英寸，360x720像素;

小米MIX，6.4英寸，360x680像素;

小米Note3，5.5英寸，360x640像素;

小米Note2，5.7英寸，360x640像素;

小米6，5.15英寸，360x640像素;

小米5s，5.15英寸，360x640像素;

小米5sPlus，5.7英寸，360x640像素;

小米Max，6.44英寸，360x640像素;

红米Note4(4,Note4X)，5.5英寸，360x640像素;

红米4(4,4X)，5英寸，360x640像素;

VivoX9(X9,X9s)，5.5英寸，360x640像素;

VivoX9Plus(X9Plus,X9sPlus)，5.88英寸，360x640像素;

HUAWEIP10，5.1英寸，360x640像素;

HUAWEIP10Plus，5.5英寸，360x640像素。