微软MVP社区金秋巡回演讲 —— 新加坡Windows Phone应用开发磨炼营

概述


在 App 中,日历通常与签到功能结合使用。是提高用户活跃度的一种方式,同时,签到数据中蕴含了丰富的极其有价值的信息。下面我们就来看看如何在 App 中实现日历签到功能。

微软MVP社区金天巡回演讲 —— 巴黎Windows  Phone应用开发陶冶营 

效果图


。。。。。图片 1

 

思路分析


实现日历签到功能的思路有很多种,这里我们就使用 UICollectionView 来实现具备签到功能的日历
  • 基础知识

    • 有关瀑布流(若你对 UICollectionView 及 UICollectionViewLayout
      的文化不太精通,请参见以下文章)

    • 至于布局(使用 CocoaPods 集成第叁方框架 梅森ry
      进行界面布局,若你对 CocoaPods 的运用不太理解,请参考以下小说)

    • 有关 pch 文件的布局格局,请参见以下小说
    • 至于项目标文件结构

      在应用开发过程中,我们通常会指定一定的文件结构,便于项目的开发和维护。该博客中的文件结构如图:
      

      图片 2

      • 图中一级文件结构的的细分是依照使用的作业模块划分,如:
        • Sections:应用的作用模块
        • Network:应用的网络请求模块
        • Common:应用中通用的文本,经常是自定义控件
        • Macro:应用中的宏
        • Category:应用中的分类
        • Other:其他,如:Appdelegate,main,pch 等文件
      • 图中二级文件结构的的剪切是安分守己使用的功用模块划分,如:
        • Mine:是三个类型中,平时拥有的效能模块
      • 图中三级级文件结构的的撤销合并是奉公守法 MVC 架构格局划分,如:
        • Model
        • View
        • Controller
  • 思路

    • 体现“日历”所须要的数额(使用 NSDate 的归类提供)
      • 脚下月总共有多少天,即:“日历” CollectionView 中 Item 的数量
      • 现阶段月尾国共产党有多少周,即:“日历” CollectionView 的行数
      • 日前月底首后天在十十七日内的目录,即:完毕“日历”中的每天与周几音信对应
      • 同一天在当月首的索引(第几天),即:点击“签到”按钮时,通过索引找到“日历”
        CollectionView 中的 Item 更新 “签到”标签的意况
    • “日历”布局(使用 IDCalendarCollectionViewFlowLayout 定义)
      • 在此处运用自定义流水布局来安装 “日历” CollectionView
        的布局(使用 frame 布局 每贰个 Item)
    • “日历” 控件
      • 漫天日历控件(IDCalendarSignInView)中封装了以下控件
        • calendarDateView:展现日期,如:二〇一四年0八月
        • calendarWeekdayView:展现周几新闻,如:日 一 二 …… 六
        • calendarCollectionView:展现日历
        • seperatorView:分割线
      • 子控件的布局
        • 在那边,统一在 layoutSubviews
          方法中布局子控件(此时获得到的 IDCalendarSignInView
          控件的 frame
          才是最终明确的)。那壹个正式,尽量坚守,能够幸免过多麻烦调节和测试的
          bug

一举手一投足表达和申请地点
www.aka.ms\mvpbeijing

切切实实达成


  • 声明
    • 此部分主要阐述代码实现,代码中有详细的注释,若对以上思路不太理解,可以结合代码整理自己的思路
    • 由于篇幅限制,在这里,不再贴出应用实现的全部代码。若有需要的朋友,请联系我,我将提供完整的工程文件。感谢您的理解和支持,您的支持是我坚持下去最大的动力,真心的谢谢你们。以下是我的 Blog 地址:
  • 提供体现“日历”所急需的多少( NSDate+Calculate 文件 )

    • 取妥贴前月总共有多少天

      + (NSInteger)numberOfDaysInCurrentMonth {
          // 初始化日历
          NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
          // 获取系统当前日期
          NSDate *currentDate = [NSDate date];
          // 获取当前日期中当前月中天的范围
          NSRange range = [calendar rangeOfUnit:NSCalendarUnitDay inUnit:NSCalendarUnitMonth forDate:currentDate];
          // 得到当前月中总共有多少天(即范围的长度)
          NSInteger numberOfDaysInCurrentMonth = range.length;
          return numberOfDaysInCurrentMonth;
      }
      
    • 得到当前月首国共产党有多少周

      + (NSInteger)numberOfWeeksInCurrentMonth {
          // 初始化日历
          NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSCalendarIdentifierGregorian];
          // 获取系统当前日期
          NSDate *currentDate = [NSDate date];
          // 获取当前日期中当前月中周的范围
          NSRange range = [calendar rangeOfUnit:NSCalendarUnitWeekOfMonth inUnit:NSCalendarUnitMonth forDate:currentDate];
          // 得到当前月中总共有多少周(即范围的长度)
          NSInteger numberOfWeeksInCurrentMonth = range.length;
          return numberOfWeeksInCurrentMonth;
      }
      
  • 自定义流水布局( IDCalendarCollectionViewFlowLayout 文件 )

    • 设置每三个 Item 的布局

      /** 设置 indexPath 位置的 Item 的布局属性 */
      - (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
          // 获取 indexPath 位置的布局属性
          UICollectionViewLayoutAttributes *layoutAttributes = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
          // 计算每一个 Item 的 frame
          CGFloat collectionViewLeftPadding = self.collectionView.contentInset.left;
          CGFloat collectionViewRightPadding = self.collectionView.contentInset.right;
          // size
          CGFloat itemWidth = (self.collectionView.bounds.size.width - collectionViewLeftPadding - collectionViewRightPadding - 5*IDCalendarCollectionViewCellHerizontalMargin) / 7.0;
          CGFloat itemHeigh = self.collectionView.bounds.size.height / [NSDate numberOfWeeksInCurrentMonth];
          // origin
          CGFloat itemX = ((self.indexOfWeekForFirstDayInCurrentMonth + indexPath.item) % 7) * (itemWidth + IDCalendarCollectionViewCellHerizontalMargin);
          CGFloat itemY = ((self.indexOfWeekForFirstDayInCurrentMonth + indexPath.item) / 7) * itemHeigh;
          layoutAttributes.frame = CGRectMake(itemX, itemY, itemWidth, itemHeigh);
          // 返回 indexPath 位置的 Item 的布局属性
          return layoutAttributes;
      }
      
  • 自定义“日历” CollectionView 的 Cell( IDCalendarCollectionViewCell
    文件 )

    • 提供接口,用于控制签到标签的情况

      /** 是否已经签到 */
      @property (nonatomic, assign) BOOL haveSignedIn;
      /** 重写 set 方法,用于更新 “签到” 标签的状态 */
      - (void)setHaveSignedIn:(BOOL)haveSignedIn {
          _haveSignedIn = haveSignedIn;
          if (_haveSignedIn) {
              self.signInLabel.hidden = NO;
          } else {
              self.signInLabel.hidden = YES;
          }
      }
      
    • 添加子控件

      - (instancetype)initWithFrame:(CGRect)frame {
          if (self = [super initWithFrame:frame]) {
              // 初始化 “日期数字” label,并添加到 cell 中
              self.dateLabel = [[UILabel alloc] init];
              self.dateLabel.textColor = [UIColor colorWithRed:122/255.0 green:122/255.0 blue:122/255.0 alpha:1.0];
              [self.contentView addSubview:self.dateLabel];
              // 初始化 “签到” label,并添加到 cell 中
              self.signInLabel = [[UILabel alloc] init];
              self.signInLabel.hidden = YES; // 默认隐藏“签到”标签
              self.signInLabel.textColor = [UIColor colorWithRed:228/255.0 green:49/255.0 blue:42/255.0 alpha:1.0];
              self.signInLabel.font = [UIFont systemFontOfSize:10];
              self.signInLabel.text = @"签到";
              [self.contentView addSubview:self.signInLabel];
          }
          return self;
      }
      
  • 自定义“日历签到”控件( IDCalendarSignInView 文件)

    • 添加子控件

      /** 设置 “日期” 部分 */
      - (void)setupCalendarDateView {
          // 初始化 “日期” View,并添加到 IDCalendarSignInView
          self.calendarDateView = [[UIView alloc] init];
          [self addSubview:self.calendarDateView];
          // 初始化分割线 并添加到 “日期” View
          self.dateSeperatorView = [[UIView alloc] init];
          self.dateSeperatorView.backgroundColor = [UIColor colorWithRed:226/255.0 green:226/255.0 blue:226/255.0 alpha:1.0];
          [self.calendarDateView addSubview:self.dateSeperatorView];
          // 初始化日期 label 并添加到 “日期” View
          self.calendarDateLabel = [[UILabel alloc] init];
          self.calendarDateLabel.font = [UIFont systemFontOfSize:15];
          NSDate *currentDate = [NSDate date];
          NSDateFormatter *dateFormatter = [[NSDateFormatter alloc] init];
          dateFormatter.dateFormat = @"yyyy年MM月";
          NSString *dateString = [dateFormatter stringFromDate:currentDate];
          self.calendarDateLabel.text = dateString;
          [self.calendarDateView addSubview:self.calendarDateLabel];
      }
      /** 设置 “周几” 部分 */
      - (void)setupCalendarWeekdayView {
          // 初始化 “日期” View,并添加到 IDCalendarSignInView
          self.calendarWeekdayView = [[UIView alloc] init];
          [self addSubview:self.calendarWeekdayView];
          // 初始化分割线 并添加到 “周几” View
          self.weekdaySeperatorView = [[UIView alloc] init];
          self.weekdaySeperatorView.backgroundColor = [UIColor colorWithRed:226/255.0 green:226/255.0 blue:226/255.0 alpha:1.0];
          [self.calendarWeekdayView addSubview:self.weekdaySeperatorView];
          // 初始化 “周几” label 并添加到 “周几” View
          NSArray *weekday = @[@"日", @"一", @"二", @"三", @"四", @"五", @"六"];
          for (NSInteger i = 0; i < 7; i++) {
              UILabel *weekDayLabel = [[UILabel alloc] initWithFrame:CGRectZero];
              weekDayLabel.textAlignment = NSTextAlignmentCenter;
              weekDayLabel.font = [UIFont systemFontOfSize:13];
              weekDayLabel.textColor = [UIColor colorWithRed:97/255.0 green:97/255.0 blue:97/255.0 alpha:1.0];
              weekDayLabel.text = weekday[i];
              // 将 “周几” 信息保存在成员变量中
              [self.weekdayLabelArray addObject:weekDayLabel];
              [self.calendarWeekdayView addSubview:weekDayLabel];
          }
      }
      /** 设置 “日历” 部分 */
      - (void)setupCalendarCollectionView {
          // 设置 "日历" 的布局
          IDCalendarCollectionViewFlowLayout *flowLayout = [[IDCalendarCollectionViewFlowLayout alloc] init];
          flowLayout.headerReferenceSize = CGSizeMake(self.bounds.size.width, 20);
          // 初始化 “日历” CollectionView,设置相关属性,并添加到 IDCalendarSignInView
          self.calendarCollectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
          self.calendarCollectionView.backgroundColor = [UIColor whiteColor];
          self.calendarCollectionView.scrollEnabled = NO;
          self.calendarCollectionView.dataSource = self;
          self.calendarCollectionView.delegate = self;
          [self.calendarCollectionView registerClass:[IDCalendarCollectionViewCell class] forCellWithReuseIdentifier:IDCalendarCollectionViewCellIdentifier];
          [self addSubview:self.calendarCollectionView];
          // 初始化分割线 并添加到 “日历” View
          self.collectionViewSeperatorArray = [NSMutableArray array];
          for (NSInteger i = 0; i < [NSDate numberOfWeeksInCurrentMonth]; i++) {
              UIView *collectionViewSeperator = [[UIView alloc] initWithFrame:CGRectZero];
              collectionViewSeperator.backgroundColor = [UIColor colorWithRed:226/255.0 green:226/255.0 blue:226/255.0 alpha:1.0];
              [self.collectionViewSeperatorArray addObject:collectionViewSeperator];
              [self.calendarCollectionView addSubview:collectionViewSeperator];
          }
          // 设置“日历” View 的内边距
          self.calendarCollectionView.contentInset = UIEdgeInsetsMake(0, 15, 0, 15);
      }
      
    • 布局子控件

      - (void)layoutSubviews {
          [super layoutSubviews];
          // “日期”
          [self.calendarDateView mas_makeConstraints:^(MASConstraintMaker *make) {
              make.leading.trailing.equalTo(self);
              make.top.equalTo(self.mas_top);
              make.height.offset(35);
          }];
          // “周几”
          [self.calendarWeekdayView mas_makeConstraints:^(MASConstraintMaker *make) {
              make.leading.trailing.equalTo(self);
              make.top.equalTo(self.calendarDateView.mas_bottom);
              make.height.offset(38);
          }];
          // “日历”
          [self.calendarCollectionView mas_makeConstraints:^(MASConstraintMaker *make) {
              make.top.equalTo(self.calendarWeekdayView.mas_bottom);
              make.leading.trailing.bottom.equalTo(self);
          }];
          // “日期” 部分的分割线
          [self.dateSeperatorView mas_makeConstraints:^(MASConstraintMaker *make) {
              make.leading.trailing.top.equalTo(self.calendarDateView);
              make.height.offset(1);
          }];
          // 周几信息
          for (NSInteger i = 0; i < 7; i++) {
              self.weekdayLabelArray[i].frame = CGRectMake(i * (self.calendarCollectionViewItemSize.width + 10) + 15, 0, self.calendarCollectionViewItemSize.width, 35);
          }
          // “周几” 部分的分割线
          [self.weekdaySeperatorView mas_makeConstraints:^(MASConstraintMaker *make) {
              make.leading.top.trailing.equalTo(self.calendarWeekdayView);
              make.height.offset(1);
          }];
          // “日历” 显示日期的 label
          [self.calendarDateLabel mas_makeConstraints:^(MASConstraintMaker *make) {
              make.centerX.centerY.equalTo(self.calendarDateView);
          }];
          // “日历” 部分的分割线
          for (NSInteger i = 0; i < [NSDate numberOfWeeksInCurrentMonth]; i++) {
              self.collectionViewSeperatorArray[i].frame = CGRectMake(0, i * self.calendarCollectionViewItemSize.height, [UIScreen mainScreen].bounds.size.width - 30, 1);
          }
      }
      
    • 提供“日历” CollectionView 的数据源

      - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
          return [NSDate numberOfDaysInCurrentMonth];
      }
      - (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
          IDCalendarCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:IDCalendarCollectionViewCellIdentifier forIndexPath:indexPath];
          cell.numberTextInDateLabel = indexPath.item + 1;
          return cell;
      }
      
  • “签到”按钮( IDConfirmButton 文件)

    • 好像于“签到”按钮那样外观的按钮,是使用中相比宽泛的按钮,如:“明确”、“撤废”按钮经常也是那种外观,平日大家将这么的按钮写成3个通用的空中,放到
      Common 文件中
    • 未钦命拉伸区域时的效应

      图片 3

    • 点名拉伸区域后的意义

      图片 4

    • 自定义 IDConfirmButton

      - (instancetype)initWithFrame:(CGRect)frame {
          if (self = [super initWithFrame:frame]) {
              [self setTitleColor:[UIColor whiteColor] forState:UIControlStateNormal];
              [self setBackgroundImage:[UIImage resizedImageWithName:@"btn_normal"] forState:UIControlStateNormal];
              [self setBackgroundImage:[UIImage resizedImageWithName:@"btn_highlight"] forState:UIControlStateHighlighted];
              [self setBackgroundImage:[UIImage resizedImageWithName:@"btn_disable"] forState:UIControlStateDisabled];
              self.layer.cornerRadius = 5.0;
              self.layer.masksToBounds = YES;
          }
          return self;
      }
      
    • IDConfirmButton
      的图形,若提供的图样的尺寸,不等于按钮的尺码,图片就会被拉伸。当图片具有圆角是,拉伸后的图纸平时不复合必要,所以我们供给内定图片的拉伸区域(UIImage+Resizing)

      /** 返回一张图片,按指定方式拉伸的图片:width * 0.5 : height * 0.5 */
      + (UIImage *)resizedImageWithName:(NSString *)name {
          UIImage *image = [UIImage imageNamed:name];
          return [image stretchableImageWithLeftCapWidth:image.size.width * 0.5 topCapHeight:image.size.height * 0.5];
      }
      

 欢迎东方之珠的心上人葠加在二〇一九年十月设立的Windows Phone 应用开发专场活动。多位著名的微软最有价值专家Windows Phone和Client端开发MVP为你详细讲述Windows Phone应用开发,让您通过一清晨的时刻周密摸底Windows Phone开发的一切。与业界专家开始展览面对面包车型客车调换。通过这一次活动,能够让开发者驾驭Windows Phone的开发工具,所需理解的支出语言,技术架构。让设计师和制品经营精通Windows Phone的陈设性意见,怎么样升级利用的用户体验。让Windows Phone爱好者理解怎么发表应用和娱乐,在应用Windows Phone Store公布应用的长河中,需求留意什么常见的题材,支持大家更自在的透露应用程序,更迅捷地拓宽自个儿的施用和游戏 。 

加上“日历签到”控件


  • 将“日历签到”控件添加到控制器的 view 上

    - (void)viewDidLoad {
        [super viewDidLoad];
        // 添加“日历签到”视图
        self.calendarSignInView = [[IDCalendarSignInView alloc] init];
        [self.view addSubview:self.calendarSignInView];
        // 添加“签到”按钮
        self.signInButton = [[IDConfirmButton alloc] init];
        [self.signInButton setTitle:@"签到" forState:UIControlStateNormal];
        [self.signInButton addTarget:self action:@selector(signInButtonClick:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview:self.signInButton];
    }
    
  • 点击“签到”按钮,更新签到标签的情景

    - (void)signInButtonClick:(UIButton *)button {
        self.calendarSignInView.isSignInForToday = YES;
    }
    

迎接在法国首都地区的爱人们在三月与微软学者相聚在联合享用Windows Phone应用开发的好好! 
•超值技术大餐~~免费参预哦~~ 参预运动开发App就会得到免费的Windows Phone Token 
•除了免费的Windows Phone Token, 还有好多得天独厚礼品~~~ 
•精粹Infiniti,收获Infiniti,交换Infiniti,尽在二零一一年一月四日! 
•欢迎热爱新技巧,热爱学习的敌人报名加入! 

时间:2013年10月19日 周六 下午1点 -下午5点30分。 

地方:微软东京(Tokyo)望京Office (香岛大安市望京街利星行广场微软大厦3层培训室)。
公交:可乘坐公共交通536或是538在国风东京(Tokyo)站赴任即到。   

移动协会者及移动助教: 
MVP姜泳涛 
微博
Windows Phone Development MVP,TechED助教。首要从事Windows Phone开发,未来专注于Windows Phone平台技术的研商与推广。 再三再四三年收获Windows Phone development微软最有价值专家(MVP)称号。随着Windows Phone 8的公布,他将重点精力放到Windows Phone 8技术的读书中,致力于Windows Phone 8平台技术的钻研与推广。

出名Windows Phone 开发助教: 
Expression Blend MVP 李靖南:
微博 
托塔天王南,Client Development MVP,专注于用户体验的宏图与落到实处,小说包涵[城里人日记]、[超电压]、[知事]等。 

Windows Phone Development 马宁:
微博
曾任微软南美洲工程院软件工程师,从事Windows Embedded Compact开发工作. 参与微软事先, 三番五次四年取得”微软最有价值专家”称号,Windows Embedded 应用开发者,长时间从事Windows Embedded 集团级应用的付出及系统架构划设想计工作;Tech•艾德 和 MEDC 教授;《程序员》杂志移动支付专栏小编。 

Windows Phone Development 张欣:
微博
微软Windows Phone Development方向最有价值专家。十余年的系列开发和管制经验,历年来多次充当MEDC、Tech艾德、MSDN Webcast等Windows Phone方面包车型客车教程助教。近期从事于移动应用领域的技术斟酌和拓宽工作。

挪动日程: 

时间     1:00- 1:30 
课 程    签到,MVP项目介绍
讲 师    MVP

1:30- 2:30
Windows Phone 应用设计
李靖南 

2:30- 3:30
Windows Phone 应用开发
姜泳涛 

3:30- 4:10
Windows Phone 游戏应用开发、推广经验分享
马宁 
 
4:10- 5:00
Windows Phone
商店级应用分享
张欣 
 
5:00- 5:30
Q&A
MVP
 
活动表达和报名地方
www.aka.ms\mvpbeijing