当我们点击周围四条虚线时,虚线会变成实线,代表子控件和父控件在这个方向上的间距被固定了。当我们点击子视图内部的虚线时,同样也变为实线,代表子视图的宽度或者高度被固定了。...width按比例调整,高度固定,右边距固定,上边距固定,下边距固定(下图的xib中预览效果与实际效果有差,实际效果是view的上边距不变)(这种约束方式相当于上下间距固定,高度固定,那么父控件高度缩放的时候就会产生冲突...比如,给某个子控件A设置了左边距和右边距后,虽然没有明确指定子控件A的宽度,但是其左右边距一旦设置,那么宽度可以根据子控件A和父控件左右之间的边距自动推算出来。...原因在于,UILabel是根据内容自动调整宽度和高度,如果没有内容,那么宽度和高度就是0,导致UILabel无法显示。...这也验证了我前面说过的,sizeClass为宽度紧凑,高度正常状态时的布局智慧显示在所有竖屏的iPhone上。当然,此处,我只是拿4.0英寸iPhone举例,其他尺寸iPhone同理可证。
375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100,肯定不行) 黄色箭头,代表约束警告,表示当前控件在xib中呈现的位置或者尺寸和程序运行后实际呈现的效果不一样,导致约束警告的原因往往是没有更新控件的约束...原因在于,UILabel是根据内容自动调整宽度和高度,如果没有内容,那么宽度和高度就是0,导致UILabel无法显示。...默认为当前设置方向最近的一个VIew,且没有覆盖遮挡的视图 注意:上下左右的间距和控件的宽度、高度配合使用,尽量不要冲突; 例如:375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100...,肯定不行 建议:给了距离左边的间距,同时给出空间宽度即可,适用于lable,textfile等控件,不考虑它到底距离右边多少;如果给了距离左右的间距,就不要给宽度了,适用于button之类的控件。...installed添加布局 修改约束 方式一: 需要选中将要编辑的约束(上图小标1),选中后约束在视图中显示为高亮(上图小标2),右边会显示修改约束的设置(上图小标3)
浮动布局图1 我们的容器视图的尺寸为500x300,当添加视图A时,因为视图A的宽度是80,宽度能够被容器视图容纳,所以我们将视图A浮动到容器视图的左上角位置。...假如这时候我们想再放入一个尺寸为200x100的视图D的时候,因为这时要添加的视图D的宽度为200,而容器视图的剩余宽度只有170了,这时候视图D将不能浮动到视图C的右边了,我们必须要找一个合适的位置来放置视图...那么根据浮动的规则视图将无法浮动到E的右边,同时也无法浮动到D的右边了,这时候只能继续往下移动,而最终的左边是浮动到容器视图的最左边,而上边的位置则是视图D的下方。最终的布局结果如下: ?...因为前面的视图C的宽度已经算出是160,他的右边距值是340(180+160), 因此最终视图D的宽度就是160 (500 - 340)*1了。其中的效果图如下: ?...视图E也是向左浮动,这里我们是要求E和最后一个加入的D必须要保持上边对齐,但是如果保持上边对齐的话就无法容纳E的宽度而将产生覆盖,因此必须要将视图E往下移动,直到移到视图A的下面才能满足宽度的填充,因此视图
浮动视图1 上面的场景中我们的容器视图的尺寸为500x300,当添加视图A时,因为视图A的宽度是80,宽度能够被容器视图容纳,所以我们将视图A浮动到容器视图的左上角位置。...假如这时候我们想再放入一个尺寸为200x100的视图D的时候,因为这时要添加的视图D的宽度为200,而容器视图的剩余宽度只有170了,这时候视图D将不能浮动到视图C的右边了,我们必须要找一个合适的位置来放置视图...那么根据浮动的规则视图将无法浮动到E的右边,同时也无法浮动到D的右边了,这时候只能继续往下移动,而最终的左边是浮动到容器视图的最左边,而上边的位置则是视图D的下方。...因为前面的视图C的宽度已经算出是160,他的右边距值是340(180+160), 因此最终视图D的宽度就是160 (500 - 340) *1了。...视图E也是向左浮动,这里我们是要求E和最后一个加入的D必须要保持上边对齐,但是如果保持上边对齐的话就无法容纳E的宽度而将产生覆盖,因此必须要将视图E往下移动,直到移到视图A的下面才能满足宽度的填充,因此视图
一个组件的高度和宽度决定了它在屏幕上的尺寸,也就是大小。 像素无关 在React Native中尺寸是没有单位的,它代表了设备独立像素。...View的长和宽被解释成:100dp 100dp单位是dp,字体被解释成16sp 单位是sp,运行在iOS上时尺寸单位被解释称了pt,这些单位确保了布局在任何不同dpi的手机屏幕上显示不会发生改变; 和而不同...视图边框 borderBottomWidth number 底部边框宽度 borderLeftWidth number 左边框宽度 borderRightWidth number 右边框宽度 borderTopWidth...该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。 right number 属性规定元素的右边缘。...该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移 top number 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
子视图A的左边距占用父视图宽度的20%,而右边距则占用父视图宽度的30%,高度则等于自身的宽度。 子视图B的左边距是40,宽度则占用父视图的剩余宽度,高度是40。...子视图C的宽度占用父视图的所有宽度,高度是40。 子视图D的右边距是20,宽度是父视图宽度的50%,高度是40。...当子视图的尺寸无法容纳到布局视图的剩余空间时,则会自动寻找一个能够容纳自身尺寸的最佳位置进行浮动停靠。浮动布局里面的子视图并不是有规则的多行多列的排列。...(40%) //B的左边距是父视图宽度的40% B.tg_top.equal(10%) //B的顶部间距时父视图的剩余高度的10% 下面的列表中列出了在各种布局下视图的尺寸和位置的TGWeight类型值所代表的意义...A.tg_left.equal(20%) //A视图的左边距占用父视图宽度的20%也就是10 A.tg_right.equal(30%) //A视图的右边距占用父视图宽度的30%也就是15
让我们拭目以待接下来的事情(尝试了很多应用,但是,我只选择了少数能够进行立即测试的)。 ? **Action图标太拥挤太大,无视图标高** ? **视图标高太大** ?...**无水波反馈,内边距14dp而不是16dp,视图标高太大** ? **中心扩散的水波反馈,不恰当的标高,距屏幕右边距19dp,下边距22dp** ? **完美** ?...**无水波反馈,无视图标高,由按下效果组成,距屏幕右边距和下边距24dp** ? **无视图标高** ? **无视图标高** ?...**无水波反馈,无视图标高,距屏幕右边距18dp,下边距22dp** ? **不恰当的视图标高,图标略微有点大** 正确的FAB 所以,这个独具特色的按钮,在材料设计中的规范是怎样的呢?...The Right FAB 适当的水波反馈(可以在按钮的任意地方产生) 静止标高6dp,按下后的标高12dp(或者translationZ = 6dp) Action图标需要合适的宽度(一般2dp的画笔宽度
,让Activity类实现了OnClickListener事件监听接口,从而可以在该Activity类中直接定义事件处理器方法:onClick(view v),当为某个组件添加该事件监听器对象时,直接使用...android:scaleType="fitend" 按比例缩放图片到视图的最小边,显示在视图的下部分位置 //android:scaleType="fitstart" 把图片按比例扩大/缩小到视图的最小边...,显示在视图的上部分位置 //android:scaleType="matrix" 用矩阵来绘制 //图片来源,需要将图片复制放到res/drawable文件夹里面,引用的时候不需要写图片的后缀 android...android:scaleType="fitend" 按比例缩放图片到视图的最小边,显示在视图的下部分位置 //android:scaleType="fitstart" 把图片按比例扩大/缩小到视图的最小边...,显示在视图的上部分位置 //android:scaleType="matrix" 用矩阵来绘制 //图片来源,需要将图片复制放到res/drawable文件夹里面,引用的时候不需要写图片的后缀 android
+ padding + border (Width为内容宽度) 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 内边距产生的问题 ?...问题: 会撑大原来的盒子 解决: 通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小 ?...课堂一练 一个盒子宽度为100, padding为 10, 边框为5像素,问这个盒子实际的宽度的是() [x] (A) 130 [ ] (B) 135 [ ] (C) 125 [ ] (D) 115 关于根据下列代码计算...块级盒子水平居中 可以让一个块级盒子实现水平居中必须: 盒子必须指定了宽度(width) 然后就给左右的外边距都设置为auto, 实际工作中常用这种方式进行网页布局,示例代码如下: .header{...外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 (1).
就会无法获得足够的宽度。...而且同层级的试图 无法达到重合布局,两个试图重合的话只有是 父/子视图的关系。...就这样随便加一个约束就如此的繁琐,更何况一个view最起码有上边距,左边距和宽高,也就是所谓的x、y、width、height四个基本属性。...主要的功能是: 1、实现Label高度固定,宽度自适应(超出后不显示),宽度固定,高度自适应。...; 实现Label高度固定,宽度自适应(超出后不显示),宽度固定,高度自适应。
盒子(Box) 属性 属性 描述 CSS overflow-x 如果内容溢出了元素内容区域,是否对内容的左/右边缘进行裁剪。...指定了正确的图像分辨率 3 marks 将crop and/or cross标志添加到文档 3 string-set 3 8....2 overflow 规定当内容溢出元素框时发生的事情 2 position 规定元素的定位类型 2 right 设置定位元素右外边距边界与其包含块右边界之间的偏移 2 top 设置定位元素的上外边距边界与其包含块上边界之间的偏移...3D空间中的指定如何嵌套元素 3 perspective 指定3D元素是如何查看透视图 3 perspective-origin 指定3D元素底部位置 3 backface-visibility...3 nav-left 指定用户按向左键时向左导航的位置 3 nav-right 指定用户按向右键时向左导航的位置 3 nav-up 指定用户按向上键时向上导航的位置a 3 outline-offset
设置左边框的颜色 border-left-style 设置左边框的样式 border-left-width 设置左边框的宽度 border-right- 设置右边框 border-right-color...设置右边框的颜色 border-right-style 设置右边框的样式 border-right-width 设置右边框的宽度 border-style 设置四条边框的样式 solid 样式为实线...规定文本的垂直对齐方式 text-decoration 规定添加到文本的装饰效果 text-indent 规定文本首行的缩进 tex-transform 控制文本的大小写 unicode-bidi 设置文本方向...规定元素的定位类型 bottom 设置定位元素下外边距边界与其包含块下边界之间的偏移 right 设置定位元素右外边距边界与其包含块右边界之间的偏移 left 设置定位元素左外边距边界与其包含块左边界之间的偏移...top 设置定位元素上外边距边界与其包含块上边界之间的偏移 overflow 规定当内容溢出元素框时发生的事情 cursor 规定要显示的光标的类型 float 规定框是否应该浮动 display 规定元素应该生成的框的类型
+ padding + border (Width为内容宽度) 盒子的实际的大小 = 内容的宽度和高度 + 内边距 + 边框 4.5 内边距产生的问题 问题 ?...会撑大原来的盒子 解决: 通过给设置了宽高的盒子,减去相应的内边距的值,维持盒子原有的大小 ? ?...5.7 外边距合并 使用margin定义块元素的垂直外边距时,可能会出现外边距的合并。 (1)....相邻块元素垂直外边距的合并 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom 下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom...去掉列表默认的样式 无序和有序列表前面默认的列表样式,在不同浏览器显示效果不一样,而且也比较难看,所以,我们一般上来就直接去掉这些列表样式就行了。
框模型(Box Model) ,框模型定义了元素框处理元素内容尺寸、内边距、边框和外边距的一种方式 ,元素一旦增加框模型对应属性的属性,那么实际的占地区域会发生改变元素的实际宽度=左右外边距 + 左右边框...,如果项目不设置高度或高度为 auto 时,那么项目将沾满整个容器的高度 ⑥. align-content 定义了多跟轴线的对齐方式,如果项目只有一根轴线,该属性无效 A. flex-start 交叉轴起点对齐...弹性布局的潜在问题 ①. input与另一个元素作为子元素弹性布局时,另一元素的宽度如果是按份等分,那么input的宽度将不准确,解决方案是将另一元素的宽度设为固定宽度,如百度移动端 ②....父元素的高度如果参照上级元素设为100%,那么在弹性布局时,子元素也参照父元素设为100%,子元素将无法显示,解决方案时将子元素设为固定高度 63....位移 改变元素在页面中的位置 语法:transform:value A. translate(x) 改变元素在 x 轴的位置 x 取值为正向右移动 x 取值为负向左移动 B. translate(x,y
:insetLeft 左边距 android:insetRight 右边距 android:insetTop 顶部边距 android:insetBottom 底部边距 android:inset 设置统一边距...当需要在一个View中显示不同图片的时候,比如手机剩余电量不同时显示的图片不同,level-list就可以派上用场了。...定义矢量图形的视图(viewport)空间的宽度,viewport是一个虚拟的canvas,这不是drawable的宽度,是指这个坐标系横向最大的数值,即将drawable横向分成多少份。...它的属性: android:name android:rotation 旋转 android:pivotX 旋转和缩放时的中心点的X轴坐标。取值基于viewport视图的坐标系,不能使用百分比。...android:pivotY 旋转和缩放时的中心点的Y轴坐标。取值基于viewport视图的坐标系,不能使用百分比。 android:scaleX 在X轴上的缩放比例,最先应用到图形上。
内联块状元素(inline-block elements):内联块状元素结合了块级元素和内联元素的特性,可以设置宽度、高度、内外边距等属性,同时以行的形式显示在页面上。...温馨提示:在 CSS3 中描述了 display 的双值属性规范,但浏览器尚未很好地支持这一点,预组合 方法允许单关键字产生相同的结果。...> 指定两个值时,第一个值会应用于上边和下边的外边距,第二个值应用于左边和右边。 > 指定三个值时,第一个值应用于上边,第二个值应用于右边和左边,第三个则应用于下边的外边距。...> 指定四个值时,依次(顺时针方向)作为上边,右边,下边,和左边的外边距。... border-边框 描述: 边框是在边距和填充框之间绘制的,如果你正在使用标准的盒模型,边框的大小将添加到框的宽度和高度,如果你使用的是替代盒模型,那么边框的大小会使内容框更小,因为它会占用一些可用的宽度和高度
图13-2显示了屏幕 上的第一个外星人。 第一个外星人正确地现身后,下面来编写绘制一群外星人的代码。...由于有两个边距,因此可用于放置外星人的水平空间为屏幕宽度减去外星人宽度的两倍: available_space_x = ai_settings.screen_width – (2 * alien_width...因此,显示一个外星人所需的水 平空间为外星人宽度的两倍:一个宽度用于放置外星人,另一个宽度为外星人右边的空白区域。...注意 令人欣慰的是,在程序中执行计算时,一开始你无需确定公式是正确的,而可以尝试直 接运行程序,看看结果是否符合预期。即便是在最糟糕的情况下,也只是屏幕上显示的 外星人太多或太少。...接下来,我们将外星人宽度乘以2,得到每个外星人占据的空间(其中包 括其右边的空白区域),再据此计算当前外星人在当前行的位置。最后,我们将每个新创建的外 星人都添加到编组aliens中。
4 MVC简单介绍和类前缀 模型 : 数据 视图 : 负责显示 控制器 : 处理逻辑,如跳转界面 类前缀苹果推荐使用三个或三个以上字母,防止重名 5 应用管理-两种加载xib的方式 从 NSBundle...MVC中V负责显示,C只需要拿到这个视图,至于这个视图是怎么来的,C不需要关心. 7 应用管理-九宫格布局 // 定义格子的宽和高 NSInteger appW = 100;...numberOfCol = 3; // 定义左边距、右边距、顶部间距 NSInteger marginOfLeft = 10; NSInteger marginOfRight...= 10; NSInteger marginOfTop = 30; // 格子之间的间距 视图总宽度-左边距-右边距-(格子宽*一行有几个) / (一行有几个 减 1)...- 根据view提供的方法添加到视图上(c不关心view具体是如何创建的),并且,把解析的模型数据复制给view.h里面用来接收模型类型的属性
ViewGroup类是布局(layout)和视图容器(View container)的基类,此类也定义了ViewGroup.LayoutParams类,它作为布局参数的基类,此类告诉父视图其中的子视图想如何显示...center:居中显示,这里并不是表示显示在LinearLayout的中心,当LinearLayout线性方向为垂直方向时,center表示水平居中,但是并不能垂直居中,此时等同于 center_horizontal...android:layout_weight: 权重,用来分配当前控件在剩余空间的大小,如果你不设置,所有的视图都有一个layout_weight值,默认为零,意思是需要显示多大的视图就占据多大的屏幕空间...例外的情况,在LineayLayout布局中使用这个属性时需要注意: 当水平方向布局且子控件的宽度为fill_parent或match_parent时,值越小占据宽度越大,垂直方向也一样。...RelativeLayout 相对布局:是一个ViewGroup以相对位置显示它的子视图(view)元素,一个视图可以指定相对于它的兄弟视图的位置(例如在给定视图的左边或者下面)或相对于 RelativeLayout