关于双视图，叠加控制

2014.08.06博文
今天讲了三个APP,一个是UIView、一个是slider、还有一个CustomCell
今天的内容是挺多的，除了上课以外，有一个意外收获～以后写代码的时候不能耗太久了，这是经验之谈！有几个步骤：下载代码->将代码输入至XCode->设置断点->然后根据断点来看。看代码一般是先看整体框架，再来分析结构与各个细节。

1.。今天的东西突出一个相对位置，例如：
今天学的CustomcellAPP，先创建一个UIView出来，然后在这个UIView上面继续创建一个或者多个UIView覆盖在第一个UIView上面。并且通过改变第一个UIView的形状来控制覆盖在其上面的UIView的变化。这东西还是挺神奇

第一步：ViewController里面创建一个UIView，
myUIView *myview = [[myUIView alloc] initWithFrame:CGRectMake(1, 50, 290, 200)];
 //创建一个视图view，并设置好视图所占用的frame
myview.backgroundColor = [UIColor greenColor];
 //设置此视图view的背景颜色，不然的话，能找到么？亲。。
[self.view addSubview:myview];
 //将视图显示在viewController上面，这样就能看到了，之前创建的view是不能被看见的，只有调用显示方法以后才能被看到。

 为什么两个页面能够放在一起，而且联系紧密呢。看下去。创建另外新的类，这个类是UIView类型的，类名是myUIView。恰好，在viewController里面用的就是这个myUIView类名创建的那个视图view。所以几个放在一个视图里面的view的属于相同的类。

 UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0, 0, CGRectGetWidth(frame)/4, CGRectGetHeight(frame)/4)];
 view1.backgroundColor = [UIColor redColor];
 [self addSubview:view1];
        
 UIView *view2 = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetWidth(frame) - CGRectGetWidth(frame)/4, 0, CGRectGetWidth(frame)/4, CGRectGetHeight(frame)/4)];
 view2.backgroundColor = [UIColor redColor];
 [self addSubview:view2];
        
 UIView *view3 = [[UIView alloc] initWithFrame:CGRectMake( 0 , CGRectGetHeight(frame) - CGRectGetHeight(frame)/4, CGRectGetWidth(frame)/4, CGRectGetHeight(frame)/4)];
 view3.backgroundColor = [UIColor redColor];
 [self addSubview:view3];
        
 UIView *view4 = [[UIView alloc] initWithFrame:CGRectMake(CGRectGetWidth(frame) -  CGRectGetWidth(frame)/4, CGRectGetHeight(frame) - CGRectGetHeight(frame)/4, CGRectGetWidth(frame)/4, CGRectGetHeight(frame)/4)];
 view4.backgroundColor = [UIColor redColor];
 [self addSubview:view4];

这样使得后面的4个view显示在前面的视图view上面，然后通过对后面4个视图view的frame的编写，与前一个视图view连接起来，通过控制前一个视图view的大小来控制后面的view。

2.。今天学习的slider滑动条也用到了上面的知识。
同样的道理，要用代码编一个滑动条，用到了同样用到了之前的知识。步骤相当，先在viewController里面用新类名创建一个对象：
MySilder *slider = [[MySilder alloc]initWithFrame:CGRectMake(10, 100, 300, 20)];
slider.minValue = 100;
slider.maxValue = 200;
[self.view addSubview:slider];


- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        _minValue = 0;
        _maxValue = 1;
        // 设置滑动条的最大值和最小值分别是0和1.
        self.backgroundColor = [UIColor magentaColor];
        //设置本视图的背景颜色
        UIView *_tView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 0, frame.size.height)];
        //创建一个视图view，并将其放在viewController视图控制里面的底层view上面，其中CGRectMake(0, 0, 0, frame.size.height)是_tView视图和slider视图的相对位置。这个务必清楚。
        _tView.backgroundColor = [UIColor blueColor];
        //将视图_tView设置一个背景颜色，与视图slider的背景颜色不同，这样在才能做到颜色分明的滑动条的效果。
        [self addSubview:_tView];
        //讲_tView显示在slider上面
        
        _jView = [[UIView alloc]initWithFrame:CGRectMake(0, -25, 20, 20)];
        _jView.backgroundColor = [UIColor colorWithPatternImage:[UIImage imageNamed:@"jt.png"]];
        [self addSubview:_jView];
        //上面几行代码的意思是要创建一个新的view，设置上一张背景图片，然后作为滑动条的标签。

        UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(didTap:)];
        [self addGestureRecognizer:tap];
    //点击手势,其作用是通过点击视图“slider”面积上，从而达到将视图_tView拉到该位置的作用。这个手势非常好，一般的音乐播放器和视频播放器都可以用到

        UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(didPan:)];
        [self addGestureRecognizer:pan];
    //拖动手势，可以点击到图标将图标拉到响应的位置。

    }
    return self;
}

- (void)didTap:(UITapGestureRecognizer *)recognizer
{
    //获取拖动手势当前的位置
    CGPoint location = [recognizer locationInView:self];
    NSLog(@"tap location: %@", NSStringFromCGPoint(location)); 
    self.value = [self valueForPosition:location];
}

- (void)didPan:(UIPanGestureRecognizer *)recognizer
{
    //获取拖动手势当前的位置的位移
    CGPoint location = [recognizer locationInView:self];
    NSLog(@"location: %@", NSStringFromCGPoint(location)); 
    self.value = [self valueForPosition:location];
    
    //获取拖动手势的相对位移
    CGPoint point = [recognizer translationInView:self];
    NSLog(@"%@", NSStringFromCGPoint(point));
    self.value = [self valueForPosition:point];
}

- (float)valueForPosition:(CGPoint)point
{
    return point.x * (_maxValue - _minValue) / self.frame.size.width + _minValue;
}

上述几行代码中：
“ CGPoint location ”与“ CGPoint location ”表示的是拖动手势的相对位移，即你点击以后拖动到这个位置的位移。 拖动手势的当前位置，即你点击在哪里，就显示你点击的位置。其中这两个手势里面的代码需要再看看，里面的格式是固定的，下一次写的话，应该代码没多大变化。


- (void)setValue:(float)value
{
    if (value <= _minValue) {
        _value = _minValue;
    }
    else if (value >= _maxValue) {
        _value = _maxValue;
    }
    else {
        _value = value;
    }
    [self setNeedsLayout];
}
//这是set方法。这个的判断作用是为了让滑动条能够在范围内滑动，如果有超过，或者少于的情况，那么就将其取在最大值或者最小值上。

- (void)layoutSubviews
{
    [super layoutSubviews];
    
    //_min --value-- _max
    //(value - _min)/(_max - _min)
    _tView.frame = CGRectMake(0, 0, (_value - _minValue)/(_maxValue - _minValue) * self.frame.size.width, self.frame.size.height);
}
//“ layoutSubviews ”是很重要的，在以后的应用里非常广泛，只要有框架frame的细微的改变，那么就必须用到 “ 布局 ”即“ -(void)layoutSubviews “。里面的格式非常简单：

_tView.frame = CGRectMake(0, 0, (_value - _minValue)/(_maxValue - _minValue) * self.frame.size.width, self.frame.size.height);

只有一个视图_tView的frame产生相应的变化，其x,y,width,height根据“self.frame.size.width”和“self.frame.size.height”的变化。引号里面的宽和高是第一个视图slider的总宽和总长。