수료 제출

Unit1/Pathway3/BirthdayCard/app/src/main/java/com/example/happybirthday/MainActivity.kt

@@ -13,6 +13,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+
 package com.example.happybirthday
 
 import android.os.Bundle
@@ -30,6 +31,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
@@ -38,23 +40,61 @@ import com.example.happybirthday.ui.theme.HappyBirthdayTheme
 class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
- setContent { }
+ setContent {
+ HappyBirthdayTheme {
+ Surface(color = MaterialTheme.colors.background) {
+ BirthdayGreetingWithImage(
+ message = getString(R.string.happy_birthday_text),
+ from = getString(R.string.signature_text)
+ )
+ }
+ }
+ }
  }
 }
 
-// 7. 텍스트 정렬 및 패딩 추가
 @Composable
-fun BirthdayGreetingWithText(message: String, from: String) {
- // Create a column so that texts don't overlap
- Column { }
+fun BirthdayGreetingWithImage(message: String, from: String) {
+ val image = painterResource(id = R.drawable.androidparty)
+ Box{
+ Image(
+ painter = image,
+ contentDescription = null,
+ modifier = Modifier
+ .fillMaxHeight()
+ .fillMaxHeight(),
+ contentScale = ContentScale.Crop
+ )
+ BirthdayGreetingWithText(message = message, from = from)
+ }
 }
 
-// 5. Box 레이아웃 추
+@Preview(showBackground = true)
 @Composable
-fun BirthdayGreetingWithImage(message: String, from: String) { }
+private fun BirthdayCardPreview() {
+ HappyBirthdayTheme{
+ BirthdayGreetingWithImage("Happy Birthday Sam", "- from Emma")
+ }
+}
 
-// 4. 이미지 컴포저블 추가
-@Preview(showBackground = false)
 @Composable
-private fun BirthdayCardPreview() { }
-
+private fun BirthdayGreetingWithText(message: String, from: String) {
+ Column(){
+ Text(
+ text = message,
+ fontSize = 36.sp,
+ modifier = Modifier
+ .fillMaxWidth()
+ .wrapContentWidth(Alignment.CenterHorizontally)
+ .padding(start = 16.dp, top = 16.dp),
+ )
+ Text(
+ text = from,
+ fontSize = 24.sp,
+ modifier = Modifier
+ .fillMaxWidth()
+ .wrapContentWidth(Alignment.CenterHorizontally)
+ .padding(start = 16.dp, end = 16.dp)
+ )
+ }
+}

Unit1/Pathway3/BirthdayCard/app/src/main/res/values/strings.xml

@@ -16,4 +16,6 @@
  -->
 <resources>
  <string name="app_name">Happy Birthday</string>
+ <string name="happy_birthday_text">Happy Birthday Sam</string>
+ <string name="signature_text">from emma</string>
 </resources>

Unit1/Pathway3/ComposeArticle/app/src/main/java/com/example/composearticle/MainActivity.kt

@@ -4,13 +4,12 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.compose.foundation.Image
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.*
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.res.painterResource
@@ -24,12 +23,24 @@ import com.example.composearticle.ui.theme.ComposeArticleTheme
 class MainActivity : ComponentActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
- setContent { }
+ setContent {
+ ComposeArticleApp()
+ }
  }
 }
 
 @Composable
-fun ComposeArticleApp() { }
+fun ComposeArticleApp() {
+ val image = painterResource(id = R.drawable.bg_compose_background)
+ ComposeArticleTheme() {
+ ArticleCard(
+ title = stringResource(R.string.title),
+ shortDescription = stringResource(R.string.shortdescription),
+ longDescription = stringResource(R.string.longdescription),
+ imagePainter = image
+ )
+ }
+}
 
 @Composable
 private fun ArticleCard(
@@ -39,10 +50,51 @@ private fun ArticleCard(
  imagePainter: Painter,
  modifier: Modifier = Modifier,
 ) {
- Column() { }
+ Column() {
+
+ Image(
+ imagePainter,
+ contentDescription = null,
+ modifier = Modifier.fillMaxWidth()
+ )
+ Text(
+ title,
+ fontSize = 24.sp,
+ modifier = Modifier
+ .padding(
+ start = 16.dp,
+ end = 16.dp,
+ top = 16.dp,
+ bottom = 16.dp
+ )
+ )
+
+ Text(
+ shortDescription,
+ modifier = Modifier
+ .padding(
+ start = 16.dp,
+ end = 16.dp
+ ),
+ textAlign = TextAlign.Justify
+ )
+ Text(
+ longDescription,
+ modifier = Modifier
+ .padding(
+ start = 16.dp,
+ end = 16.dp,
+ top = 16.dp,
+ bottom = 16.dp
+ ),
+ textAlign = TextAlign.Justify
+ )
+ }
 }
 
 
 @Preview(showBackground = true)
 @Composable
-fun DefaultPreview() { }
+fun DefaultPreview() {
+ ComposeArticleApp()
+}

Unit1/Pathway3/ComposeArticle/app/src/main/res/values/strings.xml

@@ -4,4 +4,7 @@
  <string name="title_jetpack_compose_tutorial">Jetpack Compose tutorial</string>
  <string name="compose_short_desc">Jetpack Compose is a modern toolkit for building native Android UI. Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.</string>
  <string name="compose_long_desc">In this tutorial, you build a simple UI component with declarative functions. You call Compose functions to say what elements you want and the Compose compiler does the rest. Compose is built around Composable functions. These functions let you define your app\'s UI programmatically because they let you describe how it should look and provide data dependencies, rather than focus on the process of the UI\'s construction, such as initializing an element and then attaching it to a parent. To create a Composable function, you add the @Composable annotation to the function name.</string>
+ <string name="title">Jetpack Compose tutorial</string>
+ <string name="shortdescription">Jetpack Compose is a modern toolkit for building native Android UI. Compose simplifies and accelerates UI development on Android with less code, powerful tools, and intuitive Kotlin APIs.</string>
+ <string name="longdescription">In this tutorial, you build a simple UI component with declarative functions. You call Compose functions to say what elements you want and the Compose compiler does the rest. Compose is built around Composable functions. These functions let you define your app\'s UI programmatically because they let you describe how it should look and provide data dependencies, rather than focus on the process of the UI\'s construction, such as initializing an element and then attaching it to a parent. To create a Composable function, you add the @Composable annotation to the function name.</string>
 </resources>