2012-05-03 47 views
16

Tôi đang cố gắng triển khai UISlider tùy chỉnh (lớp con của UISlider), hoạt động theo cách tương tự với thanh trượt gốc có ánh sáng xung quanh ngón tay cái khi được đánh dấu. Tôi đang gặp rắc rối với điều này, mặc dù.Trạng thái đánh dấu UISlider với chiều rộng ngón tay cái khác so với bình thường

Chiều rộng (hiệu dụng) của ngón tay cái được đánh dấu rõ ràng là lớn hơn ngón cái bình thường (do ánh sáng). Nếu tôi thêm ảnh điểm ảnh trong suốt vào hình ảnh trạng thái bình thường, để cả hai hình ảnh có cùng chiều rộng, vấn đề là ngón tay cái trạng thái bình thường không bao giờ giống như nó đến cuối bản nhạc. nó xuất hiện khác).

Nếu tôi sử dụng thumbRectForBounds: để bù ngón tay cái thẳng hàng với đầu bài hát, nó chỉ làm cho vấn đề tồi tệ hơn ở đầu kia.

Nếu tôi giữ cả hai hình ảnh chỉ rộng như chúng cần (nghĩa là, không có đệm trên trạng thái bình thường và cả hai không có cùng chiều rộng), tôi đã tiến gần hơn. Tôi có thể thiết lập bù đắp một cách độc lập trong thumbRectForBounds: dựa trên UIControl.state, nhưng có vẻ như có một số phép thuật toán học đang diễn ra đằng sau hậu trường. Nơi duy nhất mà UISlider cho rằng hình ảnh cho cả hai trạng thái xếp hàng hoàn hảo là trung tâm chính xác.

Dường như tôi có thể cần phải thực hiện một số phép tính xác định độ lệch của trạng thái đánh dấu dựa trên vị trí tương đối của nó dọc theo tuyến đường. Nó sẽ cần một y-bù đắp bằng không ở trung tâm (UISlider sẽ tập trung cả hai hình ảnh, có nghĩa là họ sắp xếp). Ở thái cực, nó sẽ cần một y-bù đắp hoàn toàn cho ánh sáng. Và ở giữa nó sẽ cần phải nội suy y-bù đắp.

Điều này có vẻ như rất nhiều công việc để tạo lại một cái gì đó thanh trượt gốc mặc dù, vì vậy có lẽ tôi đang thiếu một cái gì đó hiển nhiên.

Cập nhật giải pháp hiện tại:

Đó không phải là hoàn toàn di động, vì nó làm cho một số giả định về kích thước của ánh sáng được bổ sung. Tôi đang thêm ánh sáng với hình ảnh thay vì vẽ trực tiếp lên CALayer. Tôi chưa thử nghiệm hiệu suất này. Về cơ bản, tôi tạo một lớp là hình vuông có kích thước là chiều cao của hình ảnh ngón tay cái trạng thái mặc định, đặt nó trên ngón tay cái và sau đó vẽ ánh sáng (chỉ là ánh sáng, không phải là hình ảnh riêng biệt của ngón cái với ánh sáng rực rỡ. , như sẽ được thực hiện với một hình ảnh trạng thái cao) vào lớp.

- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value { 
    CGRect r = [super thumbRectForBounds:bounds trackRect:rect value:value]; 

    [thumbHighlightOverlayLayer removeFromSuperlayer]; 
    thumbHighlightOverlayLayer = [CALayer layer]; 

    int x = r.origin.x + (r.size.width/2) - (r.size.height/2); 
    thumbHighlightOverlayLayer.frame = CGRectMake(x, r.origin.y, r.size.height, r.size.height); 

    UIImage* thumbHighlightOverlayImage = [UIImage imageNamed:@"thumb-highlight"]; 
    thumbHighlightOverlayLayer.contents = (id)thumbHighlightOverlayImage.CGImage; 

    switch (self.state) { 
    case UIControlStateHighlighted: 
     [[self layer] addSublayer:thumbHighlightOverlayLayer]; 
     break; 
    default: 
     break; 
    } 

    return r; 
} 
+0

http://stackoverflow.com/questions/755510/customizing-uislider-look – VSN

+0

Câu hỏi chủ yếu liên quan đến hình ảnh bản nhạc chứ không phải hình ảnh ngón tay cái. Viết thanh trượt của riêng tôi vẫn có thể là câu trả lời duy nhất ở đây, nhưng vì tôi đang cố gắng tạo lại hành vi gốc, tôi vẫn tự hỏi liệu có cách nào để tránh cần phải làm điều đó không. – farski

Trả lời

1

thay vì thêm hiệu ứng ánh sáng vào hình ảnh, có thể tốt hơn để thêm động vào hình ảnh. bạn có thể sử dụng CALayer để thêm hiệu ứng ánh sáng.

CALayer

+0

Thú vị. Tôi sẽ cho nó một shot, cảm ơn. – farski

+0

Điều đó sẽ khá khó khăn, vì UISlider dường như không có bất kỳ bản xem phụ hoặc lớp con nào mà bạn có thể thêm bóng. –

+0

Giống như Andreas nói, điều này không hoàn toàn thẳng vì không có quyền truy cập trực tiếp vào chế độ xem của hình ảnh ngón tay cái, nhưng tôi đã đưa ra một giải pháp có vẻ như đang hoạt động. Cảm ơn ý tưởng, Tejesh. – farski

0

Bạn có thể cuộn thanh trượt của riêng mình, mà không phải là phức tạp vì nó có thể âm thanh nhưng vẫn sẽ yêu cầu một vài giờ mã hóa.

Tuy nhiên, giải pháp đơn giản nhất là nên chỉ thiết lập theo dõi hình ảnh cũng tùy chỉnh:

  1. Tạo tùy chỉnh "tối thiểu"/"tối đa" theo dõi hình ảnh với đệm (điểm ảnh trong suốt) ở bên trái/bên phải . Vùng đệm phải lớn bằng bán kính của ánh sáng trừ đi bán kính ngón tay cái (11pt).
  2. Áp dụng hình ảnh để UISlider của bạn với setMinimumTrackImage:forState:setMaximumTrackImage:forState:
  3. Tăng chiều rộng thanh trượt của bạn bằng cách kích thước của đệm thêm
0

tôi tình cờ gặp một vấn đề tương tự với một thanh trượt tùy chỉnh cho một trong những ứng dụng của tôi. Không giống như thanh trượt thông thường, bản nhạc là một dòng số tĩnh, vì vậy tôi không cần hình ảnh theo dõi tối thiểu và tối đa riêng biệt. Tuy nhiên, tôi cần một điểm nóng cực lớn cho ngón cái. Vì vậy, tôi đã tạo ra hình ảnh ngón tay cái của mình với thêm các pixel trong suốt, và tôi đã gán hình ảnh trong suốt cho bản nhạc. Đường đi có thể nhìn thấy chỉ là một UIImageView phía sau thanh trượt (thực tế là một UIImageView phía sau một nhóm thanh trượt). Các cạnh của thanh trượt mở rộng vượt ra ngoài các cạnh của hình ảnh bản nhạc.

Đề xuất của tôi là tạo bản dựng hình ảnh của thanh trượt dự định bằng cách kết hợp nhiều chế độ xem thay vì gõ vào các giới hạn tùy chỉnh UISlider. Nếu bạn có thể làm mà không có một ca khúc thay đổi, bạn có thể sao chép kỹ thuật của tôi. Hoặc bạn có thể thao tác khung của một UIView hoặc hai để làm cho các bản nhạc tùy chỉnh điều chỉnh bất cứ khi nào thanh trượt thay đổi giá trị. Nếu bạn cần sử dụng cùng một thanh trượt này nhiều lần trong ứng dụng của mình, bạn có thể gộp nhóm nhóm lượt xem thành lớp con UIView. Tùy thuộc vào mức độ phức tạp của hành động thanh trượt của bạn, có thể đến một điểm mà việc kiểm soát tùy chỉnh sẽ là lựa chọn thận trọng hơn.

Các vấn đề liên quan