반응형

View

설명

  • 안드로이드에서 눈에 보이는 모든 요소를 View라고 부른다.
  • 모든 View는 View라는 클래스를 상속받고 있다.
  • View는 위젯과 레이아웃으로 나뉜다.
  • 레이아웃은 컨테이너, 뷰 그룹이라 부르기도 하며 내부에 View가 배치되는 모양을 결정하는 요소이다.
    • ex) LinearLayout
  • 위젯은 문자열 입/출력이나 사용자와 상호작용하는 View를 말한다.
    • ex) Input, Button, TextView, ImageView

주요 속성

  • id : xml이나 코드에서 뷰를 지칭하기 위해 사용하는 속성
  • layout_width : 뷰의 가로 길이
  • layout_height : 뷰의 세로 길이
  • margin : 뷰의 외부 여백
  • padding : 뷰의 내부 여백
  • layout_gravity : 해당 뷰의 부모 기준으로 위치 정렬
  • gravity : 해당 뷰 내부의 위치 정렬
  • background : 뷰의 배경

예시 코드

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

    <Button
        android:id="@+id/testButton"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:gravity="center"
        android:text="Hello World" />

</LinearLayout>

참고

TextView

설명

  • 문자열을 보여주는 View

예시 코드

<?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/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textColor="@color/purple_500"
        android:textSize="30sp"
        android:textStyle="bold" />

</LinearLayout>

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

        findViewById<TextView>(R.id.textView).text = "Hello World2"
    }
}

참고

Button

설명

  • 사용자의 클릭 이벤트를 지원하는 View

예시 코드

<?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/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Hello World" />

    <Button
        android:id="@+id/button1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="click1"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

    <Button
        android:id="@+id/button2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="click1"
        android:textAppearance="@style/TextAppearance.AppCompat.Medium" />

</LinearLayout>

class MainActivity : AppCompatActivity() {
    var textView: TextView? = null
    var button1: Button? = null
    var button2: Button? = null

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

        textView = findViewById(R.id.textView)
        button1 = findViewById(R.id.button1)
        button2 = findViewById(R.id.button2)

        button1?.setOnClickListener(BtnListener())
        button2?.setOnClickListener(BtnListener())
    }

    inner class BtnListener : View.OnClickListener {
        override fun onClick(view: View?) {
            when (view?.id) {
                R.id.button1 -> textView?.text = "clicked1"
                R.id.button2 -> textView?.text = "clicked2"
            }
        }
    }
}

람다식 활용 코드

class MainActivity : AppCompatActivity() {
    var textView: TextView? = null
    var button1: Button? = null
    var button2: Button? = null

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

        textView = findViewById(R.id.textView)
        button1 = findViewById(R.id.button1)
        button2 = findViewById(R.id.button2)

        button1?.setOnClickListener { textView?.text = "clicked1" }
        button2?.setOnClickListener { textView?.text = "clicked2" }
    }
}

class MainActivity : AppCompatActivity() {
    var textView: TextView? = null
    var button1: Button? = null
    var button2: Button? = null

    var listener = View.OnClickListener { view ->
        when (view.id) {
            R.id.button1 -> textView?.text = "clicked1"
            R.id.button2 -> textView?.text = "clicked2"
        }
    }

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

        textView = findViewById(R.id.textView)
        button1 = findViewById(R.id.button1)
        button2 = findViewById(R.id.button2)

        button1?.setOnClickListener(listener)
        button2?.setOnClickListener(listener)
    }
}

참고

CheckBox

설명

  • 항목 체크를 할 수 있는 View

예제

<?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/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="true" />

    <CheckBox
        android:id="@+id/checkBox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:checked="true"
        android:text="Hello World" />

    <Button
        android:id="@+id/resetButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="reset" />

    <Button
        android:id="@+id/toggleButton"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="toggle" />
</LinearLayout>

class MainActivity : AppCompatActivity() {
    var textView: TextView? = null
    var checkBox: CheckBox? = null
    var resetButton: Button? = null
    var toggleButton: Button? = null

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

        textView = findViewById(R.id.textView)
        checkBox = findViewById(R.id.checkBox)
        resetButton = findViewById(R.id.resetButton)
        toggleButton = findViewById(R.id.toggleButton)

        resetButton?.setOnClickListener {
            checkBox?.isChecked = false
        }

        toggleButton?.setOnClickListener {
            checkBox?.toggle()
        }
        
        checkBox?.setOnCheckedChangeListener { buttonView, isChecked ->
            textView?.text = isChecked.toString()
        }
    }
}

참고

RadioButton

설명

  • 하나의 그룹 안에서 하나만 선택할 수 있는 View
  • RadioGroup으로 RadioButton들을 grouping해서 사용한다.

예제

<?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/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="" />

    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="radio1" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="radio2" />

        <RadioButton
            android:id="@+id/radio3"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="radio3" />
    </RadioGroup>
</LinearLayout>

class MainActivity : AppCompatActivity() {
    var textView : TextView? = null
    var radioGroup : RadioGroup? = null

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

        textView = findViewById(R.id.textView)
        radioGroup = findViewById(R.id.radioGroup)

        radioGroup?.setOnCheckedChangeListener { group, checkedId ->
            when (group.checkedRadioButtonId) {
                R.id.radio1 -> textView?.text = "checked1"
                R.id.radio2 -> textView?.text = "checked2"
                R.id.radio3 -> textView?.text = "checked3"
            }
        }
    }
}

참고

ProgressBar

설명

  • 오래 걸리는 작업이 있을 경우 작업 중임을 표시하는 View
  • 동그랗게 돌아가는 형태 or 얼마만큼 진행되었는지 표시하는 바 형태

코드

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

    <ProgressBar
        style="@android:style/Widget.DeviceDefault.Light.ProgressBar.Large"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

    <ProgressBar
        android:id="@+id/progressBar"
        style="@android:style/Widget.DeviceDefault.ProgressBar.Horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="100"
        android:progress="15" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="click" />

</LinearLayout>

class MainActivity : AppCompatActivity() {
    var button: Button? = null
    var progressBar: ProgressBar? = null

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

        button = findViewById(R.id.button)
        progressBar = findViewById(R.id.progressBar)

        button?.setOnClickListener { view ->
            // progressBar?.progress = 50
            progressBar?.incrementProgressBy(5)
        }
    }
}

참고

SeekBar

설명

  • ProgressBar와 유사하지만 사용자가 직접 설정할 수 있는 기능을 제공하는 View

코드

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

    <SeekBar
        android:id="@+id/seekBar"
        style="@style/Widget.AppCompat.SeekBar.Discrete"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:max="10"
        android:progress="1" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="" />

    <Button
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="click" />

</LinearLayout>

class MainActivity : AppCompatActivity() {
    var button: Button? = null
    var textView: TextView? = null
    var seekBar: SeekBar? = null

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

        button = findViewById(R.id.button)
        textView = findViewById(R.id.textView)
        seekBar = findViewById(R.id.seekBar)

        button?.setOnClickListener {
            // seekBar?.progress = 5
            seekBar?.incrementProgressBy(1)
        }

        seekBar?.setOnSeekBarChangeListener(object : SeekBar.OnSeekBarChangeListener {
            override fun onProgressChanged(seekBar: SeekBar?, progress: Int, fromUser: Boolean) {
                textView?.text = progress.toString()
            }

            override fun onStartTrackingTouch(seekBar: SeekBar?) {
                textView?.text = "변경 시작"
            }

            override fun onStopTrackingTouch(seekBar: SeekBar?) {
                textView?.text = "변경 종료"
            }
        })
    }
}

참고

ImageView

설명

  • 이미지를 보여주는 View
  • 안드로이드 5.0 이후에 srcCompat이라는 속성이 추가되었는데 기본적으로 src와 동일하고, 벡터 방식의 이미지(SVG, PSD 등)를 처리할 수 있는 기능이 추가되었다.
  • 이미지를 넣는 폴더는 drawable 폴더이다.
  • 버전이 변경되면서 mipmap이라는 폴더를 제공하는데 이 폴더의 이미지는 비트맵이 아닌 벡터 방식으로 그리게 된다. (주로 런처용 이미지를 관리)

코드

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

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:srcCompat="@mipmap/ic_launcher" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_media_pause" />

</LinearLayout>

class MainActivity : AppCompatActivity() {
    var imageView: ImageView? = null

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

        imageView = findViewById(R.id.imageView)
        imageView?.setImageResource(R.drawable.ic_launcher_background)
    }
}

참고

반응형

'Development > Android' 카테고리의 다른 글

[Android] ListView  (0) 2021.02.09
[Android] Layout  (0) 2021.02.09
[Android] Toast, Snackbar  (0) 2021.02.09
[Android] Intro  (0) 2021.02.09
[Android] adb를 활용해 무선으로 빌드하기  (0) 2018.08.19

+ Recent posts

티스토리툴바