UISwitch tùy chỉnh với hình ảnh

Question

Tôi cần triển khai công tắc tùy chỉnh trong một dự án. Hiện tại những gì tôi đã tìm thấy là chúng ta không thể thay đổi với UISwitch theo cách để thực hiện như thể hiện trong hình dưới đây. Tôi đã theo dõi các bài viết và googled thông qua stackoverflow và các blog khác nhưng không tìm thấy một giải pháp như mong muốn. Một cách là để đi với kiểm soát UISegmented như trong this bài, nhưng điều đó cũng không giải quyết vấn đề của tôi.

Cảm ơn trước sự giúp đỡ nào

Answer 1

Có gì khó khăn trong việc tạo công tắc của riêng bạn? UISwitch là một điều khiển, về cơ bản chỉ là một khung nhìn gửi một thông điệp - với hai trạng thái. Bạn có thể thiết lập nó như thế này:

• xem container: một cái nhìn đơn giản với góc tròn (thiết lập cornerRadius của lớp của view) và màu nền

• hình ảnh bên trái: một cái nhìn hình ảnh mà màn hình hình ảnh bạn muốn hiển thị ở bên trái, tức là dấu kiểm cho ví dụ

• hình ảnh bên phải của bạn: chế độ xem hình ảnh hiển thị hình ảnh bạn muốn hiển thị ở bên phải, tức là dấu X cho ví dụ của bạn

• trượt: một cái nhìn hình ảnh hiển thị phần thanh trượt của chuyển đổi, thiết lập trên các quan điểm khác hai hình ảnh

Khi người dùng chạm hoặc vuốt qua sự kiểm soát, sử dụng Core Animation để di chuyển thanh trượt sang phía bên kia của chuyển đổi và cập nhật trạng thái của điều khiển và làm mờ nhanh về màu nền cho trạng thái mới. Gửi hành động của điều khiển đến mục tiêu.

Answer 2

Dường như bạn chỉ muốn kiểm soát để chỉ có 2 trạng thái - kích hoạt và người tàn tật.

Cách dễ dàng cho việc này là tạo 2 hình ảnh png và sử dụng UIButton tùy chỉnh có hình nền và chỉ thay thế 2 hình ảnh đó mỗi khi nút được nhấn.

Đây có phải là những gì bạn đang cố gắng làm hoặc tôi hiểu nhầm điều gì đó không?

Answer 3

Như gasparuff nói, bạn cũng có thể làm điều đó với một UIButton, chỉ cần thiết lập các hình ảnh:

[button setImage:[UIImage imageNamed:@"image_on"] forState:UIControlStateSelected]; 
[button setImage:[UIImage imageNamed:@"image_off"] forState:UIControlStateNormal]; 

và khi nó được khai thác chỉ chuyển đổi các thuộc tính được chọn.

- (void) buttonTap { 
    button.selected = !button.selected; 
} 

Điều này sẽ tự động thay đổi hình ảnh.

Answer 4

Bạn biết về -[UISwitch setOnImage:] và -[UISwitch setOffImage:], phải không? Cũng -[UISwitch setTintColor]. Về nhược điểm duy nhất tôi có thể thấy đó là switch, chính nó, sẽ là công tắc iOS chuẩn (nút tròn) nhưng, nếu không, đây sẽ là giải pháp giống như iOS nhất.

Khi triển khai On/offImage của riêng bạn, hãy nhớ các hạn chế về kích thước và cả mặt của hình ảnh về phía nút chuyển bị lõm. tintColor có thể được sử dụng để làm cho phần còn lại của công tắc phản ánh màu sắc của bạn. Bạn có thể muốn theo dõi sự kiện valueChanged để thay đổi màu sắc.

Nếu bạn cần giao diện chính xác mà bạn hiển thị trong câu hỏi của mình (nút chuyển đổi hình vuông), thì bạn có thể muốn sử dụng điều khiển tùy chỉnh, như @Caleb đề xuất.