안드로이드 - 프로그래스바(ProgressBar) 만들기

프로그래스바는 작업의 진행 정도를 표시하거나 또는 작업이 진행 중이라는 것을 사용자에게 보여줍니다.

 

프로그램 설치나 네트워크 다운로드 작업 등에 흔히 사용되며 진행 과정을 보여줍니다.

 

범위는 max 속성으로, 초기값은 progress 속성으로 지정합니다.

 

void setProgress(int progress) //첫번째 진행상태 값 지정

void setSecondaryProgress(int secondaryProgress)//두번째 진행상태 값 지정(흐린색으로 채색)

void incrementProgressBy(int diff)//첫번째 프로그래스의 상대적으로 이동할 양 지정

void incrementSecondaryProgressBy(int diff) //두번째 프로그래스의 상대적으로 이동할 양 지정

 

이번에는 다음과 같이 버튼을 누르면 프로그래스바가 증가하고 감소하는 예제를 만들어 보죠

Dec First 버튼은 프로그래스바 감소 IncFirst는 프로그래스바 증가

Dec Second는 흐릿한 프로그래스바 감소 Inc Second는 흐릿한 프로그래스바 증가

Start는 원형 프로그래스바 보이기 Stop은 원형 프로그래스바 감추기

 

 

원형 프로그래스바는 아래 그림에 동그란 것을 말한다.

 

다음은 XML 파일입니다.

간단하게 리니어레이아웃과 버튼을 이용해서 배치를 했습니다. 각 버튼은 mOnClick이라는 메소드와 연결해주었구요.

 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    >

    <ProgressBar

        android:id="@+id/progress"

        style="?android:attr/progressBarStyleHorizontal"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:max="100"

        android:progress="10"

        android:secondaryProgress="50"

        />

    <LinearLayout

        android:orientation="horizontal"

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <Button android:id="@+id/decfirst"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="mOnClick"

            android:text="Dec First" />

        <Button android:id="@+id/incfirst"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="mOnClick"

            android:text="Inc First" />

    </LinearLayout>

    <LinearLayout

        android:orientation="horizontal"

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <Button android:id="@+id/decsecond"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="mOnClick"

            android:text="Dec Second" />

        <Button android:id="@+id/incsecond"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="mOnClick"

            android:text="Inc Second" />

    </LinearLayout>

    <ProgressBar

        android:id="@+id/progcircle"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:visibility="invisible"

        />

    <LinearLayout

        android:orientation="horizontal"

        android:layout_width="match_parent"

        android:layout_height="wrap_content">

        <Button android:id="@+id/start"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="mOnClick"

            android:text="Start" />

        <Button android:id="@+id/stop"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:onClick="mOnClick"

            android:text="Stop" />

    </LinearLayout>

</LinearLayout>

 

다음은 자바 파일입니다. 보시면 직관적으로 이해가 되실 겁니다.

 

package com.example.ch13_progressbar;

 

import android.app.Activity;

import android.os.Bundle;

import android.view.View;

import android.widget.ProgressBar;

 

public class TestProgressbar extends Activity {

    ProgressBar mProgBar;

    ProgressBar mProgCircle;

      

    

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_test_progressbar);

        

        //프로그래스바와 객체를 연결해줌

        mProgBar = (ProgressBar)findViewById(R.id.progress);

        mProgCircle = (ProgressBar)findViewById(R.id.progcircle);

        

    }

 

    public void mOnClick(View v){

        switch(v.getId()){

        

        case R.id.decfirst://누르면 프로그래스바가 감소

            mProgBar.incrementProgressBy(-2);

            break;

        case R.id.incfirst://누르면 프로그래스바가 증가

            mProgBar.incrementProgressBy(2);

            break;

        case R.id.decsecond://누르면 두번째 프로그래스바가 감소

            mProgBar.incrementSecondaryProgressBy(-2);

            break;

        case R.id.incsecond://누르면 두번째 프로그래스바가 증가

            mProgBar.incrementSecondaryProgressBy(2);

            break;

        case R.id.start://원형 프로그래스바 보이기

            mProgCircle.setVisibility(View.VISIBLE);

            break;

        case R.id.stop://원형 프로그래스바 감추기

            mProgCircle.setVisibility(View.INVISIBLE);

            break;

        

        }

    }

}