具有不同彩色背景的文本

Question

如何在iOS中實現以下設計，可以使用任何控件來實現此目的。我沒有那麼有經驗在本地實現這種設計。它是在本地開發或一種混合技術被用於

請找到下面的圖片以供參考

Answer 1

我做了一個編程示例（「Hello World」的種類）爲您 （它我認爲它更容易理解事情的運作方式 它不是完美的解決方案，它可以做的更好，（性能明智），但我選擇它作爲一個簡單的例子，讓你開始（個人I將使用CALayer作爲背景）。

所以在這裏：

做一個新的類，如下所示：

MyView.h

#import <UIKit/UIKit.h> 

@interface MyView : UIView 

@end 

MyView.m

#import "MyView.h"

@implementation MyView 

- (instancetype)initWithFrame:(CGRect)frame 
{ 
    if(self = [super initWithFrame:frame]) 
    { 
     self.backgroundColor = [UIColor grayColor]; 

     //This rect is in self coordinate system 
     UIView * viewPurple = [[UIView alloc]initWithFrame:CGRectMake(0, 200, frame.size.width, 50)]; 
     viewPurple.backgroundColor = [UIColor purpleColor]; 
     [self addSubview:viewPurple]; 

     //This rect is in viewPurple's coordinate system 
     UILabel * label = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width/2, 50)]; 
     [label setText:@"Hello World!"]; 
     [label setTextAlignment:(NSTextAlignmentCenter)]; 
     [label setTextColor:[UIColor whiteColor]]; 
     [viewPurple addSubview:label]; 

     //All the frame's rects are in it's `superView`/ parent 's coordinate system. 


     UIView * viewGreen = [[UIView alloc]initWithFrame:CGRectMake(frame.size.width/2, 200, frame.size.width, 50)]; 
     viewGreen.backgroundColor = [UIColor cyanColor]; 
     [self addSubview:viewGreen]; 

     UILabel * label2 = [[UILabel alloc]initWithFrame:CGRectMake(0, 0, frame.size.width/2, 50)]; 
     [label2 setText:@"World Hello!"]; 
     [label2 setTextAlignment:(NSTextAlignmentCenter)]; 
     [label2 setTextColor:[UIColor whiteColor]]; 
     [viewGreen addSubview:label2]; 

    } 
    else 
    { 
     //Can't allocate the UIView - quite a rare problem. 
    } 
    return self; 
} 

@end 

在您的視圖控制器#import "myView.h"

，並添加這個片段到- (void)viewDidLoad方法。

- (void)viewDidLoad 
{ 
    [super viewDidLoad]; 
    // Do any additional setup after loading the view, typically from a nib. 

    MyView * view = [[MyView alloc]initWithFrame:self.view.frame]; 
    [self.view addSubview:view]; 
} 

結果將作爲後續