Làm thế nào để tùy chỉnh HSlider trong flex?

Question

Tôi mới để flex, và tôi muốn thay đổi hình ảnh của HSlider, như thế này

Tôi nên làm gì? Xin vui lòng cho tôi một ví dụ đơn giản.

Answer 1

Bạn sẽ phải tạo một làn da tùy chỉnh. Bây giờ, HSlider là một chút đặc biệt ở chỗ nó có một số thành phần con cũng có khả năng skinnable. Bạn thực sự sẽ phải tạo ra ba da tùy chỉnh:

• một cho HSlider bản thân (da này bao gồm các tooltip)
• một cho đường đua (thư mục/khu nâu vàng trong hình ảnh của bạn)
• và một cái cho ngón tay cái

Đường đi và ngón tay cái đều trên thực tế Các nút để các giao diện đó sẽ là Nút da.

Giải thích toàn bộ quá trình sẽ làm cho câu trả lời này quá dài và cụ thể, vì vậy tôi sẽ chỉ giúp bạn bắt đầu. Bạn sẽ có thể hình dung ra từ đó. Tôi cũng giả sử bạn đang sử dụng FlashBuilder như một IDE.

Tạo da chính

Đặt skinClass phong cách trên một HSlider và nhấn Alt + Space. Điều này sẽ mang lại hoàn thành mã, nhưng bạn cũng có thể chọn "Tạo Skin ...".

Chọn trình hướng dẫn đó sẽ xuất hiện. Điền vào một cái gì đó như sau. Lưu ý rằng chúng tôi đang tạo bản sao của làn da Spark HSlider mặc định. Chúng tôi loại bỏ các mã phong cách bởi vì nó sẽ không cần thiết trong một làn da tùy chỉnh như vậy.

Tạo theo dõi và ngón tay cái da

mở lớp da mới này và di chuyển xuống phía dưới. Bạn sẽ thấy hai số Button s; một với id track và một có id thumb. Phong cách skinClass của họ được đặt thành giao diện mặc định cho các nút này. Xóa nội dung và lặp lại các hoạt động của các bước trước (tạo một làn da mới), chỉ có thời gian này tạo ra một bản sao của HSliderTrackSkin và HSliderThumbSkin

Sửa da

Bây giờ bạn có một bản sao chính xác của mặc định Spark da cho HSlider (ngoại trừ bạn đã loại bỏ kiểu dáng). Bây giờ bạn có thể bắt đầu chỉnh sửa: thay đổi màu sắc, thay đổi hình dạng, v.v. Nếu bạn cần thêm thông tin về đồ họa Flex, tôi khuyên bạn nên sử dụng Google trên FXG. Nhưng bạn chỉ có thể cố gắng để fiddle với da mặc định và xem nơi bạn có thể nhận được quá.

Answer 2

@RIAstar có câu trả lời tuyệt vời. Nhưng có một vấn đề nhỏ - phần màu da cam này trước ngón cái. AFAIK cách dễ nhất để tạo ra làn da như thế này là thêm một con số trực quan hoặc phức tạp hơn trong da HSlider, điều này sẽ thay đổi chiều rộng của nó theo tọa độ x của ngón tay cái, tức là

<s:Button id="track" left="0" right="0" top="0" bottom="0" minWidth="33" width="100" 
      tabEnabled="false" 
      skinClass="spark.skins.spark.HSliderTrackSkin" /> 

<s:Rect width="{thumb.x + thumb.width/2}" height="{track.height}"> 
    <s:fill> 
     <s:SolidColor color="0x00FF00" /> 
    </s:fill> 
</s:Rect> 

<s:Button id="thumb" top="0" bottom="0" width="11" height="11" 
      tabEnabled="false" 
      skinClass="spark.skins.spark.HSliderThumbSkin" />