Я пытаюсь достичь этого дизайна индикатора выполнения: enter image description here

Текущий код, который у меня есть, производит следующее: enter image description here

Это код:


    
        
        
    



    
        
            
            
        
    

Моя полоса прогресса:

 

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

Ответы (5)

Как сделать прогресс-форму немного меньше?

Вам нужно дать элементу прогресса небольшое отступление, например:


Как сделать так, чтобы индикатор выполнения изгибался согласно проекту?

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

Полный код:


 
    
        
        
    
 

 

    
        
            
            
        
    
 

Спасибо Георгию Коэмджиеву за хороший вопрос и изображения. Для тех, кто хочет сделать подобное ему, сделайте следующее.

1) Создайте фон для ProgressBar.

progress_bar_background.xml:



    
    

2) Создайте масштаб для ProgressBar.

curved_progress_bar.xml:



    
        
            
            
        
    

    
        
            
                
                
            
        
    

3) В файл макета добавьте ProgressBar.



    


The code produce following progress bar
Вы можете получить индикатор выполнения как с внутренним цветом прогресса, так и с рамкой цвет, пустой прогресс с прозрачным цветом.




    
        
        
    



    
        
            
            
        
    
 


 
    
        
            
            
        
    
 
 

С библиотекой компонентов материала вы можете использовать LinearProgressIndicator и app: trackCornerRadius атрибут.
Что-то вроде:

    

enter image description here

Он также работает для индикатора детерминированного прогресса, удаляя android: indeterminate = "true" или используя android: indeterminate = "false"

Примечание: требуется как минимум версия 1.3.0.

2022 WebDevInsider