Skip to content

Instantly share code, notes, and snippets.

@noe
Last active May 23, 2024 18:49
Show Gist options
  • Save noe/ef6c10a91db79e713f8ca1f7623b11cd to your computer and use it in GitHub Desktop.
Save noe/ef6c10a91db79e713f8ca1f7623b11cd to your computer and use it in GitHub Desktop.
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.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.gestures.draggable
import androidx.compose.foundation.gestures.rememberDraggableState
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Divider
import androidx.compose.runtime.Composable
import androidx.compose.runtime.setValue
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.*
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.shadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.platform.LocalDensity
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,
topView: @Composable() ()->Unit,
bottomView: @Composable() () ->Unit,
initialTopHeightWeight: Float = 0.5f,
) {
val density = LocalDensity.current
BoxWithConstraints {
val height = with(density) { constraints.maxHeight.toDp() }
val maxPos = height - minHeightBottom
var barPosition: Dp by remember { mutableStateOf(height * initialTopHeightWeight) }
val barThickness = 15.dp
val handleThickness = 12.dp
val handleWidth = 50.dp
val roundedCornerShape = 5.dp
val background = Color(0xfff6f8fa)
val border = Color(0xffe1e4e8)
Box () {
Column() {
Box(
Modifier.fillMaxWidth().height(barPosition)) {
topView()
}
Divider(
color = border,
thickness = 1.dp,
modifier = Modifier.shadow(elevation = 2.dp)
)
Box(
modifier = Modifier
.fillMaxWidth()
.height(height - barPosition - barThickness),
) {
bottomView()
}
}
Column(modifier = Modifier.align(Alignment.Center)) {
Spacer(
modifier = Modifier.height(
barPosition - (barThickness / 2) + 2.dp
)
)
Box(Modifier
.height(handleThickness)
.width(handleWidth)
.align(Alignment.CenterHorizontally)
.clip(RoundedCornerShape(roundedCornerShape))
.border(1.dp, border)
.shadow(5.dp)
.draggable(
orientation = Orientation.Vertical,
state = rememberDraggableState { delta ->
val shiftedPos = barPosition + with(density) { delta.toDp() }
barPosition = max(min(shiftedPos, maxPos), minHeightTop)
},
startDragImmediately = true,
)
.background(background),
)
Spacer(modifier = Modifier.fillMaxHeight())
}
}
}
}
@hakanai
Copy link

hakanai commented Nov 26, 2021

Changes for Jetpack Compose as of 1.0.0-rc4:

  • WithConstraints is now BoxWithConstraints
  • DensityAmbient is now LocalDensity
  • Modifier.preferredWidth is now Modifier.width and Modifier.preferredHeight is now Modifier.height
  • backgroundColor and shape are no longer Box parameters and can be set by Modifier.background
  • onDrag is gone with no obvious replacement (onDragStarted and onDragStopped now exist, usage isn't clear to me yet, simple usage appears to now be gone)

@noe
Copy link
Author

noe commented Nov 26, 2021

Thanks for the ping, I had forgotten about this. I upgraded it to the latest version, which runs on jetpack compose 1.1.0-alpha01.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment