Android(kotlin)- [인프런] 왕초보편 8개 앱 만들기 정리 (1/2)

안지현·2023년 1월 3일

Inflearn android kotlin 안드로이드 인프런 코틀린

Android[kotlin]

목록 보기

1/8

인프런
강의명 : [왕초보편] 앱 8개를 만들면서 배우는 안드로이드 코틀린(Android Kotlin)

(0) 강의소개 및 개발환경 세팅

단축키 설명, 오류가 날 수 있는 부분 설명

기본 색상 설정
'values' -> 'colors'로 들어가서 custom 색상 만들 수 있음
색상 적용이 안될 때
'values' -> 'themes' -> 'themes.xml' 들어가서 parent부분 수정
```
 <style name="Theme.MyApplication" parent="Theme.AppCompat.Light">
```

(1) 첫 번째

이미지뷰(ImageView), Drawable 폴더

'res' -> 'drawable' 폴더에 이미지 refector

<ImageView
	android:src="@drawable/imageName"
    android:layout_width="100dp"
    android:layout_height="100dp"/>

레이아웃 종류에 대한 설명(Linear Layout, Relative Layout, Constraint Layout)
1. Linear Layout
2. Relative Layout
3. Constraint Layout
화면 클릭 이벤트 처리
- setContentView
  - 이 메소드는 레이아웃xml의 내용을 파싱하여 뷰를 생성하고, 뷰에 정의된 속성을 설정한다.
  - activity 클래스에서 onCreate()안에 들어간다.
```
class MainActivity : AppCompatActivity() {
   override fun onCreate(savedInstanceState: Bundle?) {
       super.onCreate(savedInstanceState)
       setContentView(R.layout.activity_main)
    }
}
```
    -> activity의 setContentView()메소드의 인자로 레이아웃 리소드ID를 전달한다. 이를 실행하게 되면 main.xml로 만든 레이아웃이 출력된다.
- findViewById
  : 리소스 id를 통해 레이아웃에 있는 뷰 객체들 중 일치하는 뷰를 가져오는 메소드.
- Toast
  : Toast 메세지를 띄운다.
```
Toast.makeText(context, text, duration).show()
```
- setOnClickListener
  : 버튼 클릭 시 수행할 동작을 지정하는 리스너
```
val image = findViewById<ImageView>(R.id.imageName)
image.setOnClickListener{
   Toast.makeText(this, "클릭 완료", Toast.LENGTH_LONG).show()  
}
```

화면 전환(Intent)

Intent
: 여러 화면 간의 이동을 할 수 있도록 해주는 것.

val image = findViewById<ImageView>(R.id.imageName)
image.setOnClickListener{
     Toast.makeText(this, "클릭 완료", Toast.LENGTH_LONG).show() 
     
     val intent = Intent(this, SecondActivity::class.java)
     startActivity(intent)
}

(2) 두 번째

Splash 화면

SplashActivity 생성

manifests 파일 수정

<activity android:name=".SplashActivity">
		<intent-filter>
        	<action android:name = "android.intent.action.MAIN" />
            
            <category android:name = "android.intent.category.LAUNCHER" />
        </intent-filter>
</activity>
<activity android:name = ".MainActivity">
</activity>

-> SplashActivity가 먼저 뜨게 만듦

Handler
SplashActivity 에서 Handler 사용

Handler().postDelayed({
	startActivity(Intent(this, MainActivity::class.java))
    finish()
}, 3000)

-> 3초 뒤에 MainActivity로 넘기고 Splash는 꺼준다

타이틀바 없애기

values -> themes.xml 에 밑의 코드 추가
```
<item name = "windowNoTitle">true</item>
```
scaleType

: 이미지를 출력하는 속성
- android:scaleType = "center"
  : 이미지 원본 크기와 비율을 유지하며 이미지의 중앙을 layout_width, layout_height 안에 출력한다. 이 때 레이아웃보다 이미지가 크면 레이아웃의 벗어난 이미지는 출력되지 않은다. 레이아웃보다 이미지가 작으면 이미지를 center 정렬 한다.
- android:scaleType="centerCrop”
  : 이미지의 가로/세로의 길이 중 짧은 쪽을 ImageView의 레이아웃에 꽉 차게 크기를 맞춰서 출력한다. 이 때 원본 이미지 가로/세로의 비율은 유지되고 레이아웃 영역에서 벗어난 이미지는 출력되지 않는다.
- android:scaleType="centerInside”
  :이미지의 가로/세로의 길이 중 긴 쪽을 ImageView의 레이아웃에 맞춰서 출력한다. 이 때 원본 이미지의 가로/세로의 비율은 유지되고 레이아웃에 이미지외 빈공간은 background 속성의 color로 채워진다. fitCenter와 다른점은 원본 이미지가 ImageView이 레이아웃보다 작다면, 이미지의 크기가 유지 된다는 것이다
- android:scaleType="fitCenter”
  : 이미지의 가로/세로의 길이 중 긴 쪽을 ImageView의 레이아웃에 맞춰서 출력하다. 이 때 원본 이미지의 가로/세로의 비율은 유지되고 레이아웃에 이미지외 빈공간은 background 속성의 color로 채워진다. centerInside와 다른점은 이미지의 크기가 ImageView의 레이아웃에 크기에 따라 변한다는 것이다.
- android:scaleType="fiStart”
  : ImageView 레이아웃 안에서 이미지의 가로/세로 비율을 유지하며 출력되지만 ImageView의 레이아웃의 왼쪽 상단을 기준으로 정렬된다.
- android:scaleType="fitEnd”
  : ImageView 레이아웃 안에서 이미지의 가로/세로 비율을 유지하며 출력되지만 ImageView의 레이아웃의 오른쪽 하단을 기준으로 정렬된다.
- android:scaleType="fitXY”
  : 가로/세로 비율에 상관없이 ImageView의 레이아웃의 각 면에 꽉 차게 출력된다.
- android:scaleType="matrix”
  : 이미지 원본의 크기와 비율을 유지하며 이미지 원본대로 왼쪽 상단을 기준으로 출력된다. 이미지가 ImageView의 레이아웃 보다 크다면 나머지 이미지는 출력되지 않는다.
CardView
- strokeWidth : 테두리 두께 지정
- strokeColor : 테두리의 Color 지정
- cardCornerRadius : 모서리의 둥근 정도 지정. 지정한 값의 정도에 따라 타원형으로 만들 수도 있다.
- cardBackGroundColor : CardView의 Background Color 지정
- contentPadding : CardView의 Padding 지정
- cardElevation : cardview주변에 그림자 부여
- cardUseCompatPadding : CardView에 그림자를 부여하면 그림자가 생긴만큼 다른 공간에 영향을 미칠 수 있다.따라서 이를 True로 줌으로써 그림자가 표시될 공간을 만들어준다.
- 사용하기 위해서 build.gradle에 밑의 코드 추가하고 Sync Now
```
implementation "androidx.cardview:cardview:$version"
```
```
<androidx.cardview.widget.CardView
 android:layout_width="wrap_content"
 android:layout_height="wrap_content"
 app:cardCornerRadius="50dp" // 모서리 반경 설정
 android:layout_margin="10dp"
 >

 <ImageView
     android:id="@+id/member1"
     android:scaleType="fitXY"
     android:src="@drawable/member_1"
     android:layout_width="120dp"
     android:layout_height="150dp"
     />
</androidx.cardview.widget.CardView>
```

화면 간 데이터 전달 `Intent putExtra`

데이터 보내기

val intent = Intent(this, ImageInsideActivity::class.java)
intent.putExtra(name: "data", value: "1")
startActivity(intent)

데이터 받기

val getData = intent.getStringExtra(name: "data")

`setImageResource`

: 이미지에 접근

imageView.setImageResource(R.drawable.image_sample)

(3) 세 번째

데이터 바인딩 `Databinding`

-> MVVM 패턴!

build.gradle 파일 아래와 같이 수정 후 Sync Now

 android{
 	...
    databinding{
    enabled = true
    }
 }

xml 파일을 layout으로 감싸기

<?xml version="1.0" encoding="utf-8"?> 
<layout>
	<androidx.constraintlayout.widget.ConstraintLayout
 		 .....
    </androidx.constraintlayout.widget.ConstraintLayout> 
</layout>

Activity.kt에서 코드 변경

class MainActivity : AppCompatActivity() {

	private lateinit var binding : ActivityMainBinding

		override fun onCreate(savedInstanceState: Bundle?) {
      		super.onCreate(savedInstanceState)
  			binding = DataBindingUtil.setContentView(this, R.layout.activity_main)
		}
}

dataBinding 사용 예

binding.textBtnBind.setOnClickListener{
	Toast.makeText(this, "click", Toast.LENGTH_LONG).show()
}

변수 설명
- var : 값이 변할 수 있음
- val : 값이 변하지 않음
로그 보는 법

Log
- Log.d(tag: "MainActivity", msg: "testLog") -> 디버그
- Log.e(tag: “MainActivity”, msg: "testLog") -> 오류
  - Log.w(tag: “MainActivity”, msg: "testLog") -> 경고
  - Log.i(tag: “MainActivity”, msg: "testLog") -> 정보
  - Log.v(tag: “MainActivity”, msg: "testLog") -> 상세
랜덤으로 숫자 뽑기

Random.nextInt(from, until)

(4) 네 번째

커스텀 폰트 적용 방법
1. 폰트 다운로드
2. font Directory 생성
3. ttf파일을 font에 refactor
4. xml파일에 적용 android:fontFamily = "@font/fontName"
리스트뷰(ListView)와 어댑터(Adapter)

(ViewModel을 사용했음!)
1. Activity xml파일에 ListView 생성
2. ListView에 담길 item xml 파일 생성 (ex. listview_item.xml)
3. Activity xml 파일의 ListView에 listview_item 연결
```
 <ListView
  ...
  tools:listitem="@layout/listview_item"
  />
```
4. 사용할 ViewModel 생성
5. Activity.kt 파일에서 아이템 요소들 생성
6. Adapter 생성
7. Adapter 의 구성 요소
  - getCount() : 리스트뷰의 개수
  - getItem()
  - getItemId()
  - getView() : listview_item과 연결!!
8. Activity.kt 파일에서 어댑터 연결
물음표와 느낌표
- ? : null일 수 있음
- ! : null이 아님

뒤로가기 버튼 `onBackPressed()`

// 더블클릭 시 종료!!
override fun onBackPressed() {
    if(isDouble == true){
        finish()
    }

    isDouble = true
    Toast.makeText(this, "종료하시려면 더블클릭", Toast.LENGTH_LONG).show()

    Handler().postDelayed({
        isDouble = false
    }, 2000)
 }

리스트 랜덤으로 선택

random() !!

binding.goodWordTextArea.setText(sentenceList.random())

이렇게 4가지 앱을 만들면서 활용한 것들에 대해 정리해보았다.
다음 글에서 남은 4가지 앱을 만들면서 활용할 것들에 대해 마저 정리하겠다.

안지현

다음 포스트

Android(kotlin)- [인프런] 왕초보편 8개 앱 만들기 정리 (1/2)

Android[kotlin]

(0) 강의소개 및 개발환경 세팅

단축키 설명, 오류가 날 수 있는 부분 설명

기본 색상 설정

색상 적용이 안될 때

(1) 첫 번째

이미지뷰(ImageView), Drawable 폴더

레이아웃 종류에 대한 설명(Linear Layout, Relative Layout, Constraint Layout)

화면 클릭 이벤트 처리

화면 전환(Intent)

(2) 두 번째

Splash 화면

타이틀바 없애기

`scaleType`

`CardView`

화면 간 데이터 전달 `Intent putExtra`

`setImageResource`

(3) 세 번째

데이터 바인딩 `Databinding`

변수 설명

로그 보는 법

랜덤으로 숫자 뽑기

(4) 네 번째

커스텀 폰트 적용 방법

리스트뷰(ListView)와 어댑터(Adapter)

(ViewModel을 사용했음!)

물음표와 느낌표

뒤로가기 버튼 `onBackPressed()`

리스트 랜덤으로 선택

Android(kotlin)- [인프런] 왕초보편 8개 앱 만들기 정리 (2/2)

0개의 댓글

Android(kotlin)- [인프런] 왕초보편 8개 앱 만들기 정리 (1/2)

Android[kotlin]

(0) 강의소개 및 개발환경 세팅

단축키 설명, 오류가 날 수 있는 부분 설명

기본 색상 설정

색상 적용이 안될 때

(1) 첫 번째

이미지뷰(ImageView), Drawable 폴더

레이아웃 종류에 대한 설명(Linear Layout, Relative Layout, Constraint Layout)

화면 클릭 이벤트 처리

화면 전환(Intent)

(2) 두 번째

Splash 화면

타이틀바 없애기

scaleType

CardView

화면 간 데이터 전달 Intent putExtra

setImageResource

(3) 세 번째

데이터 바인딩 Databinding

변수 설명

로그 보는 법

랜덤으로 숫자 뽑기

(4) 네 번째

커스텀 폰트 적용 방법

리스트뷰(ListView)와 어댑터(Adapter)

(ViewModel을 사용했음!)

물음표와 느낌표

뒤로가기 버튼 onBackPressed()

리스트 랜덤으로 선택

Android(kotlin)- [인프런] 왕초보편 8개 앱 만들기 정리 (2/2)

0개의 댓글

`scaleType`

`CardView`

화면 간 데이터 전달 `Intent putExtra`

`setImageResource`

데이터 바인딩 `Databinding`

뒤로가기 버튼 `onBackPressed()`