본문 바로가기
프로그램 개발/안드로이드 스튜디오 개발

안드로이드 스튜디오 고급 위젯(날짜, 자동완성, 프로그래스, 시크, 레이팅)

by minchel1128 2021. 7. 16.

안드로이드에서 사용 가능한 위젯으로는 날짜와 시간 관련 위젯, 자동완성, 프로그래스 바, 시크 바, 레이팅 바가 있습니다. 

날짜와 시간 관련 위젯으로는 아날로그시계, 디지털시계, 크로노미터, 타임 피커, 데이트 피커, 캘린더뷰가 있습니다.

시계는 View클래스에서 상속받기 때문에 background속성 등을 사용할 수 있으며 디지털시계의 경우에서는 textColor속성 값도 지정이 가능합니다.

크로노미터는 타이머 형식의 위젯이며 일반적으로 시간을 측정할 대 많이 사용됩니다. 주로 사용하는 메서드로 start(), stop(), reset()등이 있습니다.

타임 피커는 시간을 데이트 피커와 캘린더뷰는 날짜를 표시하고 조절하는 기능을 가지고 있습니다. 

캘린더뷰의 경우에는 xml속성의 showWeekNumber 속성은 현재 몇 주 차인 지를 각 주의 맨 앞에 출력해주는 역할을 가지고 있으며 디폴트 값으로 true를 가집니다.

안드로이드 5.0 버전인 롤리팝부터는 타임 피커와 데이트 피커의 모습이 변경되었습니다. 이전의 모습을 사용하고자 한다면 타임 피커는 android:timePickerMode="spinner", 데이터 피커는 android:datePickerMode="spinner"속성을 추가하면 됩니다.

예시 코드

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="2">
        <AnalogClock
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <DigitalClock
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="2">
        <Chronometer
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/chronometer1"
            android:format="시간 측정 : %s"
            android:gravity="center"
            android:textSize="30dp"/>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        android:layout_weight="1">
        <TimePicker
            android:timePickerMode="spinner"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"/>
        <DatePicker
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:datePickerMode="spinner"/>
    </LinearLayout>
</LinearLayout>

예시 이미지

 

실습 6-1 xml 코드

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
        <Chronometer
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/chronometer1"
            android:format="예약에 걸린 시간    %s"
            android:gravity="center"
            android:textSize="20dp"/>
        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/btnStart"
            android:text="예약 시작"/>
    </LinearLayout>
    <RadioGroup
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/rdoCal"
            android:text="날짜 설정 (캘린더 뷰)"/>
        <RadioButton
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@+id/rdoTime"
            android:text="시간 설정"/>
    </RadioGroup>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:layout_weight="1">
        <FrameLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content">
            <CalendarView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/calendarView1"
                android:showWeekNumber="false"/>
            <TimePicker
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:id="@+id/timePicker1"/>
        </FrameLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#CCCCCC">
        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/btnEnd"
            android:text="예약 완료"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tvYear"
            android:text="0000"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="년"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tvMonth"
            android:text="00"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="월"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tvDay"
            android:text="00"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="일"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tvHour"
            android:text="00"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="시"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/tvMinute"
            android:text="00"/>
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="분 예약됨"/>
    </LinearLayout>


</LinearLayout>

실습 java 코드

package com.example.ch6_project6_1;

import androidx.annotation.NonNull;
import androidx.appcompat.app.AppCompatActivity;

import android.graphics.Color;
import android.os.Bundle;
import android.os.SystemClock;
import android.view.View;
import android.widget.Button;
import android.widget.CalendarView;
import android.widget.Chronometer;
import android.widget.RadioButton;
import android.widget.TextView;
import android.widget.TimePicker;

public class MainActivity extends AppCompatActivity {
    Chronometer chrono;
    Button btnStart, btnEnd;
    RadioButton rdoCal, rdoTime;
    CalendarView calView;
    TimePicker tPicker;
    TextView tvYear, tvMonth, tvDay, tvHour, tvMinute;
    int selectYear, selectMonth, selectDay;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        setTitle("시간 예약");

        btnStart = (Button)findViewById(R.id.btnStart);
        btnEnd = (Button)findViewById(R.id.btnEnd);

        chrono = (Chronometer)findViewById(R.id.chronometer1);

        rdoCal = (RadioButton)findViewById(R.id.rdoCal);
        rdoTime = (RadioButton)findViewById(R.id.rdoTime);

        tPicker = (TimePicker)findViewById(R.id.timePicker1);
        calView = (CalendarView)findViewById(R.id.calendarView1);

        tvYear = (TextView)findViewById(R.id.tvYear);
        tvMonth = (TextView)findViewById(R.id.tvMonth);
        tvDay = (TextView)findViewById(R.id.tvDay);
        tvHour = (TextView)findViewById(R.id.tvHour);
        tvMinute = (TextView)findViewById(R.id.tvMinute);

        tPicker.setVisibility(View.INVISIBLE);
        calView.setVisibility(View.INVISIBLE);

        rdoCal.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tPicker.setVisibility(View.INVISIBLE);
                calView.setVisibility(View.VISIBLE);
            }
        });
        rdoTime.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                tPicker.setVisibility(View.VISIBLE);
                calView.setVisibility(View.INVISIBLE);
            }
        });

        btnStart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                chrono.setBase(SystemClock.elapsedRealtime());
                chrono.start();
                chrono.setTextColor(Color.RED);
            }
        });

        btnEnd.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                chrono.stop();
                tvYear.setText(Integer.toString(selectYear));
                tvMonth.setText(Integer.toString(selectMonth));
                tvDay.setText(Integer.toString(selectDay));

                tvHour.setText(Integer.toString(tPicker.getCurrentHour()));
                tvMinute.setText(Integer.toString(tPicker.getCurrentMinute()));
                chrono.setTextColor(Color.BLUE);
            }
        });

        calView.setOnDateChangeListener(new CalendarView.OnDateChangeListener() {
            @Override
            public void onSelectedDayChange(@NonNull CalendarView view, int year, int month, int dayOfMonth) {
                selectYear=year;
                selectMonth=month+1;
                selectDay=dayOfMonth;
            }
        });

    }

}

실습 이미지

실습 실행 영상은 녹화 프로그램의 오류로 녹화를 진행하지 못했습니다.

또 다른 기타 위젯으로는 자동완성 텍스트뷰와 멀티 자동완성 텍스트뷰가 있습니다.

자동완성 텍스트뷰는 단어 1개가 자동으로 완성되고 멀티 자동완성 텍스트뷰는 쉼표로 구분하여 여러 개 단어가 자동 완성됩니다.

자동완성 단어는 주로 Java코드에서 배열로 설정하며 setAdapter() 메서드를 이용하고 XML속성 중 목록에 힌트로 나타날 completionHint와 몇 글자를 입력할 때 목록을 보여줄 것인지를 지정하는 completionThreshold를 주로 이용합니다.

예시 XML코드

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

    <AutoCompleteTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/autoCompleteTextView1"
        android:completionHint="선택하세요"
        android:completionThreshold="2"
        android:hint="자동완성텍스트뷰">

    </AutoCompleteTextView>
    <MultiAutoCompleteTextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/multAutoCompleteTexxtView1"
        android:completionHint="선택하세요"
        android:completionThreshold="2"
        android:hint="멀티자동완성텍스트뷰"/>

</LinearLayout>

예시 Java코드

package com.example.ch6_ex6_10;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.widget.ArrayAdapter;
import android.widget.AutoCompleteTextView;
import android.widget.MultiAutoCompleteTextView;

public class MainActivity extends AppCompatActivity {

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

        String[] items = {"Andriod 10", "Windows 10", "Windows 11","IOS 15","IOS 14", "Android 11", "Unix"};

        AutoCompleteTextView auto = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, items);
        auto.setAdapter(adapter);

        MultiAutoCompleteTextView multi = (MultiAutoCompleteTextView) findViewById(R.id.multAutoCompleteTexxtView1);
        MultiAutoCompleteTextView.CommaTokenizer token = new MultiAutoCompleteTextView.CommaTokenizer();
        multi.setTokenizer(token);
        multi.setAdapter(adapter);
    }
}

실행결과

진행상태를 표시하는 위젯으로 프로그레스 바, 시크 바, 레이팅 바가 있습니다. 

프로그레스 바는 작업 진행 상태를 바 또는 원형태로 제공하며 바 형태는 어느 정도 진행됐는지를 확인할 수 있고 원 형태는 현재 진행 중이라는 상태만 보여줍니다. XML속성으로 범위를 지정하는 max, 시작 지점을 지정하는 progress, 두 번째 프로그레스 바를 지정하는 secondaryProgress 등이 있습니다.

시크 바는 프로그레스 바의 하위 클래스로 프로그레스 바와 비슷하고 사용자가 터치로 임의 조정이 가능합니다. 주로 음량을 조절하거나 동영상 재생 시 사용자가 재생 위치를 지정하는 용도로 사용할 수 있습니다. 

레이팅 바는 진행 상태를 별 모양으로 표시하며 프로그레스 바의 하위 클래스이므로 사용법이 비슷합니다. 선호도를 나타낼 때 주로 사용되며 xml속성으로는 별의 개수를 정하는 numStars, 초기값을 지정하는 rating, 한 번에 채워지는 개수를 정하는 stepSize 등의 xml 속성이 주로 사용됩니다.

이들은 Java코드와 연계되어 주로 사용됩니다.

예시 코드

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

    <ProgressBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        style="?android:attr/progressBarStyleHorizontal"
        android:max="100"
        android:progress="20"
        android:secondaryProgress="50"/>
    <ProgressBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="20"
        android:secondaryProgress="50"/>
    <SeekBar
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:progress="20"/>
    <RatingBar
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="1.5"
        android:stepSize="0.5"/>

</LinearLayout>

실행결과

다음 내용으로는 뷰 컨테이너로 진행하겠습니다.

728x90
반응형