九宫格布局(demo16.03.14)

//
//  ViewController.m
//  AppManager
//
//  Created by xin on 15-3-16.
//  Copyright (c) 2015年 Jackey. All rights reserved.
//

#import "ViewController.h"

//1 get the data
//2 draw the view
@interface ViewController ()

//
@property (nonatomic,strong) NSArray *appList;
@end

@implementation ViewController

-(NSArray *)appList{
    if(!_appList){
        NSString *path = [[NSBundle mainBundle]pathForResource:@"app.plist" ofType:nil];
        _appList = [[NSArray alloc]initWithContentsOfFile:path];
    }
    return _appList;
}

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    int totalCol = 3;
    CGFloat viewW = 80;
    CGFloat viewH = 90;

    CGFloat marginX = (self.view.bounds.size.width-viewW*totalCol)/(totalCol+1);
    CGFloat marginY =10;
    CGFloat startY = 20;
    //int count = self.appList.count;
    for(int i=0;i<self.appList.count;i++){
        int row =i/totalCol;
        int col = i%totalCol;

        CGFloat x = marginX +(marginX+viewW)*col;
        CGFloat y =startY+ marginY +(marginY+viewH)*row;

        UIView *view = [[UIView alloc]initWithFrame:CGRectMake(x, y, viewW, viewH)];
        view.backgroundColor = [UIColor redColor];
        [self.view addSubview:view];
    }

}

@end

  

时间: 2024-11-03 22:43:07

九宫格布局(demo16.03.14)的相关文章

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

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

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

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

安卓开发_九宫格布局

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

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

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

21 九宫格布局

九宫格布局 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>九宫格布局</title> 6 <style type="text/css"> 7 *{ 8 padding:0; 9 margin:0; 10 } 11 #wrap{ 12 overflow:

常用的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

九宫格布局

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

微信小程序之九宫格布局方案

2018转眼即将逝去了,由于近期在弄一个小程序的项目的原因,今天在这里记录一下小程序之九宫格布局方案,以备后期需要和相关知识温习. 对于整个小程序项目,原生开发小程序的方式这里就不多说了,官方有确切的说明文档以及详细的Api.近期公司做的小程序项目是采用wepy框架实现的,个人觉得这个框架还是很不错的,类似于vue的风格.总之,从构建到最后微信web开发者工具调试和预览,效果还是可以的. 至于具体的小程序wepy框架开发过程,安装工具等这里不做多讲(不是今天这篇文章的重点),本次想借着写这篇博文