RoundCornerProgressBar

RoundCornerProgressBar

둥근 모서리가 멋지네요. 모서리가 둥근 진행률 표시줄을 만들어 보겠습니다.

다채로운 둥근 모서리 진행률 표시줄

다운로드

그래들

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

데모

Google Play로 이동하여 데모 앱을 다운로드하세요.

개요

둥근 모서리 진행률 표시줄

간단한 둥근 모서리 진행률 표시줄

중심둥근모퉁이진행 표시줄

진행률이 표시된 둥근 모서리 진행률 표시줄이 중앙에서 확장됩니다.

아이콘 둥근 모서리 진행률 표시줄

제목 아이콘이 있는 둥근 모서리 진행률 표시줄

텍스트RoundCornerProgressBar

진행률 내부에 텍스트가 있는 둥근 모서리 진행률 표시줄

불확정RoundCornerProgressBar 및 불확정CenteredRoundCornerProgressBar

간단한 둥근 모서리 진행 표시줄과 불확실한 애니메이션이 포함된 중앙 둥근 모서리 진행 표시줄

특징

표준 기능

• 1차 진행 및 2차 진행 지원
• 기본 진행, 보조 진행 및 진행 배경 색상을 사용자 정의할 수 있습니다.
• 자신만의 진행 상황 배경 패딩을 사용자 정의하세요.
• 진행 상황의 코너 반경을 맞춤 설정하세요
• 반전 진행률 표시줄 지원
• 그라데이션 색상이 포함된 진행 표시줄? 예!
• 진행 상황 변경 애니메이션? 물론 그렇습니다!

구성요소 특징

• CenteredRoundCornerProgressBar 사용하여 중앙에서 확장 진행
• IconRoundCornerProgressBar 에서 지원되는 제목 아이콘
• TextRoundCornerProgressBar 에서 지원되는 진행 상황 내부의 텍스트
• IndeterminateRoundCornerProgressBar 또는 IndeterminateCenteredRoundCornerProgressBar 를 통해 지원되는 불확정 애니메이션

용법

진행률 표시줄의 사용자 정의 속성을 사용하려면 'app' 네임스페이스를 레이아웃의 루트 보기 속성으로 정의하세요.

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

RoundCornerProgressBar

예

< 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 " />

레이아웃 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 " />

공개 방법

 // 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 )

중심둥근모퉁이진행 표시줄

RoundCornerProgressBar와 동일하지만 반전은 지원되지 않습니다.

예

< 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 " />

레이아웃 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 " />

공개 방법

 // 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 )

아이콘둥근모서리진행 표시줄

이 진행률 표시줄에는 아이콘 크기가 필요합니다. layout_height 에는 wrap_content 사용하는 것이 좋습니다.

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

예

< 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 " />

레이아웃 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 " />

공개 방법

 // 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 )

텍스트RoundCornerProgressBar

예

< 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 " />

레이아웃 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 " />

공개 방법

 // 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 )

불확정RoundCornerProgressBar

예

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

레이아웃 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 " />

공개 방법

 // 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 >)

불확실한CenteredRoundCornerProgressBar

IndeterminateRoundCornerProgressBar와 동일

예

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

레이아웃 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 " />

공개 방법

 // 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 >)

그라데이션 진행률 표시줄 색상 적용

진행률 표시줄의 그라데이션 색상은 int 배열 리소스에 있어야 합니다. 최소 2가지 색상.

 <!-- 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 " />

크기가 변경될 때 진행률 표시줄이 잘리지 않습니다. 따라서 그라데이션 색상도 클리핑 없이 완전히 표시됩니다.

진행률 변경 애니메이션 적용

진행률 변경 시 애니메이션은 기본적으로 비활성화되어 있습니다( IndeterminateProgressBar 및 IndeterminateCenteredProgressBar 제외).

따라서 XML 속성이나 프로그래밍 방식으로 애니메이션을 활성화해야 합니다.

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

진행 상황이 변경되면 애니메이션이 자동으로 적용됩니다.

애니메이션 속도 스케일 값은 0.2 - 5.0 사이의 부동 소수점입니다(기본값은 1.0). 애니메이션 속도를 낮추려면 값을 높이고, 속도를 높이려면 값을 낮춥니다.

다음은 무엇입니까

• IconTextRoundCornerProgressBar(#69)
• UI 미리보기 개선

알려진 문제

• CenteredRoundCornerProgressBar 에 1%-2% 값으로 잘못된 진행 상황이 표시됨
• 우선 순위를 outside 값이 100%에 가까울 때 TextRoundCornerProgressBar 의 텍스트 너비가 잘못되었습니다.
• setProgress(progress: Int) 텍스트 위치를 업데이트하지 않습니다.

변경 로그

CHANGELOG.md를 참조하세요.

이주

마이그레이션.md를 참조하세요.

특허

저작권 2023 Akexorcist

Apache 라이센스 버전 2.0("라이센스")에 따라 라이센스가 부여되었습니다. 라이센스를 준수하는 경우를 제외하고는 이 저작물을 사용할 수 없습니다. 귀하는 LICENSE 파일이나 다음 위치에서 라이센스 사본을 얻을 수 있습니다.

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

해당 법률에서 요구하거나 서면으로 동의하지 않는 한, 라이선스에 따라 배포되는 소프트웨어는 명시적이든 묵시적이든 어떠한 종류의 보증이나 조건 없이 "있는 그대로" 배포됩니다. 라이선스에 따른 허가 및 제한 사항을 관리하는 특정 언어는 라이선스를 참조하세요.