首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何将自定义子视图的宽度设置为没有宽度限制的父UIView的1/3?

要将自定义子视图的宽度设置为没有宽度限制的父UIView的1/3,可以使用Auto Layout来实现。

首先,确保父UIView的宽度没有被限制,可以将其约束条件设置为"宽度大于等于0"。这样父UIView的宽度就可以根据子视图的布局来自动调整。

接下来,创建自定义子视图,并将其添加到父UIView中。然后,使用Auto Layout来设置子视图的约束条件。

  1. 设置子视图的宽度约束条件为父UIView宽度的1/3:
    • 创建一个宽度约束条件,将子视图的宽度设置为父UIView宽度的1/3。
    • 将该约束条件添加到子视图上。
  • 设置子视图的左边约束条件:
    • 创建一个左边约束条件,将子视图的左边与父UIView的左边对齐。
    • 将该约束条件添加到子视图上。
  • 设置子视图的顶部和底部约束条件:
    • 创建一个顶部约束条件,将子视图的顶部与父UIView的顶部对齐。
    • 创建一个底部约束条件,将子视图的底部与父UIView的底部对齐。
    • 将这两个约束条件添加到子视图上。

这样,子视图的宽度就会自动调整为父UIView宽度的1/3,并且左边与父UIView对齐,顶部和底部与父UIView对齐。

推荐的腾讯云相关产品:腾讯云云服务器(CVM)

  • 产品介绍链接地址:https://cloud.tencent.com/product/cvm
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

【IOS开发基础系列】Autolayout自动布局专题

|-[view]-|:  视图处在父视图的左右边缘内 2. |-[view]  :   视图处在父视图的左边缘 3. |[view]   :   视图和父视图左边对齐 4....-[view]-  :  设置视图的宽度高度 5. |-30.0-[view]-30.0-|: 表示离父视图 左右间距  30 6. [view(200.0)] :表示视图宽度为200.0 7....10: [wideView(>=60@700)]  :视图的宽度为至少为60不能超过  700 11: 如果没有声明方向默认为  水平 V: 2.1.3 示例     下面用简单例子说明一下: UIView...//设置子视图的宽度和父视图的宽度相同 [self.view addConstraint: [NSLayoutConstraint constraintWithItem: v1 attribute:...--距离父视图左侧距离为0(距离为0的话也可省略)同时将v2的水平方向的宽度和v1设置成相同 [self.view addConstraints: [NSLayoutConstraint constraintsWithVisualFormat

34940

MyLayout&TangramKit 的重大升级!

在这些类中并没有重载intrinsicContentSize的实现,所以需要提供一种新的设置方法来实现这种尺寸自适应的能力。 1....可以看出来要实现父容器视图S的尺寸自适应时不是通过设置宽度和高度的尺寸依赖来实现的而是通过设置让父视图的边界依赖于某个子视图的边界来实现的。具体代码展示如下: //这里忽略了视图的创建代码。...在上面的第1节中有介绍如何将一个容器视图的尺寸设置为自适应,而一般情况下在编写UITableViewCell的布局代码时,都将所有的子视图添加到contentView这个视图中,因此要实现UITableViewCell...这里只介绍将MyLayout&TangramKit的布局视图加入到AutoLayout布局体系中去的一些方法。 1.将布局视图添加到非布局父视图中 因为布局视图也是一个视图,都是从UIView派生。...,然后将布局视图添加到其他视图中去,不需要再为布局视图设置宽度和高度约束了,也不再限制只能将布局视图添加到contentView中了,也不再需要重载特定的方法了,就相当于将一个布局视图当做UILabel

2.1K20
  • iOS下的界面布局利器-MyLayout布局框架

    视图A的左边距占用父视图宽度的20%,而右边距则占用父视图宽度的30%,高度则等于自身的宽度。 视图B的左边距是40,宽度则占用父视图的剩余宽度,高度是40。...视图C的宽度占用父视图的所有宽度,高度是40。 视图D的右边距是20,宽度是父视图宽度的50%,高度是40。 最终的效果图如下: !...布局尺寸类MyLayoutSize MyLayoutSize类是用来描述一个视图的尺寸的类。UIView中扩展出了widthSize,heightSize这两个变量来实现视图的宽度和高度尺寸的设置。...您可以用其中的equalTo方法来设置视图的宽度和高度。...如果行视图在表格布局里面是从上到下排列的则表格布局为垂直表格布局,垂直表格布局里面的子视图在行视图里面是从左到右排列的;如果行视图在表格布局里面是从左到右排列的则表格布局为水平表格布局,水平表格布局里面的子视图在行视图里面是从上到下排列的

    1.9K30

    iOS布局之AutoresizingMask和AutoLayout

    一.AutoResizing 我们在使用AutoResizing进行布局的时候,其主要思想就是设置子视图跟随父视图的frame变化而变化。具体的情况,我们可以设置左跟随,右跟随等等。...0, 100, 100)]; subView.backgroundColor = [UIColor purpleColor]; [superView addSubview:subView]; //设置子视图的宽度随着父视图变化...(0, 0,200 , 200); 以上代码中我们设置了子视图的宽度随父视图的变化而改变,其效果图如下: ?...屏幕快照 2016-09-18 下午4.53.23.png 我们可以看到,图中的子视图的宽度也随着父视图的宽度增加到了二倍。这就是AutoResizing的一个最简单的应用。...2.我们设置该属性为NO,AutoResizing并不会直接失效,只有当我们为视图设置了constraint之后,AutoResizing才会失效。

    1.9K60

    iOS界面布局的核心以及TangramKit介绍

    为了实现视图定位我们也为UIView扩展出了3个水平方位的属性:tg_left, tg_centerX,tg_right来表示左中右三个方位对象。...为了灵活处理和计算,视图的尺寸可以设置为绝对值类型,也可以设置为相对值类型,也可以设置为特殊的包裹或者填充值类型;视图的位置则可以指定视图中的任意的方位,以及设置这个方位的点在窗口坐标系或者父视图坐标系或者兄弟坐标系中的坐标值...根据排列的方向和限制的规则,流式布局分为垂直数量约束布局、垂直内容约束布局、水平数量约束布局、水平内容约束布局四种布局。流式布局实现了HTML/CSS3中的flex-box的子集的功能。...因此我们可以通过对min和max方法的使用来解决上述的问题: //A的宽度等于B的宽度,最小为20,最大为父视图宽度的一半。...目前只有在线性布局、框架布局、和非布局父视图中才支持这种类型的值的设置(具体见上面TGWeight类型值的定义和使用) //假如A视图是在一个垂直线性布局里面,垂直线性布局的宽度为50

    2.2K30

    React native 之Image 图片封装为iOS UIImageView contentMode 填充

    在使用 Image 组件的时候,受到Image 组件的困扰: 图片的宽度在指定宽度的情况下是可以控制图片的宽度的,但是 如果我们想要图片的宽度与父视图的宽度一致 我们想要类似于 iOS 中 UIView...->contentMode 的填充方式 针对第一种情况,我将图片 resizeMode 设置为 'stretch' 并且采用 absolute 然后设置 left right 这种方式,但是发现图片的宽度采用这种方式居然限制不了...,图片有多大便显示多大,可能比父组件小,也可能超出父组件(没有设置 overflow: hidden 的情况下),所以对图片的宽度等于父视图宽度无法控制(哪位朋友有直接控制的方法请留言告知一下,谢谢)。...其他的填充类型也是按照iOS中的填充类型设置 iOS中 UIView -> contentMode 绝对可以满足你的各种图片填充类型,所以此图片封装组件也可以满足你各种图片布局 以下是实现方案: 将图片放置一个...View 上面,在 View onLayout 回调中,知道此 View 的width height,然后在需要将图片的宽度设置为父视图的宽度时候,直接设置图片的宽度为 width。

    1.5K20

    深入详解iOS适配技术

    当我们点击周围四条虚线时,虚线会变成实线,代表子控件和父控件在这个方向上的间距被固定了。当我们点击子视图内部的虚线时,同样也变为实线,代表子视图的宽度或者高度被固定了。...UIView有一个autoresizingMask属性,可以通过该属性来约束父子视图之前的位置关系,并且UIView还有一个BOOL类型的autoresizesSubviews属性,默认为YES,代表父控件会跟随子控件尺寸的变化而变化...,宽度随父视图宽度的缩放而缩放。...storyBoard上的autoresizing.gif 注意:Autoresizing只能设置父子视图之间的关系,也就是说,Autoresizing只能控制子视图和父视图之间的位置/大小关系。...比如,给某个子控件A设置了左边距和右边距后,虽然没有明确指定子控件A的宽度,但是其左右边距一旦设置,那么宽度可以根据子控件A和父控件左右之间的边距自动推算出来。

    8.5K70

    iOS layout相关方法

    layoutSubviews 5.旋转Screen会触发父UIView上的layoutSubviews事件 6.改变UIView大小的时候也会触发父UIView上的layoutSubviews事件 在苹果的官方文档中强调...假设有个UILabel 添加它距离左边的距离约束为left的constraint 值为 10 现在我们想让它距左边的距离以动画形式改变为100 如果这么做 UIView.animateWithDuration...drawRect在以下情况下会被调用: 1、如果在UIView初始化时没有设置rect大小,将直接导致drawRect不被自动调用。...3、通过设置contentMode属性值为UIViewContentModeRedraw。那么将在每次设置或更改frame的时候自动调用drawRect:。...以上1,2推荐;而3,4不提倡 drawRect方法使用注意点: 1、若使用UIView绘图,只能在drawRect:方法中获取相应的contextRef并绘图。

    1.1K10

    iOS界面布局之一——使用autoresizing进行动态布局

    父视图右边间距固定,左边可变     UIViewAutoresizingFlexibleWidth        = 1 1,//视图宽度可变     UIViewAutoresizingFlexibleRightMargin...  = 1 父视图左边间距固定,右边可变     UIViewAutoresizingFlexibleTopMargin    = 1 3,//与父视图下边间距固定,上边可变     ... 1 父视图上边间距固定,下边可变 }; 下面我们通过效果来看这些属性的作用: 先创建两个view,为了区分,设置不同的背景色: - (void)viewDidLoad {     [super...UIViewAutoresizingFlexibleTopMargin将使子视图上边与父视图距离可变。UIViewAutoresizingFlexibleWidth将使子视图的宽度可变。...在view设置栏中有autoresizing这个设置,点中相应的箭头,就是刚才我们探讨的设置选项。并且我们把鼠标放在这个上面的时候,右侧会自动为我们预览效果。 ?

    70720

    浅汇-iOS UI布局

    使用了这么久,       对于父试图是  Button / UITextFeild等非UIView的直接子类,布局其子视图时,这里面的约束是不生效的。...主要的功能是: 1、实现Label高度固定,宽度自适应(超出后不显示),宽度固定,高度自适应。...2、实现了UIView内子视图的自动布局; 3、实现了UIScrollView内容高度根据内部子视图的内容高度动态设置; 4、实现了一个UITableView有多个不同Cell的时候,所有cell高度自适应...,需要使用一下方法来自动布局,并且这个时候不可以再以父试图的底为标准来设置其内部子视图,这是一种【从里到外】的布局思路,cell的自适应高度也是这种思路;平时我们的思路都是一种【从外到里】的思路,先确定外面的再使其自动布局里面的...实现了UIScrollView可滚动高度根据内部子视图的内容高度动态设置 /** 设置scrollview内容自适应,第一个参数为作为底部的子视图,第二个参数为到sc底部的间距。

    2.1K20

    Autolayout

    控件的frame不匹配所添加的约束, 比如 比如约束控件的宽度为100, 而控件现在的宽度是110 错误  ?...缺乏必要的约束, 比如 只约束了宽度和高度, 没有约束具体的位置 两个约束冲突, 比如 1个约束控件的宽度为100, 1个约束控件的宽度为110 代码实现Autolayout 代码实现Autolayout...2)对于两个不同层级view之间的约束关系,添加到他们最近的共同父view上  ? 3)对于有层次关系的两个view之间的约束关系,添加到层次较高的父view上  ?...UILabel实现包裹内容 设置宽度约束为 <= 固定值 设置位置约束 不用去设置高度约束 基于Autolayout的动画 在修改了约束之后,只要执行下面代码,就能做动画效果 [UIView animateWithDuration...(blueView.mas_width);//和蓝色view的宽度相等 }]; 制作九宫格样式的视图布局 填充一个View控件到父控件中,然后隐藏显示。

    92860

    CALayer 图层概念二、CALayer属性二、方法

    属性 设置图层的尺寸,高度和宽度 @property CGRect bounds; 设置位置 方式1: 用来设置CALayer在父层中的位置,position相当于UIView控件的center属性...@property CGPoint position; 称为 "定位点" / "锚点", 它的取值范围是0 ~ 1, 默认值为0.5....此处可以和UIView的clipToBounds来比较记忆(clipToBounds为yes会使其上的内容包括子视图不能超出边界) 控件截图裁剪的三种方法: 给layer设置圆角半径layer.cornerRadius...放射形变属性(和view的transform用法一样,也有make和非make方法) @property CATransform3D transform; (1) 平移(当没有3D旋转的时候z值没有效果...= kCAFillModeForwards; 方法二:layer的真实位置就是当前的位置 (该方法可以让layer和View层一起过去) // 为animation对象设置代理 // 这里的代理没有协议

    1.4K70

    iOS-屏幕适配实现(AutoLayout)

    ,但并不影响其真实效果,也不会报错 注意:约束有错误,不代表运行会错误,约束错误同样可以运行 约束的规则 相对于父视图的约束,添加到父视图上 对于两个同层级 view 之间的约束关系,添加到它们的父 view...如果我们通过约束给定了UILabel的width = 100,但是内容仍然少的可怜,不能包裹,可以把宽度设置为的宽高都能包裹住内容。高度的设置同理可证。...默认为当前设置方向最近的一个VIew,且没有覆盖遮挡的视图 注意:上下左右的间距和控件的宽度、高度配合使用,尽量不要冲突; 例如:375的屏幕宽度,你不能距离左边200,距离右边200,还要控件宽度100...installed添加布局 修改约束 方式一: 需要选中将要编辑的约束(上图小标1),选中后约束在视图中显示为高亮(上图小标2),右边会显示修改约束的设置(上图小标3)...变为 3:4) -Convert to Decimal:转换为十进制 -Presets:预设值(也可以不使用预设值,自己设置需要的倍数,如 0.5) -1:1 倍 -4:3:4:3 倍 -16

    44010

    iOS14开发-入门知识

    UIView常见属性 backgroudColor:背景色。 frame:相对父视图的坐标和大小。 bounds:相对自身的坐标和大小,所以 bounds 的 x 和 y 永远为0。...tag:标记(Int 类型,默认等于0),设置后,可以通过所在容器View.viewWithTag方法拿到这个视图。 title:标题。 superview:父视图。 subviews:所有子视图。...宽度或者高度其实为0。 位置不对(比如是个负数或者超大的数,已经超出屏幕)。 hidden == true。 alpha <= 0.01。 没有设置背景色、没有设置内容。...UIView常见方法 addSubview:添加视图到父视图。 removeFromSuperview:将视图从父视图中移除(需提前讲解触摸方法)。...@IBOutlet与@IBAction 引入 如何在代码中获取 Storyboard 中的自定义 UIView?

    2.9K40

    IOS开发系列——UIView专题之五:常用开发技巧篇

    5UIView开发技巧 5.1常用技巧 5.1.1使用半透明View与不透明SubView 半透明背景视图只能用此种方法设置颜色,否则subView也是半透明的。...UIColorcolorWithRed:0green:0blue:0alpha:0.3]; 5.1.2[super layoutSubviews]要发到layoutSubviews方法末尾位置 在自定义子...如果一个子视图的区域超过父视图的bound区域(父视图的clipsToBounds属性为NO,这样超过父视图bound区域的子视图内容也会显示),那么正常情况下对子视图在父视图之外区域的触摸操作不会被识别...,因为父视图的pointInside:withEvent:方法会返回NO,这样就不会继续向下遍历子视图了。...方法流程 http://blog.csdn.net/jiajiayouba/article/details/23447145 5.1.4.2使用hitTest自定义响应事件 1、hitTest Hacking

    1.2K20

    iOS从Xib中设置样式

    简单的办法还是用快捷键,就是在drag后按option,显示的约束就没有margin了。...,当然能最大限度的使用xib可自定义的属性当然是极好的,下面就说一下一些不常用的从xib中可设置的属性 这些属性的设置在右面设置菜单的第三个选项卡的User Defined Runtime Attributes...Boolean true 设置Border宽度和颜色 宽度好设置 Key Path Type Value layer.borderWidth Number 1 layer.borderUIColor...Xcode 6以上支持一种新的方法,特好用 其实就是为UIView添加扩展 或 继承 添加IBInspectable的属性 既可以图形化设置某些属性 这样在右侧的第四个选项卡中神奇的出现了自定义的设置项...) /** * 设置边框宽度 * * @param borderWidth 可视化视图传入的值 */ @dynamic borderWidth; - (void)setBorderWidth

    2.4K20

    MyLayout和XIB或SB的混合使用方法

    设置自定义扩展属性 您会发现所有设置的扩展属性都会在这里同时出现,因此您也可以在这里设置自定义的扩展属性。...这里设置为1799的原因是MyGravity_Fill的枚举值就是1799(参考MyGravity类型枚举值的定义)。通过gravity属性设置了所有子视图均分高度和以及宽度和布局视图相等。...设置完毕后我们分别按顺序添加3个高度一致的子视图如下: ? 依次添加子视图 上面的中我们可以看出,我们并不需要为子视图设置任何附加的约束,我们也没有为子视图设置扩展属性。我们只是按顺序添加上去。...布局运行结果 从上面的例子里面我们可以看出MyLayout是可以完全和XIB以及SB无缝结合的,我们在没有任何编码的情况下,通过几个简单属性的设置就实现了三个子视图的垂直高度均分以及宽度和布局视图相等以及每个子视图之间间隔...并设置了orientation属性为1也就是水平线性布局方向,同时设置了水平线性布局的四周的边界为10。下面就是运行的实际效果: ? 布局套布局的运行效果 这样是不是非常的简单。

    88640

    iOS-屏幕适配实现(Autoresizing)

    6条线,上下左右以及空间内的两条红色交叉线如下图 上下左右四条红色的线分别表示此视图距离父视图的上下左右边的约束各式多少 中间两条上下交叉的线表示,此视图的高度与宽度是否随着父视图的变化而按比例变化...父视图右边间距固定,左边可变 UIViewAutoresizingFlexibleWidth = 1 1, //视图宽度可变 UIViewAutoresizingFlexibleRightMargin...= 1 父视图左边间距固定,右边可变 UIViewAutoresizingFlexibleTopMargin = 1 3, //与父视图下边间距固定,上边可变 UIViewAutoresizingFlexibleHeight...注意:UIView的autoresizesSubviews属性为YES时(默认为YES),autoresizingMask才会生效,也就是说,当我们想要利用autoresizingMask指定某个控件和其父控件的关系时候...可以满足大部分简单的自动布局需求,可是它有一个致命的缺陷,它只能设置子视图相对于父视图的变化,却不能精确这个变化的度是多少,因此对于复杂的精准的布局需求,它就力不从心了

    27510

    iOS OC swift 自定义 popover 泡泡

    棕色区域是可以设置的 红色 底层箭头视图的边框 白色 底层箭头视图的背景颜色 蓝色 自定义内容区域,在此区域(contentView)可以添加希望展示的内容 加号按钮 模拟了 sourceView...此视图是底层视图,一般是添加到 window 上,与屏幕宽高一致 touchThrough: Bool /// 点击穿透 /// 设置为 true 点击空白地方,穿透点击 touchDismiss:...Bool /// 是否点击空白地方自动消失 /// 设置为 true 的时候,空白地方可以处理触摸事件 /// 当 touchThrough 为 true 的时候,此字段不起作用 arrowDirection...contentView: UIView /// 自定义内容请在此视图上增加 arrowView: KKPopoverArrowView 箭头视图 delegate: KKPopoverDelegate...= 5; /// 线条宽度 open var lineWidth: CGFloat = 1 /// 填充颜色 open var fillColor:

    2.7K70
    领券