Amirmahdi/drug
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: tab bar

Browse Source
This commit is contained in:
Amirmahdi
2026-06-08 20:02:51 +03:30
parent 16128e5304
commit 34ae6a1b54
2 changed files with 100 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/main/java/com/approagency/pharmacy/presentation/common/SegmentedTabBar.kt
+90
View File
@@ -0,0 +1,90 @@
package com.approagency.pharmacy.presentation.common
import androidx.compose.animation.animateColorAsState
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.text.style.TextOverflow
import com.vada.caller.ui.theme.dime
/**
* نوار تب‌های سگمنتی: تبِ انتخاب‌شده به‌صورت یک «قرص» پررنگ نمایش داده می‌شود
* تا کاملاً قابل لمس و قابل‌تشخیص باشد. عرض همه‌ی تب‌ها برابر است.
*/
@Composable
fun SegmentedTabBar(
tabs: List<String>,
selectedIndex: Int,
onSelected: (Int) -> Unit,
modifier: Modifier = Modifier
) {
val dime = MaterialTheme.dime
Row(
modifier = modifier
.fillMaxWidth()
.clip(MaterialTheme.shapes.large)
.background(MaterialTheme.colorScheme.surfaceContainerHigh)
.padding(dime.xxs),
horizontalArrangement = Arrangement.spacedBy(dime.xxs)
) {
tabs.forEachIndexed { index, title ->
val selected = index == selectedIndex
val background by animateColorAsState(
targetValue = if (selected) MaterialTheme.colorScheme.primary else Color.Transparent,
animationSpec = tween(durationMillis = 200),
label = "segmentBackground"
)
val foreground by animateColorAsState(
targetValue = if (selected)
MaterialTheme.colorScheme.onPrimary
else
MaterialTheme.colorScheme.onSurfaceVariant,
animationSpec = tween(durationMillis = 200),
label = "segmentForeground"
)
val interactionSource = remember { MutableInteractionSource() }
Box(
modifier = Modifier
.weight(1f)
.clip(MaterialTheme.shapes.medium)
.background(background)
.clickable(
interactionSource = interactionSource,
indication = null
) { onSelected(index) }
.padding(vertical = dime.sm, horizontal = dime.xs),
contentAlignment = Alignment.Center
) {
Text(
text = title,
style = MaterialTheme.typography.labelMedium,
fontWeight = if (selected) FontWeight.Bold else FontWeight.Medium,
color = foreground,
maxLines = 1,
overflow = TextOverflow.Ellipsis,
textAlign = TextAlign.Center
)
}
}
}
}
app/src/main/java/com/approagency/pharmacy/presentation/screens/DrugDetailScreen.kt
+8 -21
View File
@@ -14,8 +14,6 @@ import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Tab
import androidx.compose.material3.TabRow
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBar
import androidx.compose.material3.TopAppBarDefaults
@@ -29,13 +27,13 @@ import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.platform.LocalLayoutDirection
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.text.style.TextOverflow
import androidx.compose.ui.unit.LayoutDirection
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.navigation.NavController
import com.approagency.pharmacy.presentation.common.ErrorState
import com.approagency.pharmacy.presentation.common.Loading
import com.approagency.pharmacy.presentation.common.SegmentedTabBar
import com.approagency.pharmacy.presentation.components.drugdetail.BrandNamesTabContent
import com.approagency.pharmacy.presentation.components.drugdetail.DosageFormsTabContent
import com.approagency.pharmacy.presentation.components.drugdetail.GeneralInfoTabContent
@@ -140,26 +138,15 @@ fun DrugDetailScreen(
)
}
TabRow(
selectedTabIndex = selectedTab,
containerColor = MaterialTheme.colorScheme.surface,
contentColor = MaterialTheme.colorScheme.primary
) {
tabs.forEachIndexed { index, title ->
Tab(
selected = selectedTab == index,
onClick = { selectedTab = index },
text = {
Text(
text = title,
style = MaterialTheme.typography.labelLarge,
fontWeight = if (selectedTab == index) FontWeight.Bold else FontWeight.Normal,
maxLines = 1
SegmentedTabBar(
tabs = tabs,
selectedIndex = selectedTab,
onSelected = { selectedTab = it },
modifier = Modifier.padding(
horizontal = dime.md,
vertical = dime.sm
)
}
)
}
}
LazyColumn(
modifier = Modifier