환면을 구성하는 방법

화면을 구성하는 방법

1. 액티비티 코드로 작성
2. 레이아웃 XML파일로 작성

• 액티비티에 레이아웃 XML 명시

import android.os.Bundle
import androidx.appcompat.app.AppCompatActivity
import com.example.myapplication.R

class MainActivity: AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //화면 출력 XML 명시
        setContentView(R.layout.activity_main)
    }
}

XML에서 화면을 구현하므로 액티비티 코드에서는 화면을 출력하는 setContentView()함수만 호출하면서 XML 파일을 전달한다

 

 

레이아웃 XML 의 뷰를 코드에서 사용하기

• XML에 구현한 텍스트 뷰 객체

<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="hello" />

 

식별자를 부여하고 그 식별자로 객체 얻어 오기

• id 속성 부여

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="hello" />

R.java파일에 text1이라는 상수 변수를 추가해라

 

• 코드에서XML에 입력한 객체 사용법

//XML 화면 출력
SetContentView(R.layout.activity_main)  //액티비티 화면 출력(뷰 객체 생성)
//id값으로 뷰 객체 획득
val textView1: TextView =findViewById(R.id.text1)

R.java 파일의 상수 변수로 객체를 얻는다. findViewById() 함수를 이용한다

 

• 제네릭으로 가져온 뷰 객체

//XML 화면 추력, 뷰 객체 생성 완료
setContentView(R.layout.activity_main)
//id 값으로 뷰 객체 획득
val textView1 = findViewById< TextView> (R.id.text1)

 

뷰의 크기를 지정하는 방법

• 필수 속성인 크기

<TextView
    android:id="@+id/text1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="hello" />

• 크기 지정 예

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android">

</PreferenceScreen>

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

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

 

뷰의 간격 설정

뷰의 간격은 margin과 padding속성으로 설정한다.

 

뷰의 표시 여부 설정

• 뷰 표시 여부 설정하기

</LinearLayout>
<LinearLayout
    <Button
        android:visibility="invisible" />

</LinearLayout>
<LinearLayout
    <Button
        android:visivility="gone" />

그림6-8 invisible과 gone의 차이

 

뷰의 visibility값을 invisible, gone으로 설정하는 이유는 처음에는 화면에 보이지 않다가 어떤 순간이 되면 보이게 처리하기 위해서 이다.

• 코드에서 visibility 속성값 변경

visibleBtn,setOnClickListener {
    targetView.visibility = View.VISIBLE
}
invisibleBtn.setOnClickListener {
    targetView.visibility = View.INVISIBLE
}

 

텍스트 뷰

• 텍스트 뷰 속성

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="helloworld"
    android:textColor="#FF0000"
    android:textSize="20sp"
    android:textStyle="bold"

 

android:autoLink 속성

만약 android:autoLink="web"으로 설정하면 문자열에 웹 주소가 포함됐을 대 해당 문자열을 링크 모양으로 표시합니다.

• 자동 링크 속성

<TextView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:autoLink="web|email|phone" />

android:ellipsize 속성

• 줄임표 표시 ...

<LinearLayout xmlns: android
    <TextView
        android:singleLine="true"
        android:ellipsize="middle" />
    <TextView
        android:maxLines="3"
        android:ellipsize="end" />

 

이미지 표시

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="#ff0000"
    android:src="@drawable/test" />

뷰 바인딩

레이아웃 XML 파일에 선언한 뷰 객체를 코드에서 쉽게 이용하는 방법 이다.

<LinearLayout xmlns:android=""
        >
    <button
        android:id="@+id/visibleBtn"
    <TextView
        android:id"@+id/targetView"
    <Button
        android:id="@+id/invisibleBtn"

 

• 그래들 파일에 뷰 바인딩 설정

android {
    (... 생략 ...)
    viewBinding {
        enabled = true
    }
}

 

• 바인딩 객체 이용법

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

class MainActivity : AppCompatActivity() {
        override fun onCreate(savedinstanceState: Bundle?) {
                super.onCreate(savedInstanceState)

                //바인딩 객체 획득
                val binding = ActivityMainBinding.inflate(layoutInflater)
                // 액티비티 화면 출력
                setContentView(binding.root)

                //뷰 객체 이용
                binding.visibleBtn.setOnClickListener {
                        binding.targetView.visibility = View.VISIBLE
                }
                binding.invisibleBtn.setOnClickListener {
                        binding.targetView.visibility = View.INVISIBLE
                }
        }
}