iOS 仿网易APP界面封装

目录 我是代码

  1. 字体放大
  2. 颜色RGBA
  3. 滑块
  4. 内容类型
  5. 实现效果方法
  6. Layout, 旋转
  7. CRUD
  8. cocoaPods
  9. 使用
  10. 问答
    个人测试有限, 如果有什么问题请评论或issue我 GitHub
style.gif

1. 字体放大


zoom.gif

一开始选择的是UIButton, 改变UIFont, 效果如上, 如以上下抖动的方式增减, UILable也同样, 找不到其他方式. 最后用的是缩放, 问题是连UIButton整个控件都会缩放, 理想中效果想要只缩放里面的UILable.

出现的问题 : 不影响视觉效果, 影响可能多的自定义
UIButton 自定义的时候背景色只能设置它的容器->UIScroll
滚动的时候要取原来的x坐标,width等

2. 颜色RGBA


一开始仿的是网易新闻的APP, 黑>红, 想半天没明白, 后来对照了RGB,
黑 (R:0 G:0 B:0)
红 (R:0 G:255 B:0) 好了, 问题解决了. 之后就扩展了RGBA, 不过本人色弱, 不同值之间转换时颜色效果我是忽略了

自定义: 
    YFTagItemConfigration block = ^UIButton *(UIButton *itemBtn, NSUInteger index){
        if (index == 0) {  // 选中状态 注意全是 UIControlStateNormal
            [itemBtn setTitleColor:[UIColor colorWithRed:0.4 green:0.0 blue:1.0 alpha:0.3] forState:UIControlStateNormal];
        }else {            // 默认状态
            [itemBtn setTitleColor:[UIColor colorWithRed:1.0 green:0.0 blue:1.0 alpha:1.0] forState:UIControlStateNormal];
        }
        itemBtn.titleLabel.font = [UIFont systemFontOfSize:15]; // 大小按缩放比例
        return itemBtn;
    };

3. 滑块


扇贝APP, 有变宽度的效果. 还好开始时就想到给滑块加个容器, 好处就很明显了, 移动的时候控制容器, 滑块的宽度重写容器的setter就可以, 宽度可以自定义, 也可以根据标签串长度+自定义数值

typedef NS_ENUM(NSUInteger, YFSliderType) {
    YFSliderTypeNone,           // 没有
    YFSliderTypeTop,            // 上面, 放在标签ScrollView
    YFSliderTypeMid,            // 中间
    YFSliderTypeBottom,         // 下面
    YFSliderTypeBottomAlone     // 下面独立, 宽度和标签ScrollView一样的UIScrollView
};

4. 内容类型


可以的UIViewController 或 UIView , 且两者嵌套
切换时需要立即刷新, 我用的是 继承或Category
如果需要重用UIViewController, 请看 Demo


// 获取当前屏幕显示的viewcontroller
- (UIViewController *)viewController:(UIView *)view
{
    UIResponder *responder = view;
    while ((responder = [responder nextResponder]))
        if ([responder isKindOfClass: [UIViewController class]])
            return (UIViewController *)responder;
    // If the view controller isn't found, return nil.
    return nil;
}

嵌套时效果
滚动内层时直接调的是外层的UIScroll(斗鱼APP) : 内层.ctScroll.scrollEnabled = NO;
默认调的是内层自己的, 只要是两个都写 delegate = self;

5. 实现效果方法


  1. 区分左右滑, 上一个, 下一个 UIButton
  2. 移动点: 滚动内容里转化百分比到标签的UIScrollView.contentOffset ,
    总距离: 两个UIButton.x 的间距
    每个点变化: RGBA, 滑块宽度, / 总距离 得到的比例 * 缩放

6. Layout, 旋转


适配Xib: - (void)layoutSubviews 获得的frame正确
如果Xib控件之前有一个代码写的控件 - (void)awakeFromNib 中获取的frame有效, 如果全是Xib, 获取的frame就有问题, 哪怕你调用

    [self setNeedsLayout];
    [self layoutIfNeeded];

获取的frame也会出错, 最后只能重写代码

得到的经验
初始化只配置数据, - (void)layoutSubviews 配置frame

7. CRUD


黄易的效果, 包括改变完之后直接对比之前的数据

// 调用之前, 主控制器先改变对应数据的CRUD, 以下方法会调用代理, 免得越界
/**
 *  增加在最后一个
 *  @param title 标签字符串
 *  @param item  内容, UIView 或 UIViewController
 */
- (void)addTagTitle:(NSString *)title contentItem:(id)item;

//  增加在index, 会移动到新插入的位置
- (void)addTagTitle:(NSString *)title contentItem:(id)item atIndex:(NSInteger)index;

//  删除
- (void)removeContentAtIndex:(NSInteger)index;

//  多删(不想枚举判断了(浪费),传字符串,负数自己负责,如果可以直接报错的限制方法,请issue我)
- (void)removeContentAtIndexs:(NSArray<NSNumber *> *)indexs;

//  交换元素
- (void)exchangeAtIndex:(NSInteger)index1 withIndex:(NSInteger)index2;
 
//  切换好之后的数组对比, 注意原来数据的指针
- (void)updateTagArr:(NSMutableArray *)tagArr contentArr:(NSMutableArray *)contentArr;

Gif 软件有点坑, 看不清请看demo

ver.gif

8. cocoaPods


作为初级程序猿, 秉承能学习就尝试的原则安装了下
提供两个学习链接:
简书Trunk
Master

更新本地pod库 : pod repo update
快速依赖但是不更新本地 : pod install --verbose --no-repo-update

9. 使用


GitHub代码
pod 'YFLinkageScroll', '~> 1.0.0'

Usage :
#import "YFLinkageScrollView.h"
Xib加载 或代码 alloc.init 后

/**
 *  初始化配置
 *  缩放1.2  
 *  slider按tagArr的title字符宽度
 */
- (void)configWithScrolltagArray:(NSArray *)tagArr
                    visibleCount:(float)visibleCount
                      sliderType:(YFSliderType)type
               contentScrollItem:(NSArray *)contentArr;            
/**
 *  自定义初始化配置, 注释太多, 这里就不多加了
 */
- (void)configWithScrolltagArray:(NSArray *)tagArr
              tagScrollEdgeInset:(UIEdgeInsets)tagEdge
                        tagScale:(CGFloat)tagScale
              configTagItemBlock:(YFTagItemConfigration)block
                    visibleCount:(float)visibleCount
                      sliderType:(YFSliderType)type
                    customSlider:(UIView *)customSlider
               contentScrollItem:(NSArray *)contentArr;

事件

@property (nonatomic, weak) id<YFLinkageScrollViewDelegate> delegate;

@protocol YFLinkageScrollViewDelegate <NSObject>
@optional
/** 当前index */
- (void)yfScrollViewChangeCurrentIndex:(NSInteger)currentIndex item:(id)item;

/** 左出界, 超出的值,正数 */
- (void)yfScrollViewOutOfLeft:(CGFloat)value;

/** 右出界, 超出的值,正数 */
- (void)yfScrollViewOutOfRight:(CGFloat)value;

** 自定义 **

/** 显示会刚好显示全(scrollRectToVisible:), 默认不设置标签居中 */
@property (nonatomic, assign) BOOL isMoveToVisible;

/** slider宽度, 默认取title字符宽度, 这个值为基本上增加 1.0+sliderWidthScale */
@property (nonatomic, assign) CGFloat sliderWidthScale;

/** 全局tagItem点击和setCurrentIndex:,动画时间 default:0.5 */
@property (nonatomic, assign) CGFloat animDuration;

/** YFSliderTypeBottomAlone 时 containScroll 的背景色, 默认clearColor */
@property (nonatomic, strong) UIColor *sliderColor;

/** 横屏时的显示个数 */
@property (nonatomic, assign) CGFloat rotateVisibleCount;

/**
 *  直接跳转页面
 *
 *  @param currentIndex         跳转的页面
 *  @param animated             ctScroll的动画
 *  @param tagAnimated          TagScroll的动画
 */
- (void)setCurrentIndex:(NSInteger)currentIndex
               animated:(BOOL)animated
            TagAnimated:(BOOL)tagAnimated;

10. 问答


如果简书上传之后能编辑更新, 知道答案后更新

问 : 求diao大的解答下

  1. ARC 下重写 weak 的 setter, 有没有问题 ?
    _delegate = delegate;
    if ([self.delegate respondsToSelector:@selector(yfScrollViewChangeCurrentIndex:item:)]) {
        [self.delegate yfScrollViewChangeCurrentIndex:0 item:_ctItemArr[0]];
    }
  1. NSTimer - (void)invalidate; 之后, 之前加的内存没有减下去, 请看demo里的 Example 事件跳转页面
    POP 回来内存什么时候释放, 请看 demo里的 Jump 事件跳转页面
    还是我自己写的方法有问题, 但是用 Leaks 都检测过了.
  2. 求个视频转GIF的好软件
  3. 不缩放UIButton, 不抖动,实现字体大小的方法

**答 : **

  1. licecap: 直接录制成GIF, 清晰度高
    ClieGIF: 视频转GIF, 效果要设置, 视频不能太大
    PicGIF: 视频转GIF, 收费的没试, Lite清晰度一般
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,684评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,143评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,214评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,788评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,796评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,665评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,027评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,679评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,346评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,664评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,766评论 1 331
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,412评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,015评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,974评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,073评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,501评论 2 343

推荐阅读更多精彩内容