[android] android 기본 위젯 익히기1

 

 

 

 

 

 

 

 

 

 

 

뷰와 뷰그룹

 

 

뷰(view) 클래스

 

안드로이드 화면에서 실제로 사용되는 것들은 모두 view 클래스의 상속을 받는다

-버튼, 라디오 버튼, 이미지 등은 모두 view 클래스의 서브클래스이다

 

위젯이라고도 부른다

화면에서의 버튼 : 버튼 위젯

실제 코드에서의 버튼 : 버튼 클래스

 

레이아웃

다른 위젯을 담을 수 있는 위젯을 특별히 레이아웃이라고 한다

즉, 위젯을 담아 배치하는 틀

viewgroup 클래스 아래에 존재한다

레이아웃도 크게 보면 위젯에 포함된다

 

 

 

 

view 클래스 계층도(*** 중요 ***)

 

최상위에 object 클래스가 있고 이를 상속받은 View 클래스가 있다

안드로이드 화면에 나타나는 모든 위젯은 View 하위에 존재한다

레이아웃은 -> LinearLayout, RelativeLayout, FrameLayout, GridLayout

뷰 컨테이너(view container)

레이아웃이라고 부르지는 않지만 다른 뷰를 포함하는 ListView,GridView,TabHost,Gallery 등

뷰 컨테이너도 ViewGroup 클래스에서 상속받는다

 

 

 

object

   ↓

 View     ->  ViewGroup   -> LinearLayout     ->  TableLayout

                                   -> RelativeLayout  ↓-> Radiogroup

                                   -> FrameLayout    ->  TabHost

                                   -> GridLayout

                                   -> AdapterView     ->  AbsListView   ->  ListView

                                   -> ToolBar                                    -> GridView  

                                                            ↓ -> AbsSpinner  ->  Gallery

                                                                                     ->  spinner

           

              -> TextView  -> EditText

                                -> Button  ->  CompoundButton  -> checkBox

                                                                             -> ToggleButton

                                                                             -> Switch

                                                                             -> RadioButton

 

              -> ImageView  ->  ImageBuuton

              -> ProgressBar  ->  AbsSeekBar  ->  SeekBar

                                                          ->  RatingBar

 

 

 

 

 

Button

 

xml 속성이 거의 없고 대게 상위 클래스인 TextView나 View에서 상속받는다

 

 

Button의 기본 형태

 

<?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"
    tools:context=".MainActivity"> // layout 설명은 나중에

    <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" />
    <Button // 버튼의 기본 형태입니다
        android:id="@+id/Btn1" // 버튼에게 id를 만들어 action을 취할수 있습니다
        android:layout_width="wrap_content" //크기지정
        android:layout_height="wrap_content" // 크기지정
        android:text="버튼입니다." /> // 버튼의 들어갈 내용지정

</LinearLayout>

 

 

 

실행결과 ->

 

 

 

 

기본 형태를 보면 알수 있는 것들 :

id는 뭐야? wrap은 match는 ??????????????//

 

 

 

View 클래스의 xml 속성

 

id 속성

 

모든 위젯의 아이디를 나타냄

Kotlin 코드에서 버튼 등의 위젯에 접근할 때 id 속성에 지정한 아이디를 사용

일반적으로 id 속성은 위젯에 아이디를 새로 부여하는 개념

'@+id/' 형식

- / 다음에는 새로 지정할 id를 넣는다

- android:id="@+id/btn1" : 버튼 위젯의 아이디로 btn1을 부여한다

 

터치했을 때 어떤 동작이 필요한 경우 id를 지정한다

ex) RadioButton, CheckBox

 

 

layout_width layout_height 속성

 

모든 위젯에 필수로 들어감

이 둘은 각각 위젯의 너비와 높이를 나타냄

  match_parent와 wrap_content 값으로 설정할 수 있다

 

wrap_content

버튼의 너비가 그 안의 글자인 '버튼입니다'에 꼭 맞는 크기가 된다

 

match_parent(또는 fill_parent)

'버튼입니다' 글자와 관계없이 버튼을 싸고 있는 부모(리니어레이아웃)의 너비에 꽉 차는 크기가 된다

 

layout_height는 버튼의 높이에 대해 적용된다

 

 

 

background 속성

 

위젯의 색상은 주로 #RRGGBB값으로 지정

 

각 값은 빨간색, 초록색, 파란색을 의미한다

RR, GG, BB 위치는 16진수 00~FF로 표현할 수 있다

 

 

<?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:background="#ff0000" // check
    tools:context=".MainActivity">

    <Button
        android:id="@+id/Btn1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#00ff00"  //check
        android:text="버튼입니다." />

</LinearLayout>

 

 

 

 

실행결과

 

 

 

 

 

 

padding, layout_margin 속성

 

padding 속성을 사용하면 레이아웃의 경계선과 위젯 사이에 여백을 둘 수 있다.

Button에 padding을 설정하면 버튼 안의 글자가 버튼의 경계선에서 일정 간격 떨어져서 표현된다

위젯과 위젯 사이에 여유를 두고 싶다면 layout_margin 속성을 사용

 

 

 

<?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"
    android:padding="30dp"//padding 확인
    tools:context=".MainActivity">

    <TextView
        android:padding="30dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="저와 이웃을 하고 싶다면 버틀 클릭 >>" />


    <Button
        android:id="@+id/Btn1"
        android:layout_margin="20dp" // margin 확인
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="하고 싶어용~~" />

</LinearLayout>

 

 

 

 

 

 

 

visibility 속성

 

위젯을 보일지 안볼지 여부를 결정

 

 

...
android:visibility="invisible" or "visible"

 

 

 

enabled, clickable 속성

 

xml 보다 kotlin 속성

값은 true , false 이며 default = True

 

 

rotation 속성

 

위젯을 회전시켜서 출력

값은 각도로 지정

 

android:rotation="45"

 

 

 

 

 

예제) 다양한 xml 속성들을 이용한 예제

 

 

 

 

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

    <Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        android:text="버튼 1"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="20dp"
        android:text="여긴 텍스트뷰입니다. "/>


    <EditText
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="30dp"
        android:background="#00AEFF" />

    <Button

        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#4800FFA6"
        android:rotation="90"
        android:text="버튼 2" />

</LinearLayout>

 

 

 

실행결과

 

 

 

 

 

 

 

TextView

 

 

text 속성

텍스트뷰에 나타나는 문자열을 표현

"문자열" 형식으로 값을 직접 입력

 

textColor 속성

글자의 색상을 지정

background 속성처럼 값은 #RRGGBB형식으로 사용

 

textsize 속성

글자 크기 : dp, px, in, mm, sp

 

typeface 속성

글자의 글꼴을 지정

 

textStyle 속성

글자의 스타일을 지정

bold, italic, bolditalic 설정 ㅇ 디폴트는 normal

 

singleLine 속성

글이 길어 줄이 넘어갈 경우 강제로 한 줄까지만 출력하고 문자열의 맨 뒤에 ... 을 표시

 

 

 

<?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:textSize="30sp" //textSize 확인
        android:text="textSize 속성"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textColor="#9C27B0" // textColor
        android:text="textColor 속성"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="bold|italic" //textStyle
        android:text="textStyle 속성"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:typeface="serif" //typeface
        android:text="typeface 속성"/>

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:singleLine="true" //singleLine
        android:text="singleLine 속성"/>

</LinearLayout>

 

 

실행결과

 

 

 

 

 

 

 

 

 

kotlin을 이용한 TextView xml 속성 지정

 

 

 

 

 

 

activity_main.xml

 

<?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:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView 연습 1"/>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView 연습 2"/>

    <TextView
        android:id="@+id/textView3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="TextView 연습 3"/>

</LinearLayout>

 

 

MainActivity.kt

 

package kr.ac.dongyang.ex4_18

import android.graphics.Color
import android.graphics.Typeface
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import kotlinx.android.synthetic.main.activity_main.*

class MainActivity : AppCompatActivity() {

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

        textView1.setText("안녕하세요...")
        textView1.setTextColor(Color.RED) // 컬러지정
        textView2.setTextSize(30.0f) //size 지정
        textView2.setTypeface(Typeface.SERIF) // 글꼴지정
        textView3.setText("가나다라마바사아자차카파바하가나다라마바사아자차카파바하") // text 지정
        textView3.setSingleLine()

    }
}

 

 

 

실행결과

 

 

 

 

 

 

 

----------------------------------------------너무 길어서 1,2로 나눴어용~~ --------------------------------------------------