Pasek postępu z zaokrąglonymi rogami?

85

Próbuję osiągnąć taki projekt paska postępu: wprowadź opis obrazu tutaj

Obecny kod, który mam, daje to: wprowadź opis obrazu tutaj

To jest kod:

<item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
</item>

<item android:id="@android:id/progress">
    <clip>
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </clip>
</item>

Mój pasek postępu:

 <ProgressBar
            android:id="@+id/activeProgress"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="300dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:progress="10"
            android:progressDrawable="@drawable/rounded_corners_progress_bar"/>

Próbowałem, dodając <size>atrybut na <shape>w <clipcelu uczynić postęp kształt nieco mniejszy, ale to nie działa. Ponadto pasek postępu jest płaski i chcę być zakrzywiony zgodnie z projektem. Co muszę zmienić, aby uzyskać projekt?

Georgi Koemdzhiev
źródło

Odpowiedzi:

170

Jak nieco zmniejszyć kształt postępu?

Musisz trochę dopełnić element postępu, na przykład:

<item android:id="@android:id/progress"
    android:top="2dp"
    android:bottom="2dp"
    android:left="2dp"
    android:right="2dp">

Jak sprawić, by pasek postępu był zakrzywiony zgodnie z projektem?

Zamień <clip></clip>element na <scale android:scaleWidth="100%"></scale>. Dzięki temu kształt zachowa swój kształt w miarę wzrostu - i nie zostanie odcięty. Niestety na początku będzie to miało trochę niechciany efekt wizualny - rogi kształtu nie mają wystarczająco dużo miejsca na rysowanie. Ale w większości przypadków może wystarczyć.

Pełny kod:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:id="@android:id/background">
    <shape>
        <corners android:radius="8dp"/>
        <solid android:color="@color/dirtyWhite"/>
    </shape>
 </item>

 <item android:id="@android:id/progress"
    android:top="1dp"
    android:bottom="1dp"
    android:left="1dp"
    android:right="1dp">

    <scale android:scaleWidth="100%">
        <shape>
            <corners android:radius="8dp"/>
            <solid android:color="@color/colorPrimaryDark"/>
        </shape>
    </scale>
 </item>
</layer-list>
Eyal Biran
źródło
4
@habibullah Używanie natywnego paska ProgressBar i listy warstw jest bardzo ograniczające. Możesz łatwo zaimplementować niestandardowy pasek postępu, aby dopasować go do swoich potrzeb. Na przykład, jeśli masz jednolicie kolorowe tło - po prostu użyj 9-ścieżkowej ścieżki pierwszego planu, aby ukryć wszystko oprócz postępu. Jeśli celujesz w nowsze wersje Androida, możesz po prostu użyć wbudowanej obsługi maski (nie jest obsługiwana w starszych wersjach). Inną opcją jest użycie biblioteki, może to być dla Ciebie dobre: github.com/akexorcist/Android-RoundCornerProgressBar . Jeśli nadal masz problemy, zadaj nowe pytanie. Twoje zdrowie.
Eyal Biran
1
@AkshayMahajan patrz komentarz powyżej
Eyal Biran
1
Kiedy zastosowałem twój pełny kod, cały pasek postępu pokolorował się moim głównym kolorem (colorPrimaryDark), chociaż postęp nie jest w 100%. Dodałem tag klipu pod @android: id / background, naprawiłem, ale tło zniknęło. Moje tymczasowe rozwiązanie polega na usunięciu elementu tła i dodaniu koloru tła do układu (bez zaokrąglonych rogów).
Oğuzhan Koşar,
6
W moim przypadku, scalez android:scaleWidth="100%"wystarczyły, aby wyświetlić go z zaokrąglonymi narożnikami. Wielkie dzięki
Edison Spencer
1
Dzięki. Uratowałeś mój dzień.
Nguyễn Anh Tuấn
9

Z komponentów biblioteki Materiały można użyć LinearProgressIndicator, a app:trackCornerRadiusatrybut.
Coś jak:

    <com.google.android.material.progressindicator.LinearProgressIndicator
        android:indeterminate="true"
        app:trackThickness="xxdp"
        app:trackCornerRadius="xdp"/>

wprowadź opis obrazu tutaj

Działa również dla określonego wskaźnika postępu usuwania android:indeterminate="true"lub używaniaandroid:indeterminate="false"

Uwaga: wymaga co najmniej wersji 1.3.0-alpha04.

Gabriele Mariotti
źródło
2
@Arunachalamk LinearProgressIndicator został wprowadzony wraz z 1.3.0-alpha04 , obecnie najnowszą wersją alfa.
Gabriele Mariotti
8

Podziękowania dla Georgi Koemdzhieva za miłe pytanie i zdjęcia. Dla tych, którzy chcą zrobić coś podobnego do jego, wykonaj następujące czynności.

1) Utwórz tło dla pliku ProgressBar.

progress_bar_background.xml:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    >
    <corners android:radius="3dp" />
    <stroke android:color="@color/white" android:width="1dp" />
</shape>

2) Utwórz skalę dla ProgressBar.

curved_progress_bar.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">
        <shape>
            <corners android:radius="2dp" />
            <solid android:color="@color/transparent" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
            <shape>
                <corners android:radius="2dp" />
                <solid android:color="#ffff00" />
            </shape>
        </clip>
    </item>
</layer-list>

3) W pliku układu dodaj rozszerzenie ProgressBar.

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="6dp"
    android:layout_marginStart="20dp"
    android:layout_marginTop="10dp"
    android:layout_marginEnd="20dp"
    android:background="@drawable/progress_bar_background"
    >

    <ProgressBar
        android:id="@+id/progress_bar"
        style="@style/Widget.AppCompat.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="4dp"
        android:layout_margin="1dp"
        android:indeterminate="false"
        android:progressDrawable="@drawable/curved_progress_bar"
        />

</FrameLayout>
CoolMind
źródło
4

Kod tworzy następujący pasek postępu
Możesz uzyskać pasek postępu z wewnętrznym kolorem postępu, kolorem obramowania, pustym postępem z przezroczystym kolorem.

<?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>
        <corners android:radius="15dip" />
        <stroke android:width="1dp" android:color="@color/black" />
    </shape>
</item>

<item android:id="@android:id/secondaryProgress">
    <clip>
        <shape>
            <corners android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:centerColor="@color/trans"
                android:centerY="0.75"
                android:endColor="@color/black"
                android:angle="270"

                />
        </shape>
    </clip>
 </item>


 <item
    android:id="@android:id/progress"
    >
    <clip>
        <shape>
            <corners
                android:radius="5dip" />
            <gradient
                android:startColor="@color/black"
                android:endColor="@color/black"
                android:angle="270" />
        </shape>
    </clip>
 </item>
 </layer-list>
Ravichandra SV
źródło
Cześć Ravichandra, dziękuję za odpowiedź! Czy możesz dodać wyjaśnienie, dlaczego Twój kod odpowiada na jego pytanie? W przeciwnym razie korzystanie z niego będzie trudne dla innych użytkowników. Dzięki!
Nander Speerstra
Dziękujemy za ten fragment kodu, który może zapewnić ograniczoną, natychmiastową pomoc. Właściwe wyjaśnienie znacznie poprawiłoby jego długoterminową wartość, pokazując, dlaczego jest to dobre rozwiązanie problemu i uczyniłoby go bardziej użytecznym dla przyszłych czytelników z innymi, podobnymi pytaniami. Proszę edytować swoją odpowiedź dodać kilka wyjaśnień, w tym założeń już wykonanych. Ponadto spróbuj wyjaśnić, dlaczego Twoja odpowiedź jest lepsza niż inne odpowiedzi już udzielone na to pytanie.
Qw3ry