Front-End/Kotlin

[Kotlin] 안드로이드 XML, 모듈 생성, View 속성

psy_er 2024. 4. 15. 01:53
728x90

[Kotlin] 안드로이드 XML, 모듈 생성, View 속성

 

<XML >

XML : eXtensible (확장가능한) Markup Language

html과 같은 마크업 언어로 시작태그와 종료태그로 이루어져 있다.

데이터를 저장하고 전달하기 위해 디자인된 언어로 사전 정의 태그가 존재하지 않는다. 따라서 사용자가 원하는 대로 작성하면 된다. XML의 요소는 계층적 구조를 가져 XML DOM 트리를 생성한다.

<?xml version="1.0" encoding="euc-kr"?>
<!-- XML 문서 구조 -->

<students>
    <student sid="100">
    	<name>홍 현 </name>
        <age>30</age>
        <address>서울 면목동</address>
    </student>
</students>

 

<XML 요소(element) 또는 태그(tag)>

// 요소 명이 없는 경우
<a>  </a> = <a/>

 

최상위 요소(root element)는 하나만 가져야 한다.

요소명이 XML naming convention에 적합해야 한다.

시작 태그 다음에는 반드시 종료 태그가 있어야 한다.

요소 내용이 없으면 빈 요소로 둘 수 있다.

html 태그는 대소문자 구별이 없지만, xml은 대소문자 구별이 있다.

하지만 XML 태그는 요소명의 대소문자를 구별해야 한다.

요소와 텍스트 데이터를 함께 나타낼 수 있다.

태그를 overlap 하는 것을 허용하지 않는다.

 

 

<XML 특징>

NameSpace 등장 배경

중복 태그를 막기 위해 등장

요소명과 속성명을 정확하게 인식하기 위해 만들어졌다.

 

접두사를 사용한 Namespace 선언

<element_name xmlns:prefix_name = "URI_Reference">

Namespace 접두사는 XML 문서 중에서 사용하는 요소명이나 속성명과 xmlns:로 속성값으로 지정하는 URI 참조를 관련시키기 위해 사용한다.

 

한정한 이름

Namespace 접두사를 붙인 요소나 속성명

<prefix_name:local_name>
<element_name prefix_name:attr_name = "attr값">

<!-- 잘못 사용한 네임스페이스 -->
<prefix_name:local_name></local_name>

 

XML namespace 예시

<mail xmlns:rcv="http://www.duksung.ac.kr/2011/reciever"
      xmlns:snd="http://www.hanbit.co.kr/xml/sender">처럼 namespace를 지정해서 xml 문서를 읽는다.

이때 root element는 mail이다.

<?xml version="1.0" encoding="euc-kr" ?>
<mail xmlns:rcv="http://www.duksung.ac.kr/2011/reciever"
      xmlns:snd="http://www.hanbit.co.kr/xml/sender">
      <receiver rid="001">
      	<rcv:name join="true"> 임인재 </rcv:name>
        <rcv:mail-address> iij@hanmail.net </rcv:mail-address>
      </receiver>
      <body>
      	<contents> 내일까지 제안서 제출하시기 바랍니다. </contents>
        <postscript> &amp; 마감시간은 오후 5시입니다. </postscript>
        <attached-file/>
      </body>
      <sender sid="007">
      	<snd:name alias="chicken" join="true"> 김광덕 </snd:name>
        <snd:mail-address> danny@goodnews.or.kr </snd:mail-address>
      </sender>
</mail>

 

DB로서의 XML

XML 문서, 즉 document는 데이터베이스와 같음

웹 데이터베이스로 활용, XML 문서 파싱 필요

 

<?xml version="1.0" encoding="utf-8"?>
<customers>
   <customer>
      <name>장발장</name>
      <address>서울 강남구</address>
   </customer>
   <customer>
      <name>코제트</name>
      <address>부산 동래구</address>
   </customer>
   <customer>
      <name>판틴</name>
      <address>강원도 춘천시</address>
   </customer>
<customers>

 

 

<안드로이드에서 XML 파일>

안드로이드에서 res 패키지와 manifest 패키지의 파일은 XML로 이루어져 있다.

 

- mainfest/AndroidManifest.xml default 설정파일

아이콘설정, 애플리케이션 이름 설정 등등.....

mainfest 1개, application 1개, activity 1개가 기본적으로 설정되어 있다.

activity에서. MainActivity를 설정하여 등록하였다.

즉, 코틀린 리소스에 담긴 모든 정보를 입력하는 파일이다.

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

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.MyFirstApplication"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

 

 

< 화면을 구성하는 방법>

view : 안드로이드에서 view는 화면에 보이는 모든 class이다.

액티비티-뷰 구조 : 하나의 액티비티는 하나의 뷰로 이루어져 있다. 화면을 출력하는 컴포넌트는 액티비티이다. 화면에 내용을 표시하려면 뷰 클래스를 이용해야 한다.

 

==> 레이아웃 XML로 화면을 구성한다.

setContentView를 이용해 activity_main.xml 파일을 참고하여 화면을 구성한다.

 

 

< 뷰 클래스의 계층 구조 >

- View : 뷰 클래스는 모든 클래스의 최상위 클래스입니다. 액티비티는 View의 서브 클래스만 화면에 출력합니다.

- ViewGroup : 자체 UI 없이 다른 뷰 여러 개를 묶어서 제어할 목적으로 사용합니다.

- TextView : 특정 UI를 출력할 목적으로 사용하는 클래스입니다.

 

 

==> View Group과 TextView 모두 View 클래스를 상속받아 만들어졌습니다.

ViewGroup 클래스의 하위인 레이아웃 클래스는 화면 자체가 목적이 아니라, 다른 뷰(TextView, ImageView 등) 객체 여러 개를 담아서 한꺼번에 제어할 목적으로 사용한다. 뷰의 계층 구조는 레이아웃 객체를 중첩해서 복잡하게 구성이 가능하다.

 

 

<모듈 생성하는 방법>

프로젝트는 그대로 두고, 모듈을 생성해 보자.

File -> New -> New Module -> Application/Library name에서 모듈 이름 설정 -> Empty Views Activity

모듈을 추가하면 모듈을 다루는 build.gradle.kt 파일이 생성된다.

 

Palette -> 여러 가지 view가 존재한다. Drag and Drop으로 화면에 쌓을 수 있다.

Component Tree -> 현재 작성한 xml 문서를 트리형태로 보여준다.

 

기본 LinearLayout 뷰 안에 컴포넌트들이 차례대로 입력된다.

 

 

< Attributes 값 설정하기 >

 

Attributes에서 layout_width와 layout_height는 반드시 주어져야 한다.

 

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

    <TextView
        android:id="@+id/main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="회원가입"
        android:textSize="34sp"
        android:textStyle="bold" />

 

wrap_content : 내용만큼 크기를 설정해 준다.

match_parent : 부모 태그에 크기를 맞추겠다.

위의 예시에서 TextView의 match_parent는 LinearLayout의 width, height를 가지고 와서 사용한다.

LinearLayout의 부모 크기는 폰크기이다.

 

 

< 뷰의 간격 설정 Margin, Padding >

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

 

margin : 다른 뷰와의 간격 설정

padding : 뷰와 콘텐츠 사이의 간격 설정

 

margin, padding 속성을 이용하면 간격이 네 방향 모두 같은 크기로 설정된다. paddingLeft, paddingRight, padding Top, paddingBottom과 layout_marginLeft, layout_marginRight, layout_marginTop, layout_marginBottom 등등 속성 이용하기.

 

layout_margin : 각 컴포넌트 사이의 간격, 왼쪽 오른쪽 간격 주기 (상하좌우)

layout_marginTop : 위쪽에만 간격 주기

padding : 내부 콘텍스트 기준 상하좌우 여백 주기

 

< Visibility >

visibility 속성에서 기본 값은 visible이다.

invisible로 설정하면 보이지 않지만, 컴포넌트의 자리는 차지한다.

gone으로 설정하면 보이지도 않고 배치도 하지 않는다.

728x90