kotlin MyCalculator - color, linear layout with orientation, align with gravity,

카테고리 없음

kotlin MyCalculator - color, linear layout with orientation, align with gravity,

slowbooktech 2022. 6. 12. 02:05

* what i made

* point

1 - same space with margin, weight ratio

2 - have toast pop up message when the button is clicked (using onclick and user defined methods)

3 - color, string enrolling

1. constraint >> linear

(google prefers constraint layout)

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    
</androidx.constraintlayout.widget.ConstraintLayout>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
    <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="Hello World!"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintLeft_toLeftOf="parent"
      app:layout_constraintRight_toRightOf="parent"
      app:layout_constraintTop_toTopOf="parent" />

  </LinearLayout>

2. enroll the color

resource folder >>> values >>> colors.xml

3. enroll the string

res > values > strings.xml

<string name = "the name of the string _ defined by user" > the real value </string>

<resources>
    <string name="app_name">MyCalculator_chapter7</string>
    <string name="temporary">2334</string>
    <string name="temp">text for test</string>
</resources>

4. liner inside the linear : to 배치

* match : 겉의, 부모 레이아웃에 맞춰

* wrap : 안의, 아이템 크기에 맞춰

<LinearLayout
     android:layout_width="match_parent"
    android:layout_height="wrap_content"

5. layout orientation

android:orientation="vertical"

np : several layouts

선형 레이아웃이 여러개고 안에 레이아웃 안에 레이아웃처럼 관계정의가 필요하면 orientation 통해서 어느 방향인지 알려줘야한다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">

horizontal : 가로

vertical : 세로

android:orientation="horizontal"

  <LinearLayout
       android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:orientation="horizontal"
      <Button
          android:id="@+id/btnSeven"
          android:layout_width="0dp"
          android:layout_height="match_parent"
          android:layout_weight="1"
          android:text="@string/buttonSeven"/>
      >

</LinearLayout>

계산기는 큰 틀인 레이아웃이 세로인데, 그 세로가

이런 세로임. 그래서 vertical 로 큰 레이아웃 만들고

작은 레이아웃들은 각각 horizontal로 묶어서

위의 한 레이아웃이 vertical의 한 행이 되게끔 만드는 셈임.

6. align

to align, use gravity.

1. start / end

android: gravity = "start" // android : gravity = "end"

2. bottom

use | to exrpess 'start or end' & 'bottom' at the same time

default : top, left.

start|bottom : bottom, left

end|bottom : bottom, right

android:gravity = "startbottom", android:gravity = "endbottom"

7. layout inside of the layout

layout 전체는 항상 </linear layout> 태그로 닫고, 레이아웃 안에 들어가는 아이템들은 /> 로 닫는다.

레이아웃 태그는 <> </> 이고 그 안에 아이템들이 들어가면 <레이아웃> 아이템 </레이아웃닫기> 인 셈

이때 아이템도 <아이템 /> 인거

* structure

</Linearlayout>

<LinearLayout
     android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    >
    <Button
        android:id="@+id/btnSeven"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:text="@string/buttonSeven"/>
</LinearLayout>

8. weight

비율

8-1) weight is all 1 >> same ratio

<Button
    android:id="@+id/btnEight"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="@string/buttonEight"/>
<Button
    android:id="@+id/btnNine"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_margin="2dp"
    android:text="@string/buttonNight"/>
<Button
    android:id="@+id/btnDivide"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="@string/buttonNight"/>

8-2) only one item has 3 weight >> larger ratio

android:layout_weight="3"

<Button
    android:id="@+id/btnEight"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="@string/buttonEight"/>
<Button
    android:id="@+id/btnNine"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="3"
    android:layout_margin="2dp"
    android:text="@string/buttonNight"/>
<Button
    android:id="@+id/btnDivide"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:text="@string/buttonNight"/>

9. on click >> give button the function of doing sth, when the button is pressed

1) toast : pop up message

Toast.makeText(this, "Button is clicked", Toast.LENGTH_LONG).show()

*kotlin file, original code

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }
}

*kotlin file, added code

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    fun onDigit(view:View){
        Toast.makeText(this, "Button is clicked", Toast.LENGTH_LONG).show()
    }
}

2) use onDigit by string.

just call the name of the method

android:onClick="onDigit"

final code of the button item

<Button
    android:id="@+id/btnNine"
    android:layout_width="0dp"
    android:layout_height="match_parent"
    android:layout_weight="1"
    android:layout_margin="2dp"
    android:text="@string/buttonNight"
    android:onClick="onDigit"
    tools:ignore="OnClick,UsingOnClickInXml"/>

whole code

1. kotlin file

package com.example.mycalculator_chapter7

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.view.View
import android.widget.Toast

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
    }

    fun onDigit(view: View) {
        Toast.makeText(this, "Button is clicked", Toast.LENGTH_LONG).show()

    }
}

2. main xml file

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    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="250dp"
        android:background="@color/light_gray"
        android:padding="10dp"
        android:textSize="48sp"
        android:text="@string/temp"
        android:gravity="end|bottom" />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        >
        <Button
            android:id="@+id/btnSeven"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="@string/buttonSeven"
            android:onClick="onDigit"
            tools:ignore="OnClick,UsingOnClickInXml" />
        <Button
            android:id="@+id/btnEight"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="@string/buttonEight"
            android:onClick="onDigit"
            tools:ignore="OnClick,UsingOnClickInXml"/>
        <Button
            android:id="@+id/btnNine"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="@string/buttonNine"
            android:onClick="onDigit"
            tools:ignore="OnClick,UsingOnClickInXml"/>
        <Button
            android:id="@+id/btnDivide"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:layout_margin="2dp"
            android:text="@string/buttonDivide"
            android:onClick="onDigit"
            tools:ignore="OnClick,UsingOnClickInXml" />
    </LinearLayout>

  </LinearLayout>