Подтвердить что ты не робот

Android: SeekBar с пользовательским выводом

У меня есть SeekBar с настраиваемой возможностью. Элемент прогресса не отображается с левой стороны точно, но он перемещается вправо. Как я могу избежать этого?

введите описание изображения здесь

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@android:id/summary"
    android:background="@null"

    android:progressDrawable="@drawable/seekbar"
    android:thumb="@drawable/seekbar_thumb"/>

seekbar.xml

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

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar_background"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

seekbar_background.xml

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

    <stroke android:width="2dp" android:color="@color/colorNeutral" />

</shape>

seekbar_progress.xml

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

    <stroke
        android:width="4dp"
        android:color="@color/colorAccentDark" />
</shape>

EDIT:

Как уже упоминалось в комментариях, если будут две ширины, одна и та же проблема исчезнет. Но мне нужно сделать это с двумя разными ширинами, используя возможность рисования? Может быть, с разными формами не только линии?

4b9b3361

Ответ 1

Я не могу объяснить, почему это проблема при рисовании штрихов, я думаю, что это имеет какое-то отношение к ширине штрихов, но я еще не нашел источник для проверки.

Фиксация наложения

Чтобы устранить проблему, вы можете просто установить inset с левой стороны. Значения 1dp или 2dp работают, и поиск будет правильно нарисован.

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/seekbar_background"
        android:left="2dp"><!-- or 1dp -->
    </item>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress"/>
    </item>
</layer-list>

Ответ 2

Наблюдение

Когда вы создаете линию с использованием формы, она оставляет левое и правое заполнение (из вида, в котором используется этот drawable)., равный половине его ширины штриха.

Обход

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

inset_seekbar_background.xml

<inset xmlns:android="http://schemas.android.com/apk/res/android"
    android:drawable="@drawable/seekbar_progress"
    android:insetLeft="2dp"
    android:insetRight="2dp" />

и ваш последний файл seekbar.xml будет похож -

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

    <item
        android:id="@android:id/background"
        android:drawable="@drawable/inset_seekbar_background"/>
    <item android:id="@android:id/progress">
        <clip android:drawable="@drawable/seekbar_progress" />
    </item>

</layer-list>

Заместители

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

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@android:id/background"
        android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
    <item android:id="@android:id/secondaryProgress">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="false">
                    <color android:color="@android:color/transparent" />
                </item>
                <item android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
    <item android:id="@android:id/progress">
        <scale android:scaleWidth="100%">
            <selector>
                <item android:state_enabled="true">
                    <color android:color="@android:color/transparent" />
                </item>
                <item android:drawable="@drawable/abc_scrubber_primary_mtrl_alpha" />
            </selector>
        </scale>
    </item>
</layer-list><!-- From: file:/usr/local/google/buildbot/src/googleplex-android/mnc-supportlib-release/frameworks/support/v7/appcompat/res/drawable/abc_seekbar_track_material.xml -->

введите описание изображения здесь введите описание изображения здесь введите описание изображения здесь введите описание изображения здесь

2.Вы можете установить тему в своем представлении с другим цветом в стиле андроида как -

<style name="AppTheme.SeekBar">
        <item name="colorPrimary">@color/colorAccent</item>
        <item name="colorPrimaryDark">@color/colorPrimary</item>
        <item name="colorAccent">@color/colorPrimaryDark</item>
</style>

Здесь я использовал все варианты для Seekbars -

            <SeekBar 
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:theme="@style/AppTheme.SeekBar" />

            <SeekBar
                android:layout_width="match_parent"
                android:layout_height="wrap_content" />

            <SeekBar
                android:layerType="software"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:progressDrawable="@drawable/seekbar" />

И вот вывод- введите описание изображения здесь

Ответ 3

Как мне кажется, проблема в том, что они оба должны быть одинаковой ширины

но вы делаете ширину = 4 android:width="4dp"

и ширина поисковой ширины = 2 android:width="2dp"

просто соответствуют им как 2 или 4, не используют разные значения

Ответ 4

Попробуйте использовать .9.png drawable шириной 4dp (преобразован в px).

Держите 1 dp сверху и снизу прозрачным.

И добавьте цвет в центр 2 дп по вашему выбору для фона.

Таким образом, как фон, так и прогресс будут иметь одинаковую ширину, но фон будет выглядеть тоньше, чем индикатор выполнения.

Ответ 5

Попробуйте использовать это   android:layout_marginLeft="-3dp" или -2dp

<SeekBar
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_below="@android:id/summary"
    android:background="@null"
    android:layout_marginLeft="-2dp"
    android:progressDrawable="@drawable/seekbar"
    android:thumb="@drawable/seekbar_thumb"/>`

Ответ 6

Если ваш выбор цвета имеет предел и предопределен. Вы можете попробовать добавить XML файлы с помощью Seekbars, используя разные темы.

Что-то вроде этого:

themed_seekbar_one.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    android:theme="@style/first_theme">
</SeekBar>

themed_seekbar_two.xml

<?xml version="1.0" encoding="utf-8"?>
<SeekBar
    ...
    android:theme="@style/second_theme">
</SeekBar>

Затем вы можете раздувать представления так же, как это:

SeekBar seekbar = (SeekBar)getLayoutInflater().inflate(R.layout.themed_seekbar_xxx, null);