横向等间隙的排列一组view

本文介绍了一种使用Objective-C实现的布局方法,该方法能够将一组视图以等间距的方式进行水平排列,并通过添加填充块来确保间距一致。文章提供了具体的代码实现,包括如何创建并布置这些视图及填充块。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1.横向等间隙的排列一组view

//横向等间隙的排列一组view
- (void) distributeSpacingHorizontallyWith:(NSArray*)views
{
    NSMutableArray *spaces = [NSMutableArray arrayWithCapacity:views.count+1];
    
    for ( int i = 0 ; i < views.count+1 ; ++i )
    {
        UIView *v = [UIView new];
        [spaces addObject:v];
        [self addSubview:v];
        
        [v mas_makeConstraints:^(MASConstraintMaker *make) {
            make.width.equalTo(v.mas_height);
        }];
    }
    
    UIView *v0 = spaces[0];
    
    [v0 mas_makeConstraints:^(MASConstraintMaker *make) {
        make.left.equalTo(self.mas_left);
        make.centerY.equalTo(((UIView*)views[0]).mas_centerY);
    }];
    
    UIView *lastSpace = v0;
    for ( int i = 0 ; i < views.count; ++i )
    {
        UIView *obj = views[i];
        UIView *space = spaces[i+1];
        
        [obj mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(lastSpace.mas_right);
        }];
        
        [space mas_makeConstraints:^(MASConstraintMaker *make) {
            make.left.equalTo(obj.mas_right);
            make.centerY.equalTo(obj.mas_centerY);
            if (i != views.count-1 ) {
                make.width.equalTo(@(marginL*2));//间隙
            } else {
                make.width.equalTo(v0);
            }
        }];
        lastSpace = space;
    }
    //最后一个填充块
    [lastSpace mas_makeConstraints:^(MASConstraintMaker *make) {
        make.right.equalTo(self.mas_right).with.offset(20);
    }];
}

 

转载于:https://my.oschina.net/u/2365397/blog/1613107

<template> <view> <view class="container"> <image class="bg-img" src="/static/back.jpg"></image> <view class="content"></view> </view> <view class="main-box"> <view class="horizontal-group"> <view class="son-box"> <image src="/static/b2.jpg" mode="aspectFill"></image> </view> <view class="info-panel"> <view class="result-title">检测结果</view> <view class="result-item"> <view class="label">目标数目:</view> <view class="value">4</view> </view> <view class="result-title" >目标选择</view> <view class="result-item"> <view class="label">类型:</view> <view class="value"></view> </view> <view class="result-item"> <view class="label">置信度:</view> <view class="value">93.1%</view> </view> <view class="confidence" :style="{color:getConfidenceColor(data,confidence)}"> </view> </view> </view> <view class="bottom-box"> <view class="dress-title">地址信息</view> <!--地址信息表格--> <uni-table border stripe emptyText="暂无更多数据" > <!-- 表头行 --> <uni-tr> <uni-th align="center">序号</uni-th> <uni-th align="center">时间</uni-th> <uni-th align="center">地址</uni-th> <uni-th align="center">详细</uni-th> </uni-tr> <uni-tr> <uni-td>1</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>内蒙古工业大学金川校区</uni-td> </uni-tr> <uni-tr> <uni-td>2</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>内蒙古工业大学</uni-td> </uni-tr> <uni-tr> <uni-td>3</uni-td> <uni-td>2025-3-23</uni-td> <uni-td>内蒙古呼和浩特市</uni-td> <uni-td>呼和浩特站</uni-td> </uni-tr> </uni-table> </view> </view> </view> </template> <script> export default { data() { return { } }, methods: { getConfidenceColor(val){ if(val>90)return'#52c41a'; if(v
03-24
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值