iOS 仿网易APP界面封装

目录我是代码

字体放大

颜色RGBA

滑块

内容类型

实现效果方法

Layout, 旋转

CRUD

cocoaPods

使用

问答
个人测试有限, 如果有什么问题请评论或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. 实现效果方法

区分左右滑, 上一个, 下一个 UIButton
移动点: 滚动内容里转化百分比到标签的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 *)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 delegate;

@protocol YFLinkageScrollViewDelegate 
@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大的解答下

ARC 下重写 weak 的 setter, 有没有问题 ?

    _delegate = delegate;
    if ([self.delegate respondsToSelector:@selector(yfScrollViewChangeCurrentIndex:item:)]) {
        [self.delegate yfScrollViewChangeCurrentIndex:0 item:_ctItemArr[0]];
    }

NSTimer - (void)invalidate; 之后, 之前加的内存没有减下去, 请看demo里的 Example 事件跳转页面
POP 回来内存什么时候释放, 请看 demo里的 Jump 事件跳转页面
还是我自己写的方法有问题, 但是用 Leaks 都检测过了.
求个视频转GIF的好软件
不缩放UIButton，不抖动，实现字体大小的方法

**答 : **

licecap: 直接录制成GIF, 清晰度高
ClieGIF: 视频转GIF, 效果要设置, 视频不能太大
PicGIF: 视频转GIF, 收费的没试, Lite清晰度一般