[모바일 프로그래밍 과제] - 6주차 (탭호스트)

1. 과제 안내문, 예시 출력화면

---

다음과 같은 안드로이드 애플리케이션을 완성하라. 상단에 "색상"과 "회전"이라는 2개의 탭이 표시된다. "색상" 탭을 누르면 green, blue, red라는 3개의 라디오버튼이 상단에 나타나고 각 버튼을 누를 때마다 탭화면의 색상이 변경된다. 탭화면 가운데에 "색상 탭의 내용"이라는 텍스트가 큰 글씨로 표시된다.

예시 실행 화면

"회전" 탭을 누르면 상단에 "Left"와 "Right"라는 버튼이 나타나고 탭화면 중앙에 "회전 탭의 내용"이라는 큰 글씨의 텍스트가 표시된다. 

 

Left 버튼을 누를 때마다 텍스트가 시계 반대 방향으로 10도 회전하고, Right 버튼을 누를 때마다 텍스트가 시계 방향으로 10도 회전한다.

---

 가장 오류가 많았던 과제 중에 하나이다. 뷰 컨테이너 자체가 정해진 문법이 많다는 것을 알게 되었다. 이 과정을 통해 사용하지 않는 id값을 왜 정의하는지 알게 되었다. 풀이과정이다.

 

2. 풀이과정

 

 화면 구성같은 경우 조금 복잡하게 LinearLayout을 많이 사용하였다. 이렇게 해야 배치가 편했기 때문이다. 기본적인 탭 호스트의 문법을 설명하자면, 프레임 레이아웃 안에 여러 레이아웃을 배치하고 자바 코드를 사용하여 각 레이아웃의 아이디와 연결시켜야 한다. 다음은 XML코드이다.

 

<?xml version="1.0" encoding="utf-8"?>
<TabHost 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"
    tools:context=".MainActivity"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/tabhost">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
        <TabWidget
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:id="@android:id/tabs"/>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:id="@+id/colorLayout"
                android:background="#00FF00">
                <RadioGroup
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal"
                    android:layout_gravity="center">

                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Green"
                        android:id="@+id/rdoGreen"
                        android:checked="true"/>
                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Blue"
                        android:id="@+id/rdoBlue"/>
                    <RadioButton
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:text="Red"
                        android:id="@+id/rdoRed"/>
                </RadioGroup>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="horizontal"
                    android:gravity="center">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:textSize="60dp"
                        android:text="색상 탭의 내용"/>
                </LinearLayout>
            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical"
                android:id="@+id/rotationLayout"
                android:background="#888888">

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:orientation="horizontal">

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="left"
                        android:id="@+id/btnLeft"/>

                    <Button
                        android:layout_width="0dp"
                        android:layout_height="wrap_content"
                        android:layout_weight="1"
                        android:text="right"
                        android:id="@+id/btnRight"/>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:gravity="center">
                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_gravity="center"
                        android:textColor="#00FF00"
                        android:textSize="60dp"
                        android:text="회전 탭의 내용"
                        android:id="@+id/rotView"/>
                </LinearLayout>

            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

 

 사실 Java코드는 어렵지 않았다. 탭 호스트라는 문법만이 이번 과제의 새로운 부분이었고, 나머지는 다 경험한 문법들이기 때문이다. 아마도 XML코드에  익숙해져야 될 것 같다. 다음은 Java코드이다.

 

package com.cookandroid.assignment6forme;

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

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.RadioButton;
import android.widget.TabHost;
import android.widget.TextView;

@SuppressWarnings("deprecation")
public class MainActivity extends AppCompatActivity {

    RadioButton rdoRed;
    RadioButton rdoGreen;
    RadioButton rdoBlue;

    Button btnLeft;
    Button btnRight;

    LinearLayout colorLayout;
    TextView tv;
    int rot = 0;

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

        TabHost tabHost = findViewById(R.id.tabhost);
        tabHost.setup();

        TabHost.TabSpec tabSpecColor = tabHost.newTabSpec("COLOR").setIndicator("색상");
        tabSpecColor.setContent(R.id.colorLayout);
        tabHost.addTab(tabSpecColor);

        TabHost.TabSpec tabSpecRota = tabHost.newTabSpec("ROTATION").setIndicator("회전");
        tabSpecRota.setContent(R.id.rotationLayout);
        tabHost.addTab(tabSpecRota);

        tabHost.setCurrentTab(0);

        rdoRed          = (RadioButton) findViewById(R.id.rdoRed);
        rdoBlue         = (RadioButton) findViewById(R.id.rdoBlue);
        rdoGreen        = (RadioButton) findViewById(R.id.rdoGreen);

        btnLeft         = (Button) findViewById(R.id.btnLeft);
        btnRight        = (Button) findViewById(R.id.btnRight);

        colorLayout     = (LinearLayout) findViewById(R.id.colorLayout);
        tv               = (TextView) findViewById(R.id.rotView);

        rdoRed.setOnClickListener(new View.OnClickListener() {
            @RequiresApi(api = Build.VERSION_CODES.O)
            @Override
            public void onClick(View view) {
                colorLayout.setBackgroundColor(Color.RED);
            }
        });

        rdoGreen.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                colorLayout.setBackgroundColor(Color.GREEN);
            }
        });

        rdoBlue.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                colorLayout.setBackgroundColor(Color.BLUE);
            }
        });

        btnRight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                rot += 10;
                tv.setRotation(rot);
            }
        });

        btnLeft.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                rot -= 10;
                tv.setRotation(rot);
            }
        });
    }
}