iOS开发UI篇—在UITableview的应用中使用动态单元格来完成app应用程序管理界面的搭建

简介: iOS开发UI篇—在UITableview的应用中使用动态单元格来完成app应用程序管理界面的搭建 一、实现效果 说明:该示例在storyboard中使用动态单元格来完成。 二、实现 1.项目文件结构和plist文件 2.实现过程以及代码 在tableview的属性选择器中选择动态单元格。

iOS开发UI篇—在UITableview的应用中使用动态单元格来完成app应用程序管理界面的搭建

一、实现效果

说明:该示例在storyboard中使用动态单元格来完成。

二、实现

1.项目文件结构和plist文件

2.实现过程以及代码

在tableview的属性选择器中选择动态单元格。

说明:在storyboard中直接使用其自带的动态单元格完成tableviewcell的定义,并创建了一个管理该cell的类,进行了连线。

实现代码:

数据模型部分:

YYappInfo.h文件

 1 //
 2 //  YYappInfo.h
 3 //  01-使用动态单元格来完成app应用程序管理界面的搭建
 4 //
 5 //  Created by 孔医己 on 14-6-2.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import <Foundation/Foundation.h>
10 
11 @interface YYappInfo : NSObject
12 @property(nonatomic,copy)NSString *size;
13 @property(nonatomic,copy)NSString *download;
14 @property(nonatomic,copy)NSString *icon;
15 @property(nonatomic,copy)NSString *name;
16 
17 
18 
19 -(instancetype)initWithDict:(NSDictionary *)dict;
20 +(instancetype)appInfoWithDict:(NSDictionary *)dict;
21 @end

YYappInfo.m文件

 1 //
 2 //  YYappInfo.m
 3 //  01-使用动态单元格来完成app应用程序管理界面的搭建
 4 //
 5 //  Created by 孔医己 on 14-6-2.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import "YYappInfo.h"
10 
11 @implementation YYappInfo
12 
13 -(instancetype)initWithDict:(NSDictionary *)dict
14 {
15     if (self=[super init]) {
16         //使用KVC
17         [self setValuesForKeysWithDictionary:dict];
18     }
19     return self;
20 }
21 
22 
23 +(instancetype)appInfoWithDict:(NSDictionary *)dict
24 {
25 
26     return [[self alloc]initWithDict:dict];
27 }
28 @end

视图部分

 YYappCell.h文件

 1 //
 2 //  YYappCell.h
 3 //  01-使用动态单元格来完成app应用程序管理界面的搭建
 4 //
 5 //  Created by 孔医己 on 14-6-2.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import <UIKit/UIKit.h>
10 
11 
12 @class YYappInfo,YYappCell;
13 
14 @protocol YYappCellDelegate <NSObject>
15 -(void)btnDidClick:(YYappCell *)cell;
16 
17 
18 @end
19 @interface YYappCell : UITableViewCell
20 
21 @property(nonatomic,strong)YYappInfo *app;
22 //@property(nonatomic,strong)YYViewController *controller;
23 @property(nonatomic,strong)id <YYappCellDelegate> delegate;
24 
25 @end

 YYappCell.m文件

 1 //
 2 //  YYappCell.m
 3 //  01-使用动态单元格来完成app应用程序管理界面的搭建
 4 //
 5 //  Created by 孔医己 on 14-6-2.
 6 //  Copyright (c) 2014年 itcast. All rights reserved.
 7 //
 8 
 9 #import "YYappCell.h"
10 #import "YYappInfo.h"
11 
12 @interface YYappCell ()
13 @property (weak, nonatomic) IBOutlet UIImageView *appimg;
14 
15 @property (weak, nonatomic) IBOutlet UILabel *apptitle;
16 @property (weak, nonatomic) IBOutlet UILabel *appdownload;
17 @property (weak, nonatomic) IBOutlet UIButton *appbtn;
18 
19 @end
20 @implementation YYappCell
21 
22 
23 -(void)setApp:(YYappInfo *)app
24 {
25     _app=app;
26     self.apptitle.text=_app.name;
27     self.appdownload.text=[NSString stringWithFormat:@"大小 %@ | 下载量 %@次",_app.size,_app.download];
28     self.appimg.image=[UIImage imageNamed:_app.icon];
29     
30 }
31 
32 #pragma mark- 完成按钮点击事件
33 
34 - (IBAction)btnOnclick:(UIButton *)sender
35 {
36     //按钮被点击后,变为不可用状态
37     sender.enabled=NO;
38     
39     //通知代理,完成提示下载已经完成的动画效果
40     if ([self.delegate respondsToSelector:@selector(btnDidClick:)]) {
41         //一般而言,谁触发就把谁传过去
42         [self.delegate  btnDidClick:self];
43     }
44 }
45 
46 @end

主控制器

YYViewController.m文件

  1 //
  2 //  YYViewController.m
  3 //  01-使用动态单元格来完成app应用程序管理界面的搭建
  4 //
  5 //  Created by 孔医己 on 14-6-2.
  6 //  Copyright (c) 2014年 itcast. All rights reserved.
  7 //
  8 
  9 #import "YYViewController.h"
 10 #import "YYappInfo.h"
 11 #import "YYappCell.h"
 12 
 13 @interface YYViewController ()<UITableViewDataSource,YYappCellDelegate>
 14 @property(nonatomic,strong)NSArray *apps;
 15 @property (strong, nonatomic) IBOutlet UITableView *tableview;
 16 
 17 @end
 18 
 19 @implementation YYViewController
 20 
 21 - (void)viewDidLoad
 22 {
 23     [super viewDidLoad];
 24 }
 25 
 26 #pragma mark- 使用懒加载先把plist文件中得数据加载进来
 27 -(NSArray *)apps
 28 {
 29     if (_apps==Nil) {
 30         NSString *fullpath=[[NSBundle mainBundle]pathForResource:@"apps_full.plist" ofType:Nil];
 31         NSArray *arrayM=[NSArray arrayWithContentsOfFile:fullpath];
 32         
 33         NSMutableArray *modles=[NSMutableArray arrayWithCapacity:arrayM.count];
 34         for (NSDictionary *dict in arrayM) {
 35             YYappInfo *appinfo=[YYappInfo appInfoWithDict:dict];
 36             [modles addObject:appinfo];
 37         }
 38         _apps=[modles copy];
 39     }
 40     return _apps;
 41 }
 42 
 43 
 44 #pragma mark- 设置tableview的数据源方法
 45 //
 46 -(NSInteger)numberOfSectionsInTableView:(UITableView *)tableView
 47 {
 48     return 1;
 49 }
 50 //
 51 -(NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section
 52 {
 53     return self.apps.count;
 54 }
 55 //组-行-数据
 56 -(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
 57 {
 58     //创建cell
 59     static NSString *identifier=@"app";
 60     YYappCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
 61     //设置cell的数据
 62     YYappInfo *appinfo=self.apps[indexPath.row];
 63     //设置代理
 64     cell.delegate=self;
 65     cell.app=appinfo;
 66     //返回cell
 67     return cell;
 68 }
 69 
 70 #pragma mark- 设置代理
 71 -(void)btnDidClick:(YYappCell *)cell
 72 {
 73     //取出模型
 74     YYappInfo *app=cell.app;
 75     NSLog(@"daili");
 76     UILabel *lab=[[UILabel alloc]init];
 77     //提示的显示位置
 78     lab.frame=CGRectMake(60, 300, 200, 20);
 79     //设置提示文本
 80     lab.text=[NSString stringWithFormat:@"%@已经下载完成",app.name];
 81     //设置文本背景颜色
 82     [lab setBackgroundColor:[UIColor grayColor]];
 83     [self.view addSubview:lab];
 84     lab.alpha=1.0;
 85     
 86     //设置动画效果
 87     [UIView animateWithDuration:2.0 animations:^{
 88         lab.alpha=0.0;
 89     } completion:^(BOOL finished) {
 90         //把弹出的提示信息从父视图中删除
 91         [lab removeFromSuperview];
 92     }];
 93 }
 94 
 95 #pragma mark-隐藏状态栏
 96 -(BOOL)prefersStatusBarHidden
 97 {
 98     return YES;
 99 }
100 
101 @end

补充说明

  在程序中通过标示符取出对应的cell,是因为在storyboard中已经对cell打上了标示符(app)的标签。

//组-行-数据
-(UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    //创建cell
    static NSString *identifier=@"app";
    YYappCell *cell=[tableView dequeueReusableCellWithIdentifier:identifier];
    //设置cell的数据
    YYappInfo *appinfo=self.apps[indexPath.row];
    //设置代理
    cell.delegate=self;
    cell.app=appinfo;
    //返回cell
    return cell;
}

 

目录
相关文章
|
5月前
|
移动开发 小程序 Android开发
基于 uni-app 开发的废品回收类多端应用功能与界面说明
本文将对一款基于 uni-app 开发的废品回收类多端应用,从多端支持范围、核心功能模块及部分界面展示进行客观说明,相关资源信息也将一并呈现。
207 0
|
5月前
|
存储 开发者 容器
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
本文介绍了ArkTS语言中的Class类、泛型、接口、模块化、自定义组件及状态管理等核心概念,并结合代码示例讲解了对象属性、构造方法、继承、静态成员、访问修饰符等内容,同时涵盖了路由管理、生命周期和Stage模型等应用开发关键知识点。
467 1
鸿蒙 HarmonyOS NEXT星河版APP应用开发-ArkTS面向对象及组件化UI开发使用实例
|
8月前
|
JavaScript 前端开发 UED
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发四
本文介绍了Web组件开发与性能优化的相关内容。在Web组件开发部分,涵盖创建组件、设置样式与属性、添加事件和方法以及场景示例,如动态播放视频。性能提升方面,推荐使用数据懒加载、条件渲染替代显隐控制、Column/Row替代Flex、设置List组件宽高及调整cachedCount减少滑动白块等方法,以优化应用性能与用户体验。
306 56
|
8月前
|
编解码 UED 开发者
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发之常见布局
本文主要介绍了自适应布局与响应式布局的相关内容。自适应布局部分涵盖线性布局、层叠布局、弹性布局和网格布局,详细说明了各布局的特性及使用方法,例如线性布局中的排列、拉伸与缩放,弹性布局的方向、换行与对齐方式等。响应式布局则重点讲解了栅格系统和媒体查询,阐述如何通过栅格组件和媒体查询条件实现不同设备上的适配效果。这些技术帮助开发者灵活应对多尺寸屏幕的设计需求,提升用户体验。
451 55
|
7月前
|
Java Shell Maven
【Azure Container App】构建Java应用镜像时候遇无法编译错误:ERROR [build 10/10] RUN ./mvnw.cmd dependency:go-offline -B -Dproduction package
在部署Java应用到Azure Container App时,构建镜像过程中出现错误:“./mvnw.cmd: No such file or directory”。尽管项目根目录包含mvnw和mvnw.cmd文件,但依然报错。问题出现在Dockerfile构建阶段执行`./mvnw dependency:go-offline`命令时,系统提示找不到可执行文件。经过排查,确认是mvnw文件内容异常所致。最终通过重新生成mvnw文件解决该问题,镜像成功构建。
377 1
|
7月前
|
存储 移动开发 监控
App Trace功能实战:一键拉起、快速安装与免提写邀请码的应用实践
App Trace系统通过一键拉起、快速安装和免提写邀请码三大功能,显著提升用户转化率、安装成功率和邀请注册率。结合深度技术实现与优化,助力公司用户增长,成为移动端核心基础设施。
|
8月前
|
JavaScript 前端开发 开发者
09.HarmonyOS Next数据驱动UI开发:ForEach与动态渲染完全指南(上)
在现代前端开发中,数据驱动UI已成为主流开发范式。HarmonyOS Next的ArkTS语言和声明式UI框架完美支持这一理念,使开发者能够以更高效、更直观的方式构建复杂应用。
256 1
|
9月前
|
开发框架 前端开发 JavaScript
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发一
本文介绍了方舟开发框架(ArkUI)及其两种开发范式:基于ArkTS的声明式开发范式和类Web开发范式。ArkUI是用于构建HarmonyOS应用界面的UI框架,提供极简UI语法和基础设施。声明式开发范式使用ArkTS语言,以组件、动画和状态管理为核心,适合复杂团队协作;类Web开发范式采用HML、CSS、JavaScript三段式开发,适用于简单界面应用,贴近Web开发者习惯。文中还概述了两者的架构和基础能力,帮助开发者选择合适的范式进行高效开发。
318 15
|
9月前
|
编解码 前端开发 Java
【HarmonyOS Next之旅】基于ArkTS开发(二) -> UI开发三
本文介绍了基于声明式UI范式的图形绘制与动画效果实现方法,涵盖绘制图形、添加动画效果及常见组件说明三部分内容。在绘制图形部分,详细讲解了如何通过Circle组件为食物成分表添加圆形标签,以及使用Path组件结合SVG命令绘制自定义图形(如应用Logo)。动画效果部分则展示了如何利用animateTo实现闪屏动画,包括渐出、放大效果,并设置页面跳转;同时介绍了页面间共享元素转场动画的实现方式。最后,文章列举了声明式开发范式中的各类组件及其功能,帮助开发者快速上手构建复杂交互页面。
354 11
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
826 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex

热门文章

最新文章