ui: Add landscape two-column layout (US-18)
Detect orientation via LocalConfiguration and switch to a Row-based two-column layout in landscape mode. Left column shows the title, BPM display and pulse ring; right column shows the BPM slider, presets, volume slider and the START/STOP button. All controls remain visible without scrolling. Portrait layout is unchanged. Extracted shared UI into private composables (Title, BpmDisplay, PulseRing, BpmControls, VolumeControl, StartStopButton) to avoid duplication between the two layout paths.
This commit is contained in:
parent
22fc569874
commit
d79fcebc41
2 changed files with 306 additions and 186 deletions
|
|
@ -68,6 +68,10 @@ US-15: As a user, I want an app icon and splash screen so that it feels native.
|
|||
US-16: As a developer, I want a signed APK for installation so that the app can be deployed.
|
||||
- Acceptance: Release build generated; offline functionality verified.
|
||||
|
||||
### Theme 8: Landscape Support
|
||||
US-18: As a user, I want the app to work in landscape orientation so that I can use it however I hold my phone.
|
||||
- Acceptance: In landscape, all controls are visible and usable without scrolling; layout switches to a two-column arrangement (pulse ring + BPM display on the left, sliders/buttons on the right); no content is clipped or overlapping.
|
||||
|
||||
## Additional Notes
|
||||
- TDD: Focus on US-03, US-04, US-13 first—write failing tests, then implement.
|
||||
- Priorities: Complete setup (US-01-02), then audio (US-03-05), UI (US-06-07), service (US-08-10), rest.
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
package net.jeena.pacer.ui
|
||||
|
||||
import android.content.res.Configuration
|
||||
import androidx.compose.animation.core.Animatable
|
||||
import androidx.compose.animation.core.LinearEasing
|
||||
import androidx.compose.animation.core.tween
|
||||
|
|
@ -12,6 +13,7 @@ import androidx.compose.foundation.layout.Box
|
|||
import androidx.compose.foundation.layout.Column
|
||||
import androidx.compose.foundation.layout.PaddingValues
|
||||
import androidx.compose.foundation.layout.Row
|
||||
import androidx.compose.foundation.layout.fillMaxHeight
|
||||
import androidx.compose.foundation.layout.fillMaxSize
|
||||
import androidx.compose.foundation.layout.fillMaxWidth
|
||||
import androidx.compose.foundation.layout.height
|
||||
|
|
@ -35,6 +37,7 @@ import androidx.compose.ui.graphics.Color
|
|||
import androidx.compose.ui.graphics.RectangleShape
|
||||
import androidx.compose.ui.graphics.drawscope.Stroke
|
||||
import androidx.compose.ui.graphics.lerp
|
||||
import androidx.compose.ui.platform.LocalConfiguration
|
||||
import androidx.compose.ui.text.font.FontWeight
|
||||
import androidx.compose.ui.unit.dp
|
||||
import androidx.compose.ui.unit.sp
|
||||
|
|
@ -106,9 +109,79 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
|
||||
val bpmColor = lerp(FG, ACCENT, bpmFlash.value)
|
||||
val stepsPerSec = "%.1f steps/sec".format(bpm / 60.0)
|
||||
val isLandscape = LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE
|
||||
|
||||
Box(modifier = modifier.background(BG)) {
|
||||
|
||||
if (isLandscape) {
|
||||
LandscapeLayout(
|
||||
isPlaying = isPlaying,
|
||||
bpm = bpm,
|
||||
volume = volume,
|
||||
bpmColor = bpmColor,
|
||||
stepsPerSec = stepsPerSec,
|
||||
rippleScale = rippleScale.value,
|
||||
rippleAlpha = rippleAlpha.value,
|
||||
dotScale = dotScale.value,
|
||||
onBpmChange = { viewModel.updateBpm(it) },
|
||||
onVolChange = { viewModel.updateVolume(it) },
|
||||
onToggle = { viewModel.togglePlayback() }
|
||||
)
|
||||
} else {
|
||||
PortraitLayout(
|
||||
isPlaying = isPlaying,
|
||||
bpm = bpm,
|
||||
volume = volume,
|
||||
bpmColor = bpmColor,
|
||||
stepsPerSec = stepsPerSec,
|
||||
rippleScale = rippleScale.value,
|
||||
rippleAlpha = rippleAlpha.value,
|
||||
dotScale = dotScale.value,
|
||||
onBpmChange = { viewModel.updateBpm(it) },
|
||||
onVolChange = { viewModel.updateVolume(it) },
|
||||
onToggle = { viewModel.togglePlayback() }
|
||||
)
|
||||
}
|
||||
|
||||
// Progress bar — fills linearly across one beat interval
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth(progress.value)
|
||||
.height(3.dp)
|
||||
.background(ACCENT)
|
||||
.align(Alignment.BottomStart)
|
||||
)
|
||||
|
||||
// Scanline overlay
|
||||
Canvas(modifier = Modifier.fillMaxSize()) {
|
||||
val stripe = 4.dp.toPx()
|
||||
var y = 0f
|
||||
while (y < size.height) {
|
||||
drawRect(
|
||||
color = Color.Black.copy(alpha = 0.07f),
|
||||
topLeft = Offset(0f, y),
|
||||
size = Size(size.width, stripe / 2)
|
||||
)
|
||||
y += stripe
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun PortraitLayout(
|
||||
isPlaying: Boolean,
|
||||
bpm: Int,
|
||||
volume: Float,
|
||||
bpmColor: Color,
|
||||
stepsPerSec: String,
|
||||
rippleScale: Float,
|
||||
rippleAlpha: Float,
|
||||
dotScale: Float,
|
||||
onBpmChange: (Int) -> Unit,
|
||||
onVolChange: (Float) -> Unit,
|
||||
onToggle: () -> Unit,
|
||||
) {
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
|
|
@ -117,7 +190,65 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
// Title
|
||||
Title()
|
||||
BpmDisplay(bpm, bpmColor, stepsPerSec)
|
||||
PulseRing(rippleScale, rippleAlpha, dotScale, size = 80.dp)
|
||||
BpmControls(bpm, onBpmChange)
|
||||
VolumeControl(volume, onVolChange)
|
||||
StartStopButton(isPlaying, onToggle, Modifier.fillMaxWidth())
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun LandscapeLayout(
|
||||
isPlaying: Boolean,
|
||||
bpm: Int,
|
||||
volume: Float,
|
||||
bpmColor: Color,
|
||||
stepsPerSec: String,
|
||||
rippleScale: Float,
|
||||
rippleAlpha: Float,
|
||||
dotScale: Float,
|
||||
onBpmChange: (Int) -> Unit,
|
||||
onVolChange: (Float) -> Unit,
|
||||
onToggle: () -> Unit,
|
||||
) {
|
||||
Row(
|
||||
modifier = Modifier
|
||||
.fillMaxSize()
|
||||
.padding(horizontal = 24.dp, vertical = 16.dp),
|
||||
horizontalArrangement = Arrangement.spacedBy(24.dp)
|
||||
) {
|
||||
// Left column: title + BPM + pulse ring
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.fillMaxHeight(),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.SpaceEvenly
|
||||
) {
|
||||
Title()
|
||||
BpmDisplay(bpm, bpmColor, stepsPerSec)
|
||||
PulseRing(rippleScale, rippleAlpha, dotScale, size = 64.dp)
|
||||
}
|
||||
|
||||
// Right column: sliders + presets + start/stop
|
||||
Column(
|
||||
modifier = Modifier
|
||||
.weight(1f)
|
||||
.fillMaxHeight(),
|
||||
horizontalAlignment = Alignment.CenterHorizontally,
|
||||
verticalArrangement = Arrangement.SpaceBetween
|
||||
) {
|
||||
BpmControls(bpm, onBpmChange)
|
||||
VolumeControl(volume, onVolChange)
|
||||
StartStopButton(isPlaying, onToggle, Modifier.fillMaxWidth())
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@Composable
|
||||
private fun Title() {
|
||||
Text(
|
||||
text = "PACER",
|
||||
fontSize = 28.sp,
|
||||
|
|
@ -126,8 +257,10 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
color = ACCENT,
|
||||
letterSpacing = 5.sp
|
||||
)
|
||||
}
|
||||
|
||||
// BPM number + labels
|
||||
@Composable
|
||||
private fun BpmDisplay(bpm: Int, bpmColor: Color, stepsPerSec: String) {
|
||||
Column(horizontalAlignment = Alignment.CenterHorizontally) {
|
||||
Text(
|
||||
text = "$bpm",
|
||||
|
|
@ -152,30 +285,34 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
letterSpacing = 1.sp
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Pulse ring + ripple + center dot
|
||||
Box(contentAlignment = Alignment.Center, modifier = Modifier.size(80.dp)) {
|
||||
@Composable
|
||||
private fun PulseRing(rippleScale: Float, rippleAlpha: Float, dotScale: Float, size: androidx.compose.ui.unit.Dp) {
|
||||
Box(contentAlignment = Alignment.Center, modifier = Modifier.size(size)) {
|
||||
Canvas(modifier = Modifier.fillMaxSize()) {
|
||||
drawCircle(
|
||||
color = ACCENT.copy(alpha = rippleAlpha.value),
|
||||
radius = (size.minDimension / 2f) * rippleScale.value,
|
||||
color = ACCENT.copy(alpha = rippleAlpha),
|
||||
radius = (this.size.minDimension / 2f) * rippleScale,
|
||||
style = Stroke(width = 2.dp.toPx())
|
||||
)
|
||||
}
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(50.dp)
|
||||
.size(size * 0.625f)
|
||||
.border(2.dp, ACCENT, CircleShape)
|
||||
)
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.size(12.dp)
|
||||
.scale(dotScale.value)
|
||||
.size(size * 0.15f)
|
||||
.scale(dotScale)
|
||||
.background(ACCENT, CircleShape)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// BPM slider with SLOW / FAST labels + presets
|
||||
@Composable
|
||||
private fun BpmControls(bpm: Int, onBpmChange: (Int) -> Unit) {
|
||||
Column(modifier = Modifier.fillMaxWidth()) {
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
|
|
@ -198,7 +335,7 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
}
|
||||
Slider(
|
||||
value = bpm.toFloat(),
|
||||
onValueChange = { viewModel.updateBpm(it.toInt()) },
|
||||
onValueChange = { onBpmChange(it.toInt()) },
|
||||
valueRange = 40f..200f,
|
||||
colors = SliderDefaults.colors(
|
||||
thumbColor = ACCENT,
|
||||
|
|
@ -213,7 +350,7 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
PRESETS.forEach { (preset, label) ->
|
||||
val active = bpm == preset
|
||||
OutlinedButton(
|
||||
onClick = { viewModel.updateBpm(preset) },
|
||||
onClick = { onBpmChange(preset) },
|
||||
modifier = Modifier.size(width = 72.dp, height = 48.dp),
|
||||
shape = RectangleShape,
|
||||
contentPadding = PaddingValues(0.dp),
|
||||
|
|
@ -241,8 +378,10 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Volume slider
|
||||
@Composable
|
||||
private fun VolumeControl(volume: Float, onVolChange: (Float) -> Unit) {
|
||||
Column(modifier = Modifier.fillMaxWidth()) {
|
||||
Row(
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
|
|
@ -265,7 +404,7 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
}
|
||||
Slider(
|
||||
value = volume,
|
||||
onValueChange = { viewModel.updateVolume(it) },
|
||||
onValueChange = { onVolChange(it) },
|
||||
valueRange = 0f..1f,
|
||||
colors = SliderDefaults.colors(
|
||||
thumbColor = ACCENT,
|
||||
|
|
@ -274,11 +413,13 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
)
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Start/Stop button
|
||||
@Composable
|
||||
private fun StartStopButton(isPlaying: Boolean, onToggle: () -> Unit, modifier: Modifier = Modifier) {
|
||||
OutlinedButton(
|
||||
onClick = { viewModel.togglePlayback() },
|
||||
modifier = Modifier.fillMaxWidth(),
|
||||
onClick = onToggle,
|
||||
modifier = modifier,
|
||||
shape = RectangleShape,
|
||||
border = BorderStroke(2.dp, if (isPlaying) ACCENT else FG),
|
||||
colors = ButtonDefaults.outlinedButtonColors(
|
||||
|
|
@ -296,28 +437,3 @@ fun PacerScreen(viewModel: PacerViewModel, modifier: Modifier = Modifier) {
|
|||
)
|
||||
}
|
||||
}
|
||||
|
||||
// Progress bar — fills linearly across one beat interval
|
||||
Box(
|
||||
modifier = Modifier
|
||||
.fillMaxWidth(progress.value)
|
||||
.height(3.dp)
|
||||
.background(ACCENT)
|
||||
.align(Alignment.BottomStart)
|
||||
)
|
||||
|
||||
// Scanline overlay
|
||||
Canvas(modifier = Modifier.fillMaxSize()) {
|
||||
val stripe = 4.dp.toPx()
|
||||
var y = 0f
|
||||
while (y < size.height) {
|
||||
drawRect(
|
||||
color = Color.Black.copy(alpha = 0.07f),
|
||||
topLeft = Offset(0f, y),
|
||||
size = Size(size.width, stripe / 2)
|
||||
)
|
||||
y += stripe
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue