안드로이드는 다양한 레이아웃 파일을 생성해서 위젯을 자유롭게 변경할 수 있습니다.
오늘은 코틀린(Kotlin) 안드로이드에서 상태를 확인할 수 있는 프로그래스 바를 커스텀해서 원형으로 만들어 보겠습니다.
Custom Circular Progress bar를 만들기위해서 두 개의 레이아웃을 사용해보겠습니다.
원형 상태바(Circular Progress Bar)는 백그라운드를 사용해서 상태바(Progress Bar) 배경을 구현하고, 레이아웃을 로드해서 상태바(Progress Bar)를 디자인해보겠습니다.
먼저 drawable 하위 폴더에 progress_background.xml을 생성합니다.
생성된 xml에 shape를 사용해서 rectangle을 타원형으로 구성합니다.
bottomRightRadius, topRightRadius, topLeftRadius, BottomLeftRadius 속성을 사용해서 각 모서리를 타원형으로 구성합니다.
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="#FF0089"/>
<size
android:width="5dp"
android:height="10dp"/>
<corners
android:bottomRightRadius="40dp"
android:topRightRadius="40dp"
android:topLeftRadius="40dp"
android:bottomLeftRadius="40dp"/>
</shape>shape를 사용해면 다양한 모형을 그릴 수 있습니다.
이번에는 원형 상태바(Circular Progress Bar)를 만들기 위해서 상태바(Progress Bar) 레이아웃을 만들어야 합니다.
drawable 폴더 아래에 main_progressbar.xml을 생성합니다.
<?xml version="1.0" encoding="utf-8"?>
<rotate
xmlns:android="http://schemas.android.com/apk/res/android"
android:fromDegrees="270"
android:toDegrees="270" >
<shape
android:innerRadiusRatio="2.5"
android:shape="ring"
android:thickness="5dp"
android:useLevel="true">
<gradient
android:angle="0"
android:endColor="@color/colorPrimary"
android:centerColor="@color/colorPrimary"
android:startColor="@color/colorPrimary"
android:type="sweep"
android:useLevel="false"/>
</shape>
</rotate>rotate를 사용해서 원형 상태바(Circular Progress Bar)를 디자인합니다.
shap 속성에서는 상태바(Progress Bar) 크기를 설정할 수 있습니다. gradinent는 상태바(Progress Bar) 내부 색상을 설정할 수 있습니다.
마지막으로 drawable에 생성된 progress_background.xml, main_progressbar.xml을 사용해서 Custom 원형 상태바(Circular Progress Bar)를 구성해보겠습니다.
activity_main.xml에 ProgressBar, Button을 등록합니다.
<Button
android:id="@+id/btn_progress"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="progress"/>
<ProgressBar
android:id="@+id/progressbar"
android:layout_width="match_parent"
android:layout_height="400dp"
android:background="@drawable/progress_background2"
android:progressDrawable="@drawable/main_ptogressbar"
android:indeterminateOnly="false"
android:max="120"
android:progress="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />Button은 원형 상태바(Circular Progress Bar)를 실행하기 위한 이벤트 버튼입니다.
상태바(ProgressBar) 속성 중에서 background에 progress_background.xml을 입력합니다.
progressDrawable 속성에는 원형 이미지 main_progressbar을 입력합니다.
이제 마지막으로 이벤트를 사용해서 원형 상태바(Circular Progress Bar)를 실행해야 합니다.
MainActivity로 이동해서 아래 코드를 입력합니다.
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
val buttonStart = findViewById<Button>(R.id.btn_progress)
val CProgressBar = findViewById<ProgressBar>(R.id.progressbar)
var iPos : Int = 10
var iMaxValue : Int = 0
iMaxValue = CProgressBar.max
buttonStart.setOnClickListener{
if( iMaxValue <= iPos)
{
CProgressBar.visibility =View.GONE
Toast.makeText(this,"완료됨",Toast.LENGTH_SHORT).show()
iPos = 0
CProgressBar.setProgress(iPos)
}
else
{
if( 0 == iPos )
{
CProgressBar.visibility = View.VISIBLE
}
iPos += 10
CProgressBar.setProgress(iPos)
}
}
}findViewById 함수를 사용해서 버튼, 상태바를 선언합니다.
원형 상태바(Circular Progress Bar)는 setProgress 함수를 사용해서 이동할 수 있습니다.
상태바 함수 max를 사용해서 최댓값을 확인하고 상태바 증가 값이 최댓값과 같다면 초기화하는 구조입니다.
코트린 안드로이드 실행 후 상단 버튼을 클릭하면 원형 상태바(Circular Progress Bar)가 회전하면서 변경됩니다.
백그라운드(background)는 shape를 사용해서 라운드형 사각형을 확인할 수 있습니다.
상태바(ProgressBar)는 다양한 기능으로 사용되면서 자유롭게 커스텀할 수 있어 안드로이드 앱을 더욱더 효과적으로 표현할 수 있는 좋은 기술입니다.
감사합니다.