RoundCornerProgressBar herunterladen - RoundCornerProgressBar Quellcode herunterladen

RoundCornerProgressBar

Runde Ecke ist cool. Lassen Sie uns Ihren Fortschrittsbalken mit runder Ecke erstellen

Beispiel für einen Fortschrittsbalken mit runden Ecken

Bunter Fortschrittsbalken mit abgerundeten Ecken

Herunterladen

Gradle

implementation ' com.akexorcist:round-corner-progress-bar:2.2.1 '

Demo

Gehen Sie zu Google Play, um die Demo-App herunterzuladen

Überblick

Fortschrittsbalken mit runden Ecken

Einfacher Fortschrittsbalken mit runden Ecken

Fortschrittsbalken mit runden Ecken

CenteredRoundCornerProgressBar

Der Fortschrittsbalken mit runder Ecke und Fortschritt wird von der Mitte aus erweitert

Zentrierter Fortschrittsbalken mit runder Ecke

Fortschrittsbalken für runde Ecken des Symbols

Fortschrittsbalken mit runder Ecke und Überschriftensymbol

Fortschrittsbalken für runde Ecken des Symbols

TextRoundCornerProgressBar

Fortschrittsbalken mit runder Ecke und Text im Fortschrittsbalken

Fortschrittsbalken für runde Ecken des Symbols

IndeterminateRoundCornerProgressBar und IndeterminateCenteredRoundCornerProgressBar

Einfacher Fortschrittsbalken mit runden Ecken und zentrierter Fortschrittsbalken mit runden Ecken und unbestimmter Animation

Fortschrittsbalken für unbestimmte runde Ecken und Fortschrittsbalken für unbestimmte zentrierte runde Ecken

Besonderheit

Standardfunktionen

Primärer Fortschritt und sekundärer Fortschritt werden unterstützt
Primärer Fortschritt, sekundärer Fortschritt und Hintergrundfarbe des Fortschritts sind anpassbar
Passen Sie die Hintergrundauffüllung Ihres Fortschritts individuell an
Passen Sie den Eckenradius Ihres eigenen Fortschritts an
Umkehrung des Fortschrittsbalkens wird unterstützt
Fortschrittsbalken mit Farbverlauf? Ja!
Animation zur Fortschrittsänderung? Absolut ja!

Komponentenmerkmale

Fortschritt wird von der Mitte aus mit CenteredRoundCornerProgressBar erweitert
Überschriftensymbol unterstützt mit IconRoundCornerProgressBar
Text innerhalb des Fortschritts wird mit TextRoundCornerProgressBar unterstützt
Unbestimmte Animation wird mit IndeterminateRoundCornerProgressBar oder IndeterminateCenteredRoundCornerProgressBar unterstützt

Verwendung

Um ein benutzerdefiniertes Attribut der Fortschrittsleiste zu verwenden, definieren Sie den Namespace „App“ als Stammansichtsattribut in Ihrem Layout

xmlns:app="http://schemas.android.com/apk/res-auto"

RoundCornerProgressBar

Beispiel

< com .akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar
    android : layout_width = " 260dp "
    android : layout_height = " 30dp "
    app : rcBackgroundColor = " #0A000000 "
    app : rcBackgroundPadding = " 2dp "
    app : rcMax = " 100 "
    app : rcProgress = " 40 "
    app : rcProgressColor = " #EF5350 "
    app : rcRadius = " 10dp "
    app : rcSecondaryProgress = " 60 "
    app : rcSecondaryProgressColor = " #40EF5350 " />

Fortschrittsbalken mit runden Ecken

Layout-XML

< com .akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    app : rcProgress = " float "
    app : rcSecondaryProgress = " float "
    app : rcMax = " float "
    app : rcRadius = " dimension "
    app : rcBackgroundPadding = " dimension "
    app : rcReverse = " boolean "
    app : rcProgressColor = " color "
    app : rcSecondaryProgressColor = " color "
    app : rcBackgroundColor = " color "
    app : rcAnimationEnable = " boolean "
    app : rcAnimationSpeedScale = " float " />

Öffentliche Methoden

 // Progress
fun getMax (): Float
fun setMax ( max : Float )
fun setMax ( max : Int )
fun getProgress (): Float
fun setProgress ( progress : Int )
fun setProgress ( progress : Float )
fun getSecondaryProgress (): Float
fun setSecondaryProgress ( secondaryProgress : Int )
fun setSecondaryProgress ( secondaryProgress : Float )

// Dimension
fun getRadius (): Int
fun setRadius ( radius : Int )
fun getPadding (): Int
fun setPadding ( padding : Int )
fun getLayoutWidth (): Float

// Animation
fun enableAnimation ()
fun disableAnimation ()
fun getAnimationSpeedScale (): Float
fun setAnimationSpeedScale ( scale : Float )
fun isProgressAnimating (): Boolean
fun isSecondaryProgressAnimating (): Boolean

// Reversing Progress
fun isReverse (): Boolean
fun setReverse ( isReverse : Boolean )

// Color
fun getProgressBackgroundColor (): Int
fun setProgressBackgroundColor ( color : Int )
fun getProgressColor (): Int
fun setProgressColor ( color : Int )
fun getProgressColors (): List < Int >
fun setProgressColors ( colors : List < Int >)
fun getSecondaryProgressColor (): Int
fun setSecondaryProgressColor ( color : Int )
fun getSecondaryProgressColors (): List < Int >
fun setSecondaryProgressColors ( colors : List < Int >)

// Listener
fun setOnProgressChangedListener ( listener : OnProgressChangedListener )

CenteredRoundCornerProgressBar

Wie RoundCornerProgressBar, Umkehrung wird jedoch nicht unterstützt.

Beispiel

< com .akexorcist.roundcornerprogressbar.CenteredRoundCornerProgressBar
    android : layout_width = " 260dp "
    android : layout_height = " 30dp "
    app : rcBackgroundColor = " #0A000000 "
    app : rcBackgroundPadding = " 2dp "
    app : rcMax = " 100 "
    app : rcProgress = " 40 "
    app : rcProgressColor = " #EF5350 "
    app : rcRadius = " 10dp " />

Zentrierter Fortschrittsbalken mit runder Ecke

Layout-XML

< com .akexorcist.roundcornerprogressbar.CenteredRoundCornerProgressBar
    app : rcProgress = " float "
    app : rcSecondaryProgress = " float "
    app : rcMax = " float "
    app : rcRadius = " dimension "
    app : rcBackgroundPadding = " dimension "
    app : rcProgressColor = " color "
    app : rcSecondaryProgressColor = " color "
    app : rcBackgroundColor = " color "
    app : rcAnimationEnable = " boolean "
    app : rcAnimationSpeedScale = " float " />

Öffentliche Methoden

 // Progress
fun getMax (): Float
fun setMax ( max : Float )
fun setMax ( max : Int )
fun getProgress (): Float
fun setProgress ( progress : Int )
fun setProgress ( progress : Float )
fun getSecondaryProgress (): Float
fun setSecondaryProgress ( secondaryProgress : Int )
fun setSecondaryProgress ( secondaryProgress : Float )

// Dimension
fun getRadius (): Int
fun setRadius ( radius : Int )
fun getPadding (): Int
fun setPadding ( padding : Int )
fun getLayoutWidth (): Float

// Animation
fun enableAnimation ()
fun disableAnimation ()
fun getAnimationSpeedScale (): Float
fun setAnimationSpeedScale ( scale : Float )
fun isProgressAnimating (): Boolean
fun isSecondaryProgressAnimating (): Boolean

// Color
fun getProgressBackgroundColor (): Int
fun setProgressBackgroundColor ( color : Int )
fun getProgressColor (): Int
fun setProgressColor ( color : Int )
fun getProgressColors (): List < Int >
fun setProgressColors ( colors : List < Int >)
fun getSecondaryProgressColor (): Int
fun setSecondaryProgressColor ( color : Int )
fun getSecondaryProgressColors (): List < Int >
fun setSecondaryProgressColors ( colors : List < Int >)

// Listener
fun setOnProgressChangedListener ( listener : OnProgressChangedListener )

IconRoundCornerProgressBar

Für diesen Fortschrittsbalken ist eine Symbolgröße erforderlich. Es wird empfohlen, wrap_content für layout_height zu verwenden.

< com .akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar
        android : layout_height = " wrap_content "
        app : rcIconSize = " 40dp "
        ... />

Beispiel

< com .akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar
    android : layout_width = " 260dp "
    android : layout_height = " wrap_content "
    app : rcBackgroundColor = " #0A000000 "
    app : rcBackgroundPadding = " 2dp "
    app : rcIconBackgroundColor = " #00796B "
    app : rcIconPadding = " 5dp "
    app : rcIconSize = " 40dp "
    app : rcIconSrc = " @drawable/ic_android "
    app : rcMax = " 150 "
    app : rcProgress = " 90 "
    app : rcProgressColor = " #EF5350 "
    app : rcRadius = " 5dp "
    app : rcReverse = " true " />

Fortschrittsbalken für runde Ecken des Symbols

Layout-XML

< com .akexorcist.roundcornerprogressbar.IconRoundCornerProgressBar
        app : rcProgress = " float "
        app : rcSecondaryProgress = " float "
        app : rcMax = " float "
        app : rcRadius = " dimension "
        app : rcBackgroundPadding = " dimension "
        app : rcReverse = " boolean "
        app : rcProgressColor = " color "
        app : rcSecondaryProgressColor = " color "
        app : rcBackgroundColor = " color "
        app : rcAnimationEnable = " boolean "
        app : rcAnimationSpeedScale = " float "
        app : rcIconSrc = " reference "
        app : rcIconSize = " dimension "
        app : rcIconWidth = " dimension "
        app : rcIconHeight = " dimension "
        app : rcIconPadding = " dimension "
        app : rcIconPaddingLeft = " dimension "
        app : rcIconPaddingRight = " dimension "
        app : rcIconPaddingTop = " dimension "
        app : rcIconPaddingBottom = " dimension "
        app : rcIconBackgroundColor = " color " />

Öffentliche Methoden

 // Progress
fun getMax (): Float
fun setMax ( max : Float )
fun setMax ( max : Int )
fun getProgress (): Float
fun setProgress ( progress : Int )
fun setProgress ( progress : Float )
fun getSecondaryProgress (): Float
fun setSecondaryProgress ( secondaryProgress : Int )
fun setSecondaryProgress ( secondaryProgress : Float )

// Dimension
fun getRadius (): Int
fun setRadius ( radius : Int )
fun getPadding (): Int
fun setPadding ( padding : Int )
fun getLayoutWidth (): Float

fun getIconSize (): Int
fun setIconSize ( size : Int )
fun getIconPadding (): Int
fun setIconPadding ( padding : Int )
fun getIconPaddingLeft (): Int
fun setIconPaddingLeft ( padding : Int )
fun getIconPaddingTop (): Int
fun setIconPaddingTop ( padding : Int )
fun getIconPaddingRight (): Int
fun setIconPaddingRight ( padding : Int )
fun getIconPaddingBottom (): Int
fun setIconPaddingBottom ( padding : Int )

// Animation
fun enableAnimation ()
fun disableAnimation ()
fun getAnimationSpeedScale (): Float
fun setAnimationSpeedScale ( scale : Float )
fun isProgressAnimating (): Boolean
fun isSecondaryProgressAnimating (): Boolean

// Reversing Progress
fun isReverse (): Boolean
fun setReverse ( isReverse : Boolean )

// Color
fun getProgressBackgroundColor (): Int
fun setProgressBackgroundColor ( color : Int )
fun getProgressColor (): Int
fun setProgressColor ( color : Int )
fun getProgressColors (): List < Int >
fun setProgressColors ( colors : List < Int >)
fun getSecondaryProgressColor (): Int
fun setSecondaryProgressColor ( color : Int )
fun getSecondaryProgressColors (): List < Int >
fun setSecondaryProgressColors ( colors : List < Int >)
fun getColorIconBackground (): Int
fun setIconBackgroundColor ( color : Int )

// Icon
fun getIconImageResource (): Int
fun setIconImageResource ( resId : Int )
fun getIconImageBitmap (): Birmap
fun setIconImageBitmap ( bitmap : Bitmap )
fun getIconImageDrawable (): Drawable
fun setIconImageDrawable ( drawable : Drawable )

// Listener
fun setOnProgressChangedListener ( listener : OnProgressChangedListener )
fun setOnIconClickListener ( listener : OnIconClickListener )

TextRoundCornerProgressBar

Beispiel

< com .akexorcist.roundcornerprogressbar.TextRoundCornerProgressBar
    android : layout_width = " 260dp "
    android : layout_height = " 30dp "
    app : rcBackgroundColor = " #0A000000 "
    app : rcBackgroundPadding = " 2dp "
    app : rcMax = " 100 "
    app : rcProgress = " 40 "
    app : rcProgressColor = " #EF5350 "
    app : rcRadius = " 80dp "
    app : rcReverse = " true "
    app : rcSecondaryProgress = " 60 "
    app : rcSecondaryProgressColor = " #40009688 "
    app : rcTextPositionPriority = " outside "
    app : rcTextProgress = " 40 "
    app : rcTextProgressColor = " #111111 " />

Fortschrittsbalken für Text mit abgerundeten Ecken

Layout-XML

< com .akexorcist.roundcornerprogressbar.TextRoundCornerProgressBar
        app : rcProgress = " float "
        app : rcSecondaryProgress = " float "
        app : rcMax = " float "
        app : rcRadius = " dimension "
        app : rcBackgroundPadding = " dimension "
        app : rcReverse = " boolean "
        app : rcProgressColor = " color "
        app : rcSecondaryProgressColor = " color "
        app : rcBackgroundColor = " color "
        app : rcAnimationEnable = " boolean "
        app : rcAnimationSpeedScale = " float "
        app : rcTextProgressColor = " color "
        app : rcTextProgressSize = " dimension "
        app : rcTextProgressMargin = " dimension "
        app : rcTextProgress = " String "
        app : rcTextInsideGravity = " start|end "
        app : rcTextOutsideGravity = " start|end "
        app : rcTextPositionPriority = " inside|outside " />

Öffentliche Methoden

 // Progress
fun getMax (): Float
fun setMax ( max : Float )
fun setMax ( max : Int )
fun getProgress (): Float
fun setProgress ( progress : Int )
fun setProgress ( progress : Float )
fun getSecondaryProgress (): Float
fun setSecondaryProgress ( secondaryProgress : Int )
fun setSecondaryProgress ( secondaryProgress : Float )

// Dimension
fun getRadius (): Int
fun setRadius ( radius : Int )
fun getPadding (): Int
fun setPadding ( padding : Int )
fun getLayoutWidth (): Float
fun getTextProgressSize (): Int
fun setTextProgressSize ( size : Int )
fun getTextProgressMargin (): Int
fun setTextProgressMargin ( margin : Int )

// Animation
fun enableAnimation ()
fun disableAnimation ()
fun getAnimationSpeedScale (): Float
fun setAnimationSpeedScale ( scale : Float )
fun isProgressAnimating (): Boolean
fun isSecondaryProgressAnimating (): Boolean

// Reversing Progress
fun isReverse (): Boolean
fun setReverse ( isReverse : Boolean )

// Color
fun getProgressBackgroundColor (): Int
fun setProgressBackgroundColor ( color : Int )
fun getProgressColor (): Int
fun setProgressColor ( color : Int )
fun getProgressColors (): List < Int >
fun setProgressColors ( colors : List < Int >)
fun getSecondaryProgressColor (): Int
fun setSecondaryProgressColor ( color : Int )
fun getSecondaryProgressColors (): List < Int >
fun setSecondaryProgressColors ( colors : List < Int >)
fun getTextProgressColor (): Int
fun setTextProgressColor ( color : Int )

// Text
fun getProgressText (): String
fun setProgressText ( text : String )

// Position
fun getTextPositionPriority (): Int
fun setTextPositionPriority ( priority : Int )
fun getTextInsideGravity (): Int
fun setTextInsideGravity ( gravity : Int )
fun getTextOutsideGravity (): Int
fun setTextOutsideGravity ( gravity : Int )

// Listener
fun setOnProgressChangedListener ( listener : OnProgressChangedListener )

IndeterminateRoundCornerProgressBar

Beispiel

< com .akexorcist.roundcornerprogressbar.indeterminate.IndeterminateRoundCornerProgressBar
    android : layout_width = " 260dp "
    android : layout_height = " 10dp "
    app : rcAnimationSpeedScale = " 3 "
    app : rcBackgroundColor = " #0A000000 "
    app : rcProgressColor = " #EF5350 " />

Fortschrittsbalken für unbestimmte runde Ecken

Layout-XML

< com .akexorcist.roundcornerprogressbar.indeterminate.IndeterminateRoundCornerProgressBar
        app : rcRadius = " dimension "
        app : rcBackgroundPadding = " dimension "
        app : rcReverse = " boolean "
        app : rcProgressColor = " color "
        app : rcSecondaryProgressColor = " color "
        app : rcBackgroundColor = " color "
        app : rcAnimationSpeedScale = " float " />

Öffentliche Methoden

 // Dimension
fun getRadius (): Int
fun setRadius ( radius : Int )
fun getPadding (): Int
fun setPadding ( padding : Int )
fun getLayoutWidth (): Float

// Animation
fun getAnimationSpeedScale (): Float
fun setAnimationSpeedScale ( scale : Float )

// Reversing Progress
fun isReverse (): Boolean
fun setReverse ( isReverse : Boolean )

// Color
fun getProgressBackgroundColor (): Int
fun setProgressBackgroundColor ( color : Int )
fun getProgressColor (): Int
fun setProgressColor ( color : Int )
fun getProgressColors (): List < Int >
fun setProgressColors ( colors : List < Int >)
fun getSecondaryProgressColor (): Int
fun setSecondaryProgressColor ( color : Int )
fun getSecondaryProgressColors (): List < Int >
fun setSecondaryProgressColors ( colors : List < Int >)

IndeterminateCenteredRoundCornerProgressBar

Identisch mit IndeterminateRoundCornerProgressBar

Beispiel

< com .akexorcist.roundcornerprogressbar.indeterminate.IndeterminateCenteredRoundCornerProgressBar
    android : layout_width = " 260dp "
    android : layout_height = " 10dp "
    app : rcAnimationSpeedScale = " 0.75 "
    app : rcBackgroundColor = " #0A000000 "
    app : rcProgressColor = " #EF5350 " />

Fortschrittsbalken für unbestimmte zentrierte runde Ecken

Layout-XML

< com .akexorcist.roundcornerprogressbar.IndeterminateCenteredRoundCornerProgressBar
        app : rcRadius = " dimension "
        app : rcBackgroundPadding = " dimension "
        app : rcReverse = " boolean "
        app : rcProgressColor = " color "
        app : rcSecondaryProgressColor = " color "
        app : rcBackgroundColor = " color "
        app : rcAnimationSpeedScale = " float " />

Öffentliche Methoden

 // Dimension
fun getRadius (): Int
fun setRadius ( radius : Int )
fun getPadding (): Int
fun setPadding ( padding : Int )
fun getLayoutWidth (): Float

// Animation
fun getAnimationSpeedScale (): Float
fun setAnimationSpeedScale ( scale : Float )

// Reversing Progress
fun isReverse (): Boolean
fun setReverse ( isReverse : Boolean )

// Color
fun getProgressBackgroundColor (): Int
fun setProgressBackgroundColor ( color : Int )
fun getProgressColor (): Int
fun setProgressColor ( color : Int )
fun getProgressColors (): List < Int >
fun setProgressColors ( colors : List < Int >)
fun getSecondaryProgressColor (): Int
fun setSecondaryProgressColor ( color : Int )
fun getSecondaryProgressColors (): List < Int >
fun setSecondaryProgressColors ( colors : List < Int >)

Wenden Sie die Farbe des Verlaufsfortschrittsbalkens an

Die Verlaufsfarbe für den Fortschrittsbalken muss sich in der Array-Ressource int befinden. Mindestens 2 Farben.

 <!-- Color Resource -->
< resources >
    < array name = " sample_progress_gradient " >
        < item >#009688</ item >
        < item >#80CBC4</ item >
    </ array >
</ resources >

<!-- Layout -->
< com .akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    ...
    app : rcBackgroundColor = " #0A000000 "
    app : rcBackgroundPadding = " 4dp "
    app : rcMax = " 100 "
    app : rcProgress = " 50 "
    app : rcProgressColors = " @array/sample_progress_gradient "
    app : rcRadius = " 30dp " />

Farbe des Verlaufsfortschrittsbalkens

Der Fortschrittsbalken wird bei einer Größenänderung nicht abgeschnitten. Daher wird die Verlaufsfarbe auch ohne Beschneidung vollständig angezeigt.

Wenden Sie die Fortschrittsänderungsanimation an

Animation bei Fortschrittsänderung ist standardmäßig deaktiviert ( IndeterminateProgressBar und IndeterminateCenteredProgressBar ausschließen).

Sie müssen die Animation also per XML-Attribut oder programmgesteuert aktivieren

< com .akexorcist.roundcornerprogressbar.RoundCornerProgressBar
    ...
    app : rcAnimationEnable = " true "
    app : rcAnimationSpeedScale = " 1 " />

Wenn sich der Fortschritt ändert, wird die Animation automatisch angewendet.

Vergleich zwischen mit/ohne Animation

Der Wert der Animationsgeschwindigkeitsskala liegt zwischen 0,2 und 5,0 (Standard ist 1,0). Höher, um die Animation zu verlangsamen, niedriger, um sie zu beschleunigen.

Was kommt als nächstes?

IconTextRoundCornerProgressBar (#69)
Verbesserung der UI-Vorschau

Bekannte Probleme

Falsche Fortschrittsanzeige in CenteredRoundCornerProgressBar mit einem Wert von 1 % bis 2 %
Falsche Textbreite in TextRoundCornerProgressBar wenn outside der Priorität und der Wert nahe bei 100 % liegt
setProgress(progress: Int) aktualisiert die Textposition nicht

Änderungsprotokoll

Siehe CHANGELOG.md

Migration

Siehe MIGRATION.md

Lizenz

Lizenziert unter der Apache-Lizenz, Version 2.0 (die „Lizenz“); Sie dürfen dieses Werk nur in Übereinstimmung mit der Lizenz verwenden. Eine Kopie der Lizenz erhalten Sie in der Datei LIZENZ oder unter:

http://www.apache.org/licenses/LICENSE-2.0

Sofern nicht durch geltendes Recht vorgeschrieben oder schriftlich vereinbart, wird die im Rahmen der Lizenz vertriebene Software „WIE BESEHEN“ und OHNE GEWÄHRLEISTUNGEN ODER BEDINGUNGEN JEGLICHER ART, weder ausdrücklich noch stillschweigend, vertrieben. Die spezifische Sprache, die die Berechtigungen und Einschränkungen im Rahmen der Lizenz regelt, finden Sie in der Lizenz.

Expandieren