ホーム>プログラミング関連>JAVAソースコード
ダウンロード

ラウンドコーナープログレスバー

丸い角がカッコいいですね。角の丸いプログレスバーを作ってみましょう

丸いコーナーのプログレスバーのサンプル

カラフルな角の丸い進行状況バー

ダウンロード

グラドル

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

デモ

Google Playにアクセスしてデモアプリをダウンロードしてください

概要

丸い角のプログレスバー

シンプルな丸い角のプログレスバー

丸い角のプログレスバー

中央ラウンドコーナープログレスバー

進行状況を示す丸い角のプログレスバーが中心から拡大します

中央の丸い角のプログレスバー

アイコン丸角プログレスバー

見出しアイコンが付いた丸い角の進行状況バー

アイコン丸角プログレスバー

テキストラウンドコーナープログレスバー

進行状況内にテキストが表示された丸い角の進行状況バー

アイコン丸角プログレスバー

IndeterminateRoundCornerProgressBar および IndeterminateCenteredRoundCornerProgressBar

シンプルな丸い角のプログレス バーと不定のアニメーションを備えた中央の丸い角のプログレス バー

不定の丸いコーナーのプログレス バーと不定の中央の丸いコーナーのプログレス バー

特徴

標準機能

  • 一次進行と二次進行をサポート
  • プライマリ進行状況、セカンダリ進行状況、および進行状況の背景色はカスタマイズ可能です
  • 独自の進行状況の背景パディングをカスタマイズする
  • 独自の進行状況のコーナー半径をカスタマイズする
  • プログレスバーの反転をサポート
  • グラデーションカラーの進行状況バー?はい！
  • 進行状況変更アニメーション?全くその通りです！

コンポーネントの機能

  • CenteredRoundCornerProgressBarを使用して中心から拡張する進行状況
  • IconRoundCornerProgressBarでサポートされる見出しアイコン
  • TextRoundCornerProgressBarでサポートされる進行状況内のテキスト
  • IndeterminateRoundCornerProgressBarまたはIndeterminateCenteredRoundCornerProgressBarでサポートされる不定アニメーション

使用法

プログレスバーのカスタム属性を使用するには、レイアウトのルートビュー属性として「app」名前空間を定義します。 

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

ラウンドコーナープログレスバー

例

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

テキストラウンドコーナープログレスバー

例

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

不定ラウンドコーナープログレスバー

例

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

IndeterminateCenteredRoundCornerProgressBar

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)。高くするとアニメーションが遅くなり、低くするとアニメーションが速くなります。

次は何だろう

  • アイコンテキストラウンドコーナープログレスバー (#69)
  • UIプレビューの改善

既知の問題

  • CenteredRoundCornerProgressBarに 1% ～ 2% の値で表示される間違った進行状況
  • 優先outsideと値が 100% に近い場合、 TextRoundCornerProgressBarのテキストの幅が正しくない
  • setProgress(progress: Int)テキストの位置を更新しません

変更ログ

CHANGELOG.md を参照してください。

移住

MIGRATION.md を参照してください。

ライセンス

Copyright 2023 アケクソシスト

Apache License バージョン 2.0 (「ライセンス」) に基づいてライセンスされています。ライセンスに準拠する場合を除き、この作品を使用することはできません。ライセンスのコピーは、LICENSE ファイルまたは次の場所で入手できます。

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

適用される法律で義務付けられている場合または書面による同意がない限り、ライセンスに基づいて配布されるソフトウェアは、明示または黙示を問わず、いかなる種類の保証や条件もなく、「現状のまま」で配布されます。ライセンスに基づく許可と制限を規定する特定の言語については、ライセンスを参照してください。

拡大する
追加情報
関連アプリ
おすすめ
関連情報 すべて