Próbuję utworzyć zaokrąglony pasek postępu. To jest to, co chcę osiągnąć
W tle znajduje się szary pierścień. Na górze pojawia się niebieski pasek postępu, który porusza się po okrągłej ścieżce od 0 do 360 w ciągu 60 lub dowolnej ilości sekund.
Oto mój przykładowy kod.
<ProgressBar
android:id="@+id/ProgressBar"
android:layout_width="match_parent"
android:layout_height="match_parent"
style="?android:attr/progressBarStyleLarge"
android:indeterminateDrawable="@drawable/progressBarBG"
android:progress="50"
/>
Aby to zrobić, w możliwym do rysowania „progressBarBG” tworzę listę warstw, a wewnątrz tej listy warstw podaję dwa elementy, jak pokazano.
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item android:id="@android:id/background">
<shape
android:shape="ring"
android:innerRadius="64dp"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@color/grey" />
</shape>
</item>
<item android:id="@android:id/progress">
<clip>
<shape
android:shape="ring"
android:innerRadius="64dp"
android:thickness="8dp"
android:useLevel="false">
<solid android:color="@color/blue" />
</shape>
</clip>
</item>
Teraz pierwszy szary pierścień jest generowany dobrze. Jednak niebieski pierścień zaczyna się od lewej strony rysunku i przechodzi w prawo, tak jak działa liniowy pasek postępu. W ten sposób pokazuje 50% postęp z czerwoną strzałką pokazującą kierunek.
Chcę przesunąć niebieski pasek postępu po ścieżce kołowej zgodnie z oczekiwaniami.
android
progress-bar
Saurav Srivastava
źródło
źródło
Odpowiedzi:
Oto moje dwa rozwiązania.
Krótka odpowiedź:
Zamiast tworzyć plik
layer-list
, podzieliłem go na dwa pliki. Jeden zaProgressBar
i jeden za tło.Jest to
ProgressDrawable
plik (@drawable folder): circular_progress_bar.xmlA to dla jego
background
(folderu @drawable): circle_shape.xmlI na koniec, wewnątrz układu, w którym pracujesz:
Oto wynik:
Długa odpowiedź:
Użyj widoku niestandardowego, który dziedziczy
android.view.View
Oto pełny projekt na github
źródło
setProgress
metodę, a następnie przekazać wartość. google.com/…android:fromDegrees="270" android:toDegrees="270"
rozwiązanie .. rozwiązałem to !! Wielkie dzięki!Zrobiłem w prosty sposób:
Sprawdź zrzut ekranu dla tego samego.
CustomProgressBarActivity.java :
activity_custom_progressbar.xml :
custom_progressbar_drawable.xml :
Mam nadzieję, że to ci pomoże.
źródło
Napisałem szczegółowy przykład na okrągłym pasku postępu w Androidzie tutaj na moim blogu demonuts.com . Możesz tam również polubić pełny kod źródłowy i wyjaśnienia.
Oto, jak utworzyłem okrągły pasek postępu z procentem wewnątrz koła w czystym kodzie bez żadnej biblioteki.
najpierw utwórz plik do rysowania o nazwie
circular.xml
Teraz w Twoim
activity_main.xml
dodaniu:W
activity_main.xml
przypadku użyłem jednego okrągłego obrazu z białym tłem, aby pokazać białe tło wokół wartości procentowej. Oto obraz:Możesz zmienić kolor tego obrazu, aby ustawić niestandardowy kolor wokół tekstu procentowego.
Teraz wreszcie dodaj następujący kod do
MainActivity.java
:Jeśli chcesz zrobić poziomy pasek postępu, kliknij ten link, zawiera wiele cennych przykładów z kodem źródłowym:
http://www.skholingua.com/android-basic/user-interface/form-widgets/progressbar
źródło
Zdałem sobie sprawę z biblioteki Open Source na GitHub CircularProgressBar, która robi dokładnie to, co chcesz w najprostszy możliwy sposób:
STOSOWANIE
Aby utworzyć okrągły pasek ProgressBar, dodaj CircularProgressBar do kodu XML układu i dodaj bibliotekę CircularProgressBar do projektora lub możesz też pobrać go za pomocą Gradle:
XML
Aby zmienić CircularProgressBar, musisz użyć następujących właściwości w kodzie XML.
Nieruchomości:
app:progress
(integer) >> domyślnie 0app:progressbar_color
(kolor) >> domyślny CZARNYapp:background_progressbar_color
(kolor) >> domyślnie SZARYapp:progressbar_width
(wymiar) >> domyślnie 7dpapp:background_progressbar_width
(wymiar) >> domyślnie 3dpJAWA
Znajdź lub pobierz tę bibliotekę tutaj >> https://github.com/lopspower/CircularProgressBar
źródło
Oto prosty niestandardowy widok postępu kręgu wyświetlania. Możesz modyfikować i optymalizować bardziej, aby pasowały do Twojego projektu.
Przykład użycia
xml
kotlin
Wynik
źródło
Jestem nowy, więc nie mogę komentować, ale chciałem podzielić się leniwą poprawką. Używam również oryginalnego podejścia Pedrama i właśnie napotkałem ten sam problem z Lollipopem. Ale alanv w innym poście miał jedną poprawkę. To jakiś błąd lub przeoczenie w API21. Dosłownie po prostu dodaj
android:useLevel="true"
do swojego kręgu xml postępu. Nowe podejście Pedrama wciąż jest właściwą poprawką, ale pomyślałem, że podzielę się również leniwym rozwiązaniem.źródło
wypróbuj tę metodę, aby utworzyć mapę bitową i ustawić ją na widok obrazu.
źródło
https://github.com/passsy/android-HoloCircularProgressBar to jeden z przykładów biblioteki, która to robi. Jak stwierdził Tenfour04, będzie musiał być nieco niestandardowy, ponieważ nie jest obsługiwany bezpośrednio po wyjęciu z pudełka. Jeśli ta biblioteka nie zachowuje się tak, jak chcesz, możesz ją rozwidlić i zmodyfikować szczegóły, aby działała zgodnie z własnymi upodobaniami. Jeśli zaimplementujesz coś, co inni mogą następnie ponownie wykorzystać, możesz nawet przesłać żądanie ściągnięcia, aby ponownie to scalić!
źródło
@Pedram, twoje stare rozwiązanie działa również dobrze w Lollipop (i jest lepsze niż nowe, ponieważ można go używać wszędzie, w tym w zdalnych widokach), po prostu zmień
circular_progress_bar.xml
kod na ten:źródło
źródło
Dzięki Bibliotece komponentów materiałów można używać
ProgressIndicator
zeWidget.MaterialComponents.ProgressIndicator.Circular.Determinate
stylem.Coś jak:
Możesz użyć tych atrybutów:
circularRadius
: określa promień okrągłego wskaźnika postęputrackColor
: kolor toru postępu. Jeśli nie zostanie zdefiniowany, zostanie ustawiony naindicatorColor
i zastosowanyandroid:disabledAlpha
z motywu.indicatorColor
: pojedynczy kolor używany dla wskaźnika w trybie określonym / nieokreślonym. Domyślnie używa podstawowego koloru motywuSłuży
progressIndicator.setProgressCompat((int) value, true);
do aktualizowania wartości wskaźnika.Uwaga: wymaga co najmniej wersji
1.3.0-alpha01
.źródło
1.3.0-alpha01
.Zmiana
do
dla drugiego sahpe z
id="@android:id/progress
mam nadzieję, że to działa
źródło