Пользовательский SeekBar Drawable Android

Я хочу персонализировать поисковую панель Android по умолчанию:

enter image description here

Я прочитал около девяти изображений патча и создал 6 изображений png. Первые три относятся к черному индикатору выполнения (progressDrawable), как показано ниже:

  • Правильное изображение

    enter image description here

  • Центральное изображение

    enter image description here

  • Левое изображение

    enter image description here

Результат должен быть:

enter image description here

Синие изображения представляют собой прогресс и следующие:

  • Правильное изображение

    enter image description here

  • Центральное изображение

    enter image description here

  • Левое изображение

    enter image description here

И большой палец выглядит следующим образом:

enter image description here

Мой вопрос в том, как я могу использовать девять патч-изображений для создания пользовательского окна поиска точно так же, как и первый снимок, и как я могу применить его к моей панели поиска?

Ответы

Ответ 1

Я думаю, что это не должно быть сложно. Вам не нужно делать 6 изображений, чтобы удовлетворить ваши потребности. Просто создайте 2 девяти патча для фона, прогресса. И thumb.png. Вот ваш XML:

<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">

в seekbar_progress:

 <?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>

Помните, что ваш thumb должен иметь пустое место сверху при создании, чтобы оно выглядело так, как вам хотелось. Надеюсь, это поможет.

Ответ 2

Вы можете использовать пользовательскую панель поиска с использованием кода Java... и добавить список слоев в качестве чертежей... этот фрагмент кода поможет вам, я надеюсь.

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>

Это будет ваш класс customSeekbar, и вы можете использовать эту настраиваемую панель поиска в своем приложении.

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));
    }
}

Ответ 3

1) Перейдите в AndroidSDK → tools и запустите draw9patch.bat

вы увидите черное окно

2) перетащите изображение в окно и запустите 9 патчей:

начать патч вокруг ваших фотографий

3) перейдите в меню "Файл" и нажмите "Сохранить 9-патч".

Окончательный совет: ваша фотография должна быть .PNG-форматом и просто содержит контент, а не свободное пространство вокруг него. например, я сохранил вашу фотографию на своем компьютере и увидел, что на экране появляется много неиспользуемого пространства. Синяя часть вашего изображения.

Теперь примените к вашей панели поиска:

Просто следуйте по ссылке

Создать пользовательскую панель слайдов

Извините; у меня недостаточно репутации для вставки картинки