Weather App JetPack Compose #5: ListItem

UI.kt

import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Card
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.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.font.FontStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import com.meter_alc_rgb.weatherappcomposey.ui.theme.BlueLight

@Preview(showBackground = true)
@Composable
fun ListItem() {
Card(
modifier = Modifier
.fillMaxWidth()
.padding(top = 3.dp),
backgroundColor = BlueLight,
elevation = 0.dp,
shape = RoundedCornerShape(5.dp)
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween,
verticalAlignment = Alignment.CenterVertically
) {
Column(
modifier = Modifier.padding(
start = 8.dp,
top = 5.dp,
bottom = 5.dp
)
) {
Text(text = "12:00")
Text(
text = "Sunny",
color = Color.White
)
}
Text(
text = "25ºC",
color = Color.White,
style = TextStyle(fontSize = 25.sp)
)
AsyncImage(
model = "https://cdn.weatherapi.com/weather/64x64/day/116.png",
contentDescription = "im5",
modifier = Modifier
.padding(
end = 8.dp
)
.size(35.dp)
)
}
}
}

MainScreen.kt

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.alpha
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import coil.compose.AsyncImage
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.pagerTabIndicatorOffset
import com.google.accompanist.pager.rememberPagerState
import com.meter_alc_rgb.weatherappcomposey.R
import com.meter_alc_rgb.weatherappcomposey.ui.theme.BlueLight
import kotlinx.coroutines.launch

@Preview(showBackground = true)
@Composable
fun MainCard() {
Column(
modifier = Modifier
.padding(5.dp)
) {
Card(
modifier = Modifier.fillMaxWidth(),
backgroundColor = BlueLight,
elevation = 0.dp
) {
Column(
modifier = Modifier.fillMaxWidth(),
horizontalAlignment = Alignment.CenterHorizontally
) {
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
Text(
text = "20 Jun 2022 13:00",
modifier = Modifier.padding(
top = 8.dp,
start = 8.dp
),
style = TextStyle(fontSize = 15.sp),
color = Color.White
)
AsyncImage(
model = "https://cdn.weatherapi.com/weather/64x64/day/116.png",
contentDescription = "im2",
modifier = Modifier
.padding(
top = 8.dp,
end = 8.dp
)
.size(35.dp)
)
}
Text(
text = "Madrid",
style = TextStyle(fontSize = 24.sp),
color = Color.White
)
Text(
text = "23ºC",
style = TextStyle(fontSize = 65.sp),
color = Color.White
)
Text(
text = "Sunny",
style = TextStyle(fontSize = 16.sp),
color = Color.White
)
Row(
modifier = Modifier.fillMaxWidth(),
horizontalArrangement = Arrangement.SpaceBetween
) {
IconButton(
onClick = {

}
) {
Icon(
painter = painterResource(id = R.drawable.ic_search),
contentDescription = "im3",
tint = Color.White
)
}
Text(
text = "23ºC/12ºC",
style = TextStyle(fontSize = 16.sp),
color = Color.White
)
IconButton(
onClick = {

}
) {
Icon(
painter = painterResource(id = R.drawable.ic_sync),
contentDescription = "im4",
tint = Color.White
)
}
}
}
}
}
}

@OptIn(ExperimentalPagerApi::class)
@Composable
fun TabLayout(){
val tabList = listOf("HOURS", "DAYS")
val pagerState = rememberPagerState()
val tabIndex = pagerState.currentPage
val coroutineScope = rememberCoroutineScope()

Column(
modifier = Modifier
.padding(
start = 5.dp,
end = 5.dp
)
.clip(RoundedCornerShape(5.dp))
) {
TabRow(
selectedTabIndex = tabIndex,
indicator = { pos ->
TabRowDefaults.Indicator(
Modifier.pagerTabIndicatorOffset(pagerState, pos)
)
},
backgroundColor = BlueLight,
contentColor = Color.White
) {
tabList.forEachIndexed{index, text ->
Tab(
selected = false,
onClick = {
coroutineScope.launch {
pagerState.animateScrollToPage(index)
}
},
text = {
Text(text = text)
}
)
}
}
HorizontalPager(
count = tabList.size,
state = pagerState,
modifier = Modifier.weight(1.0f)
) {
index ->
LazyColumn(
modifier = Modifier.fillMaxSize()
){
items(15){
ListItem()
}
}

}
}
}

Добавить комментарий

Ваш адрес email не будет опубликован.