PhotoScreen.kt

import androidx.compose.foundation.Image
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.colorResource
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.SpanStyle
import androidx.compose.ui.text.buildAnnotatedString
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.withStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.constraintlayout.compose.ConstraintLayout
import com.shopping.list.R

@Composable
@Preview(showSystemUi = true)
fun PhotoScreen() {
    ConstraintLayout(
        modifier = Modifier.fillMaxSize()
    ) {
        val (profilePhoto, username, more, image, like, comment, send, save, numberOfLike, accountDesc, numberOfComment, daysAgo) = createRefs()

        Image(
            painter = painterResource(R.drawable.ic_profile_photo),
            contentDescription = "avatar",
            contentScale = ContentScale.Crop,
            modifier = Modifier
                .size(64.dp)
                .clip(CircleShape)
                .border(2.dp, Color.Gray, CircleShape)
                .constrainAs(profilePhoto) {
                    top.linkTo(anchor = parent.top, margin = 10.dp)
                    start.linkTo(anchor = parent.start, margin = 10.dp)
                }
        )

        Text(
            modifier = Modifier
                .wrapContentWidth()
                .padding(start = 10.dp)
                .constrainAs(username) {
                    start.linkTo(anchor = profilePhoto.end, margin = 5.dp)
                    centerVerticallyTo(profilePhoto)
                },
            text = "gokmenbayram",
            fontWeight = FontWeight.Bold,
            color = Color.Black
        )

        Icon(
            modifier = Modifier
                .width(18.dp)
                .height(18.dp)
                .padding(end = 5.dp)
                .constrainAs(more) {
                    end.linkTo(anchor = parent.end, margin = 5.dp)
                    centerVerticallyTo(profilePhoto)
                },
            painter = painterResource(id = R.drawable.ic_more),
            contentDescription = null,
        )

        Image(
            modifier = Modifier
                .fillMaxWidth()
                .height(200.dp)
                .padding(top = 5.dp)
                .constrainAs(image) {
                    top.linkTo(profilePhoto.bottom)

                },
            painter = painterResource(id = R.drawable.img_forest),
            contentDescription = "",
            contentScale = ContentScale.FillBounds
        )

        Icon(
            modifier = Modifier
                .width(18.dp)
                .height(18.dp)
               // .padding(start = 10.dp)
                .constrainAs(like) {
                    top.linkTo(anchor = image.bottom, margin = 5.dp)
                    start.linkTo(anchor = profilePhoto.start)
                },
            painter = painterResource(id = R.drawable.ic_like),
            contentDescription = null
        )

        Icon(
            modifier = Modifier
                .width(17.dp)
                .height(17.dp)
               // .padding(start = 10.dp)
                .constrainAs(comment) {
                    top.linkTo(anchor = like.top)
                    start.linkTo(anchor = like.end, margin = 5.dp)
                },
            painter = painterResource(id = R.drawable.ic_comment),
            contentDescription = null
        )

        Icon(
            modifier = Modifier
                .width(17.dp)
                .height(17.dp)
               // .padding(start = 10.dp)
                .constrainAs(send) {
                    top.linkTo(anchor = comment.top)
                    start.linkTo(anchor = comment.end, margin = 5.dp)
                },
            painter = painterResource(id = R.drawable.ic_send),
            contentDescription = null
        )

        Icon(
            modifier = Modifier
                .width(23.dp)
                .height(23.dp)
                .padding(start = 10.dp)
                .constrainAs(save) {
                    top.linkTo(anchor = image.bottom, margin = 5.dp)
                    end.linkTo(anchor = parent.end, margin = 5.dp)
                },
            painter = painterResource(id = R.drawable.ic_save),
            contentDescription = null
        )

        val numberOfLikeText = buildAnnotatedString {
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                append("695 diğer kişi")
            }
            append(" bunu beğendi")
        }

        Text(
            modifier = Modifier
                .wrapContentSize()
                .constrainAs(numberOfLike) {
                    top.linkTo(anchor = like.bottom, margin = 5.dp)
                    start.linkTo(anchor = like.start)
                },
            text = numberOfLikeText
        )

        val accountDescText = buildAnnotatedString {
            withStyle(style = SpanStyle(fontWeight = FontWeight.Bold)) {
                append("gokmenbayram")
            }
            append(" Güzel bir orman fotoğrafı.")
        }

        Text(
            modifier = Modifier
                .wrapContentSize()
                .constrainAs(accountDesc) {
                    top.linkTo(anchor = numberOfLike.bottom, 5.dp)
                    start.linkTo(anchor = numberOfLike.start)
                },
            text = accountDescText
        )

        Text(
            modifier = Modifier
                .wrapContentSize()
                .constrainAs(numberOfComment) {
                    top.linkTo(anchor = accountDesc.bottom, margin = 5.dp)
                    start.linkTo(anchor = accountDesc.start)
                },
            text = "6 yorumun tümünü gör",
            color = colorResource(id = R.color.light_gray)
        )

        Text(
            modifier = Modifier
                .wrapContentSize()
                .constrainAs(daysAgo) {
                    top.linkTo(anchor = numberOfComment.bottom, 5.dp)
                    start.linkTo(anchor = numberOfComment.start)
                },
            text = "5 gün önce",
            color = colorResource(id = R.color.light_gray),
            fontSize = 12.sp
        )
    }
}