Tùy chỉnh các nút UISegmentedControl Trái và Phải

Question

Tôi đang cố gắng tùy chỉnh điều khiển phân đoạn sau, sử dụng hình ảnh bên trái cho nút đầu tiên và hình ảnh phù hợp cho nút thứ hai. Làm thế nào tôi sẽ làm điều này bằng cách sử dụng UIAppearance?

Tôi muốn thay đổi segmentedControl sau:

một cái gì đó tương tự như dưới đây:

Lý do tôi muốn sử dụng một hình ảnh tùy chỉnh là để tôi có thể thay đổi các góc của các nút. Nếu bạn nhìn vào điều khiển phân đoạn màu xanh, nó sẽ bình phương hơn (hình ảnh của tôi có các góc riêng).

Tôi đã nghĩ đến một cái gì đó như thế này nhưng không sử dụng:

UIImage *leftImage = [[UIImage imageNamed:@"leftControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; 
UIImage *rightImage = [[UIImage imageNamed:@"rightControl.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 15, 0, 15)]; 

[[UISegmentedControl appearance] setBackgroundImage:leftImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault ]; 
[[UISegmentedControl appearance] setBackgroundImage:rightImage forState:UIControlStateNormal barMetrics:UIBarMetricsDefault]; 

Answer 1

Bạn cần phải thực hiện một hình ảnh nền mà là dành cho tất cả các phân khúc của mình, và cũng là một hình ảnh mà chỉ là sự cạnh trái của một nút, một hình ảnh là sự nối giữa hai nút và một hình ảnh là cạnh phải. Một số trong những cần phải được thực hiện cho nhiều tiểu bang. Vì vậy, đây là danh sách của bạn hình ảnh:

• nắp bên trái, chọn
• nắp trái, không được chọn
• phân khúc nền, chọn
• phân khúc nền, không được chọn
• nắp phải, chọn
• nắp ngay , không được chọn
• giới hạn ở giữa, bỏ chọn bên trái đã chọn không chọn
• giới hạn giữa, trái không được chọn, chọn đúng
• nắp giữa, cả hai chọn
• giữa nắp, cả hai không được chọn

Đối với mũ giữa bạn có thể đặt chúng trong như thế này: (văn bản từ tài liệu của Apple).

// Image between two unselected segments. 
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal 
       rightSegmentState:UIControlStateNormal barMetrics:barMetrics]; 
// Image between segment selected on the left and unselected on the right. 
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateSelected 
       rightSegmentState:UIControlStateNormal barMetrics:barMetrics]; 
// Image between segment selected on the right and unselected on the right. 
[mySegmentedControl setDividerImage:image1 forLeftSegmentState:UIControlStateNormal 
       rightSegmentState:UIControlStateSelected barMetrics:barMetrics]; 

Nếu bạn đang sử dụng UIAppearance, rõ ràng là bạn sẽ gửi những thư đó tới proxy xuất hiện.

Answer 2

Bạn cần cung cấp những hình ảnh sau đây:

• phân khúc nền nào được chọn (điều này có cả mũ trái và phải)
  
• nền phân khúc được chọn (điều này có cả mũ trái và phải)
  
• đoạn giữa, bên trái đã chọn, phải bỏ chọn
  
• phân khúc giữa, bên trái không được chọn, chọn đúng
  
• phân khúc trung bình, cả trái & đúng chọn
  
• phân khúc trung bình, cả trái & đúng được chọn
  

Và sau đó sử dụng mã sau để đặt:

/* Unselected background */ 
UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segment_background_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)]; 
[[UISegmentedControl appearance] setBackgroundImage:unselectedBackgroundImage 
              forState:UIControlStateNormal 
             barMetrics:UIBarMetricsDefault]; 

/* Selected background */ 
UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segment_background_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(10, 10, 10, 10)]; 
[[UISegmentedControl appearance] setBackgroundImage:selectedBackgroundImage 
              forState:UIControlStateSelected 
             barMetrics:UIBarMetricsDefault]; 

/* Image between two unselected segments */ 
UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segment_middle_unselected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
[[UISegmentedControl appearance] setDividerImage:bothUnselectedImage 
          forLeftSegmentState:UIControlStateNormal 
           rightSegmentState:UIControlStateNormal 
             barMetrics:UIBarMetricsDefault]; 

/* Image between segment selected on the left and unselected on the right */ 
UIImage *leftSelectedImage = [[UIImage imageNamed:@"segment_middle_left_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
[[UISegmentedControl appearance] setDividerImage:leftSelectedImage 
          forLeftSegmentState:UIControlStateSelected 
           rightSegmentState:UIControlStateNormal 
             barMetrics:UIBarMetricsDefault]; 

/* Image between segment selected on the right and unselected on the left */ 
UIImage *rightSelectedImage = [[UIImage imageNamed:@"segment_middle_right_selected"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
[[UISegmentedControl appearance] setDividerImage:rightSelectedImage 
          forLeftSegmentState:UIControlStateNormal 
           rightSegmentState:UIControlStateSelected 
             barMetrics:UIBarMetricsDefault]; 

Lưu ý rằng bạn sẽ phải điều chỉnh kích thước nắp trong hình ảnh có thể kéo giãn để khớp với hình ảnh của bạn.

Answer 3

Câu trả lời của Maurizio không hoàn toàn phù hợp với tôi với điều khiển được phân đoạn trong thanh công cụ; nó tiếp tục hiển thị các đường phantom này trên các điều khiển vì hình ảnh dải phân cách không đủ rộng.

Vì vậy, tôi tự tạo. Dưới đây là tất cả các hình ảnh mà bạn sẽ cần cho Xcode và tôi cũng đưa vào các tập tin Photoshop để tạo những hình ảnh kiểm soát phân đoạn, do đó bạn có thể thay đổi phong cách:

https://s3.amazonaws.com/iwasrobbed/stackoverflow/Custom+Segmented+Control.zip

Đặt này trong appdelegate của bạn để có nó thay đổi sự xuất hiện, sử dụng các hình ảnh đính kèm, của tất cả các điều khiển phân đoạn trong một thanh công cụ:

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions 
{ 
    [self customizeAppAppearance]; 
} 

- (void)customizeAppAppearance 
{ 
    // Toolbar 
    [[UIToolbar appearance] setBackgroundImage:[[UIImage imageNamed:@"toolbar.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(22, 5, 22, 5)] forToolbarPosition:UIToolbarPositionAny barMetrics:UIBarMetricsDefault]; 

    // Segmented Controls within Toolbars 

    // Unselected background 
    UIImage *unselectedBackgroundImage = [[UIImage imageNamed:@"segmentInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:unselectedBackgroundImage 
                        forState:UIControlStateNormal 
                        barMetrics:UIBarMetricsDefault]; 

    // Selected background 
    UIImage *selectedBackgroundImage = [[UIImage imageNamed:@"segmentActive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 15, 15, 15)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setBackgroundImage:selectedBackgroundImage 
                        forState:UIControlStateSelected 
                        barMetrics:UIBarMetricsDefault]; 

    // Image between two unselected segments 
    UIImage *bothUnselectedImage = [[UIImage imageNamed:@"segmentBothInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 10, 15, 10)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:bothUnselectedImage 
                     forLeftSegmentState:UIControlStateNormal 
                     rightSegmentState:UIControlStateNormal 
                       barMetrics:UIBarMetricsDefault]; 

    // Image between segment selected on the left and unselected on the right 
    UIImage *leftSelectedImage = [[UIImage imageNamed:@"segmentLeftActiveRightInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:leftSelectedImage 
                     forLeftSegmentState:UIControlStateSelected 
                     rightSegmentState:UIControlStateNormal 
                       barMetrics:UIBarMetricsDefault]; 

    // Image between segment selected on the right and unselected on the left 
    UIImage *rightSelectedImage = [[UIImage imageNamed:@"segmentRightActiveLeftInactive.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(15, 0, 15, 0)]; 
    [[UISegmentedControl appearanceWhenContainedIn:[UIToolbar class], nil] setDividerImage:rightSelectedImage 
                     forLeftSegmentState:UIControlStateNormal 
                     rightSegmentState:UIControlStateSelected 
                       barMetrics:UIBarMetricsDefault]; 
}