Skip to content

Instantly share code, notes, and snippets.

@noe

noe/splitview.kt

Created Oct 5, 2020
Embed
What would you like to do?
Split view in Jetpack Compose
//
// Copyright 2020 Noe Casas.
//
// MIT License:
//
// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
package mycomponents
import androidx.compose.foundation.Box
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.RowScope.align
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.runtime.Composable
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.*
import androidx.compose.ui.gesture.scrollorientationlocking.Orientation
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.DensityAmbient
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.max
import androidx.compose.ui.unit.min
@Composable
fun SplitView (
minHeightTop: Dp = 100.dp,
minHeightBottom: Dp = 100.dp,
barPositionState: MutableState<Dp>? = null,
topView: @Composable() ()->Unit,
bottomView: @Composable() () ->Unit,
) {
WithConstraints {
val height = with(DensityAmbient.current) { constraints.maxHeight.toDp() }
val maxPos = height - minHeightBottom
val barPosition = barPositionState ?: remember { mutableStateOf(height / 2) }
val barThickness = 10.dp
val handleThickness = 8.dp
val handleWidth = 30.dp
Column() {
Box(
Modifier.fillMaxWidth().preferredHeight(barPosition.value),
backgroundColor = Color.Red,
) {
topView()
}
Box(
Modifier.fillMaxWidth().preferredHeight(barThickness).draggable(
orientation = Orientation.Vertical,
onDrag = { delta ->
val shiftedPos = barPosition.value + delta.toDp()
barPosition.value = max(min(shiftedPos, maxPos), minHeightTop)
},
startDragImmediately = true,
),
backgroundColor = Color.White,
) {
Box(
Modifier
.preferredHeight(handleThickness)
.preferredWidth(handleWidth)
.padding(1.dp)
.align(Alignment.CenterHorizontally)
.align(Alignment.CenterVertically),
backgroundColor = Color.LightGray,
shape = RoundedCornerShape(2.dp)
)
}
Box(
Modifier
.fillMaxWidth()
.preferredHeight(height - barPosition.value - barThickness),
backgroundColor = Color.Blue,
) {
bottomView()
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.