zoukankan      html  css  js  c++  java
  • [UI基础][实现]九宫格之应用程序管理

    [目标]

      1、完成下图所示的View,View中的图片、文字数据从app.list文件读出。

      2、思考代码哪里可以进行优化。

                

    [分析]

      1、创建控件

        整个View分12个部分,其中包含一个 UIImageView、UILabel、UIButton,这三个控件可以作为一个整体

      作为subView的子控件。那么先创建12个subView,然后为每个subView添加三个子控件。

      view

        | ----- subView

            |           | ---- UIImageView 

            |           | ---- UILabel

            |           | ---- UIButton

            ...         ...

        | ----- subView

            |           | ---- UIImageView  

            |           | ---- UILabel

            |           | ---- UIButton

      2、为子控件填充数据

        控件的图片数据以及文字数据都存储在app.plist文件中,这个文件是存储了字典对象的12个数组,通过mainBundle

      获取文件的路径然后创建字典导出数据并加载到相应的控件。

      

    [实现]

      1、创建工程,加载必要的素材以及文件到工程。

          略

      2、创建12个subView

          创建一个subView可以分以下几个步骤进行:

            //2.1 创建subView

                UIView *subView = [[UIView alloc] init];

            //2.2 设置subView的frame

                    subView.frame = CGRectMake(subViewX, subViewY, subViewW, subViewH);

                // 3.3.添加subView到控制器的view

                    [self.view addSubview:subView];

      3、为subView加载图片、文字

        subView的图片文字属性存储在app.plist文件,首先把这个文件的数据导出到一个数组中。

        3.1 添加属性

          @interface ViewController ()

          /** 存放应用信息 */

          @property (nonatomic, strong) NSArray *appData;

          @end

        3.2 重写appData的getter

          - (NSArray *)apps {

              if (_apps == nil) {

                  // 1.获得plist的全路径

                  NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];

                  // 2.加载数组

                  _appData = [NSArray arrayWithContentsOfFile:path];

              }

              return _appData;

          }

          现在数据以及导出到appData这个数组中了,而这个数组的元素是字典,根据key分别读出图片文字信息加载到

        相应的控件的属性。

        3.3 添加图片数据到UIImagView

           NSDictionary *appInfo = self.appData[index];

                // 3.3.1.添加图片

                UIImageView *iconView = [[UIImageView alloc] init];

            // 3.3.2 设置frame

                iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);

                // 3.3.3 设置图片

                   iconView.image = [UIImage imageNamed:appInfo[@"icon"]];

                   [subView addSubview:iconView];

        3.4 添加Label的文本属性

          // 3.4.1 创建Label

                  UILabel *nameLabel = [[UILabel alloc] init];

          // 3.4.2 设置frame

                   nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);

          // 设置文字

          nameLabel.text = appInfo[@"name"];

          // 设置字体

          nameLabel.font = [UIFont systemFontOfSize:13];

          // 设置文字居中对齐

          nameLabel.textAlignment = NSTextAlignmentCenter;

          [appView addSubview:nameLabel];

        3.4 添加下载按钮

           略

        至此,整个UI的根据以上的步骤可以完成。全部代码如下  

      1 - (void)viewDidLoad
      2 {
      3     [super viewDidLoad];
      4     
      5     
      6     // 0.总列数(一行最多3列)
      7     int totalColumns = 3;
      8     
      9     // 1.应用的尺寸
     10     CGFloat subViewW = 85;
     11     CGFloat subViewH = 90;
     12     
     13     // 2.间隙 = (控制器view的宽度 - 3 * 应用宽度) / 4
     14     CGFloat marginX = (self.view.frame.size.width - totalColumns * subViewW) / (totalColumns + 1);
     15     CGFloat marginY = 15;
     16     
     17     // 3.根据应用个数创建对应的框框(index 0 ~ 11)
     18     for (int index = 0; index<self.appData.count; index++) {
     19         // 3.1.创建1小框框
     20         UIView *subView = [[UIView alloc] init];
     21  
     22         // 3.2.计算框框的位置
     23         // 计算行号和列号
     24         int row = index / totalColumns;
     25         int col = index % totalColumns;
     26         // 计算x和y
     27         CGFloat subViewX = marginX + col * (subViewW + marginX);
     28         CGFloat subViewY = 30 + row * (subViewH + marginY);
     29         // 设置frame
     30         subView.frame = CGRectMake(subViewX, subViewY, subViewW, subViewH);
     31         
     32         // 3.3.添加框框到控制器的view
     33         [self.view addSubview:subView];
     34         
     35         // 3.4.添加内部的小控件
     36         // 3.4.0.index位置对应的应用信息
     37         NSDictionary *appInfo = self.appData[index];
     38         
     39         // 3.4.1.添加图片
     40         UIImageView *iconView = [[UIImageView alloc] init];
     41         // 设置位置
     42         CGFloat iconW = 45;
     43         CGFloat iconH = 45;
     44         CGFloat iconX = (subViewW - iconW) * 0.5;
     45         CGFloat iconY = 0;
     46         iconView.frame = CGRectMake(iconX, iconY, iconW, iconH);
     47         // 设置图片
     48         iconView.image = [UIImage imageNamed:appInfo[@"icon"]];
     49         [subView addSubview:iconView];
     50         
     51         // 3.4.2.添加名字
     52         UILabel *nameLabel = [[UILabel alloc] init];
     53         // 设置位置
     54         CGFloat nameW = subViewW;
     55         CGFloat nameH = 20;
     56         CGFloat nameX = 0;
     57         CGFloat nameY = iconY + iconH;
     58         nameLabel.frame = CGRectMake(nameX, nameY, nameW, nameH);
     59         // 设置文字
     60         nameLabel.text = appInfo[@"name"];
     61         // 设置字体
     62         nameLabel.font = [UIFont systemFontOfSize:13];
     63         // 设置文字居中对齐
     64         nameLabel.textAlignment = NSTextAlignmentCenter;
     65         [subView addSubview:nameLabel];
     66         
     67         // 3.4.3.添加下载按钮
     68         UIButton *downloadBtn = [[UIButton alloc] init];
     69         // 设置位置
     70         CGFloat downloadX = 12;
     71         CGFloat downloadY = nameY + nameH;
     72         CGFloat downloadW = subViewW - 2 * downloadX;
     73         CGFloat downloadH = 20;
     74         downloadBtn.frame = CGRectMake(downloadX, downloadY, downloadW, downloadH);
     75         // 设置默认的背景
     76         UIImage *normalImage = [UIImage imageNamed:@"buttongreen"];
     77         [downloadBtn setBackgroundImage:normalImage forState:UIControlStateNormal];
     78         // 设置高亮的背景
     79         UIImage *highImage = [UIImage imageNamed:@"buttongreen_highlighted"];
     80         [downloadBtn setBackgroundImage:highImage forState:UIControlStateHighlighted];
     81         // 设置按钮的文字
     82         [downloadBtn setTitle:@"下载" forState:UIControlStateNormal];
     83         // 不推荐直接拿到按钮内部的label设置文字
     84         //        downloadBtn.titleLabel.text = @"5435345345";
     85         // 设置按钮文字的字体
     86         downloadBtn.titleLabel.font = [UIFont systemFontOfSize:13];
     87         [subView addSubview:downloadBtn];
     88     }
     89 }
     90 
     91 - (NSArray *)appData
     92 {
     93     if (_appData == nil) {
     94         // 初始化
     95         
     96         // 1.获得plist的全路径
     97         NSString *path = [[NSBundle mainBundle] pathForResource:@"app.plist" ofType:nil];
     98         
     99         // 2.加载数组
    100         _appData = [NSArray arrayWithContentsOfFile:path];
    101     }
    102     return _appData;
    103 }

        

  • 相关阅读:
    事件处理
    模板语法
    计算属性和侦听器
    Class 与 Style绑定
    Springboot使用redis
    修改docker-toolbox/boot2docker容器镜像
    docker容器如何安装vim
    Maven+Docker,发布到Registry
    Maven + Docker
    Jenkins-SVN + Maven + Docker
  • 原文地址:https://www.cnblogs.com/zhaoli/p/4751405.html
Copyright © 2011-2022 走看看