Удалите прокладку в горизонтальном индикаторе выполнения

В нашем приложении нам нужен неопределенный индикатор выполнения, например:

индикатор выполнения, как это должно быть

Мы можем достичь этого, установив отрицательный запас на ProgressBar, например:

<ProgressBar
    android:id="@+id/progressbar"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:indeterminate="true"
    android:marginTop="-7dp"
    android:visibility="@{loading ? View.VISIBLE : View.GONE}" />

НО, потому что ConstraintLayout не поддерживает отрицательные поля, он будет выглядеть следующим образом:

индикатор выполнения с дополнением

ОК, отрицательный запас был взломан. Позвольте заменить его другим взломом, не так ли? Представьте наш пользовательский вид CustomProgressBar, который расширяет ProgressBar и переопределяет его метод onDraw, например:

@Override
protected void onDraw(Canvas canvas) {
    int marginTop = dpToPx(7);
    canvas.translate(0, -marginTop);
    super.onDraw(canvas);
}

Но все это пахнет плохим кодом. Должно быть лучшее решение! Что бы вы порекомендовали?

Ответы

Ответ 1

Другой способ сделать это - использовать Guideline и центр ProgressBar между родительским верхом и директивой.

<ProgressBar
    android:id="@+id/progressBar2"
    style="?android:attr/progressBarStyleHorizontal"
    android:layout_width="0dp"
    android:paddingTop="-4dp"
    android:layout_height="wrap_content"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintBottom_toTopOf="@+id/guideline"
    app:layout_constraintTop_toTopOf="parent" />

<android.support.constraint.Guideline
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:id="@+id/guideline"
    android:orientation="horizontal"
    app:layout_constraintGuide_begin="4dp" />

Ответ 2

Решение, которое меньше похоже на взлома: оберните огромный ProgressBar меньшим FrameLayout. Таким образом, FrameLayout ограничивает его высоту, но ProgressBar все еще отображается полностью.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="4dp">

    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="32dp"
        android:layout_gravity="center" />

</FrameLayout>

Ответ 3

Я столкнулся с той же проблемой. И, как вы сказали, я сталкиваюсь с многочисленными решениями, которые кажутся взломом, которые могут сломать что-то еще по линии. С учетом сказанного я встретил одно решение, которое должно использовать эту библиотеку вместо этого для индикатора выполнения.

Следует отметить, что он должен проинтегрировать его, добавив:

compile 'me.zhanghai.android.materialprogressbar:library:1.3.0'

Однако, когда я использовал это, он дал мне ошибку в библиотеке поддержки Android для плавающей панели действий. Поэтому я рекомендую вам использовать это вместо:

compile 'me.zhanghai.android.materialprogressbar:library:1.1.7'

Пример фрагмента кода о том, как я его использовал:

<me.zhanghai.android.materialprogressbar.MaterialProgressBar
    android:id="@+id/reviewProgressBar"
    style="@style/Widget.MaterialProgressBar.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_below="@+id/my_toolbar"
    android:indeterminate="false"
    app:mpb_progressStyle="horizontal"
    app:mpb_useIntrinsicPadding="false"/>

Надеюсь, это поможет!

Ответ 4

Обходной путь, который я сделал, - это установить высоту ProgressBar близко к ширине такта:

Индикатор выполнения:

<ProgressBar
    android:id="@+id/pb_loading_progress"
    style="@style/Widget.AppCompat.ProgressBar.Horizontal"
    android:layout_width="match_parent"
    android:layout_height="2.1dp"
    android:layout_below="@id/tb_browser"
    android:max="100"
    android:progressDrawable="@drawable/style_browser_progress_drawable"
    android:visibility="invisible" />

Достижимый прогресс:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape android:shape="line">
            <stroke
                android:width="2dp"
                android:color="@color/colorPrimary" />
        </shape>
    </item>
    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="horizontal"
            android:gravity="left">
            <shape android:shape="line">
                <stroke
                    android:width="2dp"
                    android:color="@color/white" />
            </shape>
        </clip>
    </item>
</layer-list>

Это выглядело так:

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