iOS实现微信朋友圈与摇一摇功能

本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇一摇功能.

预览效果:

主要重点

1.整体架构

利用UITabBarController和UINavigationController配合实现.其中要注意定义基类,方便整体上的管理,例如对UINavigationController头部的颜色,字体和渲染颜色等设置.以及对UITabBarController的底部的渲染等.

[self.navigationBarsetBackgroundImage:[UIImageimageNamed:@"Dimensional-_Code_Bg"]forBarMetrics:UIBarMetricsDefault];   

[self.navigationBarsetTitleTextAttributes:@{
                       NSForegroundColorAttributeName:[UIColor whiteColor]
                      }];

[self.navigationBarsetTintColor:[UIColor whiteColor]];

2.发现界面和我的界面

利用UITableViewController和Plist文件实现界面的展示.实现过程中有采用数据模型或直接利用字典等方式.这里的实现比较简单,就不多说啦.

- (instancetype)initWithDict:(NSDictionary *)dict{

if (self = [super init]) {
  [selfsetValuesForKeysWithDictionary:dict];
}
return self;
}

+ (instancetype)pictureWithDict:(NSDictionary *)dict{

return [[self alloc]initWithDict:dict];
}

3.朋友圈功能的实现

这里面主要的难点在于朋友圈首页的下拉刷新效果的实现,和选择照片页的状态重用问题,以及照片的传递和代理的实现等.

朋友圈首页的下拉刷新效果:主要利用transform属性和scrollview的多种滚动状态.

- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView{
 self.dragging = YES;
}
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{

if (self.num == 0) {
  self.num ++;
  return;
}

CGFloat offsetY = scrollView.contentOffset.y;

CGFloat angle = -offsetY* M_PI / 30;

if (self.dragging == YES) {

  if (offsetY <= 110) {
    self.containerView.y = 10 + offsetY;

  }

}else {

  if (self.currentY < 120) {
    self.containerView.y = 10 + offsetY;
  }

}
self.activityView.transform = CGAffineTransformMakeRotation(angle);

}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollViewwillDecelerate:(BOOL)decelerate{

self.dragging = NO;

CGFloat currentY = self.containerView.y;
self.currentY = currentY;

}

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{

[UIViewanimateWithDuration:0.25animations:^{

  self.containerView.frame = CGRectMake(15, 120, 30, 30);
  self.activityView.transform = CGAffineTransformMakeRotation(2 * M_PI);
}];

}

其中照片的展示是采用UICollectionViewController来实现的.没有直接调用系统的相册,因此加大了难度.自定义了cell,并采用了代理方式来实现类与类之间的通信.

@protocol YYPictureCellDelegate
@optional
- (void)pictureCell:(YYPictureCell *)cellwithDidClickBtn:(UIButton *)btn;

@end

- (IBAction)clickSureBtn:(UIButton *)sender {

if ([self.delegaterespondsToSelector:@selector(pictureCell:withDidClickBtn:)]) {

  [self.delegatepictureCell:selfwithDidClickBtn:sender];
}
}

- (void)pictureCell:(YYPictureCell *)cellwithDidClickBtn:(UIButton *)btn{

if ((self.selectedBtn.count == 9) && (!btn.isSelected)) {

  UIAlertView *alert = [[UIAlertView alloc]initWithTitle:nilmessage:@"最多选取9张照片哦,亲!"delegate:nilcancelButtonTitle:@"确定"otherButtonTitles: nil];
  [alertshow];

  return;
}

btn.selected = !btn.isSelected;

NSIndexPath *indexPath = [self.collectionViewindexPathForCell:cell];

YYPictureModel *model = self.dataArray[indexPath.row];

if (btn.isSelected) {

  model.clickedBtn = YES;

  [self.selectedBtnaddObject:btn];
  [self.selImageArrayaddObject:model];

} else{

  model.clickedBtn = NO;
  [self.selectedBtnremoveObject:btn];
  [self.selImageArrayremoveObject:model];
}

if (self.selectedBtn.count > 0) {

  self.doneBtn.enabled = YES;
  self.doneBtn.selected = YES;
  self.previewBtn.enabled = YES;
  self.previewBtn.selected = YES;
}else {

  self.doneBtn.enabled = NO;
  self.doneBtn.selected = NO;
  self.previewBtn.enabled = NO;
  self.previewBtn.selected = NO;
}
}

4.摇一摇功能的实现

摇一摇功能的本身实现十分简单,就是调用系统的两个方法即可.难点在于动画效果.其实这里的动画效果也不是很难.主要是计算有点复杂.可能是我在网上搜索到的素材有点不合适.导致要考虑各个控件的frame问题…

//实现摇一摇功能
- (void)motionBegan:(UIEventSubtype)motionwithEvent:(UIEvent *)event{

self.upLine.hidden = NO;
self.downLine.hidden = NO;
[UIViewanimateWithDuration:0.6animations:^{

  self.upImageView.y -= 60;
  self.upLine.y -= 60;

  self.downImageView.y += 60;
  self.downLine.y += 60;

}completion:^(BOOL finished) {

  [UIViewanimateWithDuration:0.6animations:^{

    self.upImageView.y += 60;
    self.upLine.y += 60;

    self.downImageView.y -= 60;
    self.downLine.y -= 60;

  }completion:^(BOOL finished) {

    self.upLine.hidden = YES;
    self.downLine.hidden = YES;

    //弹出搜索框
    [self showSearchView];
    [self.searchViewperformSelector:@selector(removeFromSuperview)withObject:nilafterDelay:2.4];
  }];

}];
}
//摇一摇结束后
- (void)motionEnded:(UIEventSubtype)motionwithEvent:(UIEvent *)event{

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • iOS实现“摇一摇”与“扫一扫”功能示例代码

    "摇一摇"功能的实现: iPhone对 "摇一摇"有很好的支持,总体说来就两步: 在视图控制器中打开接受"摇一摇"的开关; - (void)viewDidLoad { // 设置允许摇一摇功能 [UIApplication sharedApplication].applicationSupportsShakeToEdit = YES; // 并让自己成为第一响应者 [self becomeFirstResponder]; } 在"摇一摇

  • iOS仿微信摇一摇动画效果加震动音效实例

    众所周知, 微信中的摇一摇功能: 搜索人/歌曲/电视,同样在一些其他类APP中也有一个摇一摇签到, 摇一摇随机选号等功能,下面以微信摇一摇功能来介绍实现原理. 对于摇一摇功能, 在iOS中系统默认为我们提供了摇一摇的功能检测API. iOS 中既然已经提供了接口, 我们直接调用就好了. #import <QuartzCore/QuartzCore.h> #import <AudioToolbox/AudioToolbox.h> 实现原理 1. 监听摇一摇方法 // 摇一摇开始 -

  • IOS 实现摇一摇的操作

    要实现摇一摇的功能,类似于微信的摇一摇 方法1:通过分析加速计数据来判断是否进行了摇一摇操作(比较复杂) 方法2:iOS自带的Shake监控API(非常简单) 本文介绍方法2: 判断摇一摇的步骤: 1)检测到开始摇动 - (void)motionBegan:(UIEventSubtype)motion withEvent:(UIEvent *)event{ //检测到后可做一些处理 } 2)摇一摇被取消或中断 - (void)motionCancelled:(UIEventSubtype)mot

  • iOS实现微信朋友圈视频截取功能

    序言 微信现在这么普及,功能也做的越来越强大,不知大家对于微信朋友圈发视频截取的功能或者苹果拍视频对视频编辑的功能有没有了解(作者这里也猜测,微信的这个功能也是仿苹果的).感觉这个功能确实很方便实用,近来作者也在研究音视频功能,所以就实现了一下这个功能. 功能其实看着挺简单,实现过程也踩了不少坑.一方面记录一下:另一方面也算是对实现过程的再一次梳理,这样大家看代码也会比较明白. 效果 我们先看看我实现的效果 实现 实现过程分析 整个功能可以分为三部分: 视频播放 这部分我们单独封装一个视频播放器

  • Android 实现微信,微博,微信朋友圈,QQ分享的功能

    Android 实现微信,微博,微信朋友圈,QQ分享的功能 一.去各自所在的开发者平台注册相应的Key值:引入相关jar包.权限等 二.ShareUtil工具类 import android.app.Activity; import android.content.Context; import android.content.pm.PackageInfo; import android.content.pm.PackageManager; import android.graphics.Bit

  • iOS版微信朋友圈识别图片位置信息 如何实现?

    iOS版微信的一项功能:当你在朋友圈发照片的时候,就可以根据照片的拍摄地点显示地理位置.消息一出,网友们便纷纷开始尝试新功能的玩法. 在微信朋友圈上传图片时,点击位置可以自动识别照片拍摄的地理位置. 过去我们发送朋友圈时,可以显示自己所在的位置信息,而现在自动读取照片拍摄位置让不少人联想到了图像识别技术.事实上,微信所做的并没有这么复杂,有业内人士告诉雷锋网新功能是基于图片位置信息(即Exif的GPS定位信息)实现的. 什么是Exif? Exif(Exchangeable Image File)

  • iOS实现微信朋友圈与摇一摇功能

    本Demo为练手小项目,主要是熟悉目前主流APP的架构模式.此项目中采用MVC设计模式,纯代码和少许XIB方式实现.主要实现了朋友圈功能和摇一摇功能. 预览效果: 主要重点 1.整体架构 利用UITabBarController和UINavigationController配合实现.其中要注意定义基类,方便整体上的管理,例如对UINavigationController头部的颜色,字体和渲染颜色等设置.以及对UITabBarController的底部的渲染等. [self.navigationB

  • IOS实现微信朋友圈相册评论界面的翻转过渡动画

    先来看看实现的类似效果图: 在图片界面点击右下角的查看评论会翻转到评论界面,评论界面点击左上角的返回按钮会反方向翻转回图片界面,真正的实现方法,与传统的导航栏过渡其实只有一行代码的区别,让我们来看看整体的实现. 首先我们实现图片界面,这个界面上有黑色的背景,一张图片和一个查看评论的按钮: - (void)viewDidLoad { [super viewDidLoad]; self.view.backgroundColor = [UIColor blackColor];// 背景设为黑色 //

  • Android 仿微信朋友圈点赞和评论弹出框功能

    贡献/下载源码:https://github.com/mmlovesyy/PopupWindowDemo 本文简单模仿微信朋友圈的点赞和评论弹出框,布局等细节请忽略,着重实现弹出框.发评论,及弹出位置的控制. 1. 微信弹出框 微信朋友圈的点赞和评论功能,有2个组成部分: 点击左下角的"更多"按钮,弹出对话框: 点击评论,弹出输入框,添加评论并在页面中实时显示: 微信朋友圈点赞和评论功能 2. 实际效果 本文将建一个 ListView,在其 Item 中简单模仿微信的布局,然后着重实现

  • Android仿微信朋友圈全文、收起功能的实例代码

    前言 一般在社交APP中都有类似朋友圈的功能,其中发表的动态内容很长的时候不可能让它全部显示.这里就需要做一个仿微信朋友圈全文.收起功能来解决该问题.在网上看到一个例子-->http://www.jb51.net/article/105251.htm,写的很不错,但是有个bug,他这个Demo只有在条目固定的时候才正常,当增加.删除条目的时候会出现全文.收起显示混乱的问题.原因是他使用了固定的position作为key来保存当前显示的状态.这篇文章在他的基础上进行优化. 效果图 具体代码 (详细

  • Vue.js实现模拟微信朋友圈开发demo

    我用Vue.js实现微信朋友圈的一些功能,实现展示朋友圈,评论,点赞. 先构造一个vue的实例,对会更改的数据进行双向绑定, 我用JSON伪造模版数据,先实现显示朋友圈的效果,使用v-for方法去循环ALLFeeds中的每一项item生成包括name.content.time在内的各项数据. 微信朋友圈实现效果 HTML代码: <div class="border" v-for="item in AllFeeds" track-by="$index&

  • Android GridView仿微信朋友圈显示图片

    最近项目要求上传多图并且多图显示,而且要规则的显示,就像微信朋友圈的图片显示一样. 利用GridView再适合不过了,GridView可以动态加载图片的数量,而且还比较规律,下面说一下自己的思路: 1.获取网络图片 2.初始化gridview,自定义适配器 3.根据图片数量设置gridview的列数 4.更新适配器 下面贴上部分源码并给大家解析一下 一.首先是GridView的item <com.view.SquareLayout xmlns:android="http://schemas

  • Android 高仿微信朋友圈拍照上传功能

    模仿微信朋友圈发布动态,输入文字支持文字多少高度自增,有一个最小输入框高度,输入文字有限制,不过这些都很easy! 1. PhotoPicker的使用 这是一个支持选择多张图片,点击图片放大,图片之间左右滑动互相切换的库,同时支持图片删除的库,效果类似微信. (1) 添加PhotoPicker的架包 (2) 使用 选择图片:安卓6.0以后需要在代码中添加读写sd卡和相机的权限 当然清单文件中也需要添加的 PhotoPicker.builder() .setPhotoCount(maxPhoto)

随机推荐