View - ProgressBar, SeekBar, RatingBar

웹 & 안드로이드/Android|2013. 10. 8. 10:15


1.ProgressBar



-예제 화면




프로그래스 바

- 프로그램이 어떠한 일을 진행할 때의 진행도, 혹은 로딩중 일 때를 나타내는 것.


 

-원모양으로 빙글빙글 돌며 로딩중이라는 것을 나타내는 프로그래스 바.

       다음은 다양한 크기의 프로그래스 바를 나타낸다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <ProgressBar
        android:id="@+id/progressBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />
    
    <ProgressBar
        android:id="@+id/progressBar2"
        style="?android:attr/progressBarStyleSmall"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal" />
 
    <ProgressBar
        android:id="@+id/progressBar3"
        style="?android:attr/progressBarStyleLarge"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:visibility="invisible" />



-예제

-버튼1을 클릭하면 원모양 프로그래스 바가 보이고 버튼2를 클릭하면 다시 사라짐.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
public class MainActivity extends Activity {
    ProgressBar progressBar1;
    
    Button button1;
    Button button2;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar1 = (ProgressBar) findViewById(R.id.progressBar3);
 
        
        button1 = (Button) findViewById(R.id.button1);
        button2 = (Button) findViewById(R.id.button2);
 
        button1.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                progressBar1.setVisibility(View.VISIBLE);
            }
        });
        
        button2.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                progressBar1.setVisibility(View.INVISIBLE);
            }
        });
    }
}






- 진행도를 나타내는 프로그래스 바.

  무언가를 다운받거나 하는 진행등을 나타낼때 사용.


1
2
3
4
5
6
7
8
<ProgressBar
        android:id="@+id/progressBar4"
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:max="100"
        android:progress="0" />



-둘다 가질 수 있는 속성은 같지만 스타일에 따라서 진행도를 보여주는 것을 정할 수 있다.


-예제

-버튼3을 누르면 진행도가 증가하고, 버튼4를 누르면 진행도가 감소.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
public class MainActivity extends Activity {
    ProgressBar progressBar2;
    
    Button button3;
    Button button4;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progressBar2 = (ProgressBar) findViewById(R.id.progressBar4);
        
        button3 = (Button) findViewById(R.id.button3);
        button4 = (Button) findViewById(R.id.button4);
        
        button3.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                progressBar2.incrementProgressBy(5);
            }
        });
        
        button4.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                progressBar2.incrementProgressBy(-5);
            }
        });
    }
}




2.SeekBar



 - 예제 화면



 SeekBar

- 볼륨이나 색상지정 등 사용자가 드래그 할 수 있는 바.


-seekBar

1
2
3
4
5
6
<SeekBar
        android:id="@+id/redBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="0"
        android:max="255" />



-예제

-seekbar에 색상을 지정하고 텍스트뷰의 색상이 변하도록 함.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
public class MainActivity extends Activity {
    SeekBar redBar;
    SeekBar greenBar;
    SeekBar blueBar;
    TextView redView;
    TextView greenView;
    TextView blueView;
    int red;
    int green;
    int blue;
    TextView resultView;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        redBar = (SeekBar) findViewById(R.id.redBar);
        greenBar = (SeekBar) findViewById(R.id.greenBar);
        blueBar = (SeekBar) findViewById(R.id.blueBar);
        
        redView = (TextView) findViewById(R.id.redView);
        greenView = (TextView) findViewById(R.id.greenView);
        blueView = (TextView) findViewById(R.id.blueView);
        
        resultView = (TextView) findViewById(R.id.resultView);
        
        redBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                red = redBar.getProgress();
                redView.setText("red - "+red);
                resultView.setBackgroundColor(Color.rgb(red, green, blue));
            }
        });
        greenBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                green = greenBar.getProgress();
                greenView.setText("green - "+green);
                resultView.setBackgroundColor(Color.rgb(red, green, blue));
            }
        });
        blueBar.setOnSeekBarChangeListener(new OnSeekBarChangeListener() {
            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {}
            @Override
            public void onProgressChanged(SeekBar seekBar, int progress, boolean fromUser) {
                blue = blueBar.getProgress();
                blueView.setText("blue - "+blue);
                resultView.setBackgroundColor(Color.rgb(red, green, blue));
            }
        });
    }



3. RatingBar


-예제 화면 



-점수등을 별로 표시하여 나타내는 뷰.


Colored By Color Scripter™

1
2
3
4
5
6
 <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="10"
        style="?android:attr/ratingBarStyleSmall" />



-예제 코드.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
public class MainActivity extends Activity {
    RatingBar ratingBar;
    EditText total;
    EditText answer;
    Button button;
    
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        ratingBar = (RatingBar) findViewById(R.id.ratingBar1);
        total = (EditText) findViewById(R.id.editText1);
        answer = (EditText) findViewById(R.id.editText2);
        button = (Button) findViewById(R.id.button1);
        
        button.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                int t = Integer.parseInt(total.getText().toString());
                int an = Integer.parseInt(answer.getText().toString());
                float score = (float)an/t*ratingBar.getNumStars();
                ratingBar.setRating(score);
            }
        });
    }
 


저작자표시

'웹 & 안드로이드 > Android' 카테고리의 다른 글

웹 뷰 (Web View)  (0) 2013.10.18
View - EditText와 inputType속성의 종류(EditText 종류)  (0) 2013.10.08
안드로이드 - 진동 제어하기  (0) 2013.10.07
안드로이드 - 사운드 재생하기.  (0) 2013.10.07
View - ImageButton, ImageView  (0) 2013.10.07

댓글()

티스토리툴바