Tuỳ chỉnh SeekBar drawable Android

Question

Tôi muốn cá nhân hóa seekbar mặc định Android:

Tôi đọc khoảng chín hình ảnh bản vá và tạo ra 6 hình ảnh png. Ba đầu tiên là dành cho các thanh tiến trình màu xám (progressDrawable), như hình dưới đây:

1. Hình bên phải

   

2. Trung tâm hình ảnh

   

3. hình ảnh trái

   

Kết quả sẽ là:

Những hình ảnh màu xanh đại diện cho sự tiến bộ và như sau:

1. Hình bên phải

   

2. Hình ảnh trung tâm

   

3. hình ảnh trái

   

Và ngón tay cái được như sau:

Câu hỏi của tôi là, làm cách nào tôi có thể sử dụng hình ảnh vá chín để tạo thanh tìm kiếm tùy chỉnh chính xác làm hình ảnh đầu tiên và làm cách nào để áp dụng điều này cho thanh tìm kiếm của mình?

Answer 1

Tôi nghĩ nó không phức tạp. Bạn không phải thực hiện 6 hình ảnh để đáp ứng nhu cầu của mình. Chỉ cần tạo 2 bản vá cho nền, tiến trình. Và thumb.png. Dưới đây là XML của bạn:

<SeekBar 
    android:id="@+id/my_seekbar" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:progressDrawable="@drawable/seekbar_progress" 
    android:thumb="@drawable/thumb"> 

trong seekbar_progress của bạn:

<?xml version="1.0" encoding="utf-8"?> 
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" > 

<item android:id="@android:id/background"> 
    <nine-patch android:src="@drawable/progressbar_bg" android:dither="true"/> 
</item> 
<item android:id="@android:id/progress"> 
    <clip xmlns:android="http://schemas.android.com/apk/res/android" 
     android:clipOrientation="horizontal" 
     android:gravity="left"> 
     <nine-patch android:src="@drawable/progressbar_status" android:dither="true"/> 
    </clip> 
</item> 
</layer-list> 

Đừng nhớ rằng thumb của bạn nên có không gian trống trên đầu khi tạo nên nó trông giống như bạn muốn. Hy vọng điều này sẽ hữu ích.

Answer 2

1) Tới AndroidSDK -> công cụ và chạy draw9patch.bat

bạn sẽ thấy cửa sổ đen

2) kéo hình ảnh của bạn vào cửa sổ và bắt đầu 9 vá:

bắt đầu vá xung quanh ảnh của bạn

3) bây giờ chuyển đến trình đơn Tệp và nhấp vào Lưu bản vá ...

Mẹo cuối cùng: hình ảnh của bạn phải.Định dạng PNG và chỉ chứa Nội dung không gian trống xung quanh nó. ví dụ tôi đã lưu hình ảnh của bạn trong máy tính của tôi và thấy có rất nhiều không gian không sử dụng dưới phần màu xanh của hình ảnh của bạn.

Bây giờ Thoa lên seekbar bạn:

Chỉ cần làm theo các liên kết cũng

Create Custom Slide Bar

Tôi xin lỗi; tôi không có đủ tiếng để chèn ảnh

Answer 3

Bạn có thể sử dụng thanh tìm kiếm tùy chỉnh bằng mã Java ... và thêm danh sách lớp làm nội dung có thể kéo được ... đoạn mã này sẽ giúp bạn tôi hy vọng.

1.LayerList drawable

<layer-list 
    xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item 
     android:id="@android:id/background"> 
     <nine-patch 
      android:src="@drawable/your_nine_patch_image" 
      android:tileMode="repeat"> 
     </nine-patch> 
    </item> 
    <item 
     android:id="@android:id/progress"> 
     <layer-list 
      xmlns:android="http://schemas.android.com/apk/res/android" > 
      <item> 
       <clip > 
        <bitmap 
         xmlns:android="http://schemas.android.com/apk/res/android" 
         android:src="@drawable/clipimage_for_progress" 
         android:tileMode="repeat"/> 
       </clip> 
      </item> 
     </layer-list> 
    </item> 
</layer-list> 

Đây sẽ là lớp customSeekbar của bạn và bạn có thể sử dụng seekbar tùy chỉnh này trong ứng dụng của bạn

public class CustomSeekbar { 
    public CustomSeekbar(Context context) { 
     super(context); 
     setCustomUI(); 
    } 

    public CustomSeekbar(Context context, AttributeSet attrs) { 
     super(context, attrs); 
     setCustomUI(); 
    } 

    public CustomSeekbar(Context context, AttributeSet attrs, int defStyle) { 
     super(context, attrs, defStyle); 
     setCustomUI(); 
    } 

    void setCustomUI() { 

     this.setProgressDrawable(getResources().getDrawable(
       R.drawable.yourBackground)); 
    } 
}