본문 바로가기
코리아 IT아카데미/android

3일차 | 계산기 예제 구현, Logcat, constraintlayout, constraintlayout 예제

by Sharon kim 2022. 2. 16.


a_cal.xml(made by me)

<?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"
    tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#23B2F4"
        android:gravity="right|center_vertical"
        android:padding="14dp"
        android:text="0"
        android:textSize="100dp" />

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

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/purple_200">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:gravity="center"
                android:text="1"
                android:textSize="100dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:text="4"
                android:textSize="100dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:gravity="center"
                android:text="7"
                android:textSize="100dp" />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/purple_200">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:gravity="center"
                android:text="2"
                android:textSize="100dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:text="5"
                android:textSize="100dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:gravity="center"
                android:text="8"
                android:textSize="100dp" />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/purple_200">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:gravity="center"
                android:text="3"
                android:textSize="100dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:text="6"
                android:textSize="100dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:gravity="center"
                android:text="9"
                android:textSize="100dp" />

        </LinearLayout>

        <LinearLayout
            android:orientation="vertical"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/purple_200">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="#FF6297"
                android:gravity="center"
                android:text="CA"
                android:textSize="50dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:gravity="center"
                android:layout_weight="1"
                android:background="#F3E679"
                android:text="+"
                android:textSize="50dp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/purple_200"
                android:gravity="center"
                android:text="0"
                android:textSize="100dp" />

        </LinearLayout>


    </LinearLayout>



</LinearLayout>

b_calculator_01.xml(made by teacher)

<?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">

    <TextView
        android:id="@+id/result"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#03A9F4"
        android:gravity="right|center_vertical"
        android:padding="14dp"
        android:text="0"
        android:textColor="#ffffff"
        android:textSize="50dp" />

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

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/teal_200"
            android:orientation="vertical">

            <TextView
                android:id="@+id/one"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="1"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/four"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="4"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/seven"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="7"
                android:textColor="#ffffff"
                android:textSize="30dp" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/teal_200"
            android:orientation="vertical">

            <TextView
                android:id="@+id/two"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="2"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/five"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="5"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/eight"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="8"
                android:textColor="#ffffff"
                android:textSize="30dp" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/teal_200"
            android:orientation="vertical">

            <TextView
                android:id="@+id/three"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="3"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/six"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="6"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/nine"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="9"
                android:textColor="#ffffff"
                android:textSize="30dp" />


        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/teal_200"
            android:orientation="vertical">

            <TextView
                android:id="@+id/ca"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#F37D7D"
                android:gravity="center"
                android:text="CA"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/plus"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:background="#F4D987"
                android:gravity="center"
                android:text="+"
                android:textColor="#ffffff"
                android:textSize="30dp" />

            <TextView
                android:id="@+id/zero"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center"
                android:text="0"
                android:textColor="#ffffff"
                android:textSize="30dp" />

        </LinearLayout>

    </LinearLayout>
</LinearLayout>

MainActivity.java

앱화면 해당 부분 클릭하면

package com.example.myapp3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    //1~9까지 선언
    TextView one;
    TextView two;
    TextView three;
    TextView four;
    TextView five;
    TextView six;
    TextView seven;
    TextView eight;
    TextView nine;
    TextView zero;
    TextView ca;
    TextView plus;

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

        //변수의 식별자-> 주소를 초기화(값을 넣다)
        one = findViewById(R.id.one);
        two = findViewById(R.id.two);
        three = findViewById(R.id.three);
        four = findViewById(R.id.four);
        five = findViewById(R.id.five);
        six = findViewById(R.id.six);
        seven = findViewById(R.id.seven);
        eight = findViewById(R.id.eight);
        nine = findViewById(R.id.nine);
        zero = findViewById(R.id.zero);
        ca = findViewById(R.id.ca);
        plus = findViewById(R.id.plus);



        //이벤트 리스너
        one.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "1번 버튼을 눌렀습니다.");
            }
        });
        two.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "2번 버튼을 눌렀습니다.");
            }
        });
        three.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "3번 버튼을 눌렀습니다.");
            }
        });
        four.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "4번 버튼을 눌렀습니다.");
            }
        });
        five.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "5번 버튼을 눌렀습니다.");
            }
        });
        six.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "6번 버튼을 눌렀습니다.");
            }
        });
        seven.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "7번 버튼을 눌렀습니다.");
            }
        });
        eight.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "8번 버튼을 눌렀습니다.");
            }
        });
        nine.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "9번 버튼을 눌렀습니다.");
            }
        });
        zero.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "0번 버튼을 눌렀습니다.");
            }
        });
        ca.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "ca 버튼을 눌렀습니다.");
            }
        });
        plus.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Log.d("TAG", "plus 버튼을 눌렀습니다.");
            }
        });

        //람다 표현식 <-- 어떤 것을 간단하게 표현할 수 있다.
        one.setOnClickListener(v -> {
            Log.d("TAG", "람다 표현식으로 변경함!!!");
        });
        //한 줄일 때는 중괄호 생략
        two.setOnClickListener(v -> Log.d("TAG", "2 버튼 클릭"));

    }
}

c_constraint_layout_01.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:id="@+id/btn1"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:text="btn1"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="30dp"
        android:text="2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginStart="20dp"
        android:text="3"
        app:layout_constraintStart_toEndOf="@id/btn2"
        app:layout_constraintTop_toTopOf="@id/btn2" />

    <Button
        android:id="@+id/btn4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="4"
        app:layout_constraintEnd_toEndOf="@id/btn3"
        app:layout_constraintStart_toStartOf="@id/btn2"
        app:layout_constraintTop_toBottomOf="@id/btn2" />

    <Button
        android:id="@+id/btn5"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_margin="30dp"
        android:text="5"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <Button
        android:id="@+id/btn7"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:text="7"
        app:layout_constraintEnd_toEndOf="@id/btn3"
        app:layout_constraintStart_toStartOf="@id/btn2"
        app:layout_constraintTop_toBottomOf="@id/btn2" />

    <TextView
        android:id="@+id/tv1"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="50dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="tv1"
        android:textColor="@color/white"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv2"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv2"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="tv2"
        android:textColor="@color/white"
        app:layout_constraintEnd_toStartOf="@id/tv3"
        app:layout_constraintStart_toEndOf="@id/tv1"
        app:layout_constraintTop_toTopOf="@id/tv1" />

    <TextView
        android:id="@+id/tv3"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="tv3"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv2"
        app:layout_constraintTop_toTopOf="@id/tv1" />

    <TextView
        android:id="@+id/tv4"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_marginBottom="120dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="tv4"
        android:textColor="@color/white"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tv5"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/tv5"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="tv5"
        android:textColor="@color/white"
        app:layout_constraintEnd_toStartOf="@id/tv6"
        app:layout_constraintStart_toEndOf="@id/tv4"
        app:layout_constraintTop_toTopOf="@id/tv4" />

    <TextView
        android:id="@+id/tv6"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:background="@color/black"
        android:gravity="center"
        android:text="tv6"
        android:textColor="@color/white"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/tv5"
        app:layout_constraintTop_toTopOf="@id/tv4" />

</androidx.constraintlayout.widget.ConstraintLayout>

d_constraint_layout_02.xml

왼쪽 이미지 구현 (button 색 바꾸는 것은 4일차)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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:backgroundTint="#FDFBE6">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textSize="20dp"
        android:textColor="@color/white"
        android:gravity="center"
        android:background="@color/purple_500"
        android:padding="10dp"
        android:text="Raze Galactic"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/icon1"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/space_station_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/icon2"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.1" />

    <TextView
        android:id="@+id/txt1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Space Stations"
        app:layout_constraintEnd_toEndOf="@id/icon1"
        app:layout_constraintStart_toStartOf="@id/icon1"
        app:layout_constraintTop_toBottomOf="@id/icon1" />

    <TextView
        android:id="@+id/txt2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Flights"
        app:layout_constraintEnd_toEndOf="@id/icon2"
        app:layout_constraintStart_toEndOf="@id/txt1"
        app:layout_constraintStart_toStartOf="@id/icon2"
        app:layout_constraintTop_toTopOf="@id/txt1" />

    <TextView
        android:id="@+id/txt3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Rovers"
        app:layout_constraintEnd_toEndOf="@id/icon3"
        app:layout_constraintStart_toEndOf="@id/txt2"
        app:layout_constraintStart_toStartOf="@id/icon3"
        app:layout_constraintTop_toTopOf="@id/txt1" />

    <ImageView
        android:id="@+id/icon2"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/rocket_icon"
        app:layout_constraintEnd_toStartOf="@id/icon3"
        app:layout_constraintStart_toEndOf="@id/icon1"
        app:layout_constraintTop_toTopOf="@id/icon1" />

    <ImageView
        android:id="@+id/icon3"
        android:layout_width="40dp"
        android:layout_height="40dp"
        android:src="@drawable/rover_icon"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/icon2"
        app:layout_constraintTop_toTopOf="@id/icon1" />

    <TextView
        android:id="@+id/box1"
        android:layout_width="130dp"
        android:layout_height="100dp"
        android:layout_marginEnd="16dp"
        android:background="@color/purple_500"
        android:gravity="center"
        android:text="DOA"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:layout_constraintEnd_toStartOf="@id/box2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@id/txt1" />


    <TextView
        android:id="@+id/box2"
        android:layout_width="130dp"
        android:layout_height="100dp"
        android:background="@color/purple_500"
        android:gravity="center"
        android:text="MARS"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/box1"

        app:layout_constraintTop_toTopOf="@id/box1" />

    <ImageView
        android:layout_width="70dp"
        android:layout_height="70dp"
        android:src="@drawable/double_arrows"
        app:layout_constraintBottom_toBottomOf="@+id/box1"
        app:layout_constraintEnd_toEndOf="@+id/box2"
        app:layout_constraintStart_toStartOf="@+id/box1"
        app:layout_constraintTop_toBottomOf="@id/box2"
        app:layout_constraintTop_toTopOf="@id/box1" />

    <Switch
        android:id="@+id/switch1"
        android:layout_width="150dp"
        android:layout_height="30dp"
        android:background="#FF9800"
        android:padding="5dp"
        android:text="One Way"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.4" />

    <TextView
        android:id="@+id/trav"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:background="#FF9800"
        android:padding="5dp"
        android:text="1 Traveller"
        app:layout_constraintStart_toStartOf="@id/switch1"
        app:layout_constraintTop_toBottomOf="@id/switch1" />

    <ImageView
        android:layout_width="103dp"
        android:layout_height="99dp"
        android:layout_marginStart="156dp"
        android:layout_marginBottom="192dp"
        android:src="@drawable/galaxy"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <ImageView
        android:layout_width="20dp"
        android:layout_height="69dp"
        android:layout_marginStart="100dp"
        android:layout_marginBottom="192dp"
        android:src="@drawable/rocket_icon"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

    <Button
        style="?android:attr/borderlessButtonStyle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/teal_700"
        android:gravity="center"
        android:padding="10dp"
        android:text="DEPART"
        android:textColor="@color/white"
        android:textSize="20dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>