iOS--九宫格布局

[self rankWithTotalColumns:2 andWithAppW:180 andWithAppH:170];

//九宫格布局
- (void)rankWithTotalColumns:(int)totalColumns andWithAppW:(int)appW andWithAppH:(int)appH{
    //总列数
    int _totalColumns = totalColumns;

    //view尺寸
    CGFloat _appW = appW;
    CGFloat _appH = appH;

    //横向间隙 (控制器view的宽度 - 列数*应用宽度)/(列数 + 1)
    CGFloat margin = (self.view.frame.size.width - (_totalColumns * 180)) / (_totalColumns + 1);

    NSLog(@"%lu",(unsigned long)self.TitleList.count);

    for (int index = 0; index < self.TitleList.count; index++) {
        //创建一个小框框//
        UIView *appView = [[UIView alloc] init];
        appView.backgroundColor = [UIColor whiteColor];
        appView.layer.borderColor = [[UIColor colorWithRed:242/255.0 green:242/255.0 blue:242/255.0 alpha:1] CGColor];
        appView.layer.borderWidth = 1;

        DataOldBody *item =[self.TitleList objectAtIndex:index];

        // 添加图片
        UIButton *iconView = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, 180, 120)];
        UIImage *normal = [UIImage imageNamed:item.CharPicName];
        [iconView setBackgroundImage:normal forState:UIControlStateNormal];

        //添加点击事件
        [iconView addTarget:self action:@selector(handTap:) forControlEvents:UIControlEventTouchUpInside];
        [iconView setTag:item.CharId];
        [appView addSubview:iconView];

        //添加简介信息
        UILabel *label = [[UILabel alloc] init];
        label.text = item.CharBodyText;
        label.frame = CGRectMake(0, 123, 180, 45);
        label.font = [UIFont fontWithName:@"Kailasa" size:13];
        label.textAlignment = NSTextAlignmentCenter;
        label.numberOfLines = 2;
        [appView addSubview:label];

        if (moonAndSuns) {
            label.backgroundColor = [UIColor colorWithRed:54/255.0 green:54/255.0 blue:54/255.0 alpha:1];
            label.textColor = [UIColor whiteColor];

        }else{
            label.backgroundColor = [UIColor whiteColor];
            label.textColor = [UIColor blackColor];
        }
        //创建结束//

        //计算框框的位置...行号列号从0开始
        //行号
        int row = index / totalColumns; //行号为框框的序号对列数取商
        //列号
        int col = index % totalColumns; //列号为框框的序号对列数取余

        CGFloat appX = margin + col * (appW + margin); // 每个框框靠左边的宽度为 (平均间隔+框框自己的宽度)
        CGFloat appY = 20 + row * (appH + margin); // 每个框框靠上面的高度为 平均间隔+框框自己的高度

        appView.frame = CGRectMake(appX, appY, _appW, _appH);

        [self.scrollView addSubview:appView];
    }
}

-(void)handTap:(id)sender{
    NSInteger i = [sender tag];
    NSLog(@"%ld",(long)i);
    OldFirstBodyViewController *OldFirstBody = [self.storyboard instantiateViewControllerWithIdentifier:@"OldFirstBody"];
    OldFirstBody.index = i;
    [self.navigationController pushViewController:OldFirstBody animated:YES];

}
时间: 2024-08-25 23:07:48

iOS--九宫格布局的相关文章

iOS九宫格布局

for (int i=0; i<[self.imagearray count]; i++) { UIButton *button = [UIButton buttonWithType: UIButtonTypeRoundedRect]; button.frame = CGRectMake(i%3*(SCREEN_WIDTH/3-1), i/3*(SCREEN_WIDTH/3-1)+self.view2.frame.origin.y+self.view2.frame.size.height+5,S

iOS开发——完整项目实战OC篇&amp;项目总结之九宫格布局双语实现

项目总结之九宫格布局双语实现 九宫格布局创建子控件 Objective-C版的实现 1 2 // 按钮 3 // 数据 4 NSArray *images = @[@"publish-video", @"publish-picture", @"publish-text", @"publish-audio", @"publish-review", @"publish-offline"];

IOS 开发学习笔记-基础 UI(10)九宫格布局,块动画,字典转模型,Xib使用

大概如下图示:九个应用图标的样子 功能分析 (1)以九宫格的形式展示应用信息 (2)点击下载按钮后,做出相应的操作 步骤分析 (1)加载应用信息 (2)根据应用的个数创建对应的view (3)监听下载按钮点击 思路整理 要在支持文件夹里,放入 plist 文件,且拖拽素材到 supporting files,注意勾选的项目的区别: 大多数情况,往项目中拖拽素材时,通常选择 Destination, Folders:选择第一项:创建组,这样 xcode 导航显式的是黄色文件夹,要知道,Xcode中

九宫格布局

////  九宫格布局.h//  IOS笔记 -(void)createUI{    NSArray *titles = @[@"我的设置",@"我的关注",@"我的账户",@"我的收藏",@"我的下载",@"我的评论",@"我的帮助",@"我的应用"];        NSArray *images = @[@"setting"

iOS - FlexBox 布局之 YogaKit

为什么要了解 FlexBox? 最近时不时的听到关于 FlexBox 的声音,除了在 Weex 以及 React Native 两个著名的跨平台项目里有用到 FlexBox 外,AsyncDisplayKit 也同样引入了 FlexBox . 先说说 iOS 本身提供给我们 2 种布局方式: Frame,直接设置横纵坐标,并指定宽高. Auto Layout,通过设置相对位置的约束进行布局. Frame 没什么太多可说的了,直接制定坐标和大小,设置绝对值. Auto Layout 本身用意是好的

纯代码方式实现九宫格布局

功能分析: 1> 以九宫格的形式展示应用信息 2> 点击下载按钮后, 做出相应的操作 分析: 1> 找出九宫格布局的规律, 设置每个控件的x和y - y值: 用行号决定; 取整运算(控件索引/九宫格布局的列数) - x值: 用列号决定; 取模运算(控件索引%九宫格布局的列数) 2> 每个控件中包含若干子控件, 考虑用view进行包装, 便于计算 3> 抽取九宫格布局中的重要数据, 便于布局的修改 代码实现: 1 #import "ViewController.h&q

安卓开发_九宫格布局

学习内容来自 android布局基础及范例:人人android九宫格布局 , 类似的九宫格 上面是图片,下面是文字 这里用的是“GridView”表格布局,下面我来给大家讲一下: 首先,请大家理解一下“迭代显示”这个概念,这个好比布局嵌套,我们在一个大布局里面重复的放入一些布局相同的小布局, 那些重复的部分是由图片和文字组成的小控件,图片在上方,文字在下方,之后我们只需要把这些小控件迭代进入主容器里即可. 首先看看主容器的布局 1 <?xml version="1.0" enco

常用的jQuery九宫格布局图片展示特效代码

jquery九宫格布局图片鼠标经过遮罩显示文字效果 jQuery图片九宫格布局鼠标悬停显示文字效果代码 jquery九宫格图片制作鼠标悬停图片滑动展示特效 jquery仿qq图片九宫格布局点击按钮图片换一换效果代码 jQuery响应式图片九宫格布局点击图片查看大图效果代码 jquery hover事件鼠标悬停九宫格图片高亮显示代码 jQuery百度新闻文字列表九宫格布局鼠标悬停文字滑动效果代码 jquery hover九宫格图片鼠标悬停上下滑动图片切换显示代码 jquery win8风格九宫格布

android中九宫格布局与gridview

纵观现在的应用程序,九宫格是非常常见的一种布局方式.很多优秀的手机应用程序都采用了这一布局.下面就android中九宫格布局方式的实现和大家做一个简单的介绍. 首先在youxi.xml的布局 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" androi

iOS界面布局之三——纯代码的autoLayout及布局动画

iOS界面布局之三--纯代码的autoLayout及布局动画 一.引言 关于界面布局,apple的策略已经趋于成熟,autolayout的优势在开发中也已经展现的淋漓尽致.除了使用storyBoard进行布局约束的拖拽,有时我们也需要在代码中进行autolayout的布局设置,Masonry库可以方便的创建约束属性,实际上,我们也没有必要再使用系统原生的代码来创建和设置约束,这篇博客只作为使用的方法备忘.前几篇布局介绍的链接如下: 使用autoresizing进行界面布局:http://my.o