[코스모스 9주차] Compose UI 기초심화와 연습 앱 개발 (with xml)

Code Editing

: 반복 줄이기 (반복돼서 나오는 것들을 한 번에 나오게 해 줌)

@Composable
fun myTextFormat2(content : @Composable () -> Unit) {
    content()
}

@Composable
fun MyTextArea3() {
    Text(
        text = "안녕",
        fontSize = 100.sp,
        color = Color.Red
    )
}

ㄴ 이건... 별로 쓸 일은 없지만 간간히 메모리 줄일 때 사용하면 효율적일 것 같다

 

show / hide

: 나타나거나 사라지도록 만들기

ㄴ 앱 개발 시 조금 더 3D스러운 앱을 만들 때 사용하면 좋을 듯

@Composable
fun MyShowHideEx1() {
    var isButtonVisible by remember { mutableStateOf(false) }

    Column(
        modifier = Modifier.fillMaxSize(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Button(
            onClick = { // 버튼이 눌리면 밑 변수가 참이 됨
            isButtonVisible = !isButtonVisible
        }
        ) {
            if (isButtonVisible) {
                Text(
                    text = "숨기기",
                    fontSize = 50.sp,
                )
            } else {
                Text(
                    text = "보이기",
                    fontSize = 50.sp,
                )
            }

        }
        if (isButtonVisible) {
            Button(onClick = { /*TODO*/ }) {
                Text(
                    text = "짠짠짠",
                    fontSize = 50.sp
                )
            }
        }
    }

}

ㄴ 버튼을 눌러서 보이게 하거나 안 보이게 하는 것 텍스트가!!

 

@Composable
fun MyShowHideEx2() {
    var switchState by remember {
        mutableStateOf(false) // 스위치를 거짓으로 고정해 둠
    }

    Column(
        modifier = Modifier.padding(20.dp)
    ) {
        Switch(
            checked = switchState,// 스위치의 상태 설정해 주기
            onCheckedChange = { checked ->
                switchState = checked
            }
        )
        Text(
            text = if (switchState) "ON" else "OFF",
            fontSize = 100.sp
        )
    }
}

ㄴ 이건 다른 예시인데 스위치를 껐다 켜는 것을 구현해 둔 것임

 

그리고 대망의...

Navigation

: 흔히 아는 주로 하단! 네비게이션 바, 프레그먼트 호환 화면 만들기

// build.gradle (.app)
dependencies {
	implementation("androidx.navigation:navigation-compose:2.7.7")
} // 네비게이션을 추가해 주어야 함

ㄴ 초기 세팅 시 gradle에서 implementation을 추가해 주어야 네비게이션 구현 가능

 

@Composable
fun Ex(navController: NavHostController) {
    Button(onClick = {
        navController.navigate("myScreen")
    }) {
    }
}

그리고 버튼을 눌렀을 때 myScreen이 보이도록!

 

@Composable
fun MyNav() {
    val navController = rememberNavController()

    NavHost(navController = navController, startDestination = "go") {
        composable("myScreen") {
            MyScreen(navController = navController)
        }
    }
}

myscreen 구현...

 

솔직히 xml보다는 간단하지만 뭔가 복잡함...

 

이제 앱 개발 연습!

간단하게 앨범을 넘길 수 있는 앱을 개발해 보았음

        val pic1 = findViewById<ImageView>(R.id.pic1)
        pic1.setOnClickListener {
            Toast.makeText(this, "1번 클릭 완료", Toast.LENGTH_LONG).show()

            val intent = Intent(this, pic1::class.java)
            startActivity(intent)
        }

ㄴ 1번을 누르면 1번 이미지가 커지는 화면을 1-6번까지 구현한 앱

• pic1이라는 변수에 layout에서 지정해 둔 id로 그 id에 해당하는 사진을 지정해 둔다 → R.id 필수?
• Toast → 실행 알림? 같은 거 뜨게 해 줌 → LENGTH_LONG은 어디에 쓰는 것?
• val intent 구문은 화면 전환 때 쓰는 구문
  • 여기서 this는 현재 엑티비티를 뜻하고, 그 콤마 뒤 오는 것은 전환할 엑티비티를 뜻함
  • startActivity 안 하면 화면 전환 안 됨

이런 앨범 앱을 카드 기반으로 둥글게도 만들 수 있음

<androidx.cardview.widget.CardView
	app:cardCornerRadius="60dp">

val bt6 = findViewById<ImageView>(R.id.mem6)
        bt1.setOnClickListener {

            val intent = Intent(this, InsideActivity::class.java)
            intent.putExtra("data", "1")
            startActivity(intent)
        }

ㄴ 카드 기반의 레이아웃을 만졌을 때 데이터를 전송하고 화면을 넘기도록 구현

 

val getD = intent.getStringExtra("data")

        val memImg = findViewById<ImageView>(R.id.mem1pic)

        if (getD == "1") {
            memImg.setImageResource(R.drawable.mem1pic)
        }

ㄴ 데이터를 받아와서 비교한 후 이미지 소스를 지정할 수 있도록 구현