美文网首页
ios的渐变效果制作遇到的坑

ios的渐变效果制作遇到的坑

作者: mkb2 | 来源:发表于2016-11-17 10:59 被阅读821次

昨天临时要求要一个渐变效果,然后再网上找了一些文件,看了之后,一直在写,但是遇见了好多的坑,然后做个记录,让其他的人避免这个坑.

效果图,看底下提示的,有渐变颜色,和微博一样 效果图

社交的模块,点击第八张的那个图片,然后,放大图片,使用的是第三方的。如果是一个白色的图片,因为lable是白色的,所以不能显示文字,就要去改变.

文字和图片颜色太相近,所以基本看不到,但是看,还是有的
//项目源码,我们看到的底部的问题,叫做MJPhotoBar,这个代码就是那个bar
- (void)setPhotos:(NSArray *)photos
{
    _photos = photos;
    
    if (_photos.count > 1) {
        _indexLabel = [[UILabel alloc] init];
        _indexLabel.font = [UIFont systemFontOfSize:18];
        _indexLabel.frame = self.bounds;
        _indexLabel.textColor = [UIColor whiteColor];
        _indexLabel.textAlignment = NSTextAlignmentCenter;
        _indexLabel.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
        [self addSubview:_indexLabel];
    }
}

然后我们要去给他设置一下背景颜色。

看看这个文章,讲解如何添加,比较好,他主要讲解的就是如何添加渐变背景,看看这个个文章,讲解的是每个参数的含义

先看看这两个文章,尤其是第二篇文章,非常好,我就不再去赘述了,然后说说我遇到的问题,就是我直接个indexLabel设置

    //create gradient layer and add it to our container view  
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];  
    gradientLayer.frame = self.containerView.bounds;  
    [self.containerView.layer addSublayer:gradientLayer];  
      
    //set gradient colors  
    gradientLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,  
                             (__bridge id)[UIColor blueColor].CGColor];  
      
    gradientLayer.locations = @[[NSNumber numberWithFloat:0.5], [NSNumber numberWithFloat:0.7]];  
  
    //set gradient start and end points  
    gradientLayer.startPoint = CGPointMake(0.75, 0.0);  
    gradientLayer.endPoint = CGPointMake(1.0, 1.0);  
BA64946A-679E-4A67-B00C-9AC6EA4A9918.png _contenView在indexLable上一层,错误!应该保证indexLAble在最上边!

gradientLayer的时候,不好使。
具体原因我不知道为什么,后来我看了刚才的两篇文章,发现了几点问题和注意事项

1.不能给indexLable设置背景颜色,没有用。
2.生成一个_contenView,然后给他设置渐变颜色,让他在indexLable的底下一层才行(indexLable在最上层)!!!,然后才能显示,否则无效
3.最好contenView(渐变颜色)的frame和indexLalbe的frame相同
4.如果在-initWithFrame:中去生成了contenView(渐变背景),那么记得在layoutSubView中去设置UIView的frame,否则init中的尺寸是不准的,应该是zore

相关文章

网友评论

      本文标题:ios的渐变效果制作遇到的坑

      本文链接:https://www.haomeiwen.com/subject/swldpttx.html