QQ好友列表很炫?其实很简单!

相信地球人都用QQ的,我们每天都会打开QQ,但是你去注意到他是怎么实现的吗?

话不多说先上图:

该数据都是用plist文件存储

接下来带你看下plist文件分析下数据结构

图一:

每一组都是一个组模型,一组相当于一个好友分组。

图二

每组里面都有一个friends数组存放该组的好友数

@interface JFFriend : NSObject
/**
 *  头像
 */
@property (nonatomic ,copy)NSString *icon;
/**
 *  个性签名
 */
@property (nonatomic ,copy)NSString *intro;
/**
 *  名字
 */
@property (nonatomic ,copy)NSString *name;
/**
 *  getter这样写的好处是控制get方法在需要的时候非常顺
 *  苹果官方建议这样写:规范
 */
@property (nonatomic , assign , getter=isvip) BOOL vip;

+(instancetype)friendWithDict:(NSDictionary *)dict;
-(instancetype)initWithDict:(NSDictionary *)dict;

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

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

-(instancetype)initWithDict:(NSDictionary *)dict{
    if (self = [super init]) {
        [self setValuesForKeysWithDictionary:dict];
    }
    return self;
}
#import <UIKit/UIKit.h>
@class JFFriendGroup, JFHeaderView;

/**
 *  定义代理一般以控件名字家delegate,这是规范
 */
@protocol JFHeaderViewDelegate <NSObject>
@optional
-(void)headerViewDidClick:(JFHeaderView*)view;

@end

@interface JFHeaderView : UITableViewHeaderFooterView

+(instancetype)headerViewWithTableView:(UITableView * )tableView;

@property(nonatomic, strong)JFFriendGroup *group;
/**
 *  这里用id类型是返回任意类型,不依赖任何一个类
 *  也就是在任何一个类里面都可以使用
 */
@property (nonatomic, weak)id<JFHeaderViewDelegate>delegate;
#import "JFHeaderView.h"
#import "JFFriendGroup.h"
#define WIDTH  (self.frame.size.width)
#define HEIGHT  (self.frame.size.height)

@interface JFHeaderView ()
@property(nonatomic, weak)UILabel *countView;
@property(nonatomic, weak)UIButton *nameView;

@end
@implementation JFHeaderView

+(instancetype)headerViewWithTableView:(UITableView * )tableView{
    static NSString *headId = @"headId";
    JFHeaderView *headerView = [tableView dequeueReusableHeaderFooterViewWithIdentifier:headId];
    if (headerView == nil) {
        headerView = [[JFHeaderView alloc]initWithReuseIdentifier:headId];
    }
    return headerView;

}

/**
 *  在这个初始化方法中,JFHeaderView的frame\bounds没有值
 */
-(id)initWithReuseIdentifier:(NSString *)reuseIdentifier{
    if (self = [super init]) {
        //添加子控件
        //1.添加按钮
        UIButton *nameView = [UIButton buttonWithType:UIButtonTypeCustom];
        [nameView setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg"] forState:UIControlStateNormal];
        [nameView setBackgroundImage:[UIImage imageNamed:@"buddy_header_bg_highlighted"] forState:UIControlStateHighlighted];
        //设置箭头
        [nameView setImage:[UIImage imageNamed:@"buddy_header_arrow"] forState:UIControlStateNormal];
        [nameView setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
        //内容左对齐
        nameView.contentHorizontalAlignment = UIControlContentHorizontalAlignmentLeft;
        //设置按钮的内边距
        nameView.titleEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
        nameView.contentEdgeInsets = UIEdgeInsetsMake(0, 10, 0, 0);
        [nameView addTarget:self action:@selector(nameViewClick) forControlEvents:UIControlEventTouchUpInside];
        [self.contentView addSubview:nameView];
        self.nameView = nameView;
        //2.添加好友数
        UILabel *countView = [[UILabel alloc]init];
        countView.textAlignment = NSTextAlignmentRight;
        countView.textColor = [UIColor grayColor];
        [self.contentView addSubview:countView];
        self.countView =  countView;
    }
    return  self;

}
/**
 *  当一个控件的frame发生改变时就会调用
 *  一般在这里布局内部的子控件(设置子控件的freme)
 */
-(void)layoutSubviews{

    //注:这个地方一定要调用父类的方法
    [super layoutSubviews];

    //1.设置按钮的freme
    self.nameView.frame = self.bounds;
    //2.设置好友数的frame
    CGFloat countY = 0;
    CGFloat countH =  HEIGHT;
    CGFloat countW = 150;
    CGFloat countX = WIDTH - 10 - countW;
    self.countView.frame = CGRectMake(countX, countY, countW, countH);

}

-(void)setGroup:(JFFriendGroup *)group{
    _group = group;
    //1.设置组名
    [self.nameView setTitle:group.name forState:UIControlStateNormal];
    //2.设置好友数(在线数/总数)
    self.countView.text = [NSString stringWithFormat:@"%d/%lu",group.online,(unsigned long)group.friends.count];;

}

-(void)nameViewClick{
    //1.修改模型标记(状态取反)
    self.group.opened = !self.group.isOpened;
    if ([self.delegate respondsToSelector:@selector(headerViewDidClick:)]) {
        [self.delegate headerViewDidClick:self];
    }

}
/**
 *  但一个控件被添加到控件的时候会调用
 */
-(void)didMoveToSuperview{
    if (self.group.opened) {
        self.nameView.imageView.transform = CGAffineTransformMakeRotation(M_PI_2);
    }else{
        self.nameView.imageView.transform = CGAffineTransformMakeRotation(0);

    }
}

以上是部分代码,有问题的可以关注我然后提出来我们一起探讨

祝好:2015 - 08 - 09 22 - 53。

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-10-14 14:04:53

QQ好友列表很炫?其实很简单!的相关文章

基于Qt的类似QQ好友列表抽屉效果的实现

前段时间在忙毕业设计,所以一直没有更新博客.今天答辩完以后,将对我的毕业设计进行模块展示,供Qt初学者进行参考. 毕业设计题目:Linux系统下基于Qt的局域网即时通信系统设计与实现 其中我有一个类似于QQ的好友列表,然后对好友可以进行分组管理,毕设中具体效果图如下: 网上查寻到的设计思路: 1.采用QToolBox的方式,虽然看起来有点样子,但是并不是我们所熟悉的好友列表,比如:http://blog.csdn.net/qianguozheng/article/details/6719074

ExpandableListView仿QQ好友列表

本例中,对ExpandableListView中的数据进行了封装,分为两个JavaBean,一个为Group类表示组信息,一个Child类表示该组下子列表信息: Group: public class Group { private String groupName;//分组名 private List<Child> childList;//该分组写子列表 public String getGroupName() { return groupName; } public void setGro

iOS TableView实现QQ好友列表(三)

上节我们讲到如何展示好友信息 iOS TableView实现QQ好友列表(二) http://blog.csdn.net/lwjok2007/article/details/46549111 接下来我们将分组点击的时候折叠起来. 首先新建一个可变字典用来存储当前列表是否展示 NSMutableArray *selectedArr;//控制列表是否被打开 selectedArr=[[NSMutableArray alloc]init]; 根据前两节所讲,我们讲分组名称放在section的heade

仿QQ好友列表界面的实现

TableView有2种style:UITableViewStylePlain 和 UITableViewStyleGrouped. 但是QQ好友列表的tableView给人的感觉似乎是2个style效果都有,但是tableView不能实现2种效果同时存在. 其实只是用到了Plain这个style,只是在cell的个数显示上做了个处理(个人见解,希望可以帮到有需要的人.....) 当通讯录那一组的cell的组头视图中的button是普通状态下的时候,并不是不显示cell,而是显示一个没有任何内容

iOS-QQ好友列表 iOS 页面间几种传值方式(属性,代理,block,单例,通知)

主要是 点击按钮实现下拉 刷新数据 页面间传值 // // HMFriendsModel.h // QQ好友列表 // // Created by YaguangZhu on 15/9/1. // Copyright (c) 2015年 YaguangZhu. All rights reserved. // #import <Foundation/Foundation.h> @interface HMFriendsModel : NSObject @property(nonatomic,cop

UI基础--UITableView实现仿QQ好友列表页面

需求:类似于QQ好友列表页面的显示,有好友分组,有好友数量,在线人数,vip会员.展开分组时显示分组好友,合并分组时不显示:具体效果图如下: 分析: 1.展开分组时显示分组好友,该功能可以使用显示UITableViewCell的数据即可: 2.分组头可以考虑使用一个headerView来实现: 示例文件结构: 具体实现步骤: 1.自定义数据模型类,由于plist文件中包含了2个字典,所以需要写2个数据模型: 2.自定义cell,属性包括数据模型以及生成可重用cell的方法,由于系统自带的子控件即

[iOS基础控件 - 6.9.3] QQ好友列表Demo TableView

A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 B.实现步骤 1.编写MVC结构 (1)根据plist文件结构,编写model,使用嵌套型 1 // 2 // FriendGroup.h 3 // FriendsList 4 // 5 // Created by hellovoidworld on 14/12/12. 6 // Copyright (c) 2014

【iOS基础控件 - 13】【Demo 】QQ好友列表TableView

A.需求 1.使用plist数据,展示类似QQ好友列表的分组.组内成员显示缩进功能 2.组名使用Header,展示箭头图标.组名.组内人数和上线人数 3.点击组名,伸展.缩回好友组 code source: B.实现步骤 1.编写MVC结构 (1)根据plist文件结构,编写model,使用嵌套型 1 // 2 // FriendGroup.h 3 // FriendsList 4 // 5 // Created by hellovoidworld on 14/12/12. 6 // Copyr

tableView练习 -- QQ好友列表

LWTViewController.h // // LWTViewController.h // tableView练习 -- QQ好友列表 // // Created by apple on 14-6-1. // Copyright (c) 2014年 lwt. All rights reserved. // #import <UIKit/UIKit.h> @interface LWTViewController : UITableViewController @end LWTViewCon

仿qq好友列表

模仿qq好友列表布局,可收缩.展开 下载地址:http://www.devstore.cn/code/info/940.html 运行截图: