iOS文字颜色渐变透明

作者: 卡丁车手 | 来源:发表于2016-08-18 21:56 被阅读1708次

    渐变透明这种效果的文字一般都在可滚动的Label上,这样的效果能使Label看起来更加美观,同时可以提醒用户,还有部分文字没有显示出来。
    效果如下:

    文字颜色渐变透明.png

    图层结构是这样的:在self.view上放一个颜色半透明过渡的viewview上放一个scrollViewscrollView上放一个Label。因为父视图是半透明的,所以Label上的文字也会跟随者半透明。
    难点在于这个半透明的view,它可以通过以下方法创建:

    CGRect frame = CGRectMake(20, 100, SCREEN_WIDTH-40, SCREEN_HEIGHT-100-100);
    // 过渡透明层
    UIView *gradientView = [[UIView alloc] initWithFrame:frame];
    [self.view addSubview:gradientView];
    
    CAGradientLayer *gradientLayer = [CAGradientLayer layer];
    NSArray *colors = [NSArray arrayWithObjects:
                       (id)[[UIColor colorWithWhite:0 alpha:0] CGColor],  //clearColor,透明度为0(显示为黑色,就像黑洞...)
                       (id)[[UIColor colorWithWhite:0 alpha:0.5] CGColor],//clearColor,透明度为0.5
                       (id)[[UIColor colorWithWhite:0 alpha:1] CGColor],  //clearColor,透明度为1(显示为透明)
                       nil];
    [gradientLayer setColors:colors];
    [gradientLayer setStartPoint:CGPointMake(0.0f, 0.0f)];
    [gradientLayer setEndPoint:CGPointMake(0.0f, 0.2f)];
    [gradientLayer setFrame:gradientView.bounds];
    [[gradientView layer] setMask:gradientLayer];
    

    CAGradientLayer是苹果专门处理梯度显示的一个类,给它设置一个颜色数组即可显示。这里设置了三种颜色,CAGradientLayer会自动让这三种颜色平缓过渡。
    [UIColor colorWithWhite:0 alpha:1]是透明色,即clearColor,而
    [UIColor colorWithWhite:0 alpha:0]是透明且alpha为0,由于子控件的alpha值与父视图相同,所以子视图会有一部分区域为透明色。
    设置完所有属性之后,不要忘了调用[[gradientView layer] setMask:gradientLayer];

    剩余的代码就简单了。

    UIScrollView *labScroll = [[UIScrollView alloc] initWithFrame:gradientLayer.bounds];
    labScroll.backgroundColor = [UIColor whiteColor];
    labScroll.showsVerticalScrollIndicator = NO;
    [gradientView addSubview:labScroll];
    
    NSString *text = self.t;
    CGRect rect = [text boundingRectWithSize:CGSizeMake(SCREEN_WIDTH-40, 0) options:NSStringDrawingUsesLineFragmentOrigin|NSStringDrawingUsesFontLeading attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18]} context:nil];
    CGFloat height = rect.size.height;
    labScroll.contentSize = CGSizeMake(0, height);
    
    UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, labScroll.bounds.size.width, height)];
    label.textColor = [UIColor darkGrayColor];
    label.numberOfLines = 0;
    label.textAlignment = NSTextAlignmentLeft;
    label.text = text;
    label.font = [UIFont systemFontOfSize:18.0];
    [labScroll addSubview:label];
    

    其中self.t是一个成员属性,在get方法中赋值《赤壁赋》(手动滑稽)。

    - (NSString *)t {
    return @"\t壬戌之秋,七月既望,苏子与客泛舟游于赤壁之下。清风徐来,水波不兴。举酒属客,诵明月之诗,歌窈窕之章。少焉,月出于东山之上,徘徊于斗牛之间。白露横江,水光接天。纵一苇之所如,凌万顷之茫然。浩浩乎如冯虚御风,而不知其所止;飘飘乎如遗世独立,羽化而登仙。\n\t于是饮酒乐甚,扣舷而歌之。歌曰:“桂棹兮兰桨,击空明兮溯流光。渺渺兮予怀,望美人兮天一方。”客有吹洞箫者,倚歌而和之。其声呜呜然,如怨如慕,如泣如诉,余音袅袅,不绝如缕。舞幽壑之潜蛟,泣孤舟之嫠妇。\n\t苏子愀然,正襟危坐而问客曰:“何为其然也?”客曰:“‘月明星稀,乌鹊南飞’,此非曹孟德之诗乎?西望夏口,东望武昌,山川相缪,郁乎苍苍,此非孟德之困于周郎者乎?方其破荆州,下江陵,顺流而东也,舳舻千里,旌旗蔽空,酾酒临江,横槊赋诗,固一世之雄也,而今安在哉?况吾与子渔樵于江渚之上,侣鱼虾而友麋鹿,驾一叶之扁舟,举匏樽以相属。寄蜉蝣于天地,渺沧海之一粟。哀吾生之须臾,羡长江之无穷。挟飞仙以遨游,抱明月而长终。知不可乎骤得,托遗响于悲风。”\n\t苏子曰:“客亦知夫水与月乎?逝者如斯,而未尝往也;盈虚者如彼,而卒莫消长也。盖将自其变者而观之,则天地曾不能以一瞬;自其不变者而观之,则物与我皆无尽也。而又何羡乎!且夫天地之间,物各有主,苟非吾之所有,虽一毫而莫取。惟江上之清风,与山间之明月,耳得之而为声,目遇之而成色,取之无禁,用之不竭,是造物者之无尽藏也,而吾与子之所共适。”\n\t客喜而笑,洗盏更酌。肴核既尽,杯盘狼籍。相与枕藉乎舟中,不知东方之既白。";
    }
    

    这样,文字颜色渐变透明的效果就能实现啦。

    相关文章

      网友评论

        本文标题:iOS文字颜色渐变透明

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