iOS开发UI篇—无限轮播(新闻数据展示)

简介: iOS开发UI篇—无限轮播(新闻数据展示) 一、实现效果          二、实现步骤 1.前期准备   (1)导入数据转模型的第三方框架MJExtension   (2)向项目中添加保存有“新闻”数据的plist文件        (3)导入用到的图片素材 2.

iOS开发UI篇—无限轮播(新闻数据展示)

一、实现效果

        

二、实现步骤

1.前期准备

  (1)导入数据转模型的第三方框架MJExtension

  (2)向项目中添加保存有“新闻”数据的plist文件

    

  (3)导入用到的图片素材

2.步骤和代码

(1)新建一个数据模型

   

  该模型的代码设计如下:    

  YYnews.h文件

 1 //
 2 //  YYnews.h
 3 //  08-无限滚动(新闻数据展示)
 4 //
 5 
 6 #import <Foundation/Foundation.h>
 7 
 8 @interface YYnews : NSObject
 9 @property(nonatomic,copy)NSString *title;
10 @property(nonatomic,copy)NSString *icon;
11 @end

(2)新建一个继承自UICollectionViewCell的类,用于自定义cell。

  

(3)新建一个xib文件,和自定义的cell做关联

     

  代码设计如下:

   YYcell.h文件

 1 //
 2 //  YYcell.h
 3 //  08-无限滚动(新闻数据展示)
 4 //
 5 
 6 #import <UIKit/UIKit.h>
 7 
 8 @class YYnews;
 9 @interface YYcell : UICollectionViewCell
10 @property(nonatomic,strong)YYnews *news;
11 @end

 YYcell.m文件

 1 //
 2 //  YYcell.m
 3 //  08-无限滚动(新闻数据展示)
 4 //
 5 
 6 #import "YYcell.h"
 7 #import "YYnews.h"
 8 
 9 @interface YYcell ()
10 @property (weak, nonatomic) IBOutlet UILabel *label;
11 @property (weak, nonatomic) IBOutlet UIImageView *imageView;
12 
13 @end
14 @implementation YYcell
15 
16 -(void)setNews:(YYnews *)news
17 {
18     _news=news;
19     self.label.text=news.title;
20     self.imageView.image=[UIImage imageNamed:news.icon];
21 }
22 
23 @end

(4)在主控制器中的代码处理

  YYViewController.m文件

 1 //
 2 //  YYViewController.m
 3 //  
 4 //
 5 //  Created by apple on 14-8-3.
 6 //  Copyright (c) 2014年 yangyong. All rights reserved.
 7 //
 8 
 9 #import "YYViewController.h"
10 #import "MJExtension.h"
11 #import "YYnews.h"
12 #import "YYcell.h"
13 
14 #define YYIDCell @"cell"
15 
16 @interface YYViewController ()<UICollectionViewDataSource,UICollectionViewDelegate>
17 @property (weak, nonatomic) IBOutlet UICollectionView *collectinView;
18 @property(nonatomic,strong)NSArray *news;
19 @end
20 
21 @implementation YYViewController
22 
23 #pragma mark-懒加载
24 -(NSArray *)news
25 {
26     if (_news==nil) {
27         _news=[YYnews objectArrayWithFilename:@"newses.plist"];
28     }
29     return _news;
30 }
31 - (void)viewDidLoad
32 {
33     [super viewDidLoad];
34     //注册cell
35 //    [self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
36     [self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
37     
38 }
39 
40 #pragma mark- UICollectionViewDataSource
41 //一共多少组,默认为1组
42 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
43 {
44     return 1;
45 }
46 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section
47 {
48     return self.news.count;
49 }
50 
51 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
52 {
53     YYcell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:YYIDCell forIndexPath:indexPath];
54     cell.news=self.news[indexPath.item];
55     return cell;
56 }
57 
58 #pragma mark-UICollectionViewDelegate
59 @end

3.补充说明

(1)如果collectionCell是以xib的方式自定义的,那么在注册cell的时候,需要使用另外一种方式。
[self.collectinView registerClass:[YYimageCell class] forCellWithReuseIdentifier:YYCell];
[self.collectinView registerNib:[UINib nibWithNibName:@"YYcell" bundle:nil] forCellWithReuseIdentifier:YYIDCell];
(2)在自定义xib的时候,使用collectionViewCell。并设置其标识为cell.
  
(3)打印查看cell的利用情况
  
目录
相关文章
|
11天前
|
前端开发 安全 开发工具
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
141 90
【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
|
2月前
|
移动开发 前端开发 Java
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
JavaFX是Java的下一代图形用户界面工具包。JavaFX是一组图形和媒体API,我们可以用它们来创建和部署富客户端应用程序。 JavaFX允许开发人员快速构建丰富的跨平台应用程序,允许开发人员在单个编程接口中组合图形,动画和UI控件。本文详细介绍了JavaFx的常见用法,相信读完本教程你一定有所收获!
1432 1
Java最新图形化界面开发技术——JavaFx教程(含UI控件用法介绍、属性绑定、事件监听、FXML)
|
2月前
|
XML 搜索推荐 前端开发
安卓开发中的自定义视图:打造个性化UI组件
在安卓应用开发中,自定义视图是一种强大的工具,它允许开发者创造独一无二的用户界面元素,从而提升应用的外观和用户体验。本文将通过一个简单的自定义视图示例,引导你了解如何在安卓项目中实现自定义组件,并探讨其背后的技术原理。我们将从基础的View类讲起,逐步深入到绘图、事件处理以及性能优化等方面。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的见解和技巧。
|
3月前
|
开发框架 前端开发 Android开发
Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势
本文深入探讨了 Flutter 与原生模块(Android 和 iOS)之间的通信机制,包括方法调用、事件传递等,分析了通信的必要性、主要方式、数据传递、性能优化及错误处理,并通过实际案例展示了其应用效果,展望了未来的发展趋势。这对于实现高效的跨平台移动应用开发具有重要指导意义。
353 4
|
3月前
|
搜索推荐 Android开发 开发者
探索安卓开发中的自定义视图:打造个性化UI组件
【10月更文挑战第39天】在安卓开发的世界中,自定义视图是实现独特界面设计的关键。本文将引导你理解自定义视图的概念、创建流程,以及如何通过它们增强应用的用户体验。我们将从基础出发,逐步深入,最终让你能够自信地设计和实现专属的UI组件。
|
3月前
|
开发框架 JavaScript 前端开发
HarmonyOS UI开发:掌握ArkUI(包括Java UI和JS UI)进行界面开发
【10月更文挑战第22天】随着科技发展,操作系统呈现多元化趋势。华为推出的HarmonyOS以其全场景、多设备特性备受关注。本文介绍HarmonyOS的UI开发框架ArkUI,探讨Java UI和JS UI两种开发方式。Java UI适合复杂界面开发,性能较高;JS UI适合快速开发简单界面,跨平台性好。掌握ArkUI可高效打造符合用户需求的界面。
197 8
|
4月前
|
JavaScript API 开发者
掌握ArkTS,打造HarmonyOS应用新视界:从“Hello World”到状态管理,揭秘鸿蒙UI开发的高效秘诀
【10月更文挑战第19天】ArkTS(ArkUI TypeScript)是华为鸿蒙系统中用于开发用户界面的声明式编程语言,结合了TypeScript和HarmonyOS的UI框架。本文介绍ArkTS的基本语法,包括组件结构、模板和脚本部分,并通过“Hello World”和计数器示例展示其使用方法。
148 1
|
4月前
|
缓存 测试技术 C#
使用Radzen Blazor组件库开发的基于ABP框架炫酷UI主题
【10月更文挑战第20天】本文介绍了使用 Radzen Blazor 组件库开发基于 ABP 框架的炫酷 UI 主题的步骤。从准备工作、引入组件库、设计主题、集成到 ABP 框架,再到优化和调试,详细讲解了每个环节的关键点和注意事项。通过这些步骤,你可以打造出高性能、高颜值的应用程序界面。
108 1
|
4月前
|
JavaScript 索引
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
Vue开发中Element UI/Plus使用指南:常见问题(如Missing required prop: “value“)及中文全局组件配置解决方案
315 0
|
4月前
|
开发框架 JavaScript 前端开发
鸿蒙NEXT开发声明式UI是咋回事?
【10月更文挑战第15天】鸿蒙NEXT的声明式UI基于ArkTS,提供高效简洁的开发体验。ArkTS扩展了TypeScript,支持声明式UI描述、自定义组件及状态管理。ArkUI框架则提供了丰富的组件、布局计算和动画能力。开发者仅需关注数据变化,UI将自动更新,简化了开发流程。此外,其前后端分层设计与编译时优化确保了高性能运行,利于生态发展。通过组件创建、状态管理和渲染控制等方式,开发者能快速构建高质量的鸿蒙应用。
222 3

热门文章

最新文章

  • 1
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
  • 3
    Cellebrite UFED 4PC 7.71 (Windows) - Android 和 iOS 移动设备取证软件
  • 4
    【01】仿站技术之python技术,看完学会再也不用去购买收费工具了-用python扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-客户的麻将软件需要下载落地页并且要做搜索引擎推广-本文用python语言快速开发爬取落地页下载-优雅草卓伊凡
  • 5
    用自然语言控制电脑,字节跳动开源 UI-TARS 的桌面版应用!内附详细的安装和配置教程
  • 6
    UI-TARS:字节跳动开源专注于多平台 GUI 自动化交互的视觉语言模型
  • 7
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
  • 8
    移动端UI名词 - AxureMost
  • 9
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
  • 10
    unity判断鼠标在不在UI上