【iOS】3GShare仿写
【iOS】3GShare仿写
文章目录
- 【iOS】3GShare仿写
- 登陆注册界面
- 主页
- 搜索
- 文章
- 活动
- 我的
- 总结
登陆注册界面
这个界面的ui东西不多,主要就是几个输入框及对输入内容的一些判断
登陆界面
//这里设置了一个初始密码并储存到NSUserDefaults中
NSUserDefaults *defaults = [NSUserDefaults standardUserDefaults];if (![defaults objectForKey: @"UserAccounts"]) {NSDictionary *defaultUser = @{@"a": @"1"};[defaults setObject: defaultUser forKey: @"UserAccounts"];}
self.textFieldUser = [[UITextField alloc] initWithFrame: CGRectMake(70, 320, 250, 46)];self.textFieldUser.placeholder = @"请输入用户名";self.textFieldUser.borderStyle = UITextBorderStyleRoundedRect;self.textFieldUser.leftView = [self createLefticonViewWithImageName: @"账户.png"];self.textFieldUser.leftViewMode = UITextFieldViewModeAlways;self.textFieldcode = [[UITextField alloc] initWithFrame: CGRectMake(70, 390, 250, 46)];self.textFieldcode.placeholder = @"请输入密码";self.textFieldcode.borderStyle = UITextBorderStyleRoundedRect;self.textFieldcode.secureTextEntry = YES;self.textFieldcode.leftView = [self createRighticonViewWithImageName: @"解锁.png"];self.textFieldcode.leftViewMode = UITextFieldViewModeAlways;UIButton *loginBtn = [UIButton buttonWithType: UIButtonTypeSystem];loginBtn.frame = CGRectMake(85, 470, 90, 40);[loginBtn setTitle: @"登陆" forState: UIControlStateNormal];[loginBtn addTarget: self action: @selector(handleLoginBtn) forControlEvents: UIControlEventTouchUpInside];loginBtn.tintColor = [UIColor whiteColor];loginBtn.layer.borderColor = [UIColor whiteColor].CGColor;loginBtn.layer.borderWidth = 1.0;loginBtn.layer.cornerRadius = 8.0;loginBtn.clipsToBounds = YES;[self.view addSubview: loginBtn];
NSString *username = self.textFieldUser.text;NSString *password = self.textFieldcode.text;if (username.length > 15 || password.length > 15) {UIAlertController *alert2 = [UIAlertController alertControllerWithTitle: @"错误" message: @"账号或密码过长" preferredStyle: UIAlertControllerStyleAlert];[alert2 addAction: [UIAlertAction actionWithTitle: @"确定" style: UIAlertActionStyleDefault handler: nil]];[self presentViewController: alert2 animated: YES completion: nil];return;}NSDictionary *userDict = [[NSUserDefaults standardUserDefaults] objectForKey: @"UserAccounts"];NSString *savedPassword = userDict[username];if (savedPassword && [savedPassword isEqualToString: password]) {MainTabBarController *mainTabBar = [[MainTabBarController alloc] init];self.view.window.rootViewController = mainTabBar;} else {UIAlertController *alertright = [UIAlertController alertControllerWithTitle: @"错误" message: @"账号或密码错误" preferredStyle: UIAlertControllerStyleAlert];[alertright addAction: [UIAlertAction actionWithTitle: @"确定" style: UIAlertActionStyleDefault handler: nil]];[self presentViewController: alertright animated: YES completion: nil];return;}
主要是通过UITextField代理方法在确认后判断框中的字符是否符合标准,再用个警告对话框进行提示
注册界面其他的跟登录界面差不多,主要是要用一个协议传值判断后把新的账号密码传入到前面设置的defaultUser中,关于协议传值的内容前面博客中有所写出,不多阐述
主页
主页界面大体由上面的轮播图和下面的自定义单元格组成
里面比较有意思的内容就是点击下面第一个单元格时可进入其详情界面,且这里的点赞功能是正常且完善的
这里是同时使用了属性传值与协议传值,属性往里传,协议往外传
详情界面的部分代码:
@protocol SendViewControllerDelegate <NSObject>- (void)didUpdateLikeStatus:(BOOL)isLiked likeCount:(NSInteger)likeCount;@end@interface SendViewController : UIViewController@property (nonatomic, copy) NSString *likeCountText;
@property (nonatomic, assign) BOOL isLiked;
@property (nonatomic, weak) id<SendViewControllerDelegate> delegate;
@property (nonatomic, strong) UIButton *like;@property (nonatomic, strong) UILabel *likecount;
@property (nonatomic, strong) UIImageView *looking;
@property (nonatomic, strong) UIImageView *sharing;
@end
self.like = [UIButton buttonWithType:UIButtonTypeCustom];[self.like setImage:[UIImage imageNamed:@"liking.png"] forState:UIControlStateNormal];[self.like addTarget:self action:@selector(toggleLike) forControlEvents:UIControlEventTouchUpInside];self.like.frame = CGRectMake(235, 75, 30, 30);[self.like setImage:[UIImage imageNamed:(self.isLiked ? @"likingred.png" : @"liking.png")] forState:UIControlStateNormal];[scrollView addSubview:self.like];self.likecount = [[UILabel alloc] init];self.likecount.frame = CGRectMake(265, 80, 40, 20);self.likecount.text = self.likeCountText;[scrollView addSubview: self.likecount];scrollView.contentSize = CGSizeMake(self.view.frame.size.width, CGRectGetMaxY(vImage.frame) + 20);
}
- (void)toggleLike {self.isLiked = !self.isLiked;NSInteger currentCount = [self.likecount.text integerValue];if (self.isLiked) {currentCount += 1;[self.like setImage:[UIImage imageNamed:@"likingred.png"] forState:UIControlStateNormal];} else {currentCount -= 1;[self.like setImage:[UIImage imageNamed:@"liking.png"] forState:UIControlStateNormal];}self.likecount.text = [NSString stringWithFormat:@"%ld", (long)currentCount];if ([self.delegate respondsToSelector: @selector(didUpdateLikeStatus:likeCount:)]) {[self.delegate didUpdateLikeStatus: self.isLiked likeCount: currentCount];}
}
搜索
这个界面的内容主要是可以点击的一些按钮,可以识别输入字符跳转的一个界面还有一个上传界面
UITextField *searchField = [[UITextField alloc] initWithFrame:CGRectMake(16, 150, self.view.frame.size.width - 32, 36)];searchField.borderStyle = UITextBorderStyleRoundedRect;searchField.placeholder = @"搜索 用户名 作品分类 文章";searchField.clearButtonMode = UITextFieldViewModeWhileEditing;searchField.returnKeyType = UIReturnKeySearch;searchField.delegate = self;UIImageView *leftImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"搜索.png"]];leftImageView.contentMode = UIViewContentModeScaleAspectFit;leftImageView.frame = CGRectMake(0, 0, 20, 20);UIView *leftViewContainer = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 30, 20)];[leftViewContainer addSubview:leftImageView];leftImageView.center = leftViewContainer.center;searchField.leftView = leftViewContainer;searchField.leftViewMode = UITextFieldViewModeAlways;searchField.backgroundColor = [UIColor colorWithWhite:0.9 alpha:1.0];
其实这个界面主要的还是上传界面
这个上传界面的图片墙我使用UICollectionView设置的,若点击一张图片则会储存到一个可变数组当中,再次点击即会取消其被包含的状态,最后会把数组中存储的照片数量和选中的第一张图片返回代替放在选择图片上面
self.view.backgroundColor = [UIColor whiteColor];self.images = @[@"头像1.jpg", @"头像2.jpg", @"头像3.jpg", @"头像4.jpg", @"头像5.jpg", @"头像6.jpg", @"头像7.jpg", @"头像8.jpg", @"头像9.jpg"];self.selectedIndexes = [NSMutableArray array];//设置collectionview的所处的位置UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];layout.itemSize = CGSizeMake(100, 100);layout.minimumLineSpacing = 20;layout.minimumInteritemSpacing = 10;layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);self.collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];self.collectionView.delegate = self;self.collectionView.dataSource = self;self.collectionView.backgroundColor = [UIColor whiteColor];[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];[self.view addSubview:self.collectionView];
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {NSNumber *indexNumber = @(indexPath.item);if ([self.selectedIndexes containsObject:indexNumber]) {[self.selectedIndexes removeObject:indexNumber];} else {[self.selectedIndexes addObject:indexNumber];}[collectionView reloadItemsAtIndexPaths:@[indexPath]];
}- (void)doneAction {UIImage *selectedImage = nil;if (self.selectedIndexes.count > 0) {NSNumber *firstIndex = self.selectedIndexes.firstObject;selectedImage = [UIImage imageNamed:self.images[firstIndex.integerValue]];}if ([self.delegate respondsToSelector:@selector(didSelectImage: andCount:)]) {[self.delegate didSelectImage:selectedImage andCount:self.selectedIndexes.count];}[self dismissViewControllerAnimated:YES completion:nil];[self.navigationController popViewControllerAnimated:YES];
}
文章
这个界面是一个分栏控件管理的三个视图控制器,每个视图控制器都是一个分别的自定义cell,并且在其底下有一个横向的滚动视图以确保其可以进行左右滑动
self.segmentedControl = [[UISegmentedControl alloc] initWithItems:@[@"精选文章", @"热门推荐", @"全部文章"]];self.segmentedControl.frame = CGRectMake(0, 100, self.view.bounds.size.width , 40);self.segmentedControl.selectedSegmentIndex = 0;[self.segmentedControl addTarget:self action:@selector(segmentChanged:) forControlEvents:UIControlEventValueChanged];self.segmentedControl.backgroundColor = [UIColor whiteColor];UIFont *font = [UIFont systemFontOfSize:18];NSDictionary *attributes = @{NSFontAttributeName: font};[self.segmentedControl setTitleTextAttributes:attributes forState:UIControlStateNormal];[self.segmentedControl setTitleTextAttributes:attributes forState:UIControlStateSelected];[self.view addSubview:self.segmentedControl];self.firstVC = [[FirstVC alloc] init];self.secondVC = [[SecondVC alloc] init];self.thirdVC = [[ThirdVC alloc] init];CGFloat yOffset = CGRectGetMaxY(self.segmentedControl.frame);CGFloat scrollHeight = self.view.bounds.size.height - yOffset;self.scrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(0, yOffset, self.view.bounds.size.width, scrollHeight)];self.scrollView.pagingEnabled = YES;self.scrollView.showsHorizontalScrollIndicator = NO;self.scrollView.delegate = self;self.scrollView.contentSize = CGSizeMake(self.view.bounds.size.width * 3, scrollHeight);[self.view addSubview:self.scrollView];
活动
这个界面非常简单,只是一个简单的三个自定义的单元格
我的
这个界面的东西最多也最繁琐,但是总的看来也就这么几个东西:
第一个就是需要跨多个界面进行传值进行保留
这里使用的是强属性引用来传值的方法,即设置下一个视图控制器为上一个的属性,若不为空则使用上次创建的那个视图来保存之前设置的状态
- (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSIndexPath *)indexPath {switch (indexPath.row) {case 0: {if (self.setDatavc == nil) {self.setDatavc = [[SetDataViewController alloc] init];[self.navigationController pushViewController: self.setDatavc animated: YES];break;} else {[self.navigationController pushViewController: self.setDatavc animated: YES];break;}}case 1: {ChangeWordVC *vc = [[ChangeWordVC alloc] init];[self.navigationController pushViewController:vc animated:YES];break;}case 2: {if (self.messagesetvc == nil) {self.messagesetvc = [[MessageSetVC alloc] init];[self.navigationController pushViewController: self.messagesetvc animated: YES];break;} else {[self.navigationController pushViewController: self.messagesetvc animated: YES];break;}}case 3: {UIAlertController *alert3 = [UIAlertController alertControllerWithTitle: @"这是一个古老的软件" message: nilpreferredStyle: UIAlertControllerStyleAlert];[alert3 addAction: [UIAlertAction actionWithTitle: @"确定" style: UIAlertActionStyleDefault handler: nil]];[self presentViewController: alert3 animated: YES completion: nil];break;}case 4: {UIAlertController *alert4 = [UIAlertController alertControllerWithTitle: @"已清理缓存" message: nilpreferredStyle: UIAlertControllerStyleAlert];[alert4 addAction: [UIAlertAction actionWithTitle: @"确定" style: UIAlertActionStyleDefault handler: nil]];[self presentViewController: alert4 animated: YES completion: nil];break;}default:break;}[tableView deselectRowAtIndexPath:indexPath animated:YES];
}
第二个就是一个可以对密码进行修改并确认两次密码是否一样的,因不需要影响登陆进来的原始密码,只是对两次输入的密码进行确认就行了,所以没啥东西掠过
第三个就是里面有关一个简单的聊天室的内容
即每次发送消息都切换一个发送方,并根据发送方的不同分别进行相应的布局,在前面记得要设置每方气泡的最大宽度
if (self.inputField.text.length == 0) {return;}static int count = 0;NSString *text = self.inputField.text;NSString *avatar = (count % 2 == 0) ? @"img03.png" : @"img12.png";MessageType type = (count % 2 == 0) ? MessageTypeSent : MessageTypeReceived;NSString *time = [NSString stringWithFormat: @"10:%02d", count];Message *message = [[Message alloc] initWithText:text time:time avatar:avatar type:type];[self.messages addObject:message];[self.tableView reloadData];[self scrollToBottom];self.inputField.text = @"";count++;
}- (void)keyboardWillShow:(NSNotification *)notification {NSDictionary *userInfo = notification.userInfo;CGRect keyboardFrameInWindow = [userInfo[UIKeyboardFrameEndUserInfoKey] CGRectValue];CGRect keyboardFrame = [self.view convertRect:keyboardFrameInWindow fromView:nil];CGFloat keyboardHeight = keyboardFrame.size.height;[UIView animateWithDuration:0.25 animations:^{CGRect inputFrame = self.inputField.superview.frame;CGFloat tabBarHeight = self.tabBarController.tabBar.frame.size.height;inputFrame.origin.y = self.view.bounds.size.height - keyboardHeight - inputFrame.size.height + tabBarHeight;self.inputField.superview.frame = inputFrame;CGRect tableFrame = self.tableView.frame;tableFrame.size.height = inputFrame.origin.y;self.tableView.frame = tableFrame;[self scrollToBottom];}];
同时也要有点击键盘时的上抬,这里记得要考虑减去下面导航栏的高度,否则可能会导致那个输入框上移过多或者无法回到正常位置,关于聊天室更加具体明确的写出参考学长的博客,「OC」实现简单的聊天室界面
总结
这个项目算是暑假中相当繁琐的一个,能更好的锻炼我们的各种传值方式和对各种控件的掌握