[ Do it! ] 번외2 - 시크바와 프로그레스바 보여주기

[ 📄 문 제 ]

시크바와 프로그레스바를 표시하고 시크바의 값을 바꾸었을 때 프로그레스의 값도 바뀌도록 만들어 보세요.


[ 📚 설 명 ]

  1. 화면에 시크바와 프로그레스바, 그리고 입력상자를 배치합니다.
  2. 시크바의 값을 바꾸면 프로그레스바의 값도 바뀌도록 합니다.
  3. 시크바의 값을 바꾸었을 때 그 값이 입력상자에 표시되도록 합니다.
  4. 프로그레스바는 막대형을 사용합니다.

[ 💻 코 드 ]

[ activity_main.xml ]

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <SeekBar
        android:id="@+id/seekBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"/>

    <ProgressBar
        android:id="@+id/prgBar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        style="@android:style/Widget.ProgressBar.Horizontal" />

    <EditText
        android:id="@+id/edtVal"
        android:layout_width="100dp"
        android:layout_height="30dp"
        android:layout_margin="20dp"
        android:focusable="false"
        android:gravity="center"
        android:background="@drawable/edittext_draw"/>
      
</LinearLayout>

[ edittext_draw.xml ]

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape>
            <solid android:color="#ffffff"/>
            <stroke
                android:width="1dp"
                android:color="#999999"/>
        </shape>
    </item>
</layer-list>

[ MainActivity.java ]

package com.study.doit;

import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.text.Editable;
import android.text.TextWatcher;
import android.view.View;
import android.widget.Button;
import android.widget.EditText;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.SeekBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

    SeekBar skBar;
    ProgressBar prgBar;
    EditText edtVal;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        skBar = findViewById(R.id.seekBar);
        prgBar = findViewById(R.id.prgBar);
        edtVal = findViewById(R.id.edtVal);

        skBar.setOnSeekBarChangeListener(new SeekBar.OnSeekBarChangeListener() {
            @Override
            public void onProgressChanged(SeekBar seekBar, int i, boolean b) {
                prgBar.setProgress(i);
                edtVal.setTextSize((i+10)/5);
                edtVal.setText(i+"");

            }

            @Override
            public void onStartTrackingTouch(SeekBar seekBar) {

            }

            @Override
            public void onStopTrackingTouch(SeekBar seekBar) {

            }
        });
    }
}

[ 🖋 디자인 ]

별 거 아니지만, 불륨이 커질수록 글자 크기도 커지도록 코드를 작성하였습니다.
연습 때 이런 저런 작업을 해놓으면 나중에 더 좋은 센스있는 UI를 만들 수 있지 않을까싶어서
기능을 추가해봤습니다.

좋은 웹페이지 즐겨찾기