自适应UI设计经历计算，IOS与Android的设计规范
现在，我们来了解一些基本控件。控件是放置在工具箱里的，你可以在界面的左侧或者通过菜单栏的视图选项找到它。
1 自适应图片---9 patch 图片
关于设计规范的重要性就不多说，这篇文章主要通过举例对比，来帮助大家深刻认识两大移动平台（IOS&Android）的设计规范以及它们之间的差异。
（1）Label 控件 这是一个用于放置文字的控件，因为你不能在窗体上直接输入文字。
与传统的png 格式图片相比， 9.png 格式图片在图片四周有一圈一个像素点组成的边沿，该边沿用于对图片的可扩展区和内容显示区进行义。
首先，从平台的页面布局上看，两大平台布局方式上明显存在差异，如图：
（2）TextBox 文本框
这种格式的图片在android 环境下具有自适应调节大小的能力。
图1
（3）Button 按钮
（1）允许开发人员定义可扩展区域，当需要延伸图片以填充比图片本身更大区域时，可扩展区的内容被延展。
我们对两大平台分别从页眉、页脚进行详细解说，先是IOS平台，
（4）CheckBox 复选框
（2）允许开发人员定义内容显示区，用于显示文字或其他内容
图2
（5）Panel 分组容器，类似于HTML中的div
IOS的页眉，也就是我们说的导航栏，用于实现在应用不同信息层级结构间的导航，有时也可用于管理当前屏幕内容。具体效果，如图3，
（6）PictureBox 图片框
2 神奇的控件属性：layout_weight
图3
（7）WebBrowser 它可以允许用户在窗体内浏览网页，可用于制作浏览器
layout_weight 属性
在顶部放一个标题，表示当前页面的一些内容，在左侧有个返回按钮，这个按钮是依赖于当前页面是属于第一层级还是第二层级，如果属于第二层级，就需要有一个返回的按钮，以及返回上一级的标题是什么，然后右上角有个设置的入口，这样看还是抽象的话，那就直接看实际效果的，如图4，
下面附上笔者自制的一个拼图游戏及代码文件：
属性的意义： 设置额外分配给控件的空间，默认为0 ，控件保持不变 ，属性大于0，则将屏幕剩余的控件分配给控件。
图4
熟悉了IOS页眉的设计，再来看页脚的，IOS的页脚，也就是我们说的工具栏，用于放置操作当前屏幕中各对象的控件，如图5，
1 using System;
2 using System.Collections;
3 using System.Collections.Generic;
4 using System.ComponentModel;
5 using System.Data;
6 using System.Drawing;
7 using System.Linq;
8 using System.Text;
9 using System.Threading.Tasks;
10 using System.Windows.Forms;
11
12 namespace WindowsFormsApplication1
13 {
14 public partial class Form1 : Form
15 {
16 public Form1()
17 {
18 InitializeComponent();
19 ImgList = null;
20 }
21 #region 定义字段
22 List<Image> _imgList;
23 /// <summary>
24 /// 定义属性
25 /// </summary>
26 public List<Image> ImgList
27 {
28 get { return _imgList; }
29 set
30 {
31 _imgList = new List<Image>();
32 _imgList.Add(pictureBox1.BackgroundImage);
33 _imgList.Add(pictureBox2.BackgroundImage);
34 _imgList.Add(pictureBox3.BackgroundImage);
35 _imgList.Add(pictureBox4.BackgroundImage);
36 _imgList.Add(pictureBox5.BackgroundImage);
37 _imgList.Add(pictureBox6.BackgroundImage);
38 }
39 }
40 #endregion
41 #region 开始按钮
42 private void button1_Click(object sender, EventArgs e)
43 {
44 //随机6个不同的数
45 Random rd = new Random();
46 int[] x = new int[6];
47 for (int i = 0; i < 6; i )
48 {
49 x[i] = rd.Next(0, 6);
50 for (int j = 0; j < i; j )
51 {
52 if (x[i] == x[j])
53 {
54 i--;
55 break;
56 }
57 }
58 }
59 //重新设置图像
60 pictureBox1.BackgroundImage = ImgList[x[0]];
61 pictureBox2.BackgroundImage = ImgList[x[1]];
62 pictureBox3.BackgroundImage = ImgList[x[2]];
63 pictureBox4.BackgroundImage = ImgList[x[3]];
64 pictureBox5.BackgroundImage = ImgList[x[4]];
65 pictureBox6.BackgroundImage = ImgList[x[5]];
66 //倒计时开始，并允许玩家操作
67 time = 5;
68 label2.Text="5";
69 timer1.Start();
70 pictureBox1.Enabled = true;
71 pictureBox2.Enabled = true;
72 pictureBox3.Enabled = true;
73 pictureBox4.Enabled = true;
74 pictureBox5.Enabled = true;
75 pictureBox6.Enabled = true;
76 }
77 #endregion
78 #region 玩家操作
79 //定义匹配变量
80 int match = 0;
81 //存储上一张图片
82 PictureBox lpb = new PictureBox();
83 //响应用户操作
84 private void pictureBox1_Click(object sender, EventArgs e)
85 {
86 PictureBox pb = sender as PictureBox;
87 //截取Name的最后一位作为唯一标识
88 int n = int.Parse(pb.Name.Substring(10, 1));
89 //判断是否已经正确归位，如果没有正确归位
90 if (pb.BackgroundImage != ImgList[n - 1])
91 {
92 //重置参数
93 if (match == 2)
94 {
95 match = 0;
96 }
97 //交换背景图片
98 if (match == 1)
99 {
100 Image img = pb.BackgroundImage;
101 pb.BackgroundImage = lpb.BackgroundImage;
102 lpb.BackgroundImage = img;
103 //判断是否全部归位
104 if (pictureBox1.BackgroundImage == ImgList[0] && pictureBox2.BackgroundImage == ImgList[1] && pictureBox3.BackgroundImage == ImgList[2] && pictureBox4.BackgroundImage == ImgList[3] && pictureBox5.BackgroundImage == ImgList[4] && pictureBox6.BackgroundImage == ImgList[5])
105 {
106 timer1.Stop();
107 MessageBox.Show("恭喜您，顺利过关！");
108 }
109 }
110 lpb = pb;
111 match ;
112 }
113 }
114 #endregion
115 #region 计时功能
116 int time = 5;
117 private void timer1_Tick(object sender, EventArgs e)
118 {
119 if (time > 0)
120 {
121 time--;
122 label2.Text = time.ToString();
123 }
124 else
125 {
126 //停止计时，并禁止玩家操作
127 timer1.Stop();
128 pictureBox1.Enabled = false;
129 pictureBox2.Enabled = false;
130 pictureBox3.Enabled = false;
131 pictureBox4.Enabled = false;
132 pictureBox5.Enabled = false;
133 pictureBox6.Enabled = false;
134 MessageBox.Show("很遗憾，游戏失败！");
135 }
136 }
137 #endregion
138
139
140
141 }
142 }
3 上中下三块布局，中间的部分自适应
图5
View Code
通过relationlayout 中的最后一个子项，设置 android:layout_width="fill_parent"
工具栏上既可以放icon，也可以放文字，看个具体例子就知道怎么用了，如图6红色圈中形式，
android:layout_height="fill_parent"
图6
进行自动适应
至于选择icon还是文字，要根据实际情况抉择，如果功能入口很多，icon是更好的选择。如果功能没有那么多又想表达更加清晰的意思，建议使用文字。
* *
IOS的页脚除了是工具栏外，还可以是标签栏。标签栏可以让用户在不同的任务、界面和模式中进行切换，图7是常见的设计方式，
原理：利用 相对布局先设置好上下绝对位置，后 中间的控件的位置就能自动适应
图7
* *
具体的可以看下appstore的设计，
4 界面布局时，小分辨率的设备，放置不下。
图8
放置不下的部分，直接用滚动条
但是值得注意的是，底部标签不要太多，最多5个。
在了解了IOS平台页眉页脚的设计规范后，这时候来对比下Android平台在这上面的设计有何不同，首先还是从页眉上说明；
5 在设置控件的尺寸时，用dp 而不用px
Android的页眉放置的是操作栏（action bar），用于实现app内视图的切换和层级间的导航（返回上层），还会放置一些重要控件。常见的设计方式如图9，
图9
在这里不得不提一下，在图9中看到的“下拉菜单”是android4.0的设计风格，进入android5.0后，Material Design被广泛应用，这时候的操作栏我们叫应用栏了，是用来显示应用的标识、应用导航、内容搜索以及其他操作，比如这样的，
图10
从上面图中不难看出，android4.0和5.0的区别在于下拉菜单变成左侧抽屉导航，看下对比图，
图11
在这里也有个设计小技巧，上面我们列的都是一级导航，当导航条目很多时，我们就会考虑设计二级导航，而这时候如果选择把二级导航直接加在一级抽屉导航里，像这样，
图12
如果是选择这样的设计，不难看出，左侧导航条目变得非常多，也不便于用户进行切换。那么这时候，我们可以把左侧的二级导航放到页面中，实现在某一个主导航下面进行子导航的一个切换，如图：
图13
以上是IOS和android在页面布局上的不同，而在控件上，两者也存在着差异，我们可以列举几个常见的，比如滑块控件、开关控件等，具体的可到官网下载相关控件进行对比，这里不一一列举了，
图14
图15
除了页面布局和控件上的不同，两大平台在手势操作上也有些差异，我们常见的手势有点击、双击、长按等，
图16
那在操作上，各个手势所达到的效果也不同，而IOS平台跟Android平台在同一个效果上所使用的手势也会有所不同，比如删除行为，IOS使用轻扫手势，而Android则是长按删除。
图17
以上就是对两大平台间在设计规范上的简单介绍，而在具体细节上的不同，可参考下面的导图，
图18
在设计时遵从最基本的原则也是体现一个交互设计师的专业性，认识设计规范也是为了避免在工作上犯了最不应该犯的错，希望上面的总结对你有所帮助。
本文由星彩网app下载发布于计算机编程,转载请注明出处：自适应UI设计经历计算，IOS与Android的设计规范
TAG标签： 星彩网app下载
