Add initial pointerInput sample

Author: SmartToolFactory

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter5_gesture/Tutorial5_1Clickable.kt

@@ -410,7 +410,7 @@ private fun DiscreteInteractionSourceExample() {
  }
 
  Toast
- .makeText(context, "First one clicked", Toast.LENGTH_SHORT)
+ .makeText(context, "Outer one is clicked", Toast.LENGTH_SHORT)
  .show()
 
  }
@@ -431,7 +431,7 @@ private fun DiscreteInteractionSourceExample() {
  indication = rememberRipple(),
  onClick = {
  Toast
- .makeText(context, "🔥 Second one clicked", Toast.LENGTH_SHORT)
+ .makeText(context, "🔥 Inner one is clicked", Toast.LENGTH_SHORT)
  .show()
  }
  )
@@ -493,6 +493,7 @@ private fun DiscreteInteractionSourceFLowExample() {
  block = {
  interactionSourceSentRow.interactions
  .onEach { interaction: Interaction ->
+ // Quote emits same interaction row had when row is clicked or released
  interactionSourceSentQuote.emit(interaction)
  }
  .launchIn(this)
@@ -502,6 +503,7 @@ private fun DiscreteInteractionSourceFLowExample() {
  Column(
  modifier = Modifier
  .fillMaxWidth()
+ .background(Color.LightGray)
  .padding(8.dp)
  ) {
  SubcomposeColumn(
@@ -569,7 +571,12 @@ private fun DiscreteInteractionSourceFLowExample() {
  )
 
 
- Column(modifier = Modifier.fillMaxWidth().padding(8.dp)) {
+ Column(
+ modifier = Modifier
+ .fillMaxWidth()
+ .background(Color.LightGray)
+ .padding(8.dp)
+ ) {
  // This is chat bubble
  SubcomposeColumn(
  modifier = Modifier
@@ -588,24 +595,24 @@ private fun DiscreteInteractionSourceFLowExample() {
  altName = recipientOriginalName
  )
 
-  // 💬 Quoted message
-  QuotedMessageAlt(
-  modifier = Modifier
-  .padding(top = 4.dp, start = 4.dp, end = 4.dp)
-  // 🔥 This is required to set Surface height before text is set
-  .height(IntrinsicSize.Min)
-  .background(ReceivedQuoteColor, shape = RoundedCornerShape(8.dp))
-  .clip(shape = RoundedCornerShape(8.dp))
-  .clickable(
-  interactionSource = interactionSourceReceivedQuote,
-  indication = rememberRipple(),
-  onClick = {}
-  ),
-  quotedMessage = "quotedMessage",
-  )
+ // 💬 Quoted message
+ QuotedMessageAlt(
+ modifier = Modifier
+ .padding(top = 4.dp, start = 4.dp, end = 4.dp)
+ // 🔥 This is required to set Surface height before text is set
+ .height(IntrinsicSize.Min)
+ .background(ReceivedQuoteColor, shape = RoundedCornerShape(8.dp))
+ .clip(shape = RoundedCornerShape(8.dp))
+ .clickable(
+ interactionSource = interactionSourceReceivedQuote,
+ indication = rememberRipple(),
+ onClick = {}
+ ),
+ quotedMessage = "quotedMessage",
+ )
 
  ChatFlexBoxLayout(
- modifier = Modifier.padding(start = 2.dp,  end = 4.dp),
+ modifier = Modifier.padding(start = 2.dp, end = 4.dp),
  text = "Message",
  messageStat = {
  CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/chapter5_gesture/Tutorial5_2PointerInput.kt

@@ -0,0 +1,92 @@
+package com.smarttoolfactory.tutorial1_1basics.chapter5_gesture
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.gestures.detectTapGestures
+import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.foundation.verticalScroll
+import androidx.compose.material.Text
+import androidx.compose.runtime.*
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.shadow
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.text.style.TextAlign
+import androidx.compose.ui.unit.dp
+import com.smarttoolfactory.tutorial1_1basics.chapter4_state.blue400
+import com.smarttoolfactory.tutorial1_1basics.chapter4_state.green400
+import com.smarttoolfactory.tutorial1_1basics.chapter4_state.orange400
+import com.smarttoolfactory.tutorial1_1basics.chapter4_state.pink400
+import com.smarttoolfactory.tutorial1_1basics.ui.components.StyleableTutorialText
+
+@Composable
+fun Tutorial5_2Screen() {
+ TutorialContent()
+}
+
+@Composable
+private fun TutorialContent() {
+
+ Column(
+ modifier = Modifier
+ .fillMaxSize()
+ .verticalScroll(rememberScrollState())
+ ) {
+ StyleableTutorialText(
+ text = "1-) Detects tap, double-tap, and long press gestures and calls onTap, " +
+ "onDoubleTap, and onLongPress, respectively, when detected. "
+ )
+ DetectTapGesturesExample()
+ }
+
+}
+
+private val modifier = Modifier
+ .padding(8.dp)
+ .fillMaxWidth()
+ .height(40.dp)
+ .shadow(elevation = 2.dp, shape = RoundedCornerShape(16.dp), clip = true)
+
+@Composable
+private fun DetectTapGesturesExample() {
+
+ var gestureText by remember { mutableStateOf("Idle") }
+ var gestureColor by remember { mutableStateOf(Color(0xffBDBDBD)) }
+
+ modifier
+ .background(gestureColor, shape = RoundedCornerShape(16.dp))
+ .pointerInput(Unit) {
+ detectTapGestures(
+ onPress = {
+ gestureText = "onPress"
+ gestureColor = orange400
+ },
+ onTap = {
+ gestureText = "onTap offset: $it"
+ gestureColor = pink400
+ },
+ onDoubleTap = {
+ gestureText = "onDoubleTap offset: $it"
+ gestureColor = blue400
+
+ },
+ onLongPress = {
+ gestureText = "onLongPress offset: $it"
+ gestureColor = green400
+ }
+ )
+ }
+
+ Box(
+ contentAlignment = Alignment.Center,
+ modifier = modifier
+ ) {
+ Text(
+ text = gestureText,
+ color = Color.White,
+ textAlign = TextAlign.Center
+ )
+ }
+}

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/tutorial_list/Tags.kt

@@ -142,3 +142,11 @@ const val TAG_CLICKABLE = "clickable"
 const val TAG_INDICATION = "Indication"
 const val TAG_REMEMBER_RIPPLE = "rememberRipple"
 const val TAG_INTERACTION_SOURCE = "InteractionSource"
+const val TAG_POINTER_INPUT = "pointerInput"
+const val TAG_DETECT_TAP_GESTURES = "detectTapGestures"
+const val TAG_DETECT_DRAG_GESTURES = "detectTapGestures"
+const val TAG_ON_PRESS = "onPress"
+const val TAG_ON_DOUBLE_TAP = "onDoubleTap"
+const val TAG_ON_LONG_PRESS= "onLongPress"
+const val TAG_ON_TAP= "onTap"
+

Tutorial1-1Basics/src/main/java/com/smarttoolfactory/tutorial1_1basics/tutorial_list/TutorialList.kt

@@ -14,6 +14,7 @@ import com.smarttoolfactory.tutorial1_1basics.chapter2_material_widgets.*
 import com.smarttoolfactory.tutorial1_1basics.chapter3_layout.*
 import com.smarttoolfactory.tutorial1_1basics.chapter4_state.*
 import com.smarttoolfactory.tutorial1_1basics.chapter5_gesture.Tutorial5_1Screen
+import com.smarttoolfactory.tutorial1_1basics.chapter5_gesture.Tutorial5_2Screen
 import com.smarttoolfactory.tutorial1_1basics.model.TutorialSectionModel
 import com.smarttoolfactory.tutorial1_1basics.ui.GestureListColor
 import com.smarttoolfactory.tutorial1_1basics.ui.LayoutListColor
@@ -767,7 +768,7 @@ fun createGestureTutorialList(): List<TutorialSectionModel> {
 
  val tutorial5_1 = TutorialSectionModel(
  title = stringResource(R.string.title_5_1),
- description = "Tutorial about clickable modifier, Indication and InteractionSource",
+ description = "Tutorial about clickable modifier, Indication and InteractionSource.",
  action = {
  Tutorial5_1Screen()
  },
@@ -781,7 +782,27 @@ fun createGestureTutorialList(): List<TutorialSectionModel> {
  tagColor = GestureListColor
  )
 
+ val tutorial5_2 = TutorialSectionModel(
+ title = "PointerInput",
+ description = "Tutorial about PointerInput, press, tap, long press and other gestures.",
+ action = {
+ Tutorial5_2Screen()
+ },
+ tags = listOf(
+ TAG_COMPOSE,
+ TAG_POINTER_INPUT,
+ TAG_DETECT_TAP_GESTURES,
+ TAG_DETECT_DRAG_GESTURES,
+ TAG_ON_PRESS,
+ TAG_ON_DOUBLE_TAP,
+ TAG_ON_LONG_PRESS,
+ TAG_ON_TAP
+ ),
+ tagColor = GestureListColor
+ )
+
  return listOf(
  tutorial5_1,
+ tutorial5_2
  )
 }