만들면서 배워가는 프로그래머

[안드로이드 코틀린] Compose - 버튼 클릭해서 숫자 카운트 하는 방법

aries574 — Mon, 26 Jun 2023 14:12:52 +0900

이번 시간에는 버튼을 눌러 숫자 카운트 하는 방법을 알아보겠습니다.

1. 실행 화면

2. 카운트 기능 함수

3. 레이아웃 함수

4. 전체 코드

1. 실행 화면

2. 카운트 기능 함수

- 설명

1. remember

- Compose의 상태 보존 함수

- 화면이 다시 그려져도 상태를 유지하고 일관성 있는 동작을 보장

2. mutableStateOf(값)

- Compose에서 가변 상태를 생성하는 함수

- Compose가 상태를 추적하고 상태 변경 시 UI를 업데이트

@Composable
fun CounterComponent(){

    var count by remember { mutableStateOf(0) }
    
    Button(onClick = { count++ }) {
        Text(text = "숫자 증가")
    }
    
    Text(text = "Counter: $count")
}

3. 레이아웃 함수

- 설명

1. fillMaxSize() : 세로, 가로 최대 크기 설정

2. verticalArrangement : 세로 위치 정렬

3. horizontalAlignment: 가로 위치 설정

@Composable
fun MyApp(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CounterComponent()
    }
}

4. 전체 코드

class MainActivity : ComponentActivity() {

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                MyApp()
            }
        }
    }
}

@Composable
fun CounterComponent(){

    var count by remember { mutableStateOf(0) }
    
    Button(onClick = { count++ }) {
        Text(text = "숫자 증가")
    }
    
    Text(text = "Counter: $count")
}

@Composable
fun MyApp(){
    Column(
        modifier = Modifier.fillMaxSize(),
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        CounterComponent()
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {
        MyApp()
    }
}

2023.06.19 - [안드로이드] - [안드로이드 코틀린] Compose - 커스텀 텍스트뷰 만드는 방법

[안드로이드 코틀린] Compose - 커스텀 텍스트뷰 만드는 방법

이번 시간에는 텍스트뷰 커스텀 하는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 텍스트 스타일링 3. 텍스트 정렬 4. 텍스트뷰 가로, 세로 5. 텍스트 글자 간격 6. 텍스트 줄 간격 7. 텍스트 최대

aries574.tistory.com

2023.06.12 - [안드로이드] - [안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

[안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

이번 시간에는 클릭 이벤트(Click Event) 설정과 메시지(Toast) 알림 설정하는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 메시지 함수 3. 버튼 클릭 컴포저블 4. 이미지 클릭 컴포저블 5. 텍스트 클릭

aries574.tistory.com

2023.06.05 - [안드로이드] - [안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

[안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

이번 시간에는 박스(Box)를 통해 모양(shape) 변경과 외곽선(shape) 주는 방법을 알아보겠습니다. 목차 1. 미리 보기 2. 박스 함수 3. 모양 변경(shape) 4. 외곽선 설정(border) 5. 전체 코드 1. 미리 보기 2. 박

aries574.tistory.com

[안드로이드 코틀린] Compose - 커스텀 텍스트뷰 만드는 방법

aries574 — Mon, 19 Jun 2023 20:33:53 +0900

이번 시간에는 텍스트뷰 커스텀 하는 방법을 알아보겠습니다.

1. 실행 화면

2. 텍스트 스타일링

3. 텍스트 정렬

4. 텍스트뷰 가로, 세로

5. 텍스트 글자 간격

6. 텍스트 줄 간격

7. 텍스트 최대 줄 개수

1. 실행 화면

2. 텍스트 스타일링

1. 설명

color: 텍스트 색상

fontSize: 텍스트 크기

fontWeight: 텍스트 굵기

background: 배경 색상

Text(
    text = "텍스트 스타일링",
    style = TextStyle(
        color = Color.Red,
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
    ),
    modifier = Modifier.background(Color.Black)
)

3. 텍스트 정렬

- 설명

textAlign: 정렬 [ Start(왼쪽), Center(가운데), End(오른쪽)

fillMaxWidth: 가로 크기 최대

Text(
    text = "텍스트 정렬",
    textAlign = TextAlign.Center,
    modifier = Modifier
        .fillMaxWidth()
        .background(Color.Yellow)
)

4. 텍스트뷰 가로, 세로

- 설명

width: 가로 크기

Text(
    text = "가로 크기 설정",
    textAlign = TextAlign.Center,
    modifier = Modifier
        .width(100.dp)
        .background(Color.LightGray)
)

height: 세로 크기

Text(
    text = "세로 크기 설정",
    textAlign = TextAlign.Center,
    modifier = Modifier
        .height(100.dp)
        .background(Color.Magenta)
)

size: 가로, 세로 크기

Text(
    text = "가로 세로 한 번에 설정",
    textAlign = TextAlign.Center,
    modifier = Modifier
        .size(150.dp)
        .background(Color.Green)
)

5. 텍스트 글자 간격

- 설명

letterSpacing: 글자 간격

Text(
    text = "텍스트 글자 간격 조절",
    style = TextStyle(letterSpacing = 0.2.em),
    modifier = Modifier
        .size(150.dp)
        .background(Color.Red)
)

6. 텍스트 줄 간격

- 설명

lineHeight: 줄 간격

Text(
    text = "1.텍스트 줄 간격 조절 2.텍스트 줄 간격 조절 3.텍스트 줄 간격 조절 4.텍스트 줄 간격 조절",
    style = TextStyle(lineHeight = 30.sp),
    modifier = Modifier
        .size(150.dp)
        .background(Color.Cyan)
)

7. 텍스트 최대 줄 개수

- 설명

maxLine: 최대 줄 개수

Text(text = "1. 최대 표시 줄 수 제한 2. 최대 표시 줄 수 제한 3. 최대 표시 줄 수 제한 4. 최대 표시 줄 수 제한 5. 최대 표시 줄 수 제한 6. 최대 표시 줄 수 제한",
    maxLines = 3,
    modifier = Modifier.background(Color.Gray)
)

2023.06.12 - [안드로이드] - [안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

[안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

aries574.tistory.com

2023.06.05 - [안드로이드] - [안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

[안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

aries574.tistory.com

2023.05.29 - [안드로이드] - [안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

[안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

이번 시간에는 Modifier(수정자)를 사용해서 컴포저블 크기, 간격, 가중치 설정하는 방법을 알아보겠습니다. 목차 1. 크기 2. 간격 3. 가중치 1. 크기 1-1 너비, 높이 최대 - fillMaxSize(): 너비, 높이 최대

aries574.tistory.com

[안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

aries574 — Mon, 12 Jun 2023 14:48:20 +0900

이번 시간에는 클릭 이벤트(Click Event) 설정과 메시지(Toast) 알림 설정하는 방법을 알아보겠습니다.

1. 실행 화면

2. 메시지 함수

3. 버튼 클릭 컴포저블

4. 이미지 클릭 컴포저블

5. 텍스트 클릭 컴포저블

6. 박스 클릭 컴포저블

7. 전체 코드

1. 실행 화면

2. 메시지 함수

- 설명

1. context: Context 정보

2. message: 메시지 내용

3. Toast.LENGTH_SHORT: 메시지 지속 시간

fun customToast(context:Context, message: String){

    Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}

3. 버튼 클릭 컴포저블

- 설명

1. LocalContext.current: context 정보 가져오기

2. Modifier.size(100.dp): 가로, 세로 크기 설정

3. onClick: 클릭 이벤트 설정

@Composable
fun ButtonClick(){

    val context = LocalContext.current

    Button(
        modifier = Modifier.size(100.dp),
        onClick = { customToast(context, "버튼 클릭") })
    {
        Text(text = "버튼")
    }
}

4. 이미지 클릭 컴포저블

- 설명

1. painter: 이미지 설정

2. painterResource: 이미지 위치 설정

3. contentDescription: 이미지 설명

4. Modifier.clickable: 클릭 이벤트 설정

@Composable
fun ImageClick(){
    val context = LocalContext.current

    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "이미지",
        modifier = Modifier.clickable { customToast(context, "이미지 클릭") }
    )
}

5. 텍스트 클릭 컴포저블

- 설명

1. text: 텍스트 설정

@Composable
fun TextClick(){
    val context = LocalContext.current
    
    Text(
        text = "클릭 텍스트",
        modifier = Modifier.clickable { customToast(context, "텍스트 클릭") }

        )
}

6. 박스 클릭 컴포저블

@Composable
fun BoxClick(){
    val context = LocalContext.current

    Box(modifier = Modifier
        .size(200.dp)
        .background(Color.Blue)
        .clickable { customToast(context, "박스 클릭") }
    )
}

7. 전체 코드

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.SpaceEvenly,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    ButtonClick()
                    ImageClick()
                    TextClick()
                    BoxClick()
                }
            }
        }
    }
}

fun customToast(context:Context, message: String){

    Toast.makeText(context, message, Toast.LENGTH_SHORT).show()
}

@Composable
fun ButtonClick(){

    val context = LocalContext.current

    Button(
        modifier = Modifier.size(100.dp),
        onClick = { customToast(context, "버튼 클릭") })
    {
        Text(text = "버튼")
    }
}

@Composable
fun ImageClick(){
    val context = LocalContext.current

    Image(
        painter = painterResource(id = R.drawable.ic_launcher_background),
        contentDescription = "이미지",
        modifier = Modifier.clickable { customToast(context, "이미지 클릭") }
    )
}

@Composable
fun TextClick(){
    val context = LocalContext.current
    
    Text(
        text = "클릭 텍스트",
        modifier = Modifier.clickable { customToast(context, "텍스트 클릭") }

        )
}

@Composable
fun BoxClick(){
    val context = LocalContext.current

    Box(modifier = Modifier
        .size(200.dp)
        .background(Color.Blue)
        .clickable { customToast(context, "박스 클릭") }
    )
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {
        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ButtonClick()
            ImageClick()
            TextClick()
            BoxClick()
        }
    }
}

2023.06.05 - [안드로이드] - [안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

[안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

aries574.tistory.com

2023.05.29 - [안드로이드] - [안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

[안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

aries574.tistory.com

2023.05.22 - [안드로이드] - [안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

[안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

안녕하세요. 이번 시간에는 LazyColumn를 통해서 정보를 리스트로 보여주는 방법에 대하여 알아보겠습니다. RecyclerView를 사용했던 xml 방식보다 훨씬 쉽게 구현할 수 있다는 사실을 알 수 있습니다.

aries574.tistory.com

[안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

aries574 — Mon, 5 Jun 2023 13:28:52 +0900

이번 시간에는 박스(Box)를 통해 모양(shape) 변경과 외곽선(shape) 주는 방법을 알아보겠습니다.

1. 미리 보기

2. 박스 함수

3. 모양 변경(shape)

4. 외곽선 설정(border)

5. 전체 코드

1. 미리 보기

2. 박스 함수

- 설명

1. size: 가로, 세로 크기 150

2. background: 색상과 모양 설정

@Composable
fun ShapeCompose(shape: Shape){
    Box(modifier = Modifier
        .size(150.dp)
        .background(Color.Red, shape)
    )
}

3. 모양 변경(shape)

- 설명

1. RectangleShape : 네모

2. CircleShape : 동그라미

3. RoundedCornerShape(20.dp) : 네모 모서리 둥글게(둥근 정도)

4. CutCornerShape(20.dp) : 네모 모서리 각지게(각진 정도)

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Column(modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ShapeCompose(shape = RectangleShape) //네모
            ShapeCompose(shape = CircleShape) //동그라미
            ShapeCompose(shape = RoundedCornerShape(20.dp)) //둥근(모서리) 모서리
            ShapeCompose(shape = CutCornerShape(20.dp)) // 각진 모서리
            LineCompose()
        }
    }
}

4. 외곽선 설정(border)

- 설명

2. border( 두께, 색상, 모양 )

@Composable
fun ShapeCompose(shape: Shape){
    Box(modifier = Modifier
        .size(150.dp)
        .background(Color.Red, shape)
        .border(10.dp, Color.Green, shape)
    )
}

5. 전체 코드

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                Column(
                    modifier = Modifier.fillMaxSize(),
                    verticalArrangement = Arrangement.SpaceEvenly,
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    ShapeCompose(RectangleShape)
                    ShapeCompose(CircleShape)
                    ShapeCompose(RoundedCornerShape(20.dp))
                    ShapeCompose(CutCornerShape(20.dp))
                }
            }
        }
    }
}

@Composable
fun ShapeCompose(shape: Shape){
    Box(modifier = Modifier
        .size(150.dp)
        .background(color = Color.Red, shape = shape)
        .border(10.dp, Color.Green, shape)
    )
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Column(
            modifier = Modifier.fillMaxSize(),
            verticalArrangement = Arrangement.SpaceEvenly,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            ShapeCompose(RectangleShape)
            ShapeCompose(CircleShape)
            ShapeCompose(RoundedCornerShape(20.dp))
            ShapeCompose(CutCornerShape(20.dp))
        }
    }
}

2023.05.29 - [안드로이드] - [안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

[안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

aries574.tistory.com

2023.05.22 - [안드로이드] - [안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

[안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

aries574.tistory.com

2023.05.15 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

이번 시간에는 요소들을 겹치게 하는 Box에 대하여 알아보겠습니다. 목차 1. 샘플 박스 만들기 2. 미리 보기 3. Column 사용 방법 1. 샘플 박스 만들기 - 설명 - DummyBox(color: Color, dp: Dp) 색상과 크기를

aries574.tistory.com

[안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

aries574 — Mon, 29 May 2023 15:23:08 +0900

이번 시간에는 Modifier(수정자)를 사용해서 컴포저블 크기, 간격, 가중치 설정하는 방법을 알아보겠습니다.

1. 크기
2. 간격
3. 가중치

1. 크기

1-1 너비, 높이 최대

- fillMaxSize(): 너비, 높이 최대 설정

    Box(modifier = Modifier.fillMaxSize()){
        Box(modifier = Modifier
            .background(Color.Green)
            .fillMaxSize()
        )
    }

1-2 너비 최대, 높이 사용자 정의

- fillMaxWidth: 너비 최대

- height: 높이 설정

    Box(modifier = Modifier.fillMaxSize()){
        Box(modifier = Modifier
            .background(Color.Green)
            .fillMaxWidth()
            .height(100.dp)
        )
    }

1-3 높이 최대, 너비 사용자 정의

- fillMaxHeight: 높이 최대

- width: 너비 설정

    Box(modifier = Modifier.fillMaxSize()){
        Box(modifier = Modifier
            .background(Color.Green)
            .fillMaxHeight()
            .width(100.dp)
        )
    }

1-4 높이(사용자 정의), 너비(사용자, 정의)

- width: 너비 설정

- height: 높이 설정

    Box(modifier = Modifier.fillMaxSize()){
        Box(modifier = Modifier
            .background(Color.Green)
            .width(200.dp)
            .height(200.dp)
        )
    }

- size(너비 설정, 높이 설정)

    Box(modifier = Modifier.fillMaxSize()){
        Box(modifier = Modifier
            .background(Color.Green)
            .size(width = 200.dp, height = 200.dp)
        )
    }

2. 간격

2-1 전체 간격

- padding( all = 전체 간격 설정)

    Box(modifier = Modifier
        .fillMaxSize()
    ){
        Box(modifier = Modifier
            .background(Color.Green)
            .fillMaxWidth()
            .height(300.dp)
            .padding(all = 50.dp)
        ){
            Box(modifier = Modifier
                .background(Color.Red)
                .size(width = 100.dp, height = 100.dp)
            )
        }
    }

2-2 부분 간격

- start = 왼쪽 간격

- top = 상단 간격

- bottom = 하단 간격

- end = 오른쪽 간격

    Box(modifier = Modifier
        .fillMaxSize()
    ){
        Box(modifier = Modifier
            .background(Color.Green)
            .fillMaxWidth()
            .height(300.dp)
            .padding(start = 50.dp)
        ){
            Box(modifier = Modifier
                .background(Color.Red)
                .size(width = 100.dp, height = 100.dp)
            )
        }
    }

3. 가중치

3-1 똑같은 비중

- 2개의 박스 1f로 설정하면 1:1 비율로 같은 크기 설정

    Column(modifier = Modifier
        .fillMaxSize()
    ) {
        Box(modifier = Modifier
            .background(Color.Red)
            .weight(1f)
            .fillMaxWidth()
        )
        Box(modifier = Modifier
            .background(Color.Green)
            .weight(1f)
            .fillMaxWidth()
        )
    }

3-2 2:1 비중

- 하나는 2f, 하나는 1f 설정하면 총 3칸 크기 설정

- 2f는 2칸, 1f는 1칸 차지

    Column(modifier = Modifier
        .fillMaxSize()
    ) {
        Box(modifier = Modifier
            .background(Color.Red)
            .weight(2f)
            .fillMaxWidth()
        )
        Box(modifier = Modifier
            .background(Color.Green)
            .weight(1f)
            .fillMaxWidth()
        )
    }

2023.05.22 - [안드로이드] - [안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

[안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

aries574.tistory.com

2023.05.15 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

aries574.tistory.com

2023.05.08 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

안녕하세요. 이번 시간에는 컴포넌트들을 세로 정렬하는 Column에 대하여 알아보겠습니다. 목차 1. 샘플 박스 만들기 2. 미리 보기 3. Column 사용 방법 1. 샘플 박스 만들기 - 설명 - background 배경색상

aries574.tistory.com

[안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

aries574 — Mon, 22 May 2023 19:52:36 +0900

안녕하세요. 이번 시간에는 LazyColumn를 통해서 정보를 리스트로 보여주는 방법에 대하여 알아보겠습니다.

RecyclerView를 사용했던 xml 방식보다 훨씬 쉽게 구현할 수 있다는 사실을 알 수 있습니다.

1. 실행 화면
2. 데이터 클래스
3. UserView 함수
4. SimpleListView 함수
5. 전체 코드

1. 실행 화면

2. 데이터 클래스

- 설명

1. name : 사용자 이름

2. age: 사용자 나이

data class Users(
    val name: String,
    val age: String
)

3. UserView 함수

- 설명

1. padding(8.dp) : 외부와 간격

2. fillMaxWidth() : 가로 크기 최대

3. elevation : 음영 정도

4. shape : 둥근 정도

5. Column : 세로 정렬

6. users: Users: 사용자 정보 리스트

@Composable
fun UserView(users: Users){

    //카드뷰
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = 10.dp, //음영
        shape = RoundedCornerShape(5.dp) //둥근정도

    ) {
        Column() {
            Text(text =  users.name, fontSize = 20.sp, modifier = Modifier.padding(10.dp))
            Text(text =  users.age, fontSize = 15.sp, modifier = Modifier.padding(10.dp))
        }
    }
}

4. SimpleListView 함수

- 설명

1. (20..80).random() : 20 ~ 80 사이 랜덤한 숫자 생성

2. fillMaxSize() : 화면 최대 크기

3. LazyColumn : 스크롤 목록 생성(세로)

4. items(users) : 데이터 개수만큼 리스트로 생성

5. it : 사용자 정보 리스트

@Composable
fun SimpleListView(){

    //1. 샘플 데이터 생성
    val users = ArrayList<Users>()

    for (i in 1..100){
        val user = Users("user-$i", (20..80).random().toString())
        users.add(user)
    }

    //2. 리스트 생성
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ){
        items(users){
            UserView(users = it)
        }
    }
}

5. 전체 코드

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                SimpleListView()
            }
        }
    }
}

@Composable
fun SimpleListView(){

    //1. 샘플 데이터
    val users = ArrayList<Users>()

    for(i in 1..100){
        val user = Users("user-$i", (20..80).random().toString())
        users.add(user)
    }

    //2. 리스트 생성
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ){
        items(users) {
            UserView(it)
        }
    }
}

@Composable
fun UserView(user: Users){

    //카드뷰
    Card(
        modifier = Modifier
            .padding(8.dp)
            .fillMaxWidth(),
        elevation = 10.dp,
        shape = RoundedCornerShape(5.dp)
    ) {
        Column() {
            Text(text = user.name, fontSize = 20.sp, modifier = Modifier.padding(10.dp))
            Text(text = user.age, fontSize = 15.sp, modifier = Modifier.padding(10.dp))
        }
    }
}


@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {
        SimpleListView()
    }
}

2023.05.15 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

aries574.tistory.com

2023.05.08 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

aries574.tistory.com

2023.05.01 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

안녕하세요. 이번 시간에는 컴포넌트들을 가로 정렬하는 Row에 대하여 알아보겠습니다. 목차 1. 샘플 박스 만들기 2. 미리 보기 3. Row 사용 방법 1. 샘플 박스 만들기 - 설명 - background 배경색상 설정

aries574.tistory.com

[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

aries574 — Mon, 15 May 2023 10:25:02 +0900

이번 시간에는 요소들을 겹치게 하는 Box에 대하여 알아보겠습니다.

1. 샘플 박스 만들기

2. 미리 보기

3. Column 사용 방법

1. 샘플 박스 만들기

- 설명

- DummyBox(color: Color, dp: Dp)

색상과 크기를 매개변수로 전달받는다.

@Composable
fun DummyBox(color: Color, dp: Dp){
    Box(modifier = Modifier
        .background(color)
        .size(dp)
    )
}

2. 미리 보기

- 설명

- background(색상)

배경색상 설정

- fillMaxSize()

전체 화면 꽉 차게 설정

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Box(modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
        ){
            DummyBox(Color.Red, 200.dp)
            DummyBox(Color.Blue, 150.dp)
            DummyBox(Color.Green, 100.dp)
        }
    }
}

3. Box사용 방법

3-1 컴포넌트 위치 - contentAlignment

- 설명

contentAlignment = Alignment.TopCenter

- 상단 중앙

contentAlignment = Alignment.TopEnd

- 상단 오른쪽

contentAlignment = Alignment.TopStart

- 상단 왼쪽

contentAlignment = Alignment.Center

- 정중앙

contentAlignment = Alignment.CenterEnd

- 중앙 오른쪽

contentAlignment = Alignment.CenterStart

- 중앙 왼쪽

contentAlignment = Alignment.BottomCenter

- 하단 중앙

contentAlignment = Alignment.BottomStart

- 하단 왼쪽

contentAlignment = Alignment.BottomEnd

- 하단 오른쪽

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Box(modifier = Modifier
            .background(Color.White)
            .fillMaxSize(),
            contentAlignment = Alignment.TopStart
        ){
            DummyBox(Color.Red, 200.dp)
            DummyBox(Color.Blue, 150.dp)
            DummyBox(Color.Green, 100.dp)
        }
    }
}

2023.05.08 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

aries574.tistory.com

2023.05.01 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

aries574.tistory.com

[안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

aries574 — Mon, 8 May 2023 15:24:33 +0900

안녕하세요.

이번 시간에는 컴포넌트들을 세로 정렬하는 Column에 대하여 알아보겠습니다.

1. 샘플 박스 만들기

2. 미리 보기

3. Column 사용 방법

1. 샘플 박스 만들기

- 설명

- background

배경색상 설정

- size(80.dp)

가로, 세로 길이 80으로 설정

@Composable
fun DummyBox(color: Color){
    Box(modifier = Modifier
        .background(color)
        .size(80.dp)
    )
}

2. 미리 보기

- 설명

- background(색상)

배경색상 설정

- fillMaxSize()

전체 화면 꽉 차게 설정

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Column(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize()
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }
    }
}

3. Column 사용 방법

3-1 컴포넌트 정렬 - verticalArrangement

- 설명

- verticalArrangement = Arrangement.Top

컴포넌트 위쪽으로 정렬

- verticalArrangement = Arrangement.Center

컴포넌트 중간으로 정렬

- verticalArrangement = Arrangement.Bottom

컴포넌트 아래쪽으로 정렬

- verticalArrangement = Arrangement.SpaceAround

컴포넌트 간의 동일한 간격 주기(양쪽 끝 간격은 컴포넌트 간의 간격 절반

- verticalArrangement = Arrangement.SpaceBetween

컴포넌트간의 간격 주기(양쪽 끝 간격 없음)

- verticalArrangement = Arrangement.SpaceEvenly

컴포넌트간의 간격과 양쪽 끝 간격 동일

        Column(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
            verticalArrangement = Arrangement.Top
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }

3-2 컴포넌트 위치 - horizontalAlignment

- 설명

- horizontalAlignment = Alignment.Start

세로 정렬된 컴포넌트 가로 위치를 왼쪽으로 이동

- horizontalAlignment = Alignment.CenterHorizontally

세로 정렬된 컴포넌트 가로 위치를 중간으로 이동

- horizontalAlignment = Alignment.End

세로 정렬된 컴포넌트 가로 위치를 오른쪽으로 이동

        Column(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
            horizontalAlignment = Alignment.Start
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }

2023.04.24 - [안드로이드] - [안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

[안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

안녕하세요. 이번 시간에는 안드로이드에서 권장하는 UI도구 Compose를 이용해서 간단한 프로젝트를 만들어보고, 기존의 xml과 차이점을 가볍게 알아보겠습니다. 목차1. Compose 프로젝트 만들기2. Xml

aries574.tistory.com

2023.05.01 - [안드로이드] - [안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

[안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

aries574.tistory.com

[안드로이드 코틀린] Compose 레이아웃 - Row 가로 정렬하는 방법

aries574 — Mon, 1 May 2023 20:17:03 +0900

안녕하세요.

이번 시간에는 컴포넌트들을 가로 정렬하는 Row에 대하여 알아보겠습니다.

1. 샘플 박스 만들기

2. 미리 보기

3. Row 사용 방법

1. 샘플 박스 만들기

- 설명

- background

배경색상 설정

- size(80.dp)

가로, 세로 길이 80으로 설정

@Composable
fun DummyBox(color: Color){
    Box(modifier = Modifier
        .background(color)
        .size(80.dp)
    )
}

2. 미리 보기

- 설명

- background(색상)

배경색상 설정

- fillMaxSize()

전체 화면 꽉 차게 설정

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {

        Row(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }
    }
}

3. Row 사용 방법

3-1 컴포넌트 정렬 - horizontalArrangement

- 설명

- horizontalArrangement = Arrangement.Start

컴포넌트 왼쪽으로 정렬

- horizontalArrangement = Arrangement.Center

컴포넌트 중간으로 정렬

- horizontalArrangement = Arrangement.End

컴포넌트 오른쪽으로 정렬

- horizontalArrangement = Arrangement.SpaceAround

컴포넌트 간의 동일한 간격 주기(양쪽 끝 간격은 컴포넌트 간의 간격 절반

- horizontalArrangement = Arrangement.SpaceBetween

컴포넌트간의 간격 주기(양쪽 끝 간격 없음)

- horizontalArrangement = Arrangement.SpaceEvenly

컴포넌트간의 간격과 양쪽 끝 간격 동일

        Row(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
            horizontalArrangement = Arrangement.Start,
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }
    }

3-2 컴포넌트 위치 - verticalAlignment

- 설명

- verticalAlignment = Alignment.Top

가로 정렬된 컴포넌트 세로 위치를 맨 위로 이동

- verticalAlignment = Alignment.CenterVertically

가로 정렬된 컴포넌트 세로 위치를 중간으로 이동

- verticalAlignment = Alignment.Bottom

가로 정렬된 컴포넌트 세로 위치를 맨 아래로 이동

        Row(
            modifier = Modifier
                .background(Color.White)
                .fillMaxSize(),
            verticalAlignment = Alignment.Bottom
        ) {
            DummyBox(Color.Red)
            DummyBox(Color.Blue)
            DummyBox(Color.Green)
        }

2023.04.24 - [안드로이드] - [안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

[안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

aries574.tistory.com

2023.04.24 - [안드로이드] - [안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

[안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

aries574.tistory.com

[안드로이드 코틀린] Compose 기본앱으로 xml UI와 차이점 알아보기

aries574 — Mon, 24 Apr 2023 18:08:13 +0900

안녕하세요.
이번 시간에는 안드로이드에서 권장하는 UI도구 Compose를 이용해서
간단한 프로젝트를 만들어보고, 기존의 xml과 차이점을 가볍게 알아보겠습니다.

1. Compose 프로젝트 만들기

2. Xml vs Compose 차이점

1. Compose 프로젝트 만들기

- 설명 -
1. Xml 버전: Empty Activity를 선택
2. Compose 버전 : Empty Compose Activity 선택
New Project -> Empty Compose Activity

2. Xml vs Compose 차이점

- 설명 -
1. 화면 구성
- Xml 버전: 기능은 클래스, 화면은 xml

MainActivity.kt(기능)

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

activity_main.xml(화면)

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

- Compose 버전: 클래스에서 기능과 화면 통합 구성

MainActivity.kt(기능, 화면)

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeSampleTheme {
                // A surface container using the 'background' color from the theme
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colors.background
                ) {
                    Greeting("Android")
                }
            }
        }
    }
}

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {
        Greeting("Android")
    }
}

2. 화면 미리보기
- xml 버전: xml 미리 보기 기능
- Compose 버전: @Preview 어노테이션 설정된 함수에서 해당 UI 함수 호출

@Composable
fun Greeting(name: String) {
    Text(text = "Hello $name!")
}

@Preview(showBackground = true)
@Composable
fun DefaultPreview() {
    ComposeSampleTheme {
        Greeting("Android")
    }
}

[안드로이드 코틀린] Navigation component part6 - 애니메이션 화면 변경하는 방법

aries574 — Tue, 20 Dec 2022 14:24:58 +0900

안녕하세요.

이번 시간에는 Navigation Component를 이용해서 화면 이동시에 애니메이션 적용하는 방법에

대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다.

2022.12.19 - [안드로이드] - [안드로이드 코틀린] Navigation component part5 - 프래그먼트 간에객체 쉽게 보내는 방법

[안드로이드 코틀린] Navigation component part5 - 프래그먼트 간에객체 쉽게 보내는 방법

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 프래그먼트 간에 객체를 쉽게 보내는 방법에 대하여 알아보겠습니다. 이전 포스팅을 수정해서 만들었습니다. 이전 포스팅은 아래 링크를

aries574.tistory.com

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기
4. 프래그먼트 생성
5. 내비게이션 파일에 프래그먼트 연결
6. 프래그먼트 설정
7. 애니메이션 파일 만들기
8. 메인 화면 구성 activity_main.xml

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'

3. 내비게이션 파일 만들기

res 선택 -> 마우스 오른쪽 클릭 -> new -> Android Resource File

파일 이름: my_nav

Resource type: Navigation

내비게이션 폴더 생성과 파일이 만들어집니다.

4. 프래그먼트 생성

- 설명

1. 3개의 프래그먼트를 생성합니다.

2. 파일명은 FirstFragment, HomeFragment, SecondFragment

3. app 선택 -> New -> Fragment -> Fragment (Blank)

5. 내비게이션 파일에 프래그먼트 연결

- 설명 -

1. home_to_first

home에서 first 화면으로 이동하는 액션ID

2. home_to_second

home에서 second 화면으로 이동하는 액션ID

3. first_to_home

first에서 home 화면으로 이동하는 액션ID

4. second_to_home

second에서 home 화면으로 이동하는 액션ID

5. enterAnim

이동할 화면에 적용되는 애니메이션

6. exitAnim

현재 화면에 적용되는 애니메이션

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/my_nav"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.navigationanimation.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" >
        <action
            android:id="@+id/home_to_first"
            app:destination="@id/firstFragment"
            app:enterAnim="@anim/from_left"
            app:exitAnim="@anim/to_right" />
        <action
            android:id="@+id/home_to_second"
            app:destination="@id/secondFragment"
            app:enterAnim="@anim/from_right"
            app:exitAnim="@anim/to_left" />
    </fragment>

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.navigationanimation.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first" >
        <action
            android:id="@+id/first_to_home"
            app:destination="@id/homeFragment"
            app:enterAnim="@anim/from_right"
            app:exitAnim="@anim/to_left" />
    </fragment>

    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.navigationanimation.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >
        <action
            android:id="@+id/second_to_home"
            app:destination="@id/homeFragment"
            app:enterAnim="@anim/from_left"
            app:exitAnim="@anim/to_right" />
    </fragment>
</navigation>

6. 프래그먼트 설정

fragment_first.xml

- 설명 -

1. 현재 화면 알려주는 TextView

2. Home 화면으로 이동하는 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".FirstFragment">

    <TextView
        android:id="@+id/first_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="First Fragment"
        android:textSize="40sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/first_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/first_text"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="HOME"
        android:textSize="20sp" />
</RelativeLayout>

fragment_home.xml

- 설명 -

1. 현재 화면 알려주는 TextView

2. First 화면으로 이동하는 Button

3. Second 화면으로 이동하는 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".HomeFragment">

    <TextView
        android:id="@+id/home_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="Home Fragment"
        android:textSize="30sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/home_first_btn"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/home_text"
        android:layout_alignStart="@id/home_text"
        android:layout_marginStart="30dp"
        android:layout_marginTop="30dp"
        android:text="first"
        android:textSize="20sp" />

    <Button
        android:id="@+id/home_second_btn"
        android:layout_width="130dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/home_text"
        android:layout_alignParentEnd="true"
        android:layout_marginTop="30dp"
        android:layout_marginEnd="30dp"
        android:text="second"
        android:textSize="20sp" />
</RelativeLayout>

fragment_second.xml

- 설명 -

1. 현재 화면 알려주는 TextView

2. Home 화면으로 이동하는 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".SecondFragment">

    <TextView
        android:id="@+id/second_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        android:text="Second Fragment"
        android:textSize="40sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/second_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/second_text"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="30dp"
        android:text="HOME"
        android:textSize="20sp" />
</RelativeLayout>

FirstFragment.kt

- 설명 -

1. findNavController().navigate(R.id.first_to_home)

FIrst에서 Home으로 이동

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        val view = inflater.inflate(R.layout.fragment_first, container, false)

        val firstBtn = view.findViewById<Button>(R.id.first_btn)

        //버튼 이벤트(홈으로 이동)
        firstBtn.setOnClickListener {
            findNavController().navigate(R.id.action_firstFragment_to_homeFragment)
        }

        return view
    }

}

HomeFragment.kt

- 설명 -

1. findNavController().navigate(R.id.second_to_home)

Home에서 First로 이동

2. findNavController().navigate(R.id.home_to_second)

Home에서 Second 로 이동

class HomeFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_home, container, false)

        val homeFirstBtn = view.findViewById<Button>(R.id.home_first_btn)
        val homeSecondBtn = view.findViewById<Button>(R.id.home_second_btn)

        //firstFragment로 이동
        homeFirstBtn.setOnClickListener {
            findNavController().navigate(R.id.action_homeFragment_to_firstFragment)
        }

        //secondFragment로 이동
        homeSecondBtn.setOnClickListener {
            findNavController().navigate(R.id.action_homeFragment_to_secondFragment)
        }

        return view
    }

}

SecondFragment.kt

- 설명 -

1. findNavController().navigate(R.id.second_to_home)

Second에서 Home으로 이동

class SecondFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_second, container, false)

        val secondBtn = view.findViewById<Button>(R.id.second_btn)

        secondBtn.setOnClickListener {
            findNavController().navigate(R.id.action_secondFragment_to_homeFragment)
        }

        return view
    }

}

7. 애니메이션 파일 만들기

- 폴더 생성 -

res 선택 -> 마우스 오른쪽 클릭 -> new -> Android Resource Directory

Directory name: anim

Resource type: anim

- 파일 만들기 -

anim 선택 -> 마우스 오른쪽 클릭 -> new -> Animation Resource File

from_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="-100%"
        android:toXDelta="0%"
        android:duration="1000"/>
</set>

to_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="100%"
        android:duration="800"/>
</set>

from_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="100%"
        android:toXDelta="0%"
        android:duration="2000"/>
</set>

to_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:toXDelta="-100%"
        android:duration="1000"/>
</set>

8. 메인 화면 구성

activity_main.xml

- 설명 -

1. 프래그먼트 보여주는 FragmentContainerView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">


    <fragment
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_nav" />
</RelativeLayout>

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 첫 번째 시간 - 메인화면 & 설정을 해보겠습니다. 목차 1. 실행 화면 2. 바인딩 설정 3. 문자 리소스 string.xml 4. 답변 drawable option_background.xml 5. 메인 화면

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

이번 시간에는 채팅앱 만들기 첫 번째 시간 로그인 액티비티 만드는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 뷰 바인딩 3. 백그라운드 drawable 4. 로그인 화면 LogInActivity 5. 홈 화면 변경 1. 실

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

이번 시간에는 뷰 바인딩 설정과 타이머 화면 구성을 만들어 보겠습니다. 목차 1. 실행 화면 2. 뷰 바인딩 3. 메인 화면 activity_main.xml 1. 실행 화면 1-1 설정 화면 1-2 타이머 화면 2. 뷰바인딩 build.grad

aries574.tistory.com

[안드로이드 코틀린] Navigation component part5 - 프래그먼트 간에객체 쉽게 보내는 방법

aries574 — Mon, 19 Dec 2022 13:29:46 +0900

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 프래그먼트 간에 객체를 쉽게

보내는 방법에 대하여 알아보겠습니다.

이전 포스팅을 수정해서 만들었습니다.

이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다.

2022.12.09 - [안드로이드] - [안드로이드 코틀린] Navigation component part4 - 프래그먼트 간의 데이터 쉽게 보내는 방법

[안드로이드 코틀린] Navigation component part4 - 프래그먼트 간의 데이터 쉽게 보내는 방법

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 프래그먼트 간의 데이터를 쉽게 보내는 방법에 대하여 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다. 2022.12.08

aries574.tistory.com

1. 실행 화면
2. 라이브러리 등록
3. 사용자 클래스 만들기
4. 내비게이션 설정
5. 프래그먼트 설정

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

plugins 괄호 안에 아래 코드를 넣어주시면 됩니다.

id 'kotlin-parcelize'

3. 사용자 클래스 만들기

- 설명 -

1. name : 이름

2. age: 나이

@Parcelize
data class User(

    val name: String,
    val age: String
): Parcelable

4. 내비게이션 설정

- 설명 -

1. argument name: 인자 값 불러오기 위한 이름

2. argument argType: 클래스 위치

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/my_nav"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.navigationexam.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first" >
        <action
            android:id="@+id/first_to_second"
            app:destination="@id/secondFragment" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.navigationexam.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >
        <argument
            android:name="user"
            app:argType="com.example.navigationexam.User" />
    </fragment>
</navigation>

5. 프래그먼트 설정

fragment_first.xml

- 설명 -

1. 이름 입력 EditText

2. 나이 입력 EditText

3. 전송 기능 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".FirstFragment">

    <EditText
        android:id="@+id/args_name_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름"
        android:textSize="40sp" />

    <EditText
        android:id="@+id/args_age_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/args_name_edit"
        android:hint="나이"
        android:textSize="40sp" />

    <Button
        android:id="@+id/send_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/args_age_edit"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:text="전송"
        android:textSize="30sp" />
</RelativeLayout>

FirstFragment.kt

- 설명 -

1. User(name, age)

User 생성자에 데이터 등록

2. firstToSecond(user)

user 객체 전송

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view =  inflater.inflate(R.layout.fragment_first, container, false)

        val argsNameEdit = view.findViewById<EditText>(R.id.args_name_edit)
        val argsAgeEdit = view.findViewById<EditText>(R.id.args_age_edit)

        val sendBtn = view.findViewById<Button>(R.id.send_btn)

        sendBtn.setOnClickListener {
            //입력값

            val name = argsNameEdit.text.toString()
            val age = argsAgeEdit.text.toString()

            val user = User(name, age)

            val action = FirstFragmentDirections.firstToSecond(user)

            findNavController().navigate(action)
        }

        return view
    }

}

SecondFragment.kt

- 설명 -

1. args.user.name

내비게이션 파일에 등록된 argument name으로 데이터 가져오기

class SecondFragment : Fragment() {

    private val args: SecondFragmentArgs by navArgs()

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_second, container, false)

        val argsText = view.findViewById<TextView>(R.id.args_text)

        val name = args.user.name
        val age = args.user.age

        argsText.text = "이름: $name 나이: $age"

        return view
    }
}

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

Retrofit2 라이브러리를 이용해서 HTTP 통신을 하는 방법을 알아보겠습니다. 이번 시간에는 권한 및 설정을 하겠습니다. 목차 1. 권한 등록 2. 라이브러리 등록 3. 모델 클래스 4. 서비스 인터페이스 1.

aries574.tistory.com

[안드로이드 코틀린] Navigation component part4 - 프래그먼트 간에 데이터 쉽게 보내는 방법

aries574 — Fri, 9 Dec 2022 22:03:22 +0900

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 프래그먼트 간에 데이터를 쉽게

보내는 방법에 대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다.

2022.12.08 - [안드로이드] - [안드로이드 코틀린] Navigation component part3 - BottomNavigaion 쉽게 만드는 방법

[안드로이드 코틀린] Navigation component part3 - BottomNavigaion 쉽게 만드는 방법

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 BottomNavigaion 쉽게 만드는 방법에 대하여 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다. 2022.12.07 - [안드로이드]

aries574.tistory.com

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기
4. 프래그먼트 생성
5. 내비게이션 파일에 프래그먼트 연결
6. 프래그먼트 설정
7. 메인 화면 구성 activity_main.xml

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'

plugins 괄호 안에 아래 코드를 넣어주시면 됩니다.

id 'androidx.navigation.safeargs.kotlin'

build.gradle(Project:프로젝트명)

plugins 괄호 안에 아래 코드를 넣어주시면 됩니다.

id 'androidx.navigation.safeargs' version '2.5.3' apply false

3. 내비게이션 파일 만들기

res 선택 -> 마우스 오른쪽 클릭 -> new -> Android Resource File

파일 이름: my_nav

Resource type: Navigation

내비게이션 폴더 생성과 파일이 만들어집니다.

4. 프래그먼트 생성

- 설명

1. 2개의 프래그먼트를 생성합니다.

2. 파일명은 FirstFragment, SecondFragment

3. app 선택 -> New -> Fragment -> Fragment (Blank)

5. 내비게이션 파일에 프래그먼트 연결

- 설명 -

1. action

이동할 프래그먼트 설정

2. argument

넘겨받을 값 설정

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/my_nav"
    app:startDestination="@id/firstFragment">

    <fragment
        android:id="@+id/firstFragment"
        android:name="com.example.navigationexam.FirstFragment"
        android:label="fragment_first"
        tools:layout="@layout/fragment_first" >
        <action
            android:id="@+id/first_to_second"
            app:destination="@id/secondFragment" />
    </fragment>
    <fragment
        android:id="@+id/secondFragment"
        android:name="com.example.navigationexam.SecondFragment"
        android:label="fragment_second"
        tools:layout="@layout/fragment_second" >
        <argument
            android:name="argsValue"
            app:argType="string" />
    </fragment>
</navigation>

6. 프래그먼트 설정

fragment_first.xml

- 설명 -

1. 전송할 텍스트 입력할 EditText

2. 텍스트 전송하는 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".FirstFragment">

    <EditText
        android:id="@+id/args_name_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름"
        android:textSize="40sp" />

    <EditText
        android:id="@+id/args_age_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/args_name_edit"
        android:hint="나이"
        android:textSize="40sp" />

    <Button
        android:id="@+id/send_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/args_age_edit"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="40dp"
        android:text="전송"
        android:textSize="30sp" />
</RelativeLayout>

FirstFragment.kt

- 설명 -

1. FirstFragmentDirections

- navigation.safeargs 플러그인 추가하면 생기는 클래스

- 프래그먼트 이름 + Directions

2. firstToSecond

프래그먼트 액션 아이디

3. findNavController().navigate

프래그먼트 이동하는 기능

class FirstFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view =  inflater.inflate(R.layout.fragment_first, container, false)

        val argsEdit = view.findViewById<EditText>(R.id.args_edit)
        val sendBtn = view.findViewById<Button>(R.id.send_btn)

        sendBtn.setOnClickListener {
            //입력값
            val sendArgs = argsEdit.text.toString()

            val action = FirstFragmentDirections.firstToSecond(sendArgs)

            findNavController().navigate(action)
        }

        return view
    }

}

fragment_second.xml

- 설명 -

1. 전송받은 텍스트 보여주는 TextView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".SecondFragment">


    <TextView
        android:id="@+id/args_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="40sp"
        android:textStyle="bold" />

</FrameLayout>

SecondFragment.kt

- 설명 -

1. args: SecondFragmentArgs by navArgs()

전송 받은 데이터 꺼내오는 객체

2. argsValue

내비게이션 파일에 추가한 argument name

class SecondFragment : Fragment() {

    private val args: SecondFragmentArgs by navArgs()

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_second, container, false)

        val argsText = view.findViewById<TextView>(R.id.args_text)

        argsText.text = args.argsValue

        return view
    }
}

7. 메인 화면 구성

activity_main.xml

- 설명 -

1. 프래그먼트 보여주는 FragmentContainerView

<?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:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_nav" />
</LinearLayout>

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

이번 시간에는 Tic Tac Toe 보드 게임의 화면 구성을 해보겠습니다. Tic Tac Toe 게임은 오목처럼 번갈아 가며 클릭을 해서 누가 먼저 한 줄을 만들면 이기는 단순한 게임입니다. 목차 1. 실행 화면 2.

aries574.tistory.com

[안드로이드 코틀린] Navigation component part3 - BottomNavigaion 쉽게 만드는 방법

aries574 — Thu, 8 Dec 2022 12:25:45 +0900

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 BottomNavigaion 쉽게 만드는

방법에 대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다.

2022.12.07 - [안드로이드] - [안드로이드 코틀린] Navigation component part2 - DrawerLayout Navigaion 쉽게 만드는 방법

[안드로이드 코틀린] Navigation component part2 - DrawerLayout Navigaion 쉽게 만드는 방법

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 DrawerLayout Navigaion 쉽게 만드는 방법에 대하여 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다. 2022.12.06 - [안드로

aries574.tistory.com

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기
4. 프래그먼트 생성
5. 메뉴 만들기
6. 내비게이션 파일에 프래그먼트 연결
7. 메인 화면 구성
8. 메인 코드 구현

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'

3. 내비게이션 파일 만들기

res 선택 -> 마우스 오른쪽 클릭 -> new -> Android Resource File

파일 이름: my_nav

Resource type: Navigation

내비게이션 폴더 생성과 파일이 만들어집니다.

4. 프래그먼트 생성

- 설명

1. 3개의 프래그먼트를 생성합니다.

2. 파일명은 HomeFragment, ProfileFragment, SettingFragment

3. app 선택 -> New -> Fragment -> Fragment (Blank)

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".HomeFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Home" />

</FrameLayout>

fragment_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".ProfileFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Profile" />

</FrameLayout>

fragment_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".SettingFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Setting" />

</FrameLayout>

5. 메뉴 만들기

drawer_menu.xml

1. res 선택 -> 마우스 오른쪽 클릭 -> New -> Android Resource Directory

Resource type: menu 선택 -> Ok

파일 이름: bottom_menu

아이콘 res -> drawable

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

    <group android:checkableBehavior="single">
        <item android:id="@+id/homeFragment"
            android:title="home"/>

        <item android:id="@+id/profileFragment"
            android:title="Profile"/>

        <item android:id="@+id/settingFragment"
            android:title="Setting"/>
    </group>
</menu>

6. 내비게이션 파일에 프래그먼트 연결

my_nav.xml

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/my_nav"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.navigationexam.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/profileFragment"
        android:name="com.example.navigationexam.ProfileFragment"
        android:label="fragment_profile"
        tools:layout="@layout/fragment_profile" />
    <fragment
        android:id="@+id/settingFragment"
        android:name="com.example.navigationexam.SettingFragment"
        android:label="fragment_setting"
        tools:layout="@layout/fragment_setting" />
</navigation>

7. 메인 화면 구성

activity_main.xml

- 설명 -

1. 프래그먼트 보여주는 FragmentContainerView

2. 내비게이션 보여주는 BottomNavigationView

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_nav" />


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

8. 메인 코드 구현

MainActivity.kt

- 설명 -

1. navController

내비게이션 이동하는 기능

내비게이션 파일에 등록된 프래그먼트에서 탐색

2. appBarConfiguration

앱바 설정 객체

3. setupActionBarWithNavController

액션바 설정 객체

4. bottomNav.setupWithNavController

바텀 내비게이션 컨트롤러 설정

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController
    private lateinit var appBarConfiguration: AppBarConfiguration

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

        val bottomNav: BottomNavigationView = findViewById(R.id.bottomNav)

        //네비게이션 컨트롤러
        val navHostFragment = supportFragmentManager.findFragmentById(R.id.fragment) as NavHostFragment
        navController = navHostFragment.navController

        //앱바 설정객체
        appBarConfiguration = AppBarConfiguration(setOf(R.id.homeFragment, R.id.profileFragment, R.id.settingFragment))

        //액션바 설정
        setupActionBarWithNavController(navController, appBarConfiguration)

        bottomNav.setupWithNavController(navController)
    }
}

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

aries574.tistory.com

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 첫 번째 시간 안드로이드 스튜디오 프로젝트 생성, 파이어베이스 프로젝트 생성, 실시간 데이터베이스 생성 하는 방법에 대하여 알아보겠

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

[안드로이드 코틀린] Navigation component part2 - DrawerLayout Navigaion 쉽게 만드는 방법

aries574 — Wed, 7 Dec 2022 22:45:11 +0900

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 DrawerLayout Navigaion 쉽게 만드는

방법에 대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 볼 수 있습니다.

2022.12.06 - [안드로이드] - [안드로이드 코틀린] Navigation component part1 - 프래그먼트 쉽게 연결하는 방법

[안드로이드 코틀린] Navigation component part1 - 프래그먼트 쉽게 연결하는 방법

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 메인 화면에 프래그먼트 쉽게 연결하는 방법에 대하여 알아보겠습니다. 목차 1. 실행 화면 2. 라이브러리 등록 3. 내비게이션 파일 만들기

aries574.tistory.com

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기
4. 프래그먼트 생성
5. 메뉴 만들기 drawer_menu.xml
6. 내비게이션 파일에 프래그먼트 연결
7. 메인 화면 구성 activity_main.xml
8. 메인 코드 구현 MainActivity.kt

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'

3. 내비게이션 파일 만들기

res 선택 -> 마우스 오른쪽 클릭 -> new -> Android Resource File

파일 이름: my_nav

Resource type: Navigation

내비게이션 폴더 생성과 파일이 만들어집니다.

4. 프래그먼트 생성

- 설명

1. 3개의 프래그먼트를 생성합니다.

2. 파일명은 HomeFragment, ProfileFragment, SettingFragment

3. app 선택 -> New -> Fragment -> Fragment (Blank)

fragment_home.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".HomeFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Home" />

</FrameLayout>

fragment_profile.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".ProfileFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Profile" />

</FrameLayout>

fragment_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".SettingFragment">
    
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="50sp"
        android:textStyle="bold"
        android:gravity="center"
        android:text="Setting" />

</FrameLayout>

5. 메뉴 만들기 drawer_menu.xml

1. res 선택 -> 마우스 오른쪽 클릭 -> New -> Android Resource Directory

Resource type: menu 선택 -> Ok

파일 이름: drawer_menu

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

    <group android:checkableBehavior="single">
        <item android:id="@+id/homeFragment"
            android:title="home"/>

        <item android:id="@+id/profileFragment"
            android:title="Profile"/>

        <item android:id="@+id/settingFragment"
            android:title="Setting"/>
    </group>
</menu>

6. 내비게이션 파일에 프래그먼트 연결

- 설명

1. 내비게이션 파일에 프래그먼트 등록해서 관리

2. 액션 태그 아이디를 통해 다른 프래그먼트 이동을 쉽게 할 수 있다.

3. startDestination : 맨 처음 보여줄 프래그먼트 설정

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/my_nav"
    app:startDestination="@id/homeFragment">

    <fragment
        android:id="@+id/homeFragment"
        android:name="com.example.navigationexam.HomeFragment"
        android:label="fragment_home"
        tools:layout="@layout/fragment_home" />
    <fragment
        android:id="@+id/profileFragment"
        android:name="com.example.navigationexam.ProfileFragment"
        android:label="fragment_profile"
        tools:layout="@layout/fragment_profile" />
    <fragment
        android:id="@+id/settingFragment"
        android:name="com.example.navigationexam.SettingFragment"
        android:label="fragment_setting"
        tools:layout="@layout/fragment_setting" />
</navigation>

7. 메인 화면 구성 activity_main.xml

- 설명 -

1. 프래그먼트 보여주는 fragment

2. 메뉴 보여주는 NavigationView

<?xml version="1.0" encoding="utf-8"?>
<androidx.drawerlayout.widget.DrawerLayout 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:id="@+id/drawerLayout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <fragment
        android:id="@+id/fragment"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_nav" />


    <com.google.android.material.navigation.NavigationView
        android:id="@+id/navigationView"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:menu="@menu/drawer_menu" />

</androidx.drawerlayout.widget.DrawerLayout>

8. 메인 코드 구현 MainActivity.kt

- 설명 -

1. navController

내비게이션 이동하는 기능

내비게이션 파일에 등록된 프래그먼트에서 탐색

2. appBarConfiguration

앱바 설정 객체

3. setupActionBarWithNavController

액션바 설정 객체

4. onSupportNavigateUp()

뒤로 가기 버튼 누르면 실행되는 함수

class MainActivity : AppCompatActivity() {

    private lateinit var navController: NavController
    private lateinit var appBarConfiguration: AppBarConfiguration

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

        val drawerLayout: DrawerLayout = findViewById(R.id.drawerLayout)
        val navigationView: NavigationView = findViewById(R.id.navigationView)

        //네비게이션 컨트롤러
        navController = findNavController(R.id.fragment)

        //앱바 설정( 컨트롤러, 드로우 레이아웃)
        appBarConfiguration = AppBarConfiguration(navController.graph, drawerLayout)

        //액션바&네비게이션 설정
        setupActionBarWithNavController(navController, appBarConfiguration)

        //네비게이션뷰 설정
        navigationView.setupWithNavController(navController)
    }

    //뒤로가기 선택시 호출
    override fun onSupportNavigateUp(): Boolean {

        val navController = findNavController(R.id.fragment)

        return navController.navigateUp(appBarConfiguration) //뒤로 가기
                || super.onSupportNavigateUp()
    }
}

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

aries574.tistory.com

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어 베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

[안드로이드 코틀린] Navigation component part1 - 프래그먼트 쉽게 연결하는 방법

aries574 — Tue, 6 Dec 2022 23:37:58 +0900

안녕하세요. 이번 시간에는 Navigation Component를 이용해서 메인 화면에 프래그먼트 쉽게 연결하는

방법에 대하여 알아보겠습니다.

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기 my_nav.xml
4. 프래그먼트 생성
5. 내비게이션 파일에 프래그먼트 연결
6. 프래그먼트 설정
7. 메인 화면 구성 activity_main.xml

1. 실행 화면

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'androidx.navigation:navigation-fragment-ktx:2.5.3'
    implementation 'androidx.navigation:navigation-ui-ktx:2.5.3'

3. 내비게이션 파일 만들기 my_nav.xml

res 선택 -> 마우스 오른쪽 클릭 -> new -> Android Resource File

파일 이름: my_nav

Resource type: Navigation

내비게이션 폴더 생성과 파일이 만들어 집니다.

4. 프래그먼트 생성

- 설명

1. 2개의 프래그먼트를 생성합니다.

2. 파일명은 OneFragment, TwoFragment

3. app 선택 -> New -> Fragment -> Fragment (Blank)

5. 내비게이션 파일에 프래그먼트 연결 my_nav.xml

- 설명

1. 내비게이션 파일에 프래그먼트 등록해서 관리

2. 액션태그 아이디를 통해 다른 프래그먼트 이동을 쉽게 할 수 있다.

3. startDestination : 맨 처음 보여줄 프래그먼트 설정

<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="@+id/my_nav"
    app:startDestination="@id/oneFragment">

    <fragment
        android:id="@+id/oneFragment"
        android:name="com.example.navigationcomponent.OneFragment"
        android:label="fragment_one"
        tools:layout="@layout/fragment_one" >
        <action
            android:id="@+id/action_oneFragment_to_twoFragment"
            app:destination="@id/twoFragment" />
    </fragment>
    <fragment
        android:id="@+id/twoFragment"
        android:name="com.example.navigationcomponent.TwoFragment"
        android:label="fragment_two"
        tools:layout="@layout/fragment_two" >
        <action
            android:id="@+id/action_twoFragment_to_oneFragment"
            app:destination="@id/oneFragment" />
    </fragment>
</navigation>

6. 프래그먼트 설정

fragment_one.xml

- 설명

1. 프래그먼트 이동 기능 TextView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".OneFragment">
    
    <TextView
        android:id="@+id/one_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:gravity="center"
        android:text="One Fragment" />

</FrameLayout>

OneFragment.kt

1. Navigation.findNavController(view).navigate

- 프래그먼트간의 이동을 도와주는 함수

- 내비게이션 파일에 등록한 액션 아이디를 인자 값으로 전달한다.

- 액션 아이디에 해당하는 프래그먼트로 이동할 수 있다.

class OneFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_one, container, false)

        val oneText = view.findViewById<TextView>(R.id.one_text)

        //클릭 이벤트
        oneText.setOnClickListener {
            Navigation.findNavController(view).navigate(R.id.action_oneFragment_to_twoFragment)
        }

        return view
    }
}

fragment_two.xml

- 설명

1. 프래그먼트 이동 기능 TextView

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout 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"
    tools:context=".TwoFragment">
    
    <TextView
        android:id="@+id/two_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="30sp"
        android:gravity="center"
        android:text="Two Fragment" />

</FrameLayout>

TwoFragment.kt

1. Navigation.findNavController(view).navigate

- 프래그먼트간의 이동을 도와주는 함수

- 내비게이션 파일에 등록한 액션 아이디를 인자 값으로 전달한다.

- 액션 아이디에 해당하는 프래그먼트로 이동할 수 있다.

class TwoFragment : Fragment() {

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View? {
        // Inflate the layout for this fragment
        val view = inflater.inflate(R.layout.fragment_two, container, false)

        val twoText = view.findViewById<TextView>(R.id.two_text)

        //클릭 이벤트
        twoText.setOnClickListener {
            Navigation.findNavController(view).navigate(R.id.action_twoFragment_to_oneFragment)
        }

        return view
    }
}

7. 메인 화면 구성 activity_main.xml

- 설명 -

1. 프래그먼트 화면을 보여주는 FragmentContainerView

2. navGraph: 내비게이션 파일을 적용

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

    <androidx.fragment.app.FragmentContainerView
        android:id="@+id/fragmentContainerView"
        android:name="androidx.navigation.fragment.NavHostFragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        app:defaultNavHost="true"
        app:navGraph="@navigation/my_nav" />
</LinearLayout>

2022.11.21 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

aries574.tistory.com

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

[안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part5- 결과 화면

aries574 — Fri, 25 Nov 2022 15:10:59 +0900

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 다섯 번째 시간 - 결과 화면 만드는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.24 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part4 - 답변 체크 이벤트

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part4 - 답변 체크 이벤트

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 네 번째 시간 - 답변 체크 이벤트를 만들어 보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.11.23 - [안드로이드] - [안드로이드 코틀린]

aries574.tistory.com

1. 실행 화면
2. 결과 액티비티 ResultActivity
3. 메인 코드 구현 MainActivity.kt

1. 실행 화면

2. 결과 액티비티 ResultActivity

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: ResultActivity

activity_result.xml

- 설명 -

1. 결과 TextView

2. 점수 보여주는 TextView

3. 게임 화면으로 이동 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".ResultActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="결과"
        android:textSize="30sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/score_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:textSize="20sp"
        android:textStyle="bold" />

    <Button
        android:id="@+id/reset_btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="다시 하기"
        android:textSize="20sp" />
</LinearLayout>

ResultActivity.kt

- 설명 -

1. intent.getIntExtra("score", 0)

전달 받은 점수

2. intent.getIntExtra("totalSize", 0)

전달 받은 전체 문제 갯수

3. Intent(this@ResultActivity, MainActivity::class.java)

메인 액티비티로 이동하는 Intent

4. startActivity(intent)

메인 액티비티로 이동

class ResultActivity : AppCompatActivity() {

    private lateinit var binding: ActivityResultBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityResultBinding.inflate(layoutInflater)
        setContentView(binding.root)

        val score = intent.getIntExtra("score", 0)
        val totalSize = intent.getIntExtra("totalSize", 0)

        //점수 보여주기
        binding.scoreText.text = getString(R.string.count_label, score, totalSize)

        //다시하기 버튼
        binding.resetBtn.setOnClickListener {
            val intent = Intent(this@ResultActivity, MainActivity::class.java)
            startActivity(intent)
        }
    }
}

3. 메인 코드 구현 MainActivity.kt

- 설명 -

1. Intent(this@MainActivity, ResultActivity::class.java)

결과 액티비티로 이동하는 intent

2. intent.putExtra("score", score)

결과 액티비티에 전달할 점수

3. intent.putExtra("totalSize", questionList.size)

결과 액티비티에 전달할 전체 문제 갯수

4. startActivity(intent)

결과 액티비티로 이동

5. finish()

액티비티 닫기

class MainActivity : AppCompatActivity(), View.OnClickListener {

    private lateinit var binding:ActivityMainBinding

    private var currentPosition: Int = 1 //질문 위치
    private var selectedOption: Int = 0 //선택 답변 값
    private var score: Int = 0 // 점수

    private lateinit var questionList: ArrayList<Question>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //질문 리스트 가져오기
        questionList = QuestionData.getQuestion()

        //화면 셋팅
        getQuestionData()

        binding.option1Text.setOnClickListener(this)
        binding.option2Text.setOnClickListener(this)
        binding.option3Text.setOnClickListener(this)
        binding.option4Text.setOnClickListener(this)

        //답변 체크 이벤트
        binding.submitBtn.setOnClickListener {

            if(selectedOption != 0){

                val question = questionList[currentPosition-1]

                //정답 체크(선택 답변과 정답을 비교)
                if(selectedOption != question.correct_answer) { //오답

                    setColor(selectedOption, R.drawable.wrong_option_background)

                    callDialog("오답", "정답 ${question.correct_answer}")
                }else{
                    score++
                }
                setColor(question.correct_answer, R.drawable.correct_option_background)

                if(currentPosition == questionList.size){
                    binding.submitBtn.text = getString(R.string.submit, "끝")
                }else{
                    binding.submitBtn.text = getString(R.string.submit, "다음")
                }

            }else{
                //위치값 상승
                currentPosition++
                when{
                    //전체 문제 숫자가 현재 위치보다 크면 다음 문제로 셋팅
                    currentPosition <= questionList.size -> {
                        //다음 문제 셋팅
                        getQuestionData()
                    }

                    else ->{
                        //결과 액티비티로 넘어가는 코드
                        val intent = Intent(this@MainActivity, ResultActivity::class.java)
                        intent.putExtra("score", score)
                        intent.putExtra("totalSize", questionList.size)
                        startActivity(intent)
                        finish()
                    }
                }
            }
            //선택값 초기화
            selectedOption = 0
        }//submitBtn

    } //onCreate

    /**
     * 답변 배경색상 변경
     */
    private fun setColor(opt: Int, color: Int){
        when(opt){
            1 -> binding.option1Text.background = ContextCompat.getDrawable(this, color)
            2 -> binding.option2Text.background = ContextCompat.getDrawable(this, color)
            3 -> binding.option3Text.background = ContextCompat.getDrawable(this, color)
            4 -> binding.option4Text.background = ContextCompat.getDrawable(this, color)
        }
    }

    /**
     * 정답 확인 다이얼로그
     */
    private fun callDialog(alertTitle: String, correctAnswer: String){

        AlertDialog.Builder(this)
            .setTitle(alertTitle)
            .setMessage("정답: $correctAnswer")
            .setPositiveButton("OK"){
                dialogInterface, i ->
                dialogInterface.dismiss() //창 닫기
            }
            .setCancelable(false)
            .show()
    }


    /**
     * 문제 셋팅
     */
    private fun getQuestionData(){

        //답변 설정 초기화
        setOptionStyle()

        //질문 변수에 담기
        val question = questionList[currentPosition-1]

        //상태바 위치
        binding.progressBar.progress = currentPosition

        //상태바 최대값
        binding.progressBar.max = questionList.size

        //현재 위치 표시
        binding.progressText.text = getString(R.string.count_label, currentPosition, questionList.size)

        //질문 표시
        binding.questionText.text = question.question

        //답변 표시
        binding.option1Text.text = question.option_one
        binding.option2Text.text = question.option_two
        binding.option3Text.text = question.option_three
        binding.option4Text.text = question.option_four

        setSubmitBtn("제출")
    }

    //제출 버튼 텍스트 설정
    private fun setSubmitBtn(name: String){

        binding.submitBtn.text = getString(R.string.submit, name)
    }

    /**
     * 답변 스타일 설정
     */
    private fun setOptionStyle(){

        var optionList: ArrayList<TextView> = arrayListOf()
        optionList.add(binding.option1Text)
        optionList.add(binding.option2Text)
        optionList.add(binding.option3Text)
        optionList.add(binding.option4Text)

        //답변 텍스트뷰 설정
        for(op in optionList){
            op.setTextColor(Color.parseColor("#555151"))
            op.background = ContextCompat.getDrawable(this, R.drawable.option_background)
            op.typeface = Typeface.DEFAULT
        }
    }

    /**
     * 답변 선택 이벤트
     */
    private fun selectedOptionStyle(view: TextView, opt: Int){

        //옵션 초기화
        setOptionStyle()

        //위치 담기
        selectedOption = opt

        view.setTextColor((Color.parseColor("#5F00FF")))
        view.background = ContextCompat.getDrawable(this, R.drawable.selected_option_background)
        view.typeface = Typeface.DEFAULT_BOLD
    }

    override fun onClick(view: View) {
        when(view.id){
            R.id.option1_text -> selectedOptionStyle(binding.option1Text, 1)
            R.id.option2_text -> selectedOptionStyle(binding.option2Text, 2)
            R.id.option3_text -> selectedOptionStyle(binding.option3Text, 3)
            R.id.option4_text -> selectedOptionStyle(binding.option4Text, 4)
        }
    }
}

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

aries574.tistory.com

2022.08.29 - [안드로이드] - [안드로이드 코틀린] 야구 게임 만드는 방법 part1 - 화면 구성

[안드로이드 코틀린] 야구 게임 만드는 방법 part1 - 화면 구성

이번 시간에는 야구 게임 화면 구성하는 방법을 알아보겠습니다. 야구 게임 규칙을 알려드리겠습니다. 1. 시작 버튼을 누르면 랜덤한 숫자 3개가 만들어집니다. 2. 사용자는 3개의 숫자를 입력하

aries574.tistory.com

2022.08.08 - [안드로이드] - [안드로이드 코틀린] 같은 그림 찾기 게임 만드는 방법 part2 - 이미지 섞기& 보여주기

[안드로이드 코틀린] 같은 그림 찾기 게임 만드는 방법 part2 - 이미지 섞기& 보여주기

이번 시간에는 같은 그림 찾기 part2 이미지 섞기와 섞은 이미지를 보여주는 방법을 알아보겠습니다. 화면 구성은 아래 링크를 들어가시면 됩니다. 2022.04.02 - [안드로이드] - [안드로이드] 같은 그

aries574.tistory.com

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part4 - 답변 체크 이벤트

aries574 — Thu, 24 Nov 2022 14:28:42 +0900

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 네 번째 시간 - 답변 체크 이벤트를 만들어 보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.23 - [안드로이드] - [안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part3 - 답변 선택 이벤트

[안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part3 - 답변 선택 이벤트

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 세 번째 시간 - 답변 선택 이벤트를 만들어 보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.11.22 - [안드로이드] - [안드로이드 코틀린]

aries574.tistory.com

1. 실행 화면
2. 정답 답변 drawable correct_option_background.xml
3. 오답 답변 drawable wrong_option_background.xml
4. 메인 코드 구현 MainActivity.kt

1. 실행 화면

2. 정답 답변 drawable correct_option_background.xml

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

- 설명 -

1. 정답 답변 background에 적용할 파일

2. 색상을 초록색으로 변경

3. solid

내부 설정

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

    <!-- 내부 색상 -->
    <solid android:color="@android:color/holo_green_light" />
</shape>

3. 오답 답변 drawable wrong_option_background.xml

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

- 설명 -

1. 오답 답변 background에 적용할 파일

2. 색상을 빨강색으로 변경

3. solid

내부 설정

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

    <!-- 내부 색상 -->
    <solid android:color="@android:color/holo_red_light" />
</shape>

4. 메인 코드 구현 MainActivity.kt

- 설명 -

1. setOptionStyle()

getQuestionData() 함수 첫 줄에 추가

2. binding.submitBtn.setOnClickListener

답변 체크 이벤트

3. selectedOption != question.correct_answer

선택 답변과 정답 비교

4. setColor()

해당 답변 색상 변경 함수

5. binding.submitBtn.text = getString(R.string.submit, "다음")

답변 체크 버튼 텍스트 변경

 class MainActivity : AppCompatActivity(), View.OnClickListener {

    private lateinit var binding:ActivityMainBinding

    private var currentPosition: Int = 1 //질문 위치
    private var selectedOption: Int = 0 //선택 답변 값
    private var score: Int = 0 // 점수

    private lateinit var questionList: ArrayList<Question>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //질문 리스트 가져오기
        questionList = QuestionData.getQuestion()

        //화면 셋팅
        getQuestionData()

        binding.option1Text.setOnClickListener(this)
        binding.option2Text.setOnClickListener(this)
        binding.option3Text.setOnClickListener(this)
        binding.option4Text.setOnClickListener(this)

        //답변 체크 이벤트
        binding.submitBtn.setOnClickListener {

            if(selectedOption != 0){

                val question = questionList[currentPosition-1]

                //정답 체크(선택 답변과 정답을 비교)
                if(selectedOption != question.correct_answer) { //오답

                    setColor(selectedOption, R.drawable.wrong_option_background)

                    callDialog("오답", "정답 ${question.correct_answer}")
                }
                setColor(question.correct_answer, R.drawable.correct_option_background)

                if(currentPosition == questionList.size){
                    binding.submitBtn.text = getString(R.string.submit, "끝")
                }else{
                    binding.submitBtn.text = getString(R.string.submit, "다음")
                }

            }else{
                //위치값 상승
                currentPosition++
                when{
                    //전체 문제 숫자가 현재 위치보다 크면 다음 문제로 셋팅
                    currentPosition <= questionList.size -> {
                        //다음 문제 셋팅
                        getQuestionData()
                    }

                    else ->{
                        //결과 액티비티로 넘어가는 코드
                        Toast.makeText(this, "끝", Toast.LENGTH_SHORT).show()
                    }
                }
            }
            //선택값 초기화
            selectedOption = 0
        }//submitBtn

    } //onCreate

    /**
     * 답변 배경색상 변경
     */
    private fun setColor(opt: Int, color: Int){
        when(opt){
            1 -> binding.option1Text.background = ContextCompat.getDrawable(this, color)
            2 -> binding.option2Text.background = ContextCompat.getDrawable(this, color)
            3 -> binding.option3Text.background = ContextCompat.getDrawable(this, color)
            4 -> binding.option4Text.background = ContextCompat.getDrawable(this, color)
        }
    }

    /**
     * 정답 확인 다이얼로그
     */
    private fun callDialog(alertTitle: String, correctAnswer: String){

        AlertDialog.Builder(this)
            .setTitle(alertTitle)
            .setMessage("정답: $correctAnswer")
            .setPositiveButton("OK"){
                dialogInterface, i ->
                dialogInterface.dismiss() //창 닫기
            }
            .setCancelable(false)
            .show()
    }


    /**
     * 문제 셋팅
     */
    private fun getQuestionData(){

        //답변 설정 초기화
        setOptionStyle()

        //질문 변수에 담기
        val question = questionList[currentPosition-1]

        //상태바 위치
        binding.progressBar.progress = currentPosition

        //상태바 최대값
        binding.progressBar.max = questionList.size

        //현재 위치 표시
        binding.progressText.text = getString(R.string.count_label, currentPosition, questionList.size)

        //질문 표시
        binding.questionText.text = question.question

        //답변 표시
        binding.option1Text.text = question.option_one
        binding.option2Text.text = question.option_two
        binding.option3Text.text = question.option_three
        binding.option4Text.text = question.option_four

        setSubmitBtn("제출")
    }

    //제출 버튼 텍스트 설정
    private fun setSubmitBtn(name: String){

        binding.submitBtn.text = getString(R.string.submit, name)
    }

    /**
     * 답변 스타일 설정
     */
    private fun setOptionStyle(){

        var optionList: ArrayList<TextView> = arrayListOf()
        optionList.add(binding.option1Text)
        optionList.add(binding.option2Text)
        optionList.add(binding.option3Text)
        optionList.add(binding.option4Text)

        //답변 텍스트뷰 설정
        for(op in optionList){
            op.setTextColor(Color.parseColor("#555151"))
            op.background = ContextCompat.getDrawable(this, R.drawable.option_background)
            op.typeface = Typeface.DEFAULT
        }
    }

    /**
     * 답변 선택 이벤트
     */
    private fun selectedOptionStyle(view: TextView, opt: Int){

        //옵션 초기화
        setOptionStyle()

        //위치 담기
        selectedOption = opt

        view.setTextColor((Color.parseColor("#5F00FF")))
        view.background = ContextCompat.getDrawable(this, R.drawable.selected_option_background)
        view.typeface = Typeface.DEFAULT_BOLD
    }

    override fun onClick(view: View) {
        when(view.id){
            R.id.option1_text -> selectedOptionStyle(binding.option1Text, 1)
            R.id.option2_text -> selectedOptionStyle(binding.option2Text, 2)
            R.id.option3_text -> selectedOptionStyle(binding.option3Text, 3)
            R.id.option4_text -> selectedOptionStyle(binding.option4Text, 4)
        }
    }
}

2022.08.18 - [안드로이드] - [안드로이드 코틀린] 내가 원하는 글씨체 폰트(Font) 적용하는 방법

[안드로이드 코틀린] 내가 원하는 글씨체 폰트(Font) 적용하는 방법

이번 시간에는 안드로이드 기본 폰트가 아닌 다운로드한 폰트를 적용하는 방법에 대하여 알아보겠습니다. 목차 1. 실행 화면 2. 폰트 폴더 font 3. 메인 화면 activity_main.xml 4. 메인 코드 MainActivity.kt

aries574.tistory.com

2021.12.03 - [안드로이드] - [안드로이드] BottomNavigationView 하단 탭 쉽게 만드는 방법 1-1

[안드로이드] BottomNavigationView 하단 탭 쉽게 만드는 방법 1-1

2020.12.09 - [안드로이드] - [안드로이드] 탭(Tab) 만들어 보기 [안드로이드] 탭(Tab) 만들어 보기 2020/06/05 - [안드로이드] - [안드로이드]탭(TAB) 선택시 색상지정 setTabTextColors 이번시간에는 탭화면을 만

aries574.tistory.com

2022.03.16 - [안드로이드] - [안드로이드] Firebase Storage 이미지 업로드 part1

[안드로이드] Firebase Storage 이미지 업로드 part1

이번 시간에는 Firebase를 통해서 이미지를 업로드하는 방법을 알아보겠습니다. 간단하게 설명하자면 Firebase의 Storage에 이미지를 업로드하고, 이미지가 저장된 주소를 Realtime Database에 저장합니다.

aries574.tistory.com

[안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part3 - 답변 선택 이벤트

aries574 — Wed, 23 Nov 2022 10:45:50 +0900

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 세 번째 시간 - 답변 선택 이벤트를 만들어 보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.22 - [안드로이드] - [안드로이드 코틀린]간단한 퀴즈앱 만드는 방법 part2 - 퀴즈 만들기 및 보여주기

[안드로이드 코틀린]간단한 퀴즈앱 만드는 방법 part2 - 퀴즈 만들기 및 보여주기

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 두 번째 시간 - 퀴즈 만들기 및 보여주기를 만들어보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.11.21 - [안드로이드] - [안드로이드

aries574.tistory.com

1. 실행 화면
2. 답변 선택 drawable selected_option_background.xml
3. 메인 코드 구현 MainActivity.kt

1. 실행 화면

2. 답변 선택

drawable selected_option_background.xml

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

- 설명 -

1. 답변 선택 background에 적용할 파일

2. stroke

외곽선 설정

3. solid

내부 설정

4. corners

모서리 설정

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 외곽선-->
    <stroke
        android:width="2dp"
        android:color="@android:color/holo_purple" />

    <!-- 내부 색상-->
    <solid android:color="@android:color/white" />

    <!-- 모서리 둥근 정도-->
    <corners android:radius="5dp" />
</shape>

3. 메인 코드 구현 MainActivity.kt

- 설명 -

1. View.OnClickListener

뷰 클릭 이벤트

2. option1Text.setOnClickListener(this)

뷰 클릭 이벤트 설정

3. override fun onClick

클릭 이벤트 재정의

4. setOptionStyle()

답변 배경 스타일 설정

5. selectedOptionStyle

답변 선택 배경 스타일 설정

class MainActivity : AppCompatActivity(), View.OnClickListener {

    private lateinit var binding:ActivityMainBinding

    private var currentPosition: Int = 1 //질문 위치
    private var selectedOption: Int = 0 //선택 답변 값
    private var score: Int = 0 // 점수

    private lateinit var questionList: ArrayList<Question>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //질문 리스트 가져오기
        questionList = QuestionData.getQuestion()

        //화면 셋팅
        getQuestionData()

        binding.option1Text.setOnClickListener(this)
        binding.option2Text.setOnClickListener(this)
        binding.option3Text.setOnClickListener(this)
        binding.option4Text.setOnClickListener(this)

    }

    private fun getQuestionData(){

        //질문 변수에 담기
        val question = questionList[currentPosition-1]

        //상태바 위치
        binding.progressBar.progress = currentPosition

        //상태바 최대값
        binding.progressBar.max = questionList.size

        //현재 위치 표시
        binding.progressText.text = getString(R.string.count_label, currentPosition, questionList.size)

        //질문 표시
        binding.questionText.text = question.question

        //답변 표시
        binding.option1Text.text = question.option_one
        binding.option2Text.text = question.option_two
        binding.option3Text.text = question.option_three
        binding.option4Text.text = question.option_four

        setSubmitBtn("제출")
    }

    //제출 버튼 텍스트 설정
    private fun setSubmitBtn(name: String){

        binding.submitBtn.text = getString(R.string.submit, name)
    }

    /**
     * 답변 스타일 설정
     */
    private fun setOptionStyle(){

        var optionList: ArrayList<TextView> = arrayListOf()
        optionList.add(binding.option1Text)
        optionList.add(binding.option2Text)
        optionList.add(binding.option3Text)
        optionList.add(binding.option4Text)

        //답변 텍스트뷰 설정
        for(op in optionList){
            op.setTextColor(Color.parseColor("#555151"))
            op.background = ContextCompat.getDrawable(this, R.drawable.option_background)
            op.typeface = Typeface.DEFAULT
        }
    }

    /**
     * 답변 선택 이벤트
     */
    private fun selectedOptionStyle(view: TextView, opt: Int){

        //옵션 초기화
        setOptionStyle()

        //위치 담기
        selectedOption = opt

        view.setTextColor((Color.parseColor("#5F00FF")))
        view.background = ContextCompat.getDrawable(this, R.drawable.selected_option_background)
        view.typeface = Typeface.DEFAULT_BOLD
    }
    //클릭 이벤트 재정의
    override fun onClick(view: View) {
        when(view.id){
            R.id.option1_text -> selectedOptionStyle(binding.option1Text, 1)
            R.id.option2_text -> selectedOptionStyle(binding.option2Text, 2)
            R.id.option3_text -> selectedOptionStyle(binding.option3Text, 3)
            R.id.option4_text -> selectedOptionStyle(binding.option4Text, 4)
        }
    }
}

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

[안드로이드 코틀린] 간단한 퀴즈앱 만드는 방법 part2 - 퀴즈 만들기 및 보여주기

aries574 — Tue, 22 Nov 2022 15:14:32 +0900

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 두 번째 시간 - 퀴즈 만들기 및 보여주기를 만들어보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.21 - [안드로이드] - [안드로이드 코틀린]간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

[안드로이드 코틀린]간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

aries574.tistory.com

1. 실행 화면
2. 퀴즈 모델 클래스 Question.kt
3. 퀴즈 데이터 클래스 QuestionData.kt
4. 메인 코드 구현 MainActivity.kt

1. 실행 화면

2. 퀴즈 모델 클래스 Question.kt

- 설명 -

1. 퀴즈 데이터 담는 클래스

2. question

퀴즈 문제

3. option_one

답변 1

4. option_two

답변 2

5. option_three

답변 3

6. option_four

답변

7. correct_answer

정답 번호

data class Question(
    var id: Int,
    var question: String,
    var option_one: String,
    var option_two: String,
    var option_three: String,
    var option_four: String,
    var correct_answer: Int
)

3. 퀴즈 데이터 클래스 QuestionData.kt

- 설명 -

1. 샘플 데이터 클래스

2. getQuestion()

샘플 데이터 가져오는 함수

3. queList

퀴즈 문제 담을 리스트

4. q1 ~ q3

퀴즈 샘플 데이터

object QuestionData {

    fun getQuestion(): ArrayList<Question>{

        val queList: ArrayList<Question> = arrayListOf()

        val q1 = Question(
            1,
            "1 + 1? ",
            "1",
            "2",
            "3",
            "4",
            2
        )

        val q2 = Question(
            1,
            "2 + 2?",
            "2",
            "3",
            "4",
            "5",
            3
        )

        val q3 = Question(
            1,
            "3 + 3?",
            "2",
            "4",
            "6",
            "8",
            3
        )

        queList.add(q1)
        queList.add(q2)
        queList.add(q3)

        return queList
    }
}

4. 메인 코드 구현 MainActivity.kt

- 설명 -

1. currentPosition

질문 위치

2. selectedOption

선택한 답변

3. score

총 맞춘 개수

4. getQuestionData()

퀴즈 문제 보여주는 함수

5. progressBar.progress

상태바 현재 위치 설정

6. progressBar.max

상태바 최댓값 설정

7. getString

string.xml의 설정값 적용

8. setSubmitBtn

체크 버튼 텍스트 설정

class MainActivity : AppCompatActivity(){

    private lateinit var binding: ActivityMainBinding

    private lateinit var questionList: ArrayList<Question>

    private var currentPosition: Int = 1 //질문 위치
    private var selectedOption: Int = 0 // 선택 옵션
    private var score: Int = 0 //점수

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //질문 리스트 가져오기
        questionList = QuestionData.getQuestion()

        //화면 셋팅
        getQuestionData()
    }


    private fun getQuestionData(){

        //질문 변수에 담기
        val question = questionList[currentPosition-1]

        //상태바 위치
        binding.progressBar.progress = currentPosition

        //상태바 최대값
        binding.progressBar.max = questionList.size

        //현재 위치 표시
        binding.progressText.text =  getString(R.string.count_label, currentPosition, questionList.size)

        //질문 표시
        binding.questionText.text = question.question

        //답변 표시
        binding.option1.text = question.option_one
        binding.option2.text = question.option_two
        binding.option3.text = question.option_three
        binding.option4 .text = question.option_four

        setSubmitBtn("제출")

    }

    //제출버튼 텍스트 설정
    private fun setSubmitBtn(name: String){

        binding.submitBtn.text = getString(R.string.submit, name)

    }
}

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

[안드로이드 코틀린] 간단한 퀴즈 앱 만드는 방법 part1 - 메인화면 구성과 설정

aries574 — Mon, 21 Nov 2022 14:08:41 +0900

안녕하세요. 이번 시간에는 퀴즈 앱 만들기 첫 번째 시간 - 메인화면 & 설정을 해보겠습니다.

1. 실행 화면
2. 바인딩 설정
3. 문자 리소스 string.xml
4. 답변 drawable option_background.xml
5. 메인 화면 구성 activity_main.xml

1. 실행 화면

2. 바인딩 설정

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 문자 리소스 string.xml

- 설명 -

- res -> values -> string.xml

- 텍스트 설정 파일

- 아래 코드를 추가하시면 됩니다.

    <string name="qustion">질문</string>
    <string name="count_label">%d/%d</string>
    <string name="submit">%s</string>

4. 답변 drawable option_background.xml

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

- 설명 -

1. 답변 background에 적용할 파일

2. stroke

외곽선 설정

3. solid

내부 설정

4. corners

모서리 설정

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

    <!-- 외곽선-->
    <stroke
        android:width="1dp"
        android:color="@android:color/black"/>

    <!-- 내부 색상-->
    <solid android:color="@android:color/white"/>

    <!-- 모서리 둥근 정도-->
    <corners android:radius="5dp"/>
</shape>

5. 메인 화면 구성 activity_main.xml

- 설명 -

1. 질문 보여주는 TextView

2. 퀴즈 위치 보여주는 ProgressBar

3. 퀴즈 위치 보여주는 TextView

4. 답변 보여주는 TextView 1 ~ 4

5. 정답 체크하는 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"
    android:gravity="center"
    android:orientation="vertical"
    android:padding="10dp"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/question_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="@string/qustion"
        android:textSize="18sp"
        android:textStyle="bold" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <ProgressBar
            android:id="@+id/progressBar"
            style="?android:progressBarStyleHorizontal"
            android:layout_width="0dp"
            android:layout_height="50dp"
            android:layout_weight="1"
            android:max="5"
            android:progress="0" />

        <TextView
            android:id="@+id/progress_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:padding="10dp"
            android:text="@string/count_label"
            android:textColor="@android:color/black"
            android:textSize="20sp" />
    </LinearLayout>

    <TextView
        android:id="@+id/option1_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/option_background"
        android:gravity="center"
        android:padding="10dp"
        android:text="답변1"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/option2_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/option_background"
        android:gravity="center"
        android:padding="10dp"
        android:text="답변2"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/option3_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/option_background"
        android:gravity="center"
        android:padding="10dp"
        android:text="답변3"
        android:textSize="20sp" />

    <TextView
        android:id="@+id/option4_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:background="@drawable/option_background"
        android:gravity="center"
        android:padding="10dp"
        android:text="답변4"
        android:textSize="20sp" />

    <Button
        android:id="@+id/submit_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="@string/submit"
        android:textSize="20sp"
        android:textStyle="bold" />
</LinearLayout>

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

aries574.tistory.com

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part5 - 사용자 삭제

aries574 — Fri, 11 Nov 2022 12:35:49 +0900

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 다섯 번째 시간

실시간 데이터베이스(Realtime Database)에 저장된 사용자 정보를 삭제하는 방법에 대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.10 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part4 - 사용자 수정

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part4 - 사용자 수정

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 네 번째 시간 실시간 데이터베이스(Realtime Database)에 저장된 사용자 정보를 수정하는 방법을 알아보겠습니다. 이전 포스팅은 아래 링크를

aries574.tistory.com

1. 실행 화면
2. 데이터베이스 클래스 UserDao.kt
3. 라이브러리 등록
4. 사용자 리스트 액티비티 UserListActivity

1. 실행 화면

2. 데이터베이스 클래스 UserDao.kt

- 설명 -

1. userDelete(key: String)

데이터베이스에 key(구분값)을 전달해서 해당 사용자 정보 삭제

class UserDao {
    private var databaseReference: DatabaseReference? = null

    init{
        val db = FirebaseDatabase.getInstance()
        databaseReference = db.getReference("user")
    }

    //등록
    fun add(user: User?): Task<Void>{
        return databaseReference!!.push().setValue(user)
    }

    //조회
    fun getUserList(): Query?{
        return databaseReference
    }

    //수정
    fun userUpdate(key: String, hashMap: HashMap<String, Any>): Task<Void>{

        return databaseReference!!.child(key)!!.updateChildren(hashMap)
    }

    //삭제
    fun userDelete(key: String): Task<Void>{
        return databaseReference!!.child(key).removeValue()
    }
}

3. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

implementation 'com.github.xabaras:RecyclerViewSwipeDecorator:1.4'

setting.gradle

dependencyResolutionManagement -> repositories 괄호 안에 아래 코드를 넣어주시면 됩니다.

maven { url 'https://jitpack.io' }

- 라이브러리 문서 -

https://github.com/xabaras/RecyclerViewSwipeDecorator

GitHub - xabaras/RecyclerViewSwipeDecorator: A simple utility class to add a background, an icon and a label while swiping a Rec

A simple utility class to add a background, an icon and a label while swiping a RecyclerView item left or right. - GitHub - xabaras/RecyclerViewSwipeDecorator: A simple utility class to add a backg...

github.com

4. 사용자 리스트 액티비티 UserListActivity

- 설명 -

1. ItemTouchHelper

RecyclerView에 스와이프 기능 지원 클래스

2. ItemTouchHelper.LEFT

왼쪽으로 미는지 체크

3. onChildDraw

스와이프하면 실행되는 함수

4. RecyclerViewSwipeDecorator

스와이프 되면 꾸미는 클래스

5. addSwipeLeftBackgroundColor: 스와이프 왼쪽 시 배경 색상 설정

6. addSwipeLeftActionIcon: 스와이프 왼쪽 시 아이콘 설정

7. addSwipeLeftLabel: 스와이프 왼쪽 시

텍스트

설정

8. setSwipeLeftLabelColor: 스와이프 왼쪽 시 텍스트 색상 설정

class UserListActivity : AppCompatActivity() {

    lateinit var binding: ActivityUserListBinding

    lateinit var dao: UserDao

    lateinit var adapter: UserAdapter

    lateinit var userList: ArrayList<User>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityUserListBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //userList 초기화
        userList = ArrayList()

        //dao 초기화
        dao = UserDao()

        //adapter 초기화
        adapter = UserAdapter(this, userList)

        //recycelrView 초기화
        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        binding.recyclerView.adapter = adapter

        //사용자 정보 가져오기
        getUserList()

        //사용자 삭제 기능
        ItemTouchHelper(object: ItemTouchHelper.SimpleCallback(0, ItemTouchHelper.LEFT){
            override fun onMove(
                recyclerView: RecyclerView,
                viewHolder: RecyclerView.ViewHolder,
                target: RecyclerView.ViewHolder
            ): Boolean {
                return false
            }

            override fun onSwiped(viewHolder: RecyclerView.ViewHolder, direction: Int) {

                //해당 위치 값 변수에 담기
                val position = viewHolder.bindingAdapterPosition

                when(direction){
                    ItemTouchHelper.LEFT ->{
                        val key = userList[position].userKey

                        dao.userDelete(key).addOnSuccessListener { //성공 이벤트

                            Toast.makeText(this@UserListActivity, "삭제 성공",
                                Toast.LENGTH_SHORT).show()
                        }.addOnFailureListener { //삭제 이벤트
                            Toast.makeText(this@UserListActivity, "삭제 실패: ${it.message}",
                                Toast.LENGTH_SHORT).show()
                        }
                    }//LEFT
                }//when
            }

            override fun onChildDraw(
                c: Canvas,
                recyclerView: RecyclerView,
                viewHolder: RecyclerView.ViewHolder,
                dX: Float,
                dY: Float,
                actionState: Int,
                isCurrentlyActive: Boolean
            ) {
                //스와이프 꾸미기
                RecyclerViewSwipeDecorator.Builder(c, recyclerView, viewHolder,
                dX, dY, actionState, isCurrentlyActive)
                    .addSwipeLeftBackgroundColor(Color.RED)
                    .addSwipeLeftActionIcon(R.drawable.ic_delete)
                    .addSwipeLeftLabel("삭제")
                    .setSwipeLeftLabelColor(Color.WHITE)
                    .create()
                    .decorate()

                super.onChildDraw(
                    c,
                    recyclerView,
                    viewHolder,
                    dX,
                    dY,
                    actionState,
                    isCurrentlyActive
                )
            }
        }).attachToRecyclerView(binding.recyclerView)

    }//onCreate()

    private fun getUserList(){

        dao.getUserList()?.addValueEventListener(object: ValueEventListener{
            override fun onDataChange(snapshot: DataSnapshot) {

                //리스트 초기화
               userList.clear()

                for(dataSnapshot in snapshot.children){

                    val user = dataSnapshot.getValue(User::class.java)

                    //키값 가져오기
                    val key = dataSnapshot.key

                    //사용자 정보에 키 값 담기
                    user?.userKey = key.toString()

                    //리스트에 담기
                    if(user != null){
                        userList.add(user)
                    }
                }

                //데이터 적용
                adapter.notifyDataSetChanged()
            }

            override fun onCancelled(error: DatabaseError) {}
        })
    }
}

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part4 - 사용자 수정

aries574 — Thu, 10 Nov 2022 11:03:48 +0900

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 네 번째 시간

실시간 데이터베이스(Realtime Database)에 저장된 사용자 정보를 수정하는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.09 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part3 - 사용자 리스트

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part3 - 사용자 리스트

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 세 번째 시간 실시간 데이터베이스(Realtime Database)에 저장된 사용자 목록을 가져오는 방법을 알아보겠습니다. 이전 포스팅은 아래 링크를

aries574.tistory.com

1. 실행 화면
2. 데이터베이스 클래스 UserDao.kt
3. 사용자정보 수정 액티비티
4. 사용자 리스트 어댑터 ListAdapter.kt

1. 실행 화면

2. 데이터베이스 클래스 UserDao.kt

- 설명 -

1. userUpdate(key: String, hasMap: HashMap<String, Any>)

데이터베이스에 key(구분 값)와 수정된 hasMap(사용자 정보)를 전달해서 데이터 변경

class UserDao {
    private var databaseReference: DatabaseReference? = null

    init{
        val db = FirebaseDatabase.getInstance()
        databaseReference = db.getReference("user")
    }

    //등록
    fun add(user: User?): Task<Void>{
        return databaseReference!!.push().setValue(user)
    }

    //조회
    fun getUserList(): Query?{
        return databaseReference
    }

    //수정
    fun userUpdate(key: String, hashMap: HashMap<String, Any>): Task<Void>{

        return databaseReference!!.child(key)!!.updateChildren(hashMap)
    }
}

3. 사용자정보 수정 액티비티

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: UserUpdateActivity

activity_user_update.xml

- 설명 -

1. 수정할 사용자 이름 EditText

2. 수정할 사용자 나이 EditText

3. 사용자정보 수정 기능 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"
    android:orientation="vertical"
    tools:context=".UserUpdateActivity">

    <EditText
        android:id="@+id/up_name_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름"
        android:inputType="text" />

    <EditText
        android:id="@+id/up_age_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="나이"
        android:inputType="number" />

    <Button
        android:id="@+id/update_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="수정"
        android:textSize="25sp" />
</LinearLayout>

UserUpdateActivity.kt

- 설명 -

1. intent.hasExtra("key")

해당 정보에 데이터 null 체크

2. intent.getStringExtra("key")

해당 정보 꺼내오기

3. addOnSuccessListener

성공 이벤트

4. addOnFailureListener

실패 이벤트

class UserUpdateActivity : AppCompatActivity() {

    private lateinit var binding: ActivityUserUpdateBinding

    lateinit var sKey: String
    lateinit var sName: String
    lateinit var sAge: String

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityUserUpdateBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //데이터베이스 객체
        val dao = UserDao()

        //데이터 null체크
        if(intent.hasExtra("key") && intent.hasExtra("name")
            && intent.hasExtra("age")){

            //데이터 담기
            sKey = intent.getStringExtra("key")!!
            sName = intent.getStringExtra("name")!!
            sAge = intent.getStringExtra("age")!!

            //데이터 보여주기
            binding.upNameEdit.setText(sName)
            binding.upAgeEdit.setText(sAge)

            //사용자정보 수정버튼 이벤트
            binding.updateBtn.setOnClickListener {

                //입력값
                val uName = binding.upNameEdit.text.toString()
                val uAge = binding.upAgeEdit.text.toString()

                //파라미터 셋팅
                val hasMap: HashMap<String, Any> =  HashMap()
                hasMap["userName"] = uName
                hasMap["userAge"] = uAge

                //사용자 업데이트 이벤트
                dao.userUpdate(sKey, hasMap).addOnSuccessListener {

                    Toast.makeText(applicationContext, "수정 성공",
                        Toast.LENGTH_SHORT).show()

                    //사용자 목록으로 이동
                    val intent = Intent(this@UserUpdateActivity,
                        UserListActivity::class.java)
                    startActivity(intent)
                    finish()

                }.addOnFailureListener {
                    Toast.makeText(applicationContext, "수정 실패: ${it.message}",
                        Toast.LENGTH_SHORT).show()
                }
            }
        }
    }
}

4. 사용자 리스트 어댑터 ListAdapter.kt

- 설명 -

1. intent.putExtra("key", user.userKey)

전달할 데이터 담기(구분 값, 데이터)

2. context.startActivity(intent)

해당 액티비티 이동

3. (context as Activity).finish()

현재 액티비티 종료

class UserAdapter(private val context: Context, private val userList:ArrayList<User>):
    RecyclerView.Adapter<UserAdapter.UserViewHolder>(){

    //화면 설정
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserViewHolder {

        val view = LayoutInflater.from(context)
            .inflate(R.layout.user_layout, parent, false)

        return UserViewHolder(view)
    }

    //데이터 설정
    override fun onBindViewHolder(holder: UserViewHolder, position: Int) {

        val user: User = userList[position]

        holder.nameText.text = user.userName
        holder.ageText.text = user.userAge

        holder.itemView.setOnClickListener {

            //사용자 수정화면으로 이동
            val intent = Intent(context, UserUpdateActivity::class.java)
            intent.putExtra("key", user.userKey)
            intent.putExtra("name", user.userName)
            intent.putExtra("age", user.userAge)
            context.startActivity(intent)
            (context as Activity).finish()
        }
    }

    //값 갯수 리턴
    override fun getItemCount(): Int {

        return userList.size
    }

    class UserViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){

        val nameText: TextView = itemView.findViewById(R.id.name_text)
        val ageText: TextView = itemView.findViewById(R.id.age_text)
    }
}

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.09.14 - [안드로이드] - [안드로이드 코틀린] SQLite ToDo List 만드는 방법 part1 - Data 클래스와 DB 클래스

[안드로이드 코틀린] SQLite ToDo List 만드는 방법 part1 - Data 클래스와 DB 클래스

이번 시간에는 ToDo List 만들기 첫 번째 시간 Data 클래스와 DB 클래스를 만들어 보겠습니다. 목차 1. 라이브러리 등록 2. ToDo 클래스 ToDoModel.kt 3. ToDo DB 클래스 ToDoDB.kt 1. 라이브러리 등록 build.gradle(Mod

aries574.tistory.com

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part3 - 사용자 리스트

aries574 — Wed, 9 Nov 2022 11:51:51 +0900

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 세 번째 시간

실시간 데이터베이스(Realtime Database)에 저장된 사용자 목록을 가져오는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다

1. 실행 화면
2. 데이터베이스 클래스 UserDao.kt
3. 사용자 리스트 화면 user_layout.xml
4. 사용자 리스트 어댑터 ListAdapter.kt
5. 사용자 리스트 액티비티
6. 메인 화면 구성 activity_main.xml
7. 메인 코드 구현 MainActivity.kt
8. 뒤로 가기 AndroidManifest.xml
9. 실행 화면

1. 실행 화면

2. 데이터베이스 클래스 UserDao.kt

- 설명 -

1. getList()

데이터베이스에서 사용자 목록 가져오기

class UserDao {
    private var databaseReference: DatabaseReference? = null

    init{
        val db = FirebaseDatabase.getInstance()
        databaseReference = db.getReference("user")
    }

    //등록
    fun add(user: User?): Task<Void>{
        return databaseReference!!.push().setValue(user)
    }

    //조회
    fun getUserList(): Query?{
        return databaseReference
    }
}

3. 사용자 리스트 화면 user_layout.xml

- 설명 -

1. 사용자 이름 보여주는 TextView

2. 사용자 나이 보여주는 TextView

<?xml version="1.0" encoding="utf-8"?>
<androidx.cardview.widget.CardView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp"
    android:background="#EFEBE9"
    app:cardCornerRadius="5dp"
    app:cardElevation="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center_vertical"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/name_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:textSize="25sp"
            android:textStyle="bold"/>

        <TextView
            android:id="@+id/age_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginStart="10dp"
            android:textSize="25sp"
            android:textStyle="bold"/>
    </LinearLayout>

</androidx.cardview.widget.CardView>

4. 사용자 리스트 어댑터 UserAdapter.kt

- 설명 -

1. onCreateViewHolder

화면 연결해주는 함수

2. onBindViewHolder

데이터 연결해주는 함수

3. getItemCount

사용자 목록 사이즈 리턴해주는 함수

4. UserViewHolder

화면 뷰 객체 만들어 주는 클래스

class UserAdapter(private val context: Context, private val userList:ArrayList<User>):
    RecyclerView.Adapter<UserAdapter.UserViewHolder>(){

    //화면 설정
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserViewHolder {

        val view = LayoutInflater.from(context)
            .inflate(R.layout.user_layout, parent, false)

        return UserViewHolder(view)
    }

    //데이터 설정
    override fun onBindViewHolder(holder: UserViewHolder, position: Int) {

        val user: User = userList[position]

        holder.nameText.text = user.userName
        holder.ageText.text = user.userAge
    }

    //값 갯수 리턴
    override fun getItemCount(): Int {

        return userList.size
    }

    class UserViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){

        val nameText: TextView = itemView.findViewById(R.id.name_text)
        val ageText: TextView = itemView.findViewById(R.id.age_text)
    }
}

5. 사용자 리스트 액티비티

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: UserListActivity

activity_user_list.xml

- 설명 -

1. 사용자 목록 보여줄 RecycelrView

<?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=".UserListActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>
</LinearLayout>

UserListActivity.kt

- 설명 -

1. addValueEventListener

데이터베이스에서 데이터 가져올 때 쓰는 이벤트

2. dataSnapshot.getValue(User::class.java)

데이터 꺼내오기

3. onDataChange

데이터 변경 시 실행되는 함수

4. onCancelled

데이터 읽기 실패하면 실행되는 함수

5. dataSnapshot.key

데이터의 키값을 꺼내오기

class UserListActivity : AppCompatActivity() {

    lateinit var binding: ActivityUserListBinding

    lateinit var dao: UserDao

    lateinit var adapter: UserAdapter

    lateinit var userList: ArrayList<User>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityUserListBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //userList 초기화
        userList = ArrayList()

        //dao 초기화
        dao = UserDao()

        //adapter 초기화
        adapter = UserAdapter(this, userList)

        //recycelrView 초기화
        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        binding.recyclerView.adapter = adapter

        //사용자 정보 가져오기
        getUserList()
    }//onCreate()

    private fun getUserList(){

        dao.getUserList()?.addValueEventListener(object: ValueEventListener{
            override fun onDataChange(snapshot: DataSnapshot) {

                for(dataSnapshot in snapshot.children){

                    val user = dataSnapshot.getValue(User::class.java)

                    //키값 가져오기
                    val key = dataSnapshot.key

                    //사용자 정보에 키 값 담기
                    user?.userKey = key.toString()

                    //리스트에 담기
                    if(user != null){
                        userList.add(user)
                    }
                }

                //데이터 적용
                adapter.notifyDataSetChanged()
            }

            override fun onCancelled(error: DatabaseError) {}
        })
    }
}

6. 메인 화면 구성 activity_main.xml

- 설명 -

1. 사용자 목록 으로 이동하는 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/name_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름"
        android:inputType="text" />

    <EditText
        android:id="@+id/age_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="나이"
        android:inputType="number" />

    <Button
        android:id="@+id/add_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="등록"
        android:textSize="25sp" />

    <Button
        android:id="@+id/list_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="사용자 목록"
        android:textSize="25sp" />

</LinearLayout>

7. 메인 코드 구현 MainActivity.kt

- 설명 -

1. binding.listBtn.setOnClickListener

사용자 목록 버튼 이벤트

2. Intent(this@MainActivity, UserListActivity::class.java)

이동할 액티비티 설정

3. startActivity(intent)

액티비티 이동

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //데이터베이스 클래스 객체 생성
        val dao = UserDao()

        //사용자 등록 버튼 이벤트
        binding.addBtn.setOnClickListener {

            val name = binding.nameEdit.text.toString() //이름
            val age = binding.ageEdit.text.toString() //나이

            //데이터 셋팅
            val user = User("", name, age)

            dao.add(user)?.addOnSuccessListener {
                Toast.makeText(this, "등록 성공", Toast.LENGTH_SHORT).show()

            }?.addOnFailureListener {
                Toast.makeText(this, "등록 실패: ${it.message}", Toast.LENGTH_SHORT).show()
            }
        }

        //사용자 목록 버튼 이벤트
        binding.listBtn.setOnClickListener {

            val intent: Intent = Intent(this@MainActivity, UserListActivity::class.java)
            startActivity(intent)
        }
    }
}

8. 뒤로 가기 AndroidManifest.xml

- 설명 -

1. parentActivityName

뒤로 가기로 이동할 액티비티 설정

<activity
	android:name=".UserListActivity"
    android:exported="false"
    android:parentActivityName=".MainActivity" />

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

이번 시간에는 스톱워치(StopWatch) 만드는 방법에 대하여 알아보겠습니다. 안드로이드에서는 Chronometer을 통해 스톱워치를 쉽게 만들 수 있습니다. 목차 1. 실행 화면 2. 메인 화면 activity_main.xml 3.

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part2 - 사용자 등록

aries574 — Tue, 8 Nov 2022 10:42:04 +0900

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 두 번째 시간

실시간 데이터베이스(Realtime Database)에 사용자 등록하는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.11.07 - [안드로이드] - [안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 첫 번째 시간 안드로이드 스튜디오 프로젝트 생성, 파이어베이스 프로젝트 생성, 실시간 데이터베이스 생성 하는 방법에 대하여 알아보겠

aries574.tistory.com

1. 실행 화면
2. 뷰 바인딩
3. 사용자 모델 클래스 User.kt
4. 데이터베이스 클래스 UserDao.kt
5. 메인 화면 구성 activity_main.xml
6. 메인 코드 구현 MainActivity.kt

1. 실행 화면

2. 뷰 바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 사용자 모델 클래스 User.kt

- 설명 -

1. 사용자 정보 담을 클래스

2. userKey: 사용자 구분값

3. userName: 사용자 이름

4. userAge: 사용자 나이

data class User(
    var userKey: String, //키
    var userName: String, //이름
    var userAge: String //나이
){
    constructor(): this("", "", "")
}

4. 데이터베이스 클래스 UserDao.kt

- 설명 -

1. 실시간 데이터베이스와 연결할 클래스

2. init

- UserDao 객체 생성 시 호출되는 함수

3. add(user: User?): Task<Void>

- 사용자 정보 전달 받아 데이터베이스에 저장

class UserDao {
    private var databaseReference: DatabaseReference? = null

    init{
        val db = FirebaseDatabase.getInstance()
        databaseReference = db.getReference("user")
    }

    //등록
    fun add(user: User?): Task<Void>{
        return databaseReference!!.push().setValue(user)
    }

}

5. 메인 화면 구성 activity_main.xml

- 설명 -

1. 사용자 이름 입력받을 EditText

2. 사용자 나이 입력받을 EditTexxt

3. 사용자 정보 등록하는 기능 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <EditText
        android:id="@+id/name_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="이름"
        android:inputType="text" />

    <EditText
        android:id="@+id/age_edit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="나이"
        android:inputType="number" />

    <Button
        android:id="@+id/add_btn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="20dp"
        android:text="등록"
        android:textSize="25sp" />
</LinearLayout>

6. 메인 코드 구현 MainActivity.kt

- 설명 -

1. val dao = UserDao()

데이터베이스 클래스 객체 생성

2. val name = binding.nameEdit.text.toString()//이름

입력 받은 값 변수에 담기

3. addOnSuccessListener

등록 성공시에 실행

4. addOnFailureListener

등록 실패시에 실행

class MainActivity : AppCompatActivity() {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //데이터베이스 클래스 객체 생성
        val dao = UserDao()

        binding.addBtn.setOnClickListener {

            val name = binding.nameEdit.text.toString() //이름
            val age = binding.ageEdit.text.toString() //나이

            //데이터 셋팅
            val user = User("", name, age)

            dao.add(user)?.addOnSuccessListener {
                Toast.makeText(this, "등록 성공", Toast.LENGTH_SHORT).show()

            }?.addOnFailureListener {
                Toast.makeText(this, "등록 실패: ${it.message}", Toast.LENGTH_SHORT).show()
            }
        }
    }
}

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574.tistory.com

[안드로이드 코틀린] 파이어베이스 사용자 CRUD 만드는 방법 part1 - 프로젝트 생성

aries574 — Mon, 7 Nov 2022 09:47:09 +0900

이번 시간에는 파이어베이스(Firebase) CRUD 만드는 방법 - 첫 번째 시간

안드로이드 스튜디오 프로젝트 생성, 파이어베이스 프로젝트 생성, 실시간 데이터베이스 생성

하는 방법에 대하여 알아보겠습니다.

1. 안드로이드 프로젝트 만들기
2. 파이어베이스 프로젝트 만들기

3. 앱 연결
4. 실시간 데이터베이스 만들기

1. 안드로이드 프로젝트 만들기

Empty Activity -> Next

name: FirebaseCrud

Language: Kotlin

2. 파이어베이스 프로젝트 만들기

- 구글 아이디 필요함

- https://firebase.google.com/

Firebase

Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다.

firebase.google.com

1.시작하기 클릭

2. 영문으로 프로젝트 이름 입력

3. 프로젝트 이름: FirebaseCrud

4. Google 애널리틱스 계속 버튼 클릭

5. 애널리틱스 구성

- 계정을 선택 하거나 새 속성 만들기

6. 프로젝트 만들기

3. 앱 연결

- 파이어베이스 프로젝트가 만들어지면 앱에 파이어 베이스 추가

- 안드로이드 아이콘 클릭

1. 앱 등록: 안드로이드 스튜디오에서 만든 패키지명 복사 -> 붙여 넣기

2. 구성 파일 다운로드: google-services.json 다운로드 해서 app 폴더 안에 넣기

- 안드로이드 스튜디오 프로젝트 보기로 변경 후 app 선택 한 후에

복사 한 google-services.json 파일 붙여 넣기

3. Firebase SDK 추가

- build.gradle(Project: FirebaseCrud) 에 플러그인 추가

id 'com.google.gms.google-services' version '4.3.13' apply false

- build.gradle(Moudle: FirebaseCrud.app) 에 플러그인, 라이브러리 추가

- plugins 괄호 안에 추가

id 'com.google.gms.google-services'

- dependencies 괄호 안에 추가

implementation platform('com.google.firebase:firebase-bom:31.0.2')
implementation 'com.google.firebase:firebase-analytics-ktx'

- 콘솔로 이동

4. 실시간 데이터베이스 만들기

- 파이어베이스 프로젝트 화면 -> 빌드 -> Realtime Database

- 데이터베이스 만들기

- 위치 설정 -> 다음

- 데이터 규칙 -> 테스트 모드에서 시작 -> 사용 설정

- 완료

- 안드로이드 스튜디오 -> Tools -> Firebase

- 맨 위에서 3번 째 Realtime Database 클릭

- Get started with Realtime Database [KOTLIN] 클릭

- Connect to Firebase

파이어베이스 연결

- Add the Realtime Database SDK to your app

프로젝트에 라이브러리 추가

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part9 - 메시지 가져오기

aries574 — Fri, 28 Oct 2022 17:58:09 +0900

이번 시간에는 채팅앱 마지막 시간

전송한 메시지 화면에 보여주는 방법 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.27 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part8 - 메시지 보내기

[안드로이드 코틀린] 채팅앱 만드는 방법 part8 - 메시지 보내기

이번 시간에는 채팅앱 만들기 여덟 번째 시간 메시지 보내는 방법에 대하여 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.10.26 - [안드로이드] - [안드로이드 코틀린] 채팅

aries574.tistory.com

1. 실행 화면
2. 받는 메시지 화면 receive.xml
3. 보낸 메시지 화면 send.xml
4. 메시지 어댑터 MessageAdapter.kt
5. 채팅 ChatActivity.kt

1. 실행 화면

2. 받는 메시지 화면 receive.xml

- 설명 -

1. 받은 메시지 보여주는 TextView

2022.01.01 - [안드로이드] - [안드로이드 스튜디오] 레이아웃 추가하는 방법

[안드로이드 스튜디오] 레이아웃 추가하는 방법

이번 시간에는 안드로이드 스튜디오에서 레이아웃 추가하는 방법을 알아보겠습니다. 안드로이드 프로젝트를 만들면 java폴더에는 MainActivity 파일이 있고, res -> layout 폴더에는 activity_main.xml 파일

aries574.tistory.com

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/receive_message_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_margin="5dp"
        android:background="@drawable/edit_background"
        android:padding="10dp"
        android:text="받는 메시지"
        android:textSize="18sp" />
</RelativeLayout>

3. 보낸 메시지 화면 send.xml

- 설명 -

1. 보낸 메시지 보여주는 TextView

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/send_message_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_margin="5dp"
        android:background="@drawable/btn_background"
        android:padding="10dp"
        android:text="보내는 메시지"
        android:textColor="@android:color/white"
        android:textSize="18sp" />
</RelativeLayout>

4. 메시지 어댑터 MessageAdapter.kt

- 설명 -

1. SentViewHolder

보낸 쪽 ViewHolder

2. ReceiveViewHolder

받는 쪽 ViewHolder

3. getItemViewType

ViewHolder 타입 리턴하는 함수

4. onCreateViewHolder

화면 연결해주는 함수

5. onBindViewHolder

데이터 연결해주는 함수

class MessageAdapter(private val context: Context, private val messageList: ArrayList<Message>):
    RecyclerView.Adapter<RecyclerView.ViewHolder>(){

    private val receive = 1 //받는 타입
    private val send = 2 //보내는 타입

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): RecyclerView.ViewHolder {

        return if(viewType == 1){ //받는 화면
            val view: View = LayoutInflater.from(context).inflate(R.layout.receive, parent, false)
            ReceiveViewHolder(view)
        }else{ //보내는 화면
            val view: View = LayoutInflater.from(context).inflate(R.layout.send, parent, false)
            SendViewHolder(view)
        }
    }

    override fun onBindViewHolder(holder: RecyclerView.ViewHolder, position: Int) {
        //현재 메시지
        val currentMessage = messageList[position]

        //보내는 데이터
        if(holder.javaClass == SendViewHolder::class.java){
            val viewHolder = holder as SendViewHolder
            viewHolder.sendMessage.text = currentMessage.message
        }else{//받는 데이터
            val viewHolder = holder as ReceiveViewHolder
            viewHolder.receiveMessage.text = currentMessage.message
        }
    }

    override fun getItemCount(): Int {
        return messageList.size
    }

    override fun getItemViewType(position: Int): Int {

        //메시지값
        val currentMessage = messageList[position]

        return if(FirebaseAuth.getInstance().currentUser?.uid.equals(currentMessage.sendId)){
            send
        }else{
            receive
        }
    }

    //보낸 쪽
    class SendViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){
        val sendMessage: TextView = itemView.findViewById(R.id.send_message_text)
    }

    //받는 쪽
    class ReceiveViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){
        val receiveMessage: TextView = itemView.findViewById(R.id.receive_message_text)
    }
}

5. 채팅 ChatActivity.kt

- 설명 -

1. addValueEventListener

데이터 추가 리스너

onDataChange 함수 통해 데이터 변화 감지

class ChatActivity : AppCompatActivity() {

    private lateinit var receiverName: String
    private lateinit var receiverUid: String

    //바인딩 객체
    private lateinit var binding: ActivityChatBinding

    lateinit var mAuth: FirebaseAuth //인증 객체
    lateinit var mDbRef: DatabaseReference//DB 객체

    private lateinit var receiverRoom: String //받는 대화방
    private lateinit var senderRoom: String //보낸 대화방

    private lateinit var messageList: ArrayList<Message>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityChatBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //초기화
        messageList = ArrayList()
        val messageAdapter: MessageAdapter = MessageAdapter(this, messageList)

        //RecyclerView
        binding.chatRecyclerView.layoutManager = LinearLayoutManager(this)
        binding.chatRecyclerView.adapter = messageAdapter

        //넘어온 데이터 변수에 담기
        receiverName = intent.getStringExtra("name").toString()
        receiverUid = intent.getStringExtra("uId").toString()

        mAuth = FirebaseAuth.getInstance()
        mDbRef = FirebaseDatabase.getInstance().reference

        //접속자 uId
        val senderUid = mAuth.currentUser?.uid

        //보낸이방
        senderRoom = receiverUid + senderUid

        //받는이방
        receiverRoom = senderUid + receiverUid

        //액션바에 상대방 이름 보여주기
        supportActionBar?.title = receiverName

        //메시지 전송 버튼 이벤트
        binding.sendBtn.setOnClickListener {

            val message = binding.messageEdit.text.toString()
            val messageObject = Message(message, senderUid)

            //데이터 저장
            mDbRef.child("chats").child(senderRoom).child("messages").push()
                .setValue(messageObject).addOnSuccessListener {
                    //저장 성공하면
                    mDbRef.child("chats").child(receiverRoom).child("messages").push()
                        .setValue(messageObject)

                }
            //입력값 초기화
            binding.messageEdit.setText("")
        }

        //메시지 가져오기
        mDbRef.child("chats").child(senderRoom).child("messages")
            .addValueEventListener(object: ValueEventListener{
                override fun onDataChange(snapshot: DataSnapshot) {
                    messageList.clear()

                    for(postSnapshat in snapshot.children){

                        val message = postSnapshat.getValue(Message::class.java)
                        messageList.add(message!!)
                    }
                    //적용
                    messageAdapter.notifyDataSetChanged()
                }

                override fun onCancelled(error: DatabaseError) {

                }
            })
    }
}

2022.03.16 - [안드로이드] - [안드로이드] Firebase Storage 이미지 업로드 part1

[안드로이드] Firebase Storage 이미지 업로드 part1

aries574.tistory.com

2022.03.09 - [안드로이드] - [안드로이드] Firebase 시작하기 실시간 데이터베이스 Realtime Database (간단한 데이터 읽기, 쓰기) part1

[안드로이드] Firebase 시작하기 실시간 데이터베이스 Realtime Database (간단한 데이터 읽기, 쓰기) part

이번 시간에는 Firebase를 통해 데이터베이스에 간단한 데이터를 쓰고 읽는 방법에 대하여 알아보겠습니다. 목차 1. 실행 화면 2. 프로젝트 만들기 3. 앱 만들기 4. 데이터 베이스 만들기 5. 라이브러

aries574.tistory.com

2022.03.19 - [안드로이드] - [안드로이드] 간단한 할 일 목록(ToDoList) 쉽게 만드는 방법

[안드로이드] 간단한 할 일 목록(ToDoList) 쉽게 만드는 방법

이번 시간에는 간단한 할 일 목록(ToDoList) 만드는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 아이템 화면 만들기 3. 메인 화면 구성 activity_main.xml 4. 메인 코드 구현 MainActivity.java 1. 실행 화면..

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part8 - 메시지 보내기

aries574 — Thu, 27 Oct 2022 17:18:25 +0900

이번 시간에는 채팅앱 만들기 여덟 번째 시간

메시지 보내는 방법에 대하여 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.26 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part7 - 채팅 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part7 - 채팅 액티비티

이번 시간에는 채팅앱 만들기 일곱 번째 시간 대화 상대를 선택해서 대화 화면으로 이동하는 방법을 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.10.25 - [안드로이드] - [

aries574.tistory.com

1. 실행 화면
2. 메시지 모델 클래스 message.kt
3. 채팅 ChatActivity.kt

1. 실행 화면

2. 메시지 모델 클래스 message.kt

- 설명 -

1. 메시지 정보 담을 클래스

2. 대화 내용: message

3. 접속자 uId: sendId

data class Message(
    var message: String?,
    var sendId: String?
){
    constructor():this("","")
}

3. 채팅 ChatActivity.kt

- 설명 -

1. senderRoom = receiverUid + senderUid

보낸 이의 방의 값을 받는 이 uId와 보낸 이 uId로

합쳐서 만들었습니다.

2. receiverRoom = senderUid + receiverUid

받는 이의 방의 값을 보낸 이 uId와 받는 이 uId로

합쳐서 만들었습니다.

3. mDbRef.child("chats").child(senderRoom!!).child("messages").push()
.setValue(messageObject)

chat -> senderRoom -> message -> 메시지 저장

class ChatActivity : AppCompatActivity() {

    private lateinit var receiverName: String
    private lateinit var receiverUid: String

    //바인딩 객체
    private lateinit var binding: ActivityChatBinding

    lateinit var mAuth: FirebaseAuth //인증 객체
    lateinit var mDbRef: DatabaseReference//DB 객체

    private lateinit var receiverRoom: String //받는 대화방
    private lateinit var senderRoom: String //보낸 대화방

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityChatBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //넘어온 데이터 변수에 담기
        receiverName = intent.getStringExtra("name").toString()
        receiverUid = intent.getStringExtra("uId").toString()

        mAuth = FirebaseAuth.getInstance()
        mDbRef = FirebaseDatabase.getInstance().reference

        //접속자 uId
        val senderUid = mAuth.currentUser?.uid

        //보낸이방
        senderRoom = receiverUid + senderUid

        //받는이방
        receiverRoom = senderUid + receiverUid

        //액션바에 상대방 이름 보여주기
        supportActionBar?.title = receiverName

        //메시지 전송 버튼 이벤트
        binding.sendBtn.setOnClickListener {

            val message = binding.messageEdit.text.toString()
            val messageObject = Message(message, senderUid)

            //데이터 저장
            mDbRef.child("chats").child(senderRoom).child("messages").push()
                .setValue(messageObject).addOnSuccessListener {
                    //저장 성공하면
                    mDbRef.child("chats").child(receiverRoom).child("messages").push()
                        .setValue(messageObject)
                }
        }
    }
}

2022.10.13 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 다중 선택 사진 화면 전환하는 방법

[안드로이드 코틀린] 갤러리에서 다중 선택 사진 화면 전환 하는 방법

이번 시간에는 갤러리에서 가져온 여러 장의 사진을 을 앞 뒤로 넘겨서 보는 방법을 알아보겠습니다. 이전 프로젝트를 수정해서 만들게 되니 이전 포스팅을 먼저 보시면 됩니다. 2022.10.12 - [안드

aries574.tistory.com

2022.03.20 - [안드로이드] - [안드로이드] ToDoList SQLite 만드는 방법 part1 - 화면과 DB

[안드로이드] ToDoList SQLite 만드는 방법 part1 - 화면과 DB

이번 시간에는 ToDoList SQLite 할 일 목록 화면과 DB부분을 만들어 보겠습니다. 목차 1. 실행 화면 2. 라이브러리 등록 3. ToDo 클래스 만들기 4. ToDo DB 만들기 5. ToDo 화면 만들기 6. 메인 화면 구성 acti..

aries574.tistory.com

2022.03.16 - [안드로이드] - [안드로이드] Firebase Storage 이미지 업로드 part1

[안드로이드] Firebase Storage 이미지 업로드 part1

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part7 - 채팅 액티비티

aries574 — Wed, 26 Oct 2022 15:44:31 +0900

이번 시간에는 채팅앱 만들기 일곱 번째 시간

대화 상대를 선택해서 대화 화면으로 이동하는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.25 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part6 - Firebase 메뉴 생성 및 로그아웃

[안드로이드 코틀린] 채팅앱 만드는 방법 part6 - Firebase 메뉴 생성 및 로그아웃

이번 시간에는 채팅앱 만들기 여섯 번째 시간 메뉴를 추가해서 로그아웃 기능을 구현하겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.10.24 - [안드로이드] - [안드로이드 코틀린]

aries574.tistory.com

1. 실행 화면
2. 채팅 화면 ChatActivity
3. 사용자 리스트 어댑터 UserAdapter.kt

1. 실행 화면

2. 채팅 화면 ChatActivity

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: ChatActivity

activity_chat.xml

- 설명 -

1. 대화 내용 보여줄 RecyclerView

2. 메시지 입력 EditText

3. 메시지 전송 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".ChatActivity">

    <!-- 대화 내용 -->
    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/chat_recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/input_layout"
        android:layout_alignParentTop="true" />

    <!-- 입력 레이아웃 -->
    <LinearLayout
        android:id="@+id/input_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="10dp"
        android:orientation="horizontal"
        android:weightSum="100">

        <EditText
            android:id="@+id/message_edit"
            android:layout_width="wrap_content"
            android:layout_height="50dp"
            android:layout_marginStart="10dp"
            android:layout_weight="85"
            android:background="@drawable/edit_background"
            android:hint="메시지를 입력하세요"
            android:paddingStart="10dp" />

        <androidx.appcompat.widget.AppCompatButton
            android:id="@+id/send_btn"
            android:layout_width="30dp"
            android:layout_height="30dp"
            android:layout_marginStart="10dp"
            android:layout_marginEnd="10dp"
            android:layout_weight="15"
            android:background="@drawable/btn_background"
            android:text="전송"
            android:textColor="@android:color/white" />
    </LinearLayout>
</RelativeLayout>

ChatActivity.kt

- 설명 -

1. intent.getStringExtra("name").toString()

넘어온 상대방 이름

2. intent.getStringExtra("uid").toString()

넘어온 상대방 uId

3. supportActionBar?.title = receiverName

액션 바에 상대방 이름 보여주기

class ChatActivity : AppCompatActivity() {

    private lateinit var receiverName: String
    private lateinit var receiverUid: String

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

        //넘어온 데이터 변수에 담기
        receiverName = intent.getStringExtra("name").toString()
        receiverUid = intent.getStringExtra("uId").toString()

        //액션바에 상대방 이름 보여주기
        supportActionBar?.title = receiverName
    }
}

3. 사용자 리스트 어댑터 UserAdapter.kt

- 설명 -

1. holder.itemView.setOnClickListener

아이템 클릭 이벤트

2. intent.putExtra("name", currentUser.name)

넘겨줄 상대방 이름 담기

3. intent.putExtra("uid", currentUser.uId)

넘겨줄 상대방 uId 담기

class UserAdapter(private val context: Context, private val userList: ArrayList<User>):
 RecyclerView.Adapter<UserAdapter.UserViewHolder>(){

    /**
     * 화면 설정
     */
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserViewHolder {
       val view: View = LayoutInflater.from(context).
       inflate(R.layout.user_layout, parent, false)

        return UserViewHolder(view)
    }

    /**
     * 데이터 설정
     */
    override fun onBindViewHolder(holder: UserViewHolder, position: Int) {

        //데이터 담기
        val currentUser = userList[position]

        //화면에 데이터 보여주기
        holder.nameText.text = currentUser.name

        //아이템 클릭 이벤트
        holder.itemView.setOnClickListener {

            val intent  = Intent(context, ChatActivity::class.java)

            //넘길 데이터
            intent.putExtra("name", currentUser.name)
            intent.putExtra("uId", currentUser.uId)

            context.startActivity(intent)
        }
    }

    /**
     * 데이터 갯수 가져오기
     */
    override fun getItemCount(): Int {
        return userList.size
    }

    class UserViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){

        val nameText: TextView = itemView.findViewById(R.id.name_text)
    }
}

2022.10.14 - [안드로이드] - [안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

[안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

이번 시간에는 레이아웃에 텍스트뷰를 동적으로 생성하는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 뷰 바인딩 3. 메인 화면 activity_main.xml 4. 메인 코드 MainActivity.kt 1. 실행 화면 2. ..

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

Retrofit2 라이브러리를 이용해서 HTTP 통신을 하는 방법을 알아보겠습니다. 이번 시간에는 권한 및 설정을 하겠습니다. 목차 1. 권한 등록 2. 라이브러리 등록 3. 모델 클래스 4. 서비스 인터페

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part6 - Firebase 메뉴 생성 및 로그아웃

aries574 — Tue, 25 Oct 2022 15:19:24 +0900

이번 시간에는 채팅앱 만들기 여섯 번째 시간

메뉴를 추가해서 로그아웃 기능을 구현하겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.24 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part5 - Firebase 사용자 리스트

[안드로이드 코틀린] 채팅앱 만드는 방법 part5 - Firebase 사용자 리스트

이번 시간에는 채팅앱 만들기 다섯 번째 시간 로그인을 하면 등록한 사용자 리스트를 보여주는 방법을 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.10.21 - [안드로이드] -

aries574.tistory.com

1. 실행 화면
2. 메뉴 화면
3. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메뉴 화면

res -> 마우스 오른쪽 -> Android Resource File

File name: menu

Root element: Menu

menu.xml

- 설명 -

1. 로그아웃 기능 item

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@+id/log_out"
        android:title="Log Out"/>
</menu>

3. 메인 코드 MainActivity.kt

- 설명 -

1. onCreateOptionsMenu

생성할 메뉴 지정 함수

2. onOptionsItemSelected

메뉴 아이템 선택 기능 구현 함수

3. mAuth.signOut()

인증 서비스 로그아웃

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding
    lateinit var adapter: UserAdapter

    private lateinit var mAuth: FirebaseAuth
    private lateinit var mDbRef: DatabaseReference

    private lateinit var userList: ArrayList<User>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //인증 초기화
        mAuth = Firebase.auth

        //db 초기화
        mDbRef = Firebase.database.reference

        //리스트 초기화
        userList = ArrayList()

        adapter = UserAdapter(this, userList)

        binding.userRecycelrView.layoutManager = LinearLayoutManager(this)
        binding.userRecycelrView.adapter = adapter

        //사용자 정보 가져오기
        mDbRef.child("user").addValueEventListener(object:ValueEventListener{
            override fun onDataChange(snapshot: DataSnapshot) {
                for(postSnapshot in snapshot.children){
                    //유저 정보
                    val currentUser = postSnapshot.getValue(User::class.java)

                    if(mAuth.currentUser?.uid != currentUser?.uId){
                        userList.add(currentUser!!)
                    }
                }
                adapter.notifyDataSetChanged()
            }

            override fun onCancelled(error: DatabaseError) {
                //실패 시 실행
            }
        })
    }//onCreate

    override fun onCreateOptionsMenu(menu: Menu?): Boolean {
        menuInflater.inflate(R.menu.menu, menu)
        return super.onCreateOptionsMenu(menu)
    }

    override fun onOptionsItemSelected(item: MenuItem): Boolean {
        if(item.itemId == R.id.log_out){
            mAuth.signOut()
            val intent = Intent(this@MainActivity, LogInActivity::class.java)
            startActivity(intent)
            finish()
            return true
        }
        return true
    }
}

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

2022.09.20 - [안드로이드] - [안드로이드 코틀린] 코드(MainActivity) 에서 배경 색상 바꾸는 다양한 방법

[안드로이드 코틀린] 코드(MainActivity) 에서 배경 색상 바꾸는 다양한 방법

이번 시간에는 코드(MainActivity)에서 텍스트뷰 색상을 다양하게 변경하는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 메인 화면 activity_main.xml 3. 메인 코드 MainActivity.kt 1. 실행 화..

aries574.tistory.com

2022.09.19 - [안드로이드] - [안드로이드 코틀린] RecyclerView 홀수 행, 짝수 행 별 색상 다르게 하는 방법

[안드로이드 코틀린] RecyclerView 홀수 행, 짝수 행 별 색상 다르게 하는 방법

이번 시간에는 리스트에 쓰이는 RecyclerView 화면에서 홀수 행, 짝수 행 별 색상 다르게 보여주는 방법 알아보겠습니다. 목차 1. 실행 화면 2. 아이템 화면 list_item.xml 3. 아이템 어댑터 ListAdapter

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part5 - Firebase 사용자 리스트

aries574 — Mon, 24 Oct 2022 20:09:28 +0900

이번 시간에는 채팅앱 만들기 다섯 번째 시간

로그인을 하면 등록한 사용자 리스트를 보여주는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.21 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part4 - Firebase 로그인 기능과 사용자 저장 기능

[안드로이드 코틀린] 채팅앱 만드는 방법 part4 - Firebase 로그인 기능과 사용자 저장 기능

이번 시간에는 채팅앱 만들기 네 번째 시간 등록한 이메일로 로그인하는 기능과 회원가입 사용자 정보를 DB에 저장하는 기능을 구현하겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다.

aries574.tistory.com

1. 실행 화면
2. 사용자 리스트 화면 user_layout.xml
3. 사용자 리스트 어댑터 UserAdapter.kt
4. 메인 화면 activity_main.xml
5. 메인 코드 MainActivity.kt

1. 실행 화면

2. 사용자 리스트 화면 user_layout.xml

- 설명 -

1. 사용자 이름을 보여주는 TextView

2. 사용자를 구분해주는 선 View

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/name_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="10dp"
        android:layout_marginTop="5dp"
        android:textSize="30sp"
        android:textStyle="bold"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_below="@id/name_text"
        android:layout_marginTop="5dp"
        android:background="@android:color/black"/>
</RelativeLayout>

3. 사용자 리스트 어댑터 UserAdapter.kt

- 설명 -

1. class UserAdapter(val context: Context, val userList: ArrayList<User>)

생성 시에 Context와 ArrayList를 넘겨받는다.

2. onCreateViewHolder

화면 연결하는 기능

3. onBindViewHolder

데이터 연결 기능

4. getItemCount

데이터 개수 돌려주는 기능

class UserAdapter(private val context: Context, private val userList: ArrayList<User>):
 RecyclerView.Adapter<UserAdapter.UserViewHolder>(){

    /**
     * 화면 설정
     */
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): UserViewHolder {
       val view: View = LayoutInflater.from(context).
       inflate(R.layout.user_layout, parent, false)

        return UserViewHolder(view)
    }

    /**
     * 데이터 설정
     */
    override fun onBindViewHolder(holder: UserViewHolder, position: Int) {

        val currentUser = userList[position]
        holder.nameText.text = currentUser.name
    }

    /**
     * 데이터 갯수 가져오기
     */
    override fun getItemCount(): Int {
        return userList.size
    }

    class UserViewHolder(itemView: View): RecyclerView.ViewHolder(itemView){

        val nameText: TextView = itemView.findViewById(R.id.name_text)
    }
}

4. 메인 화면 activity_main.xml

- 설명 -

1. 사용자 리스트 보여주는 RecyclerView

<?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:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/user_recycelrView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        tools:listitem="@layout/user_layout" />
</LinearLayout>

5. 메인 코드 MainActivity.kt

- 설명 -

1. mAuth = Firebase.auth

인증 서비스 객체 초기화

2. mDbRef = Firebase.database.reference

실시간 데이터베이스 객체 초기화

3. addValueEventListener

해당 경로 데이터 가져오기

4. onDataChange

데이터 변경 시에 실행

5. onCancelled

오류 발생 시에 실행

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding
    lateinit var adapter: UserAdapter

    private lateinit var mAuth: FirebaseAuth
    private lateinit var mDbRef: DatabaseReference

    private lateinit var userList: ArrayList<User>

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //인증 초기화
        mAuth = Firebase.auth

        //db 초기화
        mDbRef = Firebase.database.reference

        //리스트 초기화
        userList = ArrayList()

        adapter = UserAdapter(this, userList)

        binding.userRecycelrView.layoutManager = LinearLayoutManager(this)
        binding.userRecycelrView.adapter = adapter

        //사용자 정보 가져오기
        mDbRef.child("user").addValueEventListener(object:ValueEventListener{
            override fun onDataChange(snapshot: DataSnapshot) {
                for(postSnapshot in snapshot.children){
                    //유저 정보
                    val currentUser = postSnapshot.getValue(User::class.java)

                    if(mAuth.currentUser?.uid != currentUser?.uId){
                        userList.add(currentUser!!)
                    }
                }
                adapter.notifyDataSetChanged()
            }

            override fun onCancelled(error: DatabaseError) {
                //실패 시 실행
            }
        })

    }//onCreate
}

2022.10.14 - [안드로이드] - [안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

[안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part4 - Firebase 로그인 기능과 사용자 저장 기능

aries574 — Fri, 21 Oct 2022 18:46:01 +0900

이번 시간에는 채팅앱 만들기 네 번째 시간 등록한 이메일로 로그인하는 기능과

회원가입 사용자 정보를 DB에 저장하는 기능을 구현하겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.20 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part3 - Firebase 인증 서비스

[안드로이드 코틀린] 채팅앱 만드는 방법 part3 - Firebase 인증 서비스

이번 시간에는 채팅앱 만들기 세 번째 시간 회원가입 인증 서비스 만드는 방법을 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.10.19 - [안드로이드] - [안드로이드 코틀린

aries574.tistory.com

1. 실행 화면
2. 로그인 LoginActivity.kt
3. Realtime Database 설정
4. 회원가입 SignUpActivity.kt
5. 사용자 모델 클래스 User.kt

1. 실행 화면

- 로그인 -

- 사용자 저장 -

2. 로그인 LoginActivity.kt

- 설명 -

1. mAuth: FirebaseAuth

인증 객체

2. mAuth = Firebase.auth

인증 객체 초기화

3. login(email: String, password: String)

로그인 기능 함수

4. mAuth.signInWithEmailAndPassword(email, password)

인증 서비스 기능

등록된 이메일과 패스워드 검증

class LogInActivity : AppCompatActivity() {

    lateinit var binding: ActivityLogInBinding

    lateinit var mAuth: FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLogInBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //인증 초기화
        mAuth = Firebase.auth

        //로그인 버튼 이벤트
        binding.loginBtn.setOnClickListener {

            val email = binding.emailEdit.text.toString()
            val password = binding.passwordEdit.text.toString()

            login(email, password)
        }

        //회원가입 버튼 이벤트
        binding.signUpBtn.setOnClickListener {
            val intent: Intent = Intent(this@LogInActivity, SignUpActivity::class.java)
            startActivity(intent)
        }
    }

    /**
     * 로그인
     */
    private fun login(email: String, password: String){
        mAuth.signInWithEmailAndPassword(email, password)
            .addOnCompleteListener(this) { task ->
                if (task.isSuccessful) {
                    //성공 시 실행
                    val intent: Intent = Intent(this@LogInActivity,
                        MainActivity::class.java)
                    startActivity(intent)
                    Toast.makeText(this, "로그인 성공", Toast.LENGTH_SHORT).show()
                    finish()
                } else {
                    //실패 시 실행
                    Toast.makeText(this, "로그인 실패", Toast.LENGTH_SHORT).show()
                    Log.d("Login", "Error: ${task.exception}")
                }
            }
    }
}

3. Realtime Database 설정

3-1 firebase 홈페이지

https://console.firebase.google.com/

로그인 - Google 계정

이메일 또는 휴대전화

accounts.google.com

3-2 프로젝트 클릭

3-3 빌드 -> Realtime Database

3-4 데이터베이스 만들기

3-5 위치 선택 -> 다음

3-6 테스트 모드 시작 체크 -> 사용 설정

3-7 생성된 화면

3-8 라이브러리 등록

- tools -> firebase -> 위에서 3번째(Realtime Database) 선택

- Get started with Realtime Database [KOTLIN] 클릭

4. 회원가입 SignUpActivity.kt

- 설명 -

1. signUp(name, email, password)

회원가입 함수에 name 파라미터 추가

2. addUserToDatabase(name: String, email: String, uId: String)

데이터베이스에 저장하는 함수

이름, 이메일, uid(인증 데이터에 저장된 정보)

3. mDbRef.child("user").child(uId).setValue(User(name, email, uId))

user안에 uid안에 사용자 정보를 저장합니다.

class SignUpActivity : AppCompatActivity() {

    lateinit var binding: ActivitySignUpBinding

    lateinit var mAuth: FirebaseAuth

    private lateinit var mDbRef: DatabaseReference

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivitySignUpBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //인증 초기화
        mAuth = Firebase.auth

        //db 초기화
        mDbRef = Firebase.database.reference

        binding.signUpBtn.setOnClickListener {

            val name = binding.nameEdit.text.toString().trim()
            val email = binding.emailEdit.text.toString().trim()
            val password = binding.passwordEdit.text.toString().trim()

            signUp(name, email, password)
        }
    }

    /**
     * 회원 가입
     */
    private fun signUp(name: String, email: String, password: String){

        mAuth.createUserWithEmailAndPassword(email, password)
            .addOnCompleteListener(this) { task ->
                if (task.isSuccessful) {
                    // 성공시 실행
                    Toast.makeText(this, "회원가입 성공", Toast.LENGTH_SHORT).show()
                    val intent: Intent = Intent(this@SignUpActivity, MainActivity::class.java)
                    startActivity(intent)
                    addUserToDatabase(name, email, mAuth.currentUser?.uid!!)
                } else {
                    // 실패시 실행
                    Toast.makeText(this, "회원가입 실패", Toast.LENGTH_SHORT).show()
                    Log.d("SignUp", "Error: ${task.exception}")
                }
            }
    }

    private fun addUserToDatabase(name: String, email: String, uId: String){
        mDbRef.child("user").child(uId).setValue(User(name, email, uId))
    }
}

5. 사용자 모델 클래스 User.kt

- 설명 -

1. DB에 저장할 사용자 정보를 담을 모델 클래스

data class User(
    var name: String,
    var email: String,
    var uId: String
){
    constructor(): this("", "", "")
}

2022.10.14 - [안드로이드] - [안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

[안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

aries574.tistory.com

2022.10.11 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 선택한 사진 이미지뷰(ImageView)에 보여주는 방법

[안드로이드 코틀린] 갤러리에서 선택한 사진 이미지뷰(ImageView)에 보여주는 방법

이번 시간에는 갤러리에서 사진 선택하면 이미지 뷰에 보여주는 방법에 대하여 알아보겠습니다. 목차 1. 실행화면 2. 뷰 바인딩 3. 라이브러리 등록 4. 메인 화면 activity_main.xml 5. 메인 코드

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part3 - Firebase 인증 서비스

aries574 — Thu, 20 Oct 2022 21:03:14 +0900

이번 시간에는 채팅앱 만들기 세 번째 시간 회원가입 인증 서비스 만드는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.19 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part2 - 회원가입 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part2 - 회원가입 액티비티

이번 시간에는 채팅앱 만들기 두 번째 시간 회원가입 액티비티 만드는 방법을 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채

aries574.tistory.com

1. 실행 화면
2. 파이어베이스 설정
3. 회원가입 SignUpActivity.kt

1. 실행 화면

2. 파이어베이스 설정

2-1 https://firebase.google.com/ 접속

시작하기 버튼 클릭

2-2 영문으로 프로젝트 이름을 입력하고 계속 버튼을 누릅니다.

2-3 계속버튼을 누릅니다.

2-4 Google 애널리틱스 계정 선택 또는 만들기

2-5 계속버튼을 누르면 프로젝트가 생성됩니다.

2-6 앱 만들기

만들어진 프로젝트를 누르고 들어가면 앱 추가 버튼을 누릅니다.

안드로이드 아이콘을 누르시면 됩니다.

2-7 안드로이드 스튜디오에서 만든 패키지 이름을 입력하시면 됩니다.

MainActivity 파일 맨 위에 package 옆의 이름을 복사해서 붙여 넣기 하시면 됩니다.

2-8 google-services.json을 다운로드해서 app폴더 안에 넣으시면 됩니다.

2-9 build.gradle(프로젝트명) plugins 안에 코드를 입력하시면 됩니다.

id 'com.google.gms.google-services' version '4.3.13' apply false

2-10 build.gradle(module: 프로젝트명.app)에 아래 코드를 입력하시면 됩니다.

인증 서비스 라이브러리도 같이 추가

implementation 'com.google.firebase:firebase-auth-ktx:21.1.0'

2-11 콘솔로 이동 버튼을 누르시면 앱에 Firebase 추가가 됩니다.

3. 회원가입 SignUpActivity.kt

- 설명 -

1. mAuth: FirebaseAuth

인증 서비스 객체

2. mAuth = Firebase.auth

인증 서비스 초기화

3. signUp(email: String, password: String)

회원 가입 등록 함수

4. mAuth.createUserWithEmailAndPassword(email, password)

인증 서비스 신규 계정 등록 함수

5. 문서 사이트

https://firebase.google.com/docs/auth/android/password-auth

Android에서 비밀번호 기반 계정으로 Firebase에 인증 | Firebase 인증

2022년 10월 18일에 오프라인과 온라인으로 진행될 Firebase Summit에 참여하세요. Firebase로 앱을 빠르게 개발하고 안심하고 앱을 출시하며 손쉽게 확장하는 방법을 알아보세요. 지금 등록하기 의견 보

firebase.google.com

class SignUpActivity : AppCompatActivity() {

    lateinit var binding: ActivitySignUpBinding

    lateinit var mAuth: FirebaseAuth

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivitySignUpBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //인증 초기화
        mAuth = Firebase.auth

        binding.signUpBtn.setOnClickListener {

            val email = binding.emailEdit.text.toString().trim()
            val password = binding.passwordEdit.text.toString().trim()

            signUp(email, password)
        }
    }

    /**
     * 회원 가입
     */
    private fun signUp(email: String, password: String){

        mAuth.createUserWithEmailAndPassword(email, password)
            .addOnCompleteListener(this) { task ->
                if (task.isSuccessful) {
                    // 성공시 실행
                    Toast.makeText(this, "회원가입 성공", Toast.LENGTH_SHORT).show()
                    val intent: Intent = Intent(this@SignUpActivity, MainActivity::class.java)
                    startActivity(intent)
                } else {
                    // 실패시 실행
                    Toast.makeText(this, "회원가입 실패", Toast.LENGTH_SHORT).show()
                    Log.d("SignUp", "Error: ${task.exception}")
                }
            }
    }

2022.10.14 - [안드로이드] - [안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

[안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

이번 시간에는 뷰 바인딩 설정과 타이머 화면 구성을 만들어 보겠습니다. 목차 1. 실행 화면 2. 뷰 바인딩 3. 메인 화면 activity_main.xml 1. 실행 화면 1-1 설정 화면 1-2 타이머 화면 2. 뷰바..

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part2 - 회원가입 액티비티

aries574 — Wed, 19 Oct 2022 15:24:24 +0900

이번 시간에는 채팅앱 만들기 두 번째 시간 회원가입 액티비티 만드는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.18 - [안드로이드] - [안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

이번 시간에는 채팅앱 만들기 첫 번째 시간 로그인 액티비티 만드는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 뷰 바인딩 3. 백그라운드 drawable 4. 로그인 화면 LogInActivity 5. 홈 화면 변

aries574.tistory.com

1. 실행 화면
2. 회원가입 Activity
3. 로그인 LogInActivity.kt

1. 실행 화면

2. 회원가입 Activity

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: SignUpActivity

activity_sign_up.xml

- 설명 -

1. 앱 로고 ImageView

2. 이름 입력 EditText

3. 이메일 입력 EditText

4. 패스워드 입력 EditText

5. 회원가입 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".SignUpActivity">

    <ImageView
        android:id="@+id/logo_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:src="@drawable/chat" />

    <EditText
        android:id="@+id/name_edit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/logo_image"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/edit_background"
        android:hint="Name"
        android:inputType="textEmailAddress"
        android:paddingStart="15dp" />

    <EditText
        android:id="@+id/email_edit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/name_edit"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/edit_background"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:paddingStart="15dp" />

    <EditText
        android:id="@+id/password_edit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/email_edit"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/edit_background"
        android:hint="password"
        android:inputType="numberPassword"
        android:paddingStart="15dp" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/signUp_btn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_edit"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_background"
        android:text="회원 가입"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</RelativeLayout>

3. 로그인 LogInActivity.kt

- 설명 -

1. binding: ActivityLogInBinding

뷰 바인딩 객체 생성

2. binding = ActivityLogInBinding.inflate(layoutInflater)

뷰 바인딩 객체 초기화

3. val intent: Intent = Intent(this@LogInActivity, SignUpActivity::class.java)

회원가입 Activity 이동 객체 생성

4. startActivity(intent)

회원가입 Activity로 이동

class LogInActivity : AppCompatActivity() {

    lateinit var binding: ActivityLogInBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityLogInBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //회원가입 버튼 이벤트
        binding.signUpBtn.setOnClickListener {
            val intent: Intent = Intent(this@LogInActivity, SignUpActivity::class.java)
            startActivity(intent)
        }
    }
}

2022.10.14 - [안드로이드] - [안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

[안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

aries574.tistory.com

2022.10.13 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 다중 선택 사진 화면 전환하는 방법

[안드로이드 코틀린] 갤러리에서 다중 선택 사진 화면 전환 하는 방법

aries574.tistory.com

2022.10.11 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 선택한 사진 이미지 뷰(ImageView)에 보여주는 방법

[안드로이드 코틀린] 갤러리에서 선택한 사진 이미지뷰(ImageView)에 보여주는 방법

aries574.tistory.com

[안드로이드 코틀린] 채팅앱 만드는 방법 part1 - 로그인 액티비티

aries574 — Tue, 18 Oct 2022 22:20:26 +0900

이번 시간에는 채팅앱 만들기 첫 번째 시간 로그인 액티비티 만드는 방법을 알아보겠습니다.

1. 실행 화면
2. 뷰 바인딩
3. 백그라운드 drawable
4. 로그인 화면 LogInActivity
5. 홈 화면 변경

1. 실행 화면

2. 뷰 바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 백그라운드 drawable

res -> drawable 클릭 -> 마우스 오른쪽 -> new -> Drawable Resource File

edit_background.xml

- 설명 -

1. <corners android:radius="20dp" />

외곽선 둥글게

2. stroke android:width="4dp"

외곽선 굵기

3. stroke android:color="@color/greren"

외곽선 색상

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="20dp" />
    <stroke
        android:width="4dp"
        android:color="@color/green" />
</shape>

btn_background.xml

- 설명 -

1. <solid android:color="@color/greren"/>

내부 색상

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <corners android:radius="15dp"/>
    <solid android:color="@color/green"/>
</shape>

res -> value -> colors.xml

<color name="green">#4CAF50</color>

4. 로그인 화면 LogInActivity

app 선택 -> 마우스 오른쪽 클릭 -> New -> Activity -> Empty Activity

Activity name: LoginActivity

activity_log_in.xml

- 설명 -

1. 앱 로고 ImageView

2. 이메일 입력 EditText

3. 패스워드 입력 EditText

4. 로그인 Button

5. 회원가입 Button

6. 이미지

res -> drawable

chat.png

0.01MB

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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=".LogInActivity">

    <ImageView
        android:id="@+id/logo_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="70dp"
        android:src="@drawable/chat" />

    <EditText
        android:id="@+id/email_edit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/logo_image"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/edit_background"
        android:hint="Email"
        android:inputType="textEmailAddress"
        android:paddingStart="15dp" />

    <EditText
        android:id="@+id/password_edit"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_below="@id/email_edit"
        android:layout_marginLeft="20dp"
        android:layout_marginTop="10dp"
        android:layout_marginRight="20dp"
        android:background="@drawable/edit_background"
        android:hint="password"
        android:inputType="numberPassword"
        android:paddingStart="15dp" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/login_btn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/password_edit"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_background"
        android:text="로그인"
        android:textColor="@android:color/white"
        android:textSize="20sp" />

    <androidx.appcompat.widget.AppCompatButton
        android:id="@+id/signUp_btn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_below="@id/login_btn"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="10dp"
        android:background="@drawable/btn_background"
        android:text="회원 가입"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</RelativeLayout>

5. 홈 화면 변경

AndroidManifest.xml

- 설명 -

MainActivity에 있는 intent-filter를 LogInActivity로 옮겨준다.

앱 실행 시 LogInActivity가 홈 화면으로 보인다.

        <activity
            android:name=".LogInActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MainActivity"
            android:exported="true"/>

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

이번 시간에는 스톱워치(StopWatch) 만드는 방법에 대하여 알아보겠습니다. 안드로이드에서는 Chronometer을 통해 스톱워치를 쉽게 만들 수 있습니다. 목차 1. 실행 화면 2. 메인 화면 activity_main.xml

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

[안드로이드 코틀린] 텍스트뷰 TextView 동적으로 생성하는 방법

aries574 — Fri, 14 Oct 2022 12:54:37 +0900

이번 시간에는 레이아웃에 텍스트뷰를 동적으로 생성하는 방법을 알아보겠습니다.

1. 실행 화면
2. 뷰 바인딩
3. 메인 화면 activity_main.xml
4. 메인 코드 MainActivity.kt

1. 실행 화면

2. 뷰 바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 메인 화면 activity_main.xml

- 설명 -

1. 텍스트뷰 보여주는 Layout

2. 텍스트뷰 생성하는 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <!-- 텍스트뷰 보여줄 레이아웃 -->
    <LinearLayout
        android:id="@+id/listLayout"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:background="#ACE6AE"
        android:orientation="horizontal"/>

    <!-- 텍스트뷰 생성 버튼-->
    <Button
        android:id="@+id/createBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="10dp"
        android:text="텍스트뷰 생성"
        android:textSize="20sp"/>

</LinearLayout>

4. 메인 코드 MainActivity.kt

- 설명 -

1. val textView: TextView = TextView(applicationContext)

텍스트뷰 생성

2. textView.text = "텍스트 생성"

텍스트뷰 글자

3. textView.textSize = 12f

텍스트뷰 글자 크기

4. textView.setTypeface(null, Typeface.BOLD)

텍스트뷰 글자 타입

5. textView.id = 0

텍스트뷰 아이디

6. LinearLayout.LayoutParams(width, height)

텍스트뷰 레이아웃 설정

7. textView.layoutParams = param

텍스트뷰 레이아웃 적용

8. textView.setBackgroundColor(Color.BLACK)

텍스트뷰 배경 색상

9. textView.setTextColor(Color.WHITE)

텍스트뷰 텍스트 색상

10. binding.listLayout.addView(textView)

텍스트뷰 레이아웃에 적용

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //텍스트뷰 생성 버튼
        binding.createBtn.setOnClickListener {
            //텍스트뷰 생성
            createTextView()
        }
    }//onCreate

    /**
     * 텍스트뷰 생성
     */
    private fun createTextView(){

        //1. 텍스트뷰 생성
        val textView: TextView = TextView(applicationContext)

        //2. 텍스트뷰 글자
        textView.text  = "텍스트 생성"

        //3. 텍스트뷰 글자 크기
        textView.textSize = 12f

        //4. 텍스트뷰 글자 타입
        textView.setTypeface(null, Typeface.BOLD)

        //5. 텍스트뷰 ID
        textView.id = 0

        //6. 레이아웃
        val param: LinearLayout.LayoutParams = LinearLayout
            .LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)

        param.leftMargin = 30

        //7. 레이아웃 적용
        textView.layoutParams = param

        //8. 텍스트뷰 배경 색상
        textView.setBackgroundColor(Color.BLACK)

        //9. 텍스트뷰 텍스트 색상
        textView.setTextColor(Color.WHITE)

        //10. 레이아웃에 텍스트뷰 추가
        binding.listLayout.addView(textView)
    }
}

2022.10.11 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 선택한 사진 이미지 뷰(ImageView)에 보여주는 방법

[안드로이드 코틀린] 갤러리에서 선택한 사진 이미지뷰(ImageView)에 보여주는 방법

aries574.tistory.com

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

[안드로이드 코틀린] 갤러리에서 다중 선택 사진 화면 전환 하는 방법

aries574 — Thu, 13 Oct 2022 16:29:09 +0900

이번 시간에는 갤러리에서 가져온 여러 장의 사진을 을 앞 뒤로 넘겨서 보는 방법을 알아보겠습니다.

이전 프로젝트를 수정해서 만들게 되니 이전 포스팅을 먼저 보시면 됩니다.

2022.10.12 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 다중 선택 사진 RecycelrView 에 보여주는 방법

[안드로이드 코틀린] 갤러리에서 다중 선택 사진 RecycelrView 에 보여주는 방법

이번 시간에는 한 장이 아닌 여러 장의 사진을 선택해서 RecyclerView에 보여주는 방법을 알아보겠습니다. 이전 프로젝트에 추가하니 이전 포스팅을 먼저 보시면 됩니다. 2022.10.11 - [안드로이드] - [

aries574.tistory.com

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메인 화면 activity_main.xml

- 설명 -

1. 현재 이미지 위치 보여주는 TextView

2. 선택한 사진 보여주는 ImageView

3. 이전 이미지 보여주는 Button

4. 다음 이미지 보여주는 Button

5. 갤러리 보여주는 Button

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <TextView
        android:id="@+id/positionText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:textSize="20sp"/>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="400dp"
        android:layout_below="@id/positionText"/>

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageView">

        <Button
            android:id="@+id/backBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentStart="true"
            android:layout_marginStart="10dp"
            android:text="이전"
            android:textSize="20sp"/>

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:layout_marginEnd="10dp"
            android:text="다음"
            android:textSize="20sp"/>
    </RelativeLayout>

    <Button
        android:id="@+id/galleryBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:text="사진첩 열기"
        android:textSize="20sp" />


</RelativeLayout>

3. 메인 코드 MainActivity.kt

- 설명 -

1. var position = 0

이미지 위치

2. showPosition(position: String)

현재 위치 텍스트뷰에 보여주는 함수

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    var imageList: ArrayList<Uri> = ArrayList()

    var position = 0 //이미지 현재 위치

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //사진첩 호출 버튼 이벤트
        binding.galleryBtn.setOnClickListener {

            //갤러리 호출
            val intent = Intent(Intent.ACTION_PICK)
            intent.type = "image/*"
            //멀티 선택 기능
            intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
            activityResult.launch(intent)
        }
        //이전 버튼 이벤트
        binding.backBtn.setOnClickListener {

            if(position > 0){
                position--
                //이미지 보여주기
                binding.imageView.setImageURI(imageList[position])
                // 현재 위치 보여주기
                showPosition(position.toString())
            }else{
                Toast.makeText(this, "첫 이미지 입니다.", Toast.LENGTH_SHORT).show()
            }
        }

        //다음 버튼 이벤트
        binding.nextBtn.setOnClickListener {
            if(position < imageList.size-1){
                position++
                //이미지 보여주기
                binding.imageView.setImageURI(imageList[position])
                // 현재 위치 보여주기
                showPosition(position.toString())
            }else{
                Toast.makeText(this, "마지막 이미지 입니다.", Toast.LENGTH_SHORT).show()
            }
        }

    }//onCreate

    //결과 가져오기
    private val activityResult: ActivityResultLauncher<Intent> = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()){

        //결과 코드 OK , 결가값 null 아니면
        if(it.resultCode == RESULT_OK){

            //멀티 선택은 clipData
            if(it.data!!.clipData != null){ //멀티 이미지

                //선택한 이미지 갯수
                val count = it.data!!.clipData!!.itemCount

                for(index in 0 until count){
                    //이미지 담기
                    val imageUri = it.data!!.clipData!!.getItemAt(index).uri
                    //이미지 추가
                    imageList.add(imageUri)

                    //첫 번째 이미지로 보여준다.
                    binding.imageView.setImageURI(imageList[0])
                    position = 0
                    showPosition(position.toString())
                }
            }else{ //싱글 이미지
                val imageUri = it.data!!.data
                binding.imageView.setImageURI(imageUri)
                position = 0
                showPosition(position.toString())
            }
        }
    }

    /**
     * 현재 위치 보여주는 함수
     */
    private fun showPosition(position: String){
        binding.positionText.text = position
    }
}

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574.tistory.com

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

이번 시간에는 Glide 라이브러리를 이용해서 이미지 쉽게 보여주는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 권한 등록 3. 라이브러리 등록 4. 메인 화면 activity_main.xml 5. 메인 코드 Main

aries574.tistory.com

[안드로이드 코틀린] 갤러리에서 다중 선택 사진 RecycelrView 에 보여주는 방법

aries574 — Wed, 12 Oct 2022 16:46:49 +0900

이번 시간에는 한 장이 아닌 여러 장의 사진을 선택해서 RecyclerView에 보여주는 방법을 알아보겠습니다.

이전 프로젝트에 추가하니 이전 포스팅을 먼저 보시면 됩니다.

2022.10.11 - [안드로이드] - [안드로이드 코틀린] 갤러리에서 선택한 사진 이미지 뷰(ImageView)에 보여주는 방법

[안드로이드 코틀린] 갤러리에서 선택한 사진 이미지뷰(ImageView)에 보여주는 방법

aries574.tistory.com

1. 실행 화면
2. 아이템 화면 item_layout.xml
3. 아이템 어댑터 GalleryAdapter.kt
4. 메인 화면 activity_main.xml
5. 메인 코드 MainActivity.kt

1. 실행 화면

2. 아이템 화면 item_layout.xml

- 설명 -

1. 아이템 보여주는 Layout

2. 선택한 사진 보여주는 ImageView

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="300dp"
    android:layout_marginHorizontal="30dp"
    android:layout_marginVertical="30dp">

    <ImageView
        android:id="@+id/galleryView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
</LinearLayout>

3. 아이템 어댑터 GalleryAdapter.kt

- 설명 -

1. 아이템 화면과 데이터를 연결해주는 Adapter

2. constructor(imageList: ArrayList<Uri>, context: Context)

생성자

메인에서 데이터(imageList)와 Context를 받아온다.

3. onCreateViewHolder

화면 설정 함수

4. onBindViewHolder

데이터 설정 함수

Glide로 이미지를 보여준다.

class GalleryAdapter(): RecyclerView.Adapter<GalleryAdapter.ViewHolder>(){

    lateinit var imageList: ArrayList<Uri>
    lateinit var context: Context

    /**
     * 생성자
     */
    constructor(imageList: ArrayList<Uri>, context: Context): this(){

        this.imageList = imageList
        this.context = context
    }

    /**
     * 화면 설정
     */
    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {

        val inflater: LayoutInflater = LayoutInflater.from(parent.context)

        val view: View = inflater.inflate(R.layout.item_layout, parent, false)

        return ViewHolder(view)
    }

    /**
     * 데이터 설정
     */
    override fun onBindViewHolder(holder: ViewHolder, position: Int) {

        Glide.with(context)
            .load(imageList[position]) //이미지 위치
            .into(holder.galleryView)//보여줄 위치
    }

    /**
     * 아이템 갯수
     */
    override fun getItemCount(): Int {

        return imageList.size
    }


    class ViewHolder(view: View): RecyclerView.ViewHolder(view){

        val galleryView: ImageView = view.findViewById(R.id.galleryView)
    }
}

4. 메인 화면 activity_main.xml

- 설명 -

1. 갤러리 보여주는 Button

2. 다중 선택한 이미지 보여줄 RecyclerView

<?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:id="@+id/galleryBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="사진첩 열기"
        android:textSize="20sp" />


    <androidx.recyclerview.widget.RecyclerView
        android:id="@+id/recyclerView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>

5. 메인 코드 MainActivity.kt

- 설명 -

1. intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)

intent 속성에 다중 선택 옵션 추가

2. it.data!!.clipData

다중 선택 이미지는 clipData로 받아 온다.

3. it.data!!.clipData!!.getItemAt(index).uri

선택한 이미지를 순서대로 가져온다.

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    lateinit var galleryAdapter: GalleryAdapter

    var imageList: ArrayList<Uri> = ArrayList()

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //adapter 초기화
        galleryAdapter = GalleryAdapter(imageList, this)

        //recyclerView 설정
        binding.recyclerView.layoutManager = LinearLayoutManager(this)
        binding.recyclerView.adapter = galleryAdapter

        //버튼 이벤트
        binding.galleryBtn.setOnClickListener {

            //갤러리 호출
            val intent = Intent(Intent.ACTION_PICK)
            intent.type = "image/*"
            //멀티 선택 기능
            intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true)
            activityResult.launch(intent)
        }
    }//onCreate

    //결과 가져오기
    private val activityResult: ActivityResultLauncher<Intent> = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()){

            //결과 코드 OK , 결가값 null 아니면
            if(it.resultCode == RESULT_OK){

                //멀티 선택은 clipData
                if(it.data!!.clipData != null){ //멀티 이미지

                    //선택한 이미지 갯수
                   val count = it.data!!.clipData!!.itemCount

                    for(index in 0 until count){
                        //이미지 담기
                        val imageUri = it.data!!.clipData!!.getItemAt(index).uri
                        //이미지 추가
                        imageList.add(imageUri)
                    }
                }else{ //싱글 이미지
                    val imageUri = it.data!!.data
                        imageList.add(imageUri!!)
                }
                galleryAdapter.notifyDataSetChanged()
            }
        }
}

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

aries574.tistory.com

[안드로이드 코틀린] 갤러리에서 선택한 사진 이미지뷰(ImageView)에 보여주는 방법

aries574 — Tue, 11 Oct 2022 14:26:36 +0900

이번 시간에는 갤러리에서 사진 선택하면 이미지 뷰에 보여주는 방법에 대하여 알아보겠습니다.

1. 실행화면
2. 뷰 바인딩
3. 라이브러리 등록
4. 메인 화면 activity_main.xml
5. 메인 코드 MainActivity.kt

1. 실행화면

2. 뷰 바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'com.github.bumptech.glide:glide:4.14.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.14.1'

4. 메인 화면 activity_main.xml

- 설명 -

1. 갤러리에서 선택한 사진 보여주는 ImageView

2. 갤러리 보여주는 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

    <Button
        android:id="@+id/galleryBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="사진첩 열기"
        android:textSize="20sp"/>
</LinearLayout>

5. 메인 코드 MainActivity.kt

- 설명 -

1. Intent(Intent.ACTION_PICK)

액션 설정

2. intent.type = "image/*"

이미지 전체 가져오기

3. registerForActivityResult

활동으로부터 결과 가져오기

4. 참조 문서

https://developer.android.com/training/basics/intents/result?hl=ko#test

활동에서 결과 가져오기 | Android 개발자 | Android Developers

활동에서 결과 가져오기 컬렉션을 사용해 정리하기 내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요. 개발자 앱 내의 활동이든 다른 앱의 활동이든 다른 활동을 시작하는 것이 단방향 작

developer.android.com

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //버튼 이벤트
        binding.galleryBtn.setOnClickListener {

            //갤러리 호출
            val intent = Intent(Intent.ACTION_PICK)
            intent.type = "image/*"
            activityResult.launch(intent)
        }
    }//onCreate

    //결과 가져오기
    private val activityResult: ActivityResultLauncher<Intent> = registerForActivityResult(
        ActivityResultContracts.StartActivityForResult()){

            //결과 코드 OK , 결가값 null 아니면
            if(it.resultCode == RESULT_OK && it.data != null){
                //값 담기
                val uri  = it.data!!.data

                //화면에 보여주기
                Glide.with(this)
                    .load(uri) //이미지
                    .into(binding.imageView) //보여줄 위치
            }
        }
}

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574.tistory.com

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part3- 기능 구현(승리 체크)

aries574 — Mon, 10 Oct 2022 11:30:57 +0900

이번 시간에는 둘 중 하나가 한 줄을 채우면 이기거나, 둘 다 못 채우면 무승부가 되는 승리 체크 로직을 구현하겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.07 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part2 - 기능 구현(클릭 이벤트)

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part2 - 기능 구현(클릭 이벤트)

이번 시간에는 번갈아 가면서 클릭하면 사용자 1은 X 표시 사용자 2는 O 표시하는 방법을 알아보겠습니다. 이전 포스팅은 아래 링크를 들어가시면 됩니다. 2022.10.06 - [안드로이드] - [안드로이드

aries574.tistory.com

1. 실행 화면
2. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메인 코드 MainActivity.kt

- 설명 -

1. playAgain()

게임 초기화 함수

클릭 횟수, 플레이어 차례, 버튼 표시 초기화

2. updatePlayerScore()

플레이어 승수 업데이트 함수

변경된 플레이어 승수 화면에 적용

3. checkWinner()

승리 체크 함수

플레이어가 입력한 위치와 승리 위치 비교

class MainActivity : AppCompatActivity(), View.OnClickListener {

    lateinit var binding: ActivityMainBinding

    //버튼 객체 담을 변수
    private val buttons = arrayOfNulls<Button>(9)

    //활성화 플레이어(true: p1 , false : p2)
    private var activityPlayer: Boolean = true

    private var p1ScoreCount = 0 //플레이어1 승수
    private var p2ScoreCount = 0 //플레이어2 승수
    private var roundCount = 0 // 클릭 갯수

    //클릭 한 버튼위치 들어갈 배열
    var gameState: IntArray = intArrayOf(2, 2, 2, 2, 2, 2, 2, 2, 2)

    //승리 위치
    var winningPosition: Array<IntArray> =
        arrayOf<IntArray>(
            intArrayOf(0, 1, 2),
            intArrayOf(3, 4, 5),
            intArrayOf(6, 7, 8),
            intArrayOf(0, 3, 6),
            intArrayOf(1, 4, 7),
            intArrayOf(2, 5, 8),
            intArrayOf(0, 4, 8),
            intArrayOf(2, 4, 6)
        )
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //순서 표시
        viewMode()

        //버튼 초기화
        for((index, item) in buttons.withIndex()){

            val buttonID = "btn_${index}"
            val resourceID = resources.getIdentifier(buttonID, "id", packageName)
            buttons[index] = findViewById(resourceID)
            buttons[index]?.setOnClickListener(this)
        }

        //초기화 버튼
        binding.resetBtn.setOnClickListener {

            //게임 초기화
            playAgain()

            p1ScoreCount = 0
            p2ScoreCount = 0

            //승수 업데이트
            updatePlayerScore()
        }
    }//onCreate

    /**
     * 버튼 클릭 이벤트
     */
    override fun onClick(view: View?) {

        //이미 값이 있으면 리턴
        if((view as Button).text.toString() != ""){

            Toast.makeText(applicationContext, "이미 체크됨", Toast.LENGTH_SHORT).show()
            return
        }

        //1. 버튼 ID 변수에 담기(예: btn_2)
        val buttonId = view.resources.getResourceEntryName(view.id)

        //2. 버튼 ID에서 숫자만 변수에 담기(예: 2)
        val gameStatePointer = buttonId.substring(buttonId.length-1, buttonId.length).toInt()

        //사용자 순서
        if((activityPlayer)){ //플레이어 1

            //텍스트 설정
            view.text = "X"

            //텍스트 색상 설정
            view.setTextColor(Color.parseColor("#FFC34A"))

            //해당 위치에 0을 넣는다.
            gameState[gameStatePointer] = 0

        }else{ //플레이어2
            //텍스트 설정
            view.text = "O"

            //텍스트 색상 설정
            view.setTextColor(Color.parseColor("#70FFEA"))

            //해당 위치에 0을 넣는다.
            gameState[gameStatePointer] = 1
        }

        roundCount++ //턴 수 올리기기

        //승리 체크
        if(checkWinner()){
            if(activityPlayer){//플레이어1이 승리
                p1ScoreCount++ //승수올리기
                updatePlayerScore() //승수 업데이트
                Toast.makeText(this, "플레이어1 승리", Toast.LENGTH_SHORT).show()
                playAgain()//게임 초기화

            }else{//플레이어2 승리
                p2ScoreCount++ //승수올리기
                updatePlayerScore() //승수 업데이트
                Toast.makeText(this, "플레이어2 승리", Toast.LENGTH_SHORT).show()
                playAgain()//게임 초기화
            }
        }else if(roundCount == 9){ //클릭 횟수 9개 채웠는데 승부가 안나면
            playAgain()//초기화
            Toast.makeText(this, "무승부", Toast.LENGTH_SHORT).show()
        }else{ //계속 게임
            //순서 변경
            activityPlayer = !activityPlayer
        }

        //순서 표시
        viewMode()
    }

    /**
     * 순서 표시
     */
    private fun viewMode(){

        if(activityPlayer){
            binding.player1.setTextColor(Color.RED)
            binding.player2.setTextColor(Color.BLACK)
        }else{
            binding.player1.setTextColor(Color.BLACK)
            binding.player2.setTextColor(Color.RED)
        }
    }

    /**
     * 게임 초기화
     */
    private fun playAgain(){
        roundCount = 0 //클릭 횟수
        activityPlayer = true // 플레이어 순서

        //버튼 초기화
        for((index, item) in buttons.withIndex()){
            gameState[index] = 2
            buttons[index]?.text = ""
        }
    }

    /**
     * 승수 업데이트
     */
    private fun updatePlayerScore(){
        //화면에 승수 적용
        binding.player1Score.text = p1ScoreCount.toString()
        binding.player2Score.text = p2ScoreCount.toString()
    }

    /**
     * 승리 체크
     */
    private fun checkWinner(): Boolean{
        //결과
        var winnerResult = false

        for(winPosition in winningPosition){
            //승리위치 비교
            if(gameState[winPosition[0]] == gameState[winPosition[1]] &&
                gameState[winPosition[1]] == gameState[winPosition[2]] &&
                gameState[winPosition[0]] != 2){

                winnerResult = true
            }
        }
        return winnerResult
    }
}

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part2 - 기능 구현(클릭 이벤트)

aries574 — Fri, 7 Oct 2022 14:56:24 +0900

이번 시간에는 번갈아 가면서 클릭하면 사용자 1은 X 표시 사용자 2는 O 표시하는 방법을 알아보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.06 - [안드로이드] - [안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574.tistory.com

1. 실행 화면
2. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메인 코드 MainActivity.kt

- 설명 -

1. activityPlayer: Boolean = true

활성화 플레이어 true: 사용자 1, false: 사용자 2

클릭할 때마다 값이 변경된다.

2. buttons = arrayOfNulls<Button>(9)

버튼 객체 담는 변수

3. p1ScoreCount = 0

사용자1 승수

4. p2ScoreCount = 0

사용자2 승수

5. roundCount = 0

클릭 개수

6. gameState

클릭 한 버튼 위치 들어갈 배열

7. winningPosition

승리 위치 값 담은 배열

8. viewMode()

순서 표시 함수

해당 순서인 사용자 텍스트 빨강으로 변경

class MainActivity : AppCompatActivity(), View.OnClickListener {

    lateinit var binding: ActivityMainBinding

    //버튼 객체 담을 변수
    private val buttons = arrayOfNulls<Button>(9)

    //활성화 플레이어 변수 (true: p1 , false: p2)
    private var activityPlayer: Boolean = true

    private var p1ScoreCount = 0 ///플레이어1 승수
    private var p2ScoreCount = 0 //플레이어2 승수
    private var roundCount = 0 //클릭 횟수

    //클릭 한 버튼 위치 들어갈 배열(9개)
    var gameState: IntArray = intArrayOf(2, 2, 2, 2, 2, 2, 2, 2, 2)

    //승리 위치
    var winningPosition: Array<IntArray> =
        arrayOf(
            intArrayOf(0, 1, 2),//가로
            intArrayOf(3, 4, 5),//가로
            intArrayOf(6, 7, 8),//가로
            intArrayOf(0, 3, 6),//세로
            intArrayOf(1, 4, 7),//세로
            intArrayOf(2, 5, 8),//세로
            intArrayOf(0, 4, 8),//대각선
            intArrayOf(2, 4, 6),//대각선
        )

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //순서 표시
        viewMode()

        //버튼 초기화
        for((index, item) in buttons.withIndex()){

            val buttonID = "btn_${index}"
            val resourceID = resources.getIdentifier(buttonID, "id", packageName)
            buttons[index] = findViewById(resourceID)
            buttons[index]?.setOnClickListener(this)
        }
    }

    //순서 표시(빨강: 순서)
    private fun viewMode() {
        if(activityPlayer){ //p1
            binding.player1.setTextColor(Color.RED)
            binding.player2.setTextColor(Color.BLACK)
        }else{//p2
            binding.player1.setTextColor(Color.BLACK)
            binding.player2.setTextColor(Color.RED)
        }
    }

    /**
     * 클릭 이벤트
     */
    override fun onClick(view: View?) {

        //해당 버튼에 값이 있으면 리턴
        if((view as Button).text.toString() != ""){
            Toast.makeText(applicationContext, "이미 체크됨", Toast.LENGTH_SHORT).show()
            return
        }

        //1. 버튼ID 변수에 담기(예: btn_2)
        val buttonId = view.resources.getResourceEntryName(view.id)

        //2. 버튼ID에서 숫자만 변수에 담기(예: 2)
        val gameStatePointer = buttonId.substring(buttonId.length-1, buttonId.length).toInt()

        //사용자 순서
        if(activityPlayer){ //p1
            //텍스트 설정
            view.text = "X"

            //텍스트 색상 설정
            view.setTextColor(Color.parseColor("#FFC34A"))

            //해당 위치에 0을 넣는다.
            gameState[gameStatePointer] = 0
        }else{ //p2
            //텍스트 설정
            view.text = "O"

            //텍스트 색상 설정
            view.setTextColor(Color.parseColor("#70FFEA"))

            //해당 위치에 1을 넣는다.
            gameState[gameStatePointer] = 1
        }
        // 순서 변경
        activityPlayer = !activityPlayer

        //순서 표시
        viewMode()
    }
}

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

[안드로이드 코틀린] tic-tac-toe 보드게임 만드는 방법 part1 - 뷰 바인딩 및 화면구성

aries574 — Thu, 6 Oct 2022 16:54:23 +0900

이번 시간에는 Tic Tac Toe 보드 게임의 화면 구성을 해보겠습니다.

Tic Tac Toe 게임은 오목처럼 번갈아 가며 클릭을 해서 누가 먼저 한 줄을 만들면

이기는 단순한 게임입니다.

1. 실행 화면
2. 뷰 바인딩
3. 메인 화면 activity_main.xml

1. 실행 화면

2. 뷰바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 메인 화면 activity_main.xml

- 설명 -

1. 플레이어 레이아웃

플레이어 이름과 승점으로 구성

차례가 되면 플레이어 이름 빨간 표시

2. 보드판 레이아웃

9개의 버튼으로 구성

플레이어1은 X, 플레이어2는 O 모양을 표시

먼저 한 줄을 만들면 점수 획득

3. 리셋 버튼을 누르면 초기화

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

    <!-- 플레이어 레이아웃 -->
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/player1"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="플레이어1"
            android:textSize="25sp" />

        <TextView
            android:id="@+id/player1Score"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/player1"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />

        <TextView
            android:id="@+id/player2"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_alignParentEnd="true"
            android:gravity="center"
            android:text="플레이어2"
            android:textSize="25sp" />

        <TextView
            android:id="@+id/player2Score"
            android:layout_width="150dp"
            android:layout_height="wrap_content"
            android:layout_below="@id/player2"
            android:layout_alignParentEnd="true"
            android:gravity="center"
            android:text="0"
            android:textSize="20sp" />
    </RelativeLayout>

    <!-- 보드판 레이아웃 -->
    <GridLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:columnCount="3"
        android:orientation="horizontal">

        <!-- 버튼0 -->
        <Button
            android:id="@+id/btn_0"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼1 -->
        <Button
            android:id="@+id/btn_1"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼2 -->
        <Button
            android:id="@+id/btn_2"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼3 -->
        <Button
            android:id="@+id/btn_3"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼4 -->
        <Button
            android:id="@+id/btn_4"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼5 -->
        <Button
            android:id="@+id/btn_5"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼6 -->
        <Button
            android:id="@+id/btn_6"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼7 -->
        <Button
            android:id="@+id/btn_7"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>

        <!-- 버튼8 -->
        <Button
            android:id="@+id/btn_8"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_columnWeight="1"
            android:layout_margin="3dp"
            android:backgroundTint="#413F43"
            android:textColor="#ffffff"
            android:textSize="60sp"
            android:textStyle="bold"/>
    </GridLayout>

    <!-- 리셋 버튼 -->
    <Button
        android:id="@+id/resetBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:backgroundTint="#E1470D"
        android:text="RESET GAME"
        android:textSize="25sp"
        android:textStyle="bold"/>
</LinearLayout>

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574.tistory.com

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

aries574.tistory.com

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part2 기능 구현

aries574 — Wed, 5 Oct 2022 13:51:29 +0900

이번 시간에는 타이머 기능 구현을 만들어 보겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.10.04 - [안드로이드] - [안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574.tistory.com

1. 실행 화면
2. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메인 코드 MainActivity.kt

- 설명 -

1. viewMode("start")

- 인자 값에 따른 화면 설정 함수

- start면 타이머 모드 cancel이면 설정 모드

2. startStop()

- 실행/정지 상태에 따른 기능 함수

- 실행 중이면 정지, 정지면 실행 함수 호출

3. stopTimer()

- 타이머 정지 함수

- 타이머 취소, 타이머 상태 값 변경, 정지 버튼 텍스트 변경

4. updateTime()

- 1초마다 타이머 변경하는 함수

class MainActivity : AppCompatActivity() {

    lateinit var binding: ActivityMainBinding

    lateinit var countDownTimer: CountDownTimer

    var timerRunning = false //타이머 실행 상태
    var firstState = false //타이머 실행 처음인지 아닌지

    var time = 0L //타이머 시간
    var tempTime = 0L //타이머 임시 시간

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        //시작 버튼
        binding.startBtn.setOnClickListener {

            viewMode("start")
            startStop()
        }

        //정지 버튼
        binding.stopBtn.setOnClickListener {
            startStop()
        }

        //취소 버튼
        binding.cancelBtn.setOnClickListener {
            viewMode("cancel")
            stopTimer()
        }
    }//onCreate

    private fun viewMode(mode: String){
        //상태: 처음
        firstState = true

        if(mode == "start"){ //타이머 모드
            binding.settingLayout.visibility = View.GONE //사라짐
            binding.timerLayout.visibility = View.VISIBLE//보여짐
        }
        else{ //설정 모드
            binding.settingLayout.visibility = View.VISIBLE //사라짐
            binding.timerLayout.visibility = View.GONE//보여짐
        }
    }

    /**
     * 타이머 실행 상태에 따른 시작&정지
     */
    private fun startStop(){
        if(timerRunning){ // 실행중이면 정지
            stopTimer()
        }else{ //정지면 실행
            startTimer()
        }
    }

    /**
     * 타이머 실행
     */
    private fun startTimer(){

        //처음 실행이면 입력값을 타이머 설정값으로 사용
        if(firstState){
            val sHour = binding.hourEdit.text.toString()
            val sMin = binding.minEdit.text.toString()
            val sSec = binding.secEdit.text.toString()

            time = (sHour.toLong() * 3600000) + (sMin.toLong() * 60000) +
                    (sSec.toLong() * 1000) + 1000
        }else{ //정지 후 이어서 시작이면 기존값 사용
            time = tempTime
        }

        //타이머 실행
        countDownTimer = object: CountDownTimer(time, 1000){
            override fun onTick(millisUnitFinished: Long) {
                tempTime = millisUnitFinished
                //타이머 업데이트
                updateTime()
            }
            override fun onFinish() {}
        }.start()

        //정지 버튼 텍스트
        binding.stopBtn.text = "일시 정지"
        //타이머 상태: 실행
        timerRunning = true
        //처음 아님
        firstState = false
    }

    /**
     * 타이머 정지
     */
    private fun stopTimer(){
        //타이머 취소
        countDownTimer.cancel()

        //타이머 상태: 정지
        timerRunning = false

        //정지버튼 텍스트
        binding.stopBtn.text = "계속"
    }

    /**
     * 타이머 업데이트
     */
    private fun updateTime(){
        val hour = tempTime / 3600000
        val min = tempTime % 3600000 / 60000
        val sec = tempTime % 3600000 % 60000 / 1000

        //시간 추가
        var timeLeftText = "$hour :"

        //분이 10보다 작으면 0 붙이기
        if(min < 10) timeLeftText += "0"

        //분 추가
        timeLeftText += "$min :"

        //초가 10보다 작으면 0 붙이기
        if(sec < 10) timeLeftText += "0"

        //초 추가
        timeLeftText += sec

        //타이머 텍스트 보여주기
        binding.timerText.text = timeLeftText
    }
}

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574.tistory.com

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

aries574.tistory.com

2022.09.26 - [안드로이드] - [안드로이드 코틀린] Ringtone 효과음 내는 방법

[안드로이드 코틀린] Ringtone 효과음 내는 방법

이번 시간에는 소리로 알림을 알려주는 방법에 대하여 알아보겠습니다. 목차 1. 실행 화면 2. 메인 화면 activity_main.xml 3. 메인 코드 MainActivity.kt 1. 실행 화면 2. 메인 화면 activity_main..

aries574.tistory.com

[안드로이드 코틀린] CountDownTimer 타이머 쉽게 만드는 방법 part1 뷰 바인딩 및 화면 구성

aries574 — Tue, 4 Oct 2022 15:22:32 +0900

이번 시간에는 뷰 바인딩 설정과 타이머 화면 구성을 만들어 보겠습니다.

1. 실행 화면
2. 뷰 바인딩
3. 메인 화면 activity_main.xml

1. 실행 화면

1-1 설정 화면

1-2 타이머 화면

2. 뷰바인딩

build.gradle(Module:프로젝트명:app)

android 괄호 안에 아래 코드를 넣어주시면 됩니다.

findViewById 없이 뷰 객체 접근하기 위한 설정

  buildFeatures{
        viewBinding = true
    }

3. 메인 화면 activity_main.xml

- 설명 -

1. 큰 틀은 설정 레이아웃과 타이머 레이아웃으로 구성

2. 설정 레이아웃은 시, 분, 초 입력과 시작 버튼으로 구성

3. 타이머 레이아웃은 타이머 텍스트와 정지 버튼, 취소 버튼으로 구성

4. 첫 화면은 설정 레이아웃을 보여주고, 시작 버튼을 누르면 타이머 레이아웃 보여준다.

5. 타이머 레이아웃은 visibility="gone" 옵션으로 숨김

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

    <!--  설정 레이아웃 -->
    <LinearLayout
        android:id="@+id/settingLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:orientation="vertical">

        <!-- 텍스트 레이아웃 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="시"
                android:textSize="30sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="분"
                android:textSize="30sp"
                android:textStyle="bold" />

            <TextView
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="초"
                android:textSize="30sp"
                android:textStyle="bold" />
        </LinearLayout>
        <!-- 텍스트 레이아웃 End-->

        <!-- 입력 레이아웃 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="10dp"
            android:gravity="center"
            android:orientation="horizontal">

            <EditText
                android:id="@+id/hourEdit"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:inputType="number"
                android:selectAllOnFocus="true"
                android:text="00"
                android:textSize="25sp" />

            <EditText
                android:id="@+id/minEdit"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:inputType="number"
                android:selectAllOnFocus="true"
                android:text="00"
                android:textSize="25sp" />

            <EditText
                android:id="@+id/secEdit"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:inputType="number"
                android:selectAllOnFocus="true"
                android:text="00"
                android:textSize="25sp" />
        </LinearLayout>
        <!-- 입력 레이아웃 End -->

        <Button
            android:id="@+id/startBtn"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_marginTop="30dp"
            android:text="시작"
            android:textSize="25sp" />
    </LinearLayout>
    <!--  설정 레이아웃 End -->

    <!-- 타이머 레이아웃 -->
    <LinearLayout
        android:id="@+id/timerLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="100dp"
        android:gravity="center"
        android:orientation="vertical"
        android:visibility="gone">

        <TextView
            android:id="@+id/timerText"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="00:00:00"
            android:textSize="50sp" />

        <!-- 버튼 레이아웃 -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="50dp"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/stopBtn"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:text="일시 정지"
                android:textSize="25sp" />

            <Button
                android:id="@+id/cancelBtn"
                android:layout_width="150dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="30dp"
                android:text="취소"
                android:textSize="25sp" />
        </LinearLayout>
    </LinearLayout>
    <!-- 타이머 레이아웃 End -->

</LinearLayout>

2022.10.03 - [안드로이드] - [안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574.tistory.com

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

aries574.tistory.com

2022.09.27 - [안드로이드] - [안드로이드 코틀린] Vibrator 진동 효과 내는 방법

[안드로이드 코틀린] Vibrator 진동 효과 내는 방법

이번 시간에는 진동으로 알림 효과 내는 방법에 대하여 알아보겠습니다. 목차 1. 권한 등록 2. 메인 화면 activity_main.xml 3. 메인 코드 MainActivity.kt 1. 권한 등록 - 설명 - 진동 효과를 내기..

aries574.tistory.com

[안드로이드 코틀린] 스톱워치 StopWatch 쉽게 만드는 방법

aries574 — Mon, 3 Oct 2022 14:59:32 +0900

이번 시간에는 스톱워치(StopWatch) 만드는 방법에 대하여 알아보겠습니다.

안드로이드에서는 Chronometer을 통해 스톱워치를 쉽게 만들 수 있습니다.

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메인 화면 activity_main.xml

- 설명 -

1. 스톱워치를 보여주는 Chronometer

2. 스톱워치 시작하는 Button

3. 스톱워치 정지하는 Button

4. 스톱워치 초기화하는 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Chronometer
        android:id="@+id/chronometer"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:gravity="center_horizontal"
        android:textSize="30sp" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:gravity="center_horizontal"
        android:orientation="horizontal">

        <Button
            android:id="@+id/startBtn"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:text="start" />

        <Button
            android:id="@+id/stopBtn"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="stop" />

        <Button
            android:id="@+id/resetBtn"
            android:layout_width="100dp"
            android:layout_height="wrap_content"
            android:layout_marginStart="20dp"
            android:text="reset" />
    </LinearLayout>
</LinearLayout>

3. 메인 코드 MainActivity.kt

- 설명 -

1. chronometer.base

스톱워치 기본 설정

2. SystemClock.elapsedRealtime()

부팅하고 이후 시간

3. chronometer.start()

스톱워치 시작

4. chronometer.stop()

스톱워치 정지

5. viewMode(mode: String)

버튼 활성화/비활성화 함수

class MainActivity : AppCompatActivity() {

    lateinit var startBtn: Button
    lateinit var stopBtn: Button
    lateinit var resetBtn: Button

    var running: Boolean = false // 상태
    var pauseTime = 0L //멈춤 시간

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

        val chronometer: Chronometer = findViewById(R.id.chronometer)
        startBtn = findViewById(R.id.startBtn)
        stopBtn = findViewById(R.id.stopBtn)
        resetBtn = findViewById(R.id.resetBtn)

        //화면 설정
        viewMode("stop")

        //시작 이벤트
        startBtn.setOnClickListener {

            //정지 상태일때만 실행
            if(!running){
                //기본 셋팅
                chronometer.base = SystemClock.elapsedRealtime() - pauseTime

                //시작
                chronometer.start()

                //화면 설정
                viewMode("start")
            }
        }

        //정지 이벤트
        stopBtn.setOnClickListener {

            //실행 상태일때만 실행
            if(running){
                //정지
                chronometer.stop()

                //정지 시간 저장
                pauseTime = SystemClock.elapsedRealtime() - chronometer.base

                //화면 설정
                viewMode("stop")
            }
        }

        //초기화 이벤트
        resetBtn.setOnClickListener {
            //기본 셋팅
            chronometer.base = SystemClock.elapsedRealtime()

            //정지 시간 초기화
            pauseTime = 0L

            //정지
            chronometer.stop()

            //화면 설정
            viewMode("stop")
        }

    }//onCreate

    //화면 설정
    private fun viewMode(mode: String){

        //활성화 처리
        if(mode == "start"){
            startBtn.isEnabled = false
            stopBtn.isEnabled = true
            resetBtn.isEnabled = true
            running = true
        }else{
            startBtn.isEnabled = true
            stopBtn.isEnabled = false
            resetBtn.isEnabled = false
            running = false
        }
    }
}

2022.09.30 - [안드로이드] - [안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

aries574.tistory.com

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

2022.09.22 - [안드로이드] - [안드로이드 코틀린] RecyclerView 다중 선택 색상 변경하는 방법

[안드로이드 코틀린] RecyclerView 다중 선택 색상 변경하는 방법

이번 시간에는 RecyclerView로 만든 리스트의 아이템 다중 선택하는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 아이템 클래스 Item.kt 3. 아이템 화면 list_item.xml 4. 아이템 어댑터 ItemAdapte..

aries574.tistory.com

[안드로이드 코틀린] HTTP Glide 이미지 쉽게 보여주는 방법

aries574 — Fri, 30 Sep 2022 14:11:16 +0900

이번 시간에는 Glide 라이브러리를 이용해서 이미지 쉽게 보여주는 방법을 알아보겠습니다.

1. 실행 화면
2. 권한 등록
3. 라이브러리 등록
4. 메인 화면 activity_main.xml
5. 메인 코드 MainActivity.kt

1. 실행 화면

2. 권한 등록

AndroidManifest.xml

2-1 권한 등록

manifest 태그 안에 추가합니다.

    <uses-permission android:name="android.permission.INTERNET"/>

2-2 http통신 허용

application 태그 안에 옵션을 추가합니다.

android:usesCleartextTraffic="true"

3. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

    implementation 'com.github.bumptech.glide:glide:4.14.1'
    annotationProcessor 'com.github.bumptech.glide:compiler:4.14.1'

참조 문서

https://github.com/bumptech/glide

GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

An image loading and caching library for Android focused on smooth scrolling - GitHub - bumptech/glide: An image loading and caching library for Android focused on smooth scrolling

github.com

4. 메인 화면 activity_main.xml

- 설명 -

1. api 호출한 이미지 보여주는 ImageView

2. api 호출하는 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <ImageView
        android:id="@+id/imaegView"
        android:layout_width="match_parent"
        android:layout_height="300dp" />

    <Button
        android:id="@+id/searchBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="30dp"
        android:text="이미지 보여주기"
        android:textSize="20sp" />

</LinearLayout>

5. 메인 코드 MainActivity.kt

- 설명 -

1. with(this)

Context

2. .load(url)

이미지 위치

3. .placeholder(R.drawable.frame)

이미지 로딩 시에 보여줄 이미지

4. .error(R.drawable.error)

오류 발생 시에 보여줄 이미지

5. .into(imageView)

이미지 보여줄 뷰

6. 이미지 res -> drawable

class MainActivity : AppCompatActivity() {

    lateinit var imageView: ImageView

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

        imageView = findViewById(R.id.imaegView)

        val searchBtn: Button = findViewById(R.id.searchBtn)
        searchBtn.setOnClickListener {

            //이미지 가져오기
            showImage()
        }
    }

    /**
     * 이미지 보여주기
     */
    private fun showImage(){

        val url = "https://picsum.photos/200"

        Glide.with(this)
            .load(url)//이미지 위치
            .placeholder(R.drawable.frame)//로딩 이미지
            .error(R.drawable.error)//에러 이미지
            .into(imageView)//보여줄 위치
    }
}

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

2022.09.27 - [안드로이드] - [안드로이드 코틀린] Vibrator 진동 효과 내는 방법

[안드로이드 코틀린] Vibrator 진동 효과 내는 방법

aries574.tistory.com

2022.09.26 - [안드로이드] - [안드로이드 코틀린] Ringtone 효과음 내는 방법

[안드로이드 코틀린] Ringtone 효과음 내는 방법

aries574.tistory.com

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part2 - 화면 및 기능

aries574 — Thu, 29 Sep 2022 14:58:23 +0900

Retrofit2 라이브러리를 이용해서 HTTP 통신을 하는 방법을 알아보겠습니다.

이번 시간에는 화면 및 기능을 구현하겠습니다.

이전 포스팅은 아래 링크를 들어가시면 됩니다.

2022.09.28 - [안드로이드] - [안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574.tistory.com

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메인 화면 activity_main.xml

- 설명 -

1. api 호출 데이터 값 보여주는 TextView

2. 조회 코인 입력 EditText

3. api 호출 기능 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"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/resultText"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:textSize="20sp" />

    <EditText
        android:id="@+id/coinEdit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp" />

    <Button
        android:id="@+id/searchBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:text="조회" />

</LinearLayout>

3. 메인 코드 MainActivity.kt

- 설명 -

1. val retrofit: Retrofit = Retrofit.Builder()

retrofit2 객체 생성

2. val apiService: ApiService = retrofit.create(ApiService::class.java)

service 객체 생성

3. val tickerCall = apiService.getCoinTicker(coinNm, "KRW")

Call객체 생성

4. tickerCall.enqueue(object: Callback<Ticker>

네트워크 통신

5. api 문서

https://apidocs.bithumb.com/reference/현재가-정보-조회

현재가 정보 조회 (자산별)

현재가 정보 조회 (자산별)get https://api.bithumb.com/public/ticker/_요청 당시 빗썸 거래소 가상자산 현재가 정보를 제공합니다. 필드설명타입status결과 상태 코드 (정상: 0000, 그 외 에러 코드 참조)Stringop

apidocs.bithumb.com

class MainActivity : AppCompatActivity() {

    lateinit var coinEdit: EditText
    lateinit var resultText: TextView

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

        coinEdit = findViewById(R.id.coinEdit)
        resultText = findViewById(R.id.resultText)
        val searchBtn: Button = findViewById(R.id.searchBtn)

        //버튼 클릭 이벤트
        searchBtn.setOnClickListener {
            //초기화
            resultText.text = ""

            //api 호출
            apiRequest()
        }
    }

    /**
     * HTTP api 호출
     */
    private fun apiRequest(){

        //1. retrofit 객체 생성
        val retrofit: Retrofit = Retrofit.Builder()
            .baseUrl("https://api.bithumb.com/")
            .addConverterFactory(GsonConverterFactory.create())
            .build()

        //2. service 객체 생성
        val apiService: ApiService = retrofit.create(ApiService::class.java)

        //3. Call객체 생성
        val coinNm = coinEdit.text.toString().uppercase()//입력값, 대문자로
        val tickerCall = apiService.getCoinTicker(coinNm, "KRW")

        //4. 네트워크 통신
        tickerCall.enqueue(object: Callback<Ticker>{
            override fun onResponse(call: Call<Ticker>, response: Response<Ticker>) {
                //호출 데이터
                val tickerInfo = response.body()

                resultText.append("status: ${tickerInfo?.status} \n")
                resultText.append("closing_price: ${tickerInfo?.data?.closing_price} \n")
                resultText.append("opening_price: ${tickerInfo?.data?.opening_price} \n")
                resultText.append("max_price: ${tickerInfo?.data?.max_price} \n")
                resultText.append("min_price: ${tickerInfo?.data?.min_price} \n")
            }

            override fun onFailure(call: Call<Ticker>, t: Throwable) {
                //오류 시 발생
                call.cancel()
            }
        })
    }

}

2022.09.27 - [안드로이드] - [안드로이드 코틀린] Vibrator 진동 효과 내는 방법

[안드로이드 코틀린] Vibrator 진동 효과 내는 방법

aries574.tistory.com

2022.09.26 - [안드로이드] - [안드로이드 코틀린] Ringtone 효과음 내는 방법

[안드로이드 코틀린] Ringtone 효과음 내는 방법

aries574.tistory.com

2022.09.22 - [안드로이드] - [안드로이드 코틀린] RecyclerView 다중 선택 색상 변경하는 방법

[안드로이드 코틀린] RecyclerView 다중 선택 색상 변경하는 방법

aries574.tistory.com

[안드로이드 코틀린] HTTP 통신 Retrofit2 사용법 part1 - 권한 및 설정

aries574 — Wed, 28 Sep 2022 17:35:21 +0900

Retrofit2 라이브러리를 이용해서 HTTP 통신을 하는 방법을 알아보겠습니다.

이번 시간에는 권한 및 설정을 하겠습니다.

1. 권한 등록
2. 라이브러리 등록
3. 모델 클래스
4. 서비스 인터페이스

1. 권한 등록

AndroidManifest.xml

1-1 권한 등록

manifest 태그 안에 추가합니다.

    <uses-permission android:name="android.permission.INTERNET"/>

1-2 http통신 허용

application 태그 안에 옵션을 추가합니다.

android:usesCleartextTraffic="true"

2. 라이브러리 등록

build.gradle(Module:프로젝트명:app)

dependencies 괄호 안에 아래 코드를 넣어주시면 됩니다.

converter-gson: 호출해서 받은 json타입을 모델 클래스에 넣어주는 일을 합니다.

retrofit: Retrofit을 사용하기 위한 필수 라이브러리입니다.

    implementation 'com.squareup.retrofit2:converter-gson:2.9.0'
    implementation 'com.squareup.retrofit2:retrofit:2.9.0'

3. 모델 클래스

3-1 호출받을 데이터

{
	"status":"0000",
	"data":{
		"opening_price":"41990",
		"closing_price":"39250",
		"min_price":"38850",
		"max_price":"42040",
		"units_traded":"286216.39811369",
		"acc_trade_value":"11540564673.1119",
		"prev_closing_price":"42000",
		"units_traded_24H":"599231.9692916",
		"acc_trade_value_24H":"24648790492.2505",
		"fluctate_24H":"-2070",
		"fluctate_rate_24H":"-5.01",
		"date":"1664333725925"
	}
}

3-2 Ticker.kt

- 설명 -

1. status: status 받을 변수.

2. data: data안의 데이터를 받을 변수

3. 이름을 같게 해야 합니다.

4. 변수명 위에 @SerializedName("opening_price") 같이 하면 변수명을 똑같이 하지 않아도 됩니다.

5. 언더바 뒤에 첫 글자를 대문자로 변경하면 @SerializedName을 안해도 됩니다.

예: opening_price -> openingPrice

data class Ticker(

    val status: String,
    val data: Data
)

3-3 Data.kt

- 설명 -

data 안의 키값과 같은 이름으로 정해야 합니다.

data class Data(
    val opening_price: String,
    val closing_price: String,
    val min_price: String,
    val max_price: String
)

4. 서비스 인터페이스

- 설명 -

1. 호출할 api 정보로 만든 함수가 있는 인터페이스

2. @GET("public/ticker/{order_currency}_{payment_currency}")

GET방식으로 통신하며, { } 안에는 경로를 동적으로 호출하고 싶을 때 필요합니다.

공통 url 주소는 실제 이 함수를 호출할 때 지정합니다.

3. api 문서: https://apidocs.bithumb.com/reference/현재가-정보-조회

실제 호출 api : https://api.bithumb.com/public/ticker/ETC_KRW

interface ApiService {

    @GET("public/ticker/{order_currency}_{payment_currency}")
    fun getCoinTicker(
        @Path("order_currency") orderCurrency: String,
        @Path("payment_currency") paymentCurrency: String
    ): Call<Ticker>
}

2022.09.27 - [안드로이드] - [안드로이드 코틀린] Vibrator 진동 효과 내는 방법

[안드로이드 코틀린] Vibrator 진동 효과 내는 방법

aries574.tistory.com

2022.09.26 - [안드로이드] - [안드로이드 코틀린] Ringtone 효과음 내는 방법

[안드로이드 코틀린] Ringtone 효과음 내는 방법

aries574.tistory.com

2022.09.23 - [안드로이드] - [안드로이드 코틀린] RecyclerView 다중 선택 삭제하는 방법

[안드로이드 코틀린] RecyclerView 다중 선택 삭제하는 방법

이번 시간에는 다중 선택에 이어서 다중 삭제하는 방법에 대하여 알아보겠습니다. 이전 포스팅에 이어서 하니 아래 포스팅을 먼저 보시고 오시면 됩니다. 2022.09.22 - [안드로이드] - [안드로이드

aries574.tistory.com

[안드로이드 코틀린] Vibrator 진동 효과 내는 방법

aries574 — Tue, 27 Sep 2022 13:10:12 +0900

이번 시간에는 진동으로 알림 효과 내는 방법에 대하여 알아보겠습니다.

1. 권한 등록
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

1. 권한 등록

- 설명 -

진동 효과를 내기 위해서는 권한을 등록해야 합니다.

application 태그 위에 입력하면 됩니다.

manifests -> AndroidManifest.xml

 <uses-permission android:name="android.permission.VIBRATE" />

2. 메인 화면 activity_main.xml

- 설명 -

1. 진동 기능 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"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/vibBtn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="진동"
        android:textSize="20sp" />

</LinearLayout>

3. 메인 코드 MainActivity.kt

- 설명 -

1. getSystemService(VIBRATOR_SERVICE)

진동 객체 가져오기

2. if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.O)

안드로이드 버전 8 기준으로 진동 기능 구현이 달라집니다.

3. VibrationEffect.createOneShot(500, VibrationEffect.DEFAULT_AMPLITUDE)

진동 시간과 진동 세기를 조절할 수 있습니다. 진동 세기는 1 ~ 255 정할 수도 있습니다.

class MainActivity : AppCompatActivity() {

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

        val vibBtn: Button = findViewById(R.id.vibBtn)
        vibBtn.setOnClickListener {
            //진동
            showVibrator()
        }
    }

    //진동 이벤트
    private fun showVibrator(){

        val vibrator = getSystemService(VIBRATOR_SERVICE) as Vibrator

        //버전 오레오, 그 이상(안드로이드 8)
        if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.O){
            //진동시간, 세기 설정(0.5초, 기본세기)
            vibrator.vibrate(VibrationEffect.createOneShot(500, VibrationEffect.DEFAULT_AMPLITUDE))
        }else{ //오레오 이하
            //0.5초동안 울림
            vibrator.vibrate(500)
        }
    }
}

2022.09.26 - [안드로이드] - [안드로이드 코틀린] Ringtone 효과음 내는 방법

[안드로이드 코틀린] Ringtone 효과음 내는 방법

aries574.tistory.com

2022.09.21 - [안드로이드] - [안드로이드 코트린] SharedPreferences 간단한 데이터 저장하는 방법

[안드로이드 코트린] SharedPreferences 간단한 데이터 저장하는 방법

이번 시간에는 앱에서 아이디, 패스워드를 한번 입력하면 나중에 들어왔을 때 정보가 사라지지 않는 방법을 알아보겠습니다. 목차 1. 실행 화면 2. 메인 화면 activity_main.xml 3. 메인 코드 MainA

aries574.tistory.com

2022.09.20 - [안드로이드] - [안드로이드 코틀린] 코드(MainActivity)에서 배경 색상 바꾸는 다양한 방법

[안드로이드 코틀린] 코드(MainActivity) 에서 배경 색상 바꾸는 다양한 방법

aries574.tistory.com

[안드로이드 코틀린] Ringtone 효과음 내는 방법

aries574 — Mon, 26 Sep 2022 18:45:14 +0900

이번 시간에는 소리로 알림을 알려주는 방법에 대하여 알아보겠습니다.

1. 실행 화면
2. 메인 화면 activity_main.xml
3. 메인 코드 MainActivity.kt

1. 실행 화면

2. 메인 화면 activity_main.xml

- 설명 -

1. 시스템 효과음 들려주는 Button

2. 사용자 정의 효과음 들려주는 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"
    android:orientation="vertical"
    android:gravity="center"
    tools:context=".MainActivity">

    <Button
        android:id="@+id/systemBtn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="시스템 소리"
        android:textSize="20sp"
        android:onClick="getSound"/>

    <Button
        android:id="@+id/customBtn"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:text="사용자 소리"
        android:textSize="20sp"
        android:onClick="getSound"/>
</LinearLayout>

3. 메인 코드 MainActivity.kt

- 설명 -

1. RingtoneManager.getDefaultUri

소리 얻기

2. RingtoneManager.getRingtone

소리 담기

3. ringtone.play()

소리 실행

4. MediaPlayer.create

사용자 정의 음악 만들기

5. 음악 폴더 생성

res -> New -> Android Resource Directory -> Resource type : raw

6. res -> raw

tiny_button_push_sound.mp3

0.01MB

✔ Tiny Button Push Sound by Mike Koenig
✔ From
http://soundbible.com/419-Tiny-Button-Push.html
✔ Distributor
‘대한민국 대표 BGM 셀바이뮤직’ https://www.sellbuymusic.com

class MainActivity : AppCompatActivity() {

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

    //소리 알림
    fun getSound(view: View) {

        when(view.id){

            //시스템 소리
            R.id.systemBtn -> {
                //소리 얻기
                var sound: Uri = RingtoneManager.getDefaultUri(RingtoneManager.TYPE_NOTIFICATION)

                //소리 담기
                val ringtone = RingtoneManager.getRingtone(applicationContext, sound)

                //실행
                ringtone.play()
            }
            //사용자 정의
            R.id.customBtn -> {

                //소리 얻기
                val player: MediaPlayer = MediaPlayer.create(this, R.raw.tiny_button_push_sound)

                //실행
               player.start()
            }
        }// when
    }//getSound()
}

2022.09.22 - [안드로이드] - [안드로이드 코틀린] RecyclerView 다중 선택 색상 변경하는 방법

[안드로이드 코틀린] RecyclerView 다중 선택 색상 변경하는 방법

aries574.tistory.com

2022.09.21 - [안드로이드] - [안드로이드 코트린] SharedPreferences 간단한 데이터 저장하는 방법

[안드로이드 코트린] SharedPreferences 간단한 데이터 저장하는 방법

aries574.tistory.com

2022.09.19 - [안드로이드] - [안드로이드 코틀린] RecyclerView 홀수 행, 짝수 행 별 색상 다르게 하는 방법

[안드로이드 코틀린] RecyclerView 홀수 행, 짝수 행 별 색상 다르게 하는 방법

aries574.tistory.com

만들면서 배워가는 프로그래머

[안드로이드 코틀린] Compose - 버튼 클릭해서 숫자 카운트 하는 방법

목차

1. 실행 화면

2. 카운트 기능 함수

3. 레이아웃 함수

4. 전체 코드

1. 실행 화면

2. 카운트 기능 함수

3. 레이아웃 함수

4. 전체 코드

[안드로이드 코틀린] Compose - 커스텀 텍스트뷰 만드는 방법

목차

1. 실행 화면

2. 텍스트 스타일링

3. 텍스트 정렬

4. 텍스트뷰 가로, 세로

5. 텍스트 글자 간격

6. 텍스트 줄 간격

7. 텍스트 최대 줄 개수

1. 실행 화면

2. 텍스트 스타일링

3. 텍스트 정렬

4. 텍스트뷰 가로, 세로

5. 텍스트 글자 간격

6. 텍스트 줄 간격

7. 텍스트 최대 줄 개수

[안드로이드 코틀린] Compose - 클릭 이벤트(Click Event)와 메시지(Toast) 알림

목차

1. 실행 화면

2. 메시지 함수

3. 버튼 클릭 컴포저블

4. 이미지 클릭 컴포저블

5. 텍스트 클릭 컴포저블

6. 박스 클릭 컴포저블

7. 전체 코드

1. 실행 화면

2. 메시지 함수

3. 버튼 클릭 컴포저블

4. 이미지 클릭 컴포저블

5. 텍스트 클릭 컴포저블

6. 박스 클릭 컴포저블

7. 전체 코드

[안드로이드 코틀린] Compose - 박스 모양(shape) 변경과 외곽선(border) 주는 방법

목차

1. 미리 보기

2. 박스 함수

3. 모양 변경(shape)

4. 외곽선 설정(border)

5. 전체 코드

1. 미리 보기

2. 박스 함수

3. 모양 변경(shape)

4. 외곽선 설정(border)

5. 전체 코드

[안드로이드 코틀린] Compose Modifier - 크기, 간격, 가중치 설정하는 방법

목차

1. 크기 2. 간격 3. 가중치

1. 크기

2. 간격

3. 가중치

[안드로이드 코틀린] Compose LazyColumn - 간단한 리스트 보여주는 방법

목차

1. 실행 화면 2. 데이터 클래스 3. UserView 함수 4. SimpleListView 함수 5. 전체 코드

1. 실행 화면

2. 데이터 클래스

3. UserView 함수

4. SimpleListView 함수

5. 전체 코드

[안드로이드 코틀린] Compose 레이아웃 - Box 요소 겹치기

목차

1. 샘플 박스 만들기

2. 미리 보기

3. Column 사용 방법

1. 샘플 박스 만들기

2. 미리 보기

3. Box사용 방법

[안드로이드 코틀린] Compose 레이아웃 - Column 세로 정렬하는 방법

목차

1. 샘플 박스 만들기

1. 크기
2. 간격
3. 가중치

1. 실행 화면
2. 데이터 클래스
3. UserView 함수
4. SimpleListView 함수
5. 전체 코드

1. 실행 화면
2. 라이브러리 등록
3. 내비게이션 파일 만들기
4. 프래그먼트 생성
5. 내비게이션 파일에 프래그먼트 연결
6. 프래그먼트 설정
7. 애니메이션 파일 만들기
8. 메인 화면 구성 activity_main.xml

1. 실행 화면
2. 라이브러리 등록
3. 사용자 클래스 만들기
4. 내비게이션 설정
5. 프래그먼트 설정