Jetpack Compose Button,IconButton, etc

Today we’re going to talk about Button, IconButton ExtendedFloatingActionButton, FloatingActionButton IconToggleButton, OutlinedButton, RadioButton, TextButton. How to use these buttons.

1. The use of Button

First look at the source code of the Button (OutlinedButton and Button properties are the same but the shape of the two buttons is not quite the same)

@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = ButtonDefaults.elevation(),
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.buttonColors(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit) {... }Copy the code

Content is the content of a Button. It could be a Text, for example

OnClick click callback

@Preview()
@Composable
fun buttonTest(a){
  val context = LocalContext.current
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
           }
      ){
          Text(text = stringResource(id = R.string.login))
      }
  }
}
Copy the code

Modifier can refer to the article modifier usage in detail

The default value is gray. The default value is blue.

@Preview()
@Composable
fun buttonTest(a){
  val context = LocalContext.current
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
           },
          modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
          enabled = true
      ){
          Text(text = stringResource(id = R.string.login))
      }
  }
}
Copy the code

Border, BorderStroke(width,color) you can set the color of the border and the width of the line. The first argument width is the width of the border line and color is the color of the border line

@Preview()
@Composable
fun buttonTest(a){
  val context = LocalContext.current
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
           },
          modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
          enabled = true,
          border = BorderStroke(1.dp,color = Color.Black)
      ){
          Text(text = stringResource(id = R.string.login))
      }
  }
}
Copy the code

InteractionSource can handle state, such as what happens when it’s pressed and what happens when it’s normal. Just like we did before, let’s write the Selector in the layout file. For example, in the example below, the border line is green if it is selected and black if it is not. InteractionSource. CollectIsPressedAsState () to determine whether to press state interactionSource. CollectIsFocusedAsState () Determine whether acquiring interactionSource. The focus of state collectIsDraggedAsState () to determine whether the drag

@Preview()
@Composable
fun buttonTest(a){
  val context = LocalContext.current
  val interactionSource = remember {
      MutableInteractionSource()
  }
  val pressState = interactionSource.collectIsPressedAsState()
  val borderColor = if (pressState.value) Color.Green else Color.Black
  
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
           },
          modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
          enabled = true,
          border = BorderStroke(1.dp,color = borderColor),
          interactionSource = interactionSource
      ){
          Text(text = stringResource(id = R.string.login))
      }
  }
}
Copy the code

So for example we can say RoundedCornerShape(20) 20dp

Elevation shadow ButtonDefaults. Elevation (defaultElevation pressedElevation, disabledElevation) three attribute values, The first defaultElevation indicates the default shadow, pressedElevation indicates the shadow when pressed, and disabledElevation indicates the shadow when not enabled.

@Preview()
@Composable
fun buttonTest(a){
  val context = LocalContext.current
  val interactionSource = remember {
      MutableInteractionSource()
  }
  val pressState = interactionSource.collectIsPressedAsState()
  val borderColor = if (pressState.value) Color.Green else Color.Black
  
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
           },
          modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
          enabled = true,
          border = BorderStroke(1.dp,color = borderColor),
          interactionSource = interactionSource,
          shape = RoundedCornerShape(20),
          elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp)
      ){
          Text(text = stringResource(id = R.string.login))
      }
  }
}
Copy the code

Colors by ButtonDefaults. ButtonColors (backgroundColor, contentColor disabledBackgroundColor, disabledContentColor) set colors. The first parameter, backgroundColor, sets the backgroundColor, and the second parameter, contentColor, sets the contentColor, for example, the login text color. The third parameter disabledBackgroundColor indicates the background color when enable is false, and the fourth parameter disabledContentColor indicates the content color when enable is false.

@Preview()
@Composable
fun buttonTest(a){
  val context = LocalContext.current
  val interactionSource = remember {
      MutableInteractionSource()
  }
  val pressState = interactionSource.collectIsPressedAsState()
  val borderColor = if (pressState.value) Color.Green else Color.Black
  
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
           },
          modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
          enabled = true,
          border = BorderStroke(1.dp,color = borderColor),
          interactionSource = interactionSource,
          elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp),
          shape = RoundedCornerShape(20),
          colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red,contentColor = Color.Yellow,disabledBackgroundColor = Color.DarkGray,disabledContentColor = Color.Black)
      ){
          Text(text = stringResource(id = R.string.login))
      }
  }
}
Copy the code

ContentPadding is set with PaddingValues(). The default is ButtonDefaults ContentPadding. Represents the inside margin of the content. PaddingValues have the following methods

PaddingValues(all) all indicates that this margin is used for both the upper, lower, and left
PaddingValues(horizontal: Dp, vertical: Dp)
PaddingValues( start: Dp = 0.dp, top: Dp = 0.dp, end: Dp = 0.dp, bottom: Dp = 0.dp)

@Preview()
@Composable
fun buttonTest(a){
 val context = LocalContext.current
 val interactionSource = remember {
     MutableInteractionSource()
 }
 val pressState = interactionSource.collectIsPressedAsState()
 val borderColor = if (pressState.value) Color.Green else Color.Black
 
 Column(modifier = Modifier.padding(10.dp,10.dp)) {
     Button(
         onClick = {
             Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
          },
         modifier= Modifier.size(80.dp, 40.dp).clip(RoundedCornerShape(20.dp)),
         enabled = true,
         border = BorderStroke(1.dp,color = borderColor),
         interactionSource = interactionSource,
         elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp),
         shape = RoundedCornerShape(20),
         colors = ButtonDefaults.buttonColors(backgroundColor = Color.Red,contentColor = Color.Yellow,disabledBackgroundColor = Color.DarkGray,disabledContentColor = Color.Black),
         contentPadding = ButtonDefaults.ContentPadding
         // 或者是contentPadding = PaddingValues(4.dp)
     ){
         Text(text = stringResource(id = R.string.login))
     }
 }
}
Copy the code

The use of IconButton

IconButton is constructed as follows

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable() - >Unit
){
   ...
}
Copy the code

OnClick Click callback
Modifier modifier
Enabled Whether it is available
Content Indicates the content of the control
InteractionSource, like Button, can handle some logic depending on the state. Like what happens when it’s pressed and what happens when it’s not pressed.

Here are some examples. For example, an IconButton is a control with a + icon on the left and text on the right. The text is displayed reduced if pressed, not added if pressed.

@Preview()
@Composable
fun iconButtonTest(a){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    val pressText = if(pressState.value) "Reduce" else "Add"
    Column(modifier = Modifier.padding(10.dp,10.dp)) {
        IconButton(
            onClick = {
              Toast.makeText(context,"Hit Add",Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier.size(80.dp,40.dp).clip(RoundedCornerShape(20)),
            enabled = true. interactionSource = interactionSource ){ Row(verticalAlignment=Alignment.CenterVertically) { Icon(imageVector = Icons.Filled.Add, contentDescription ="Add button",tint = Color.Red)
               Text(text = pressText,fontSize = 8.sp)
             }
        }
    }
}
Copy the code

The use of the three: FloatingActionButton and ExtendedFloatingActionButton

FloatingActionButton is a Material style control that defaults to a circular control that floats in the lower right corner. The constructor method of FloatingActionButton looks like this:

@Composable
fun FloatingActionButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation(),
    content: @Composable() - >Unit
){
    ...
}
Copy the code

OnClick Click callback
Modifier modifier
InteractionSource, like above, handles different states
Shape shape
BackgroundColor backgroundColor
ContentColor the contentColor
Elevation shadow
Content content controls (ExtendedFloatingActionButton is actually in the content added a Row, put a text with a Row Icon)

@Preview()
@Composable
fun floatingActionButtonTest(a){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    val pressText = if(pressState.value) "Reduce" else "Add"
    Column(modifier = Modifier.padding(10.dp,10.dp)) {
       FloatingActionButton(
            onClick = {
              Toast.makeText(context,"Click the button.",Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier.size(80.dp),
            interactionSource = interactionSource,
            shape = RoundedCornerShape(25.dp),
            backgroundColor = Color.Green,
            contentColor = Color.Blue,
            elevation = FloatingActionButtonDefaults.elevation(defaultElevation=8.dp,pressedElevation = 10.dp)
        ){
            Row(verticalAlignment=Alignment.CenterVertically) {
                Icon(imageVector = Icons.Filled.Add, contentDescription = "Add",tint = Color.Red)
                Spacer(modifier = Modifier.width(10.dp))
                Text(text = "Button",fontSize =12.sp,color = Color.White)
            }
        }
}
Copy the code

ExtendedFloatingActionButton is an extension of the FloatingActionButton ExtendedFloatingActionButton constructor is as follows

@Composable
fun ExtendedFloatingActionButton(
    text: @Composable() - >Unit,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    icon: @Composable(() - >Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    shape: Shape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50)),
    backgroundColor: Color = MaterialTheme.colors.secondary,
    contentColor: Color = contentColorFor(backgroundColor),
    elevation: FloatingActionButtonElevation = FloatingActionButtonDefaults.elevation()
) {
    ...
}
Copy the code

Text Displays the text control
OnClick Click callback
Modifier modifier
Icon Displays the icon control
InteractionSource, like above, handles different states
Shape shape
BackgroundColor backgroundColor
ContentColor the contentColor
Elevation shadow by FloatingActionButtonDefaults. Elevation (defaultElevation pressedElevation) Settings, the first parameter is the default shadow, the shadow of the second is the press time

@Preview()
@Composable
fun extendedFloatingActionButtonTest(a){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    val pressText = if(pressState.value) "Reduce" else "Add"
    Column(modifier = Modifier.padding(10.dp,10.dp)) {
        ExtendedFloatingActionButton(text = { Text(text = pressText,fontSize =12.sp,color = Color.White)},onClick = {
            Toast.makeText(context,"Click the button.",Toast.LENGTH_SHORT).show()
        },
// modifier = Modifier.size(50.dp),
            icon ={
              Icon(imageVector = Icons.Filled.Add, contentDescription = "Add",tint = Color.Red)
            },
            interactionSource = interactionSource,
            shape = RoundedCornerShape(25.dp),
            backgroundColor = Color.Green,
            contentColor = Color.Blue,
            elevation = FloatingActionButtonDefaults.elevation(defaultElevation=8.dp,pressedElevation = 10.dp))
    }
}
Copy the code

4. IconToggleButton

IconToggleButton is a control that can change the status of Icon used for clicking and collecting. The code is as follows:

@Composable
fun IconToggleButton(
    checked: Boolean,
    onCheckedChange: (Boolean) - >Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable() - >Unit) {... }Copy the code

Checked Indicates the checked status
OnCheckedChange Whether to select the status change listener
Modifier modifier
Enabled Whether it is available
InteractionSource is the same as Button
Content Control content

For example, when a “like” is pressed or selected, use the red “like” icon, otherwise use the black “like” icon

@Preview()
@Composable
fun iconToggleButtonTest(a){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    var isCheck = remember {
        mutableStateOf(false)
    }
    Column(modifier = Modifier.padding(10.dp,10.dp)) {
         IconToggleButton(
            checked = isCheck.value,
            onCheckedChange = {
             isCheck.value = it
            },
            modifier = Modifier.size(50.dp),
            enabled = true,
            interactionSource = interactionSource
        ){
               Icon(imageVector = Icons.Filled.Favorite, contentDescription = "Like the icon",tint = if(isCheck.value || pressState.value) Color.Red else Color.Black)
        }
    }
}
Copy the code

A RadioButton

A RadioButton is a RadioButton. The code for RadioButton is as follows

@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)? , modifier:Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    colors: RadioButtonColors = RadioButtonDefaults.colors()
){
    ...
}
Copy the code

Selected Whether to select
OnClick Click callback
Modifier modifier
Enabled Whether it is available
InteractionSource is the same as Button
Colors set colors RadioButtonDefaults. Colors (selectedColor unselectedColor, disabledColor) method with three parameters, the first selectedColor said the color of the selected time, The second parameter unselectedColor indicates the color when it is not selected and the third parameter disabledColor indicates the color when it is not available.

@Preview()
@Composable
fun iconToggleButtonTest(a){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    var isCheck = remember {
        mutableStateOf(false)
    }
    Column(modifier = Modifier.padding(10.dp,10.dp)) { RadioButton( selected = isCheck.value, onClick = { isCheck.value = ! isCheck.value }, modifier = Modifier.size(50.dp),
          enabled = true, interactionSource = interactionSource, colors = RadioButtonDefaults.colors(selectedColor = Color.Red,unselectedColor = Color.Black,disabledColor = Color.Gray)) }}Copy the code

6. TextButton

TextButton TextButton, let’s look at the code of TextButton, actually TextButton is a new Button.

@Composable
fun TextButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    elevation: ButtonElevation? = null,
    shape: Shape = MaterialTheme.shapes.small,
    border: BorderStroke? = null,
    colors: ButtonColors = ButtonDefaults.textButtonColors(),
    contentPadding: PaddingValues = ButtonDefaults.TextButtonContentPadding,
    content: @Composable RowScope.() -> Unit
) = Button(
    onClick = onClick,
    modifier = modifier,
    enabled = enabled,
    interactionSource = interactionSource,
    elevation = elevation,
    shape = shape,
    border = border,
    colors = colors,
    contentPadding = contentPadding,
    content = content
)
Copy the code

OnClick Click event
Modifier modifier
Enabled Whether it is available
InteractionSource is the same as Button
Elevation shadow
Shape Setting
Border setting
Colors Color Settings
ContentPadding Sets the content margin
Content contains the control

@Preview()
@Composable
fun textButtonTest(a){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    Column(modifier = Modifier.padding(10.dp,10.dp)) {
         TextButton(
            onClick = {
                Toast.makeText(context,"Click on login",Toast.LENGTH_SHORT).show()
            },
            modifier = Modifier
                .size(80.dp, 40.dp)
                .clip(RoundedCornerShape(20)),
            enabled = true,
            interactionSource = interactionSource,
            elevation = ButtonDefaults.elevation(2.dp,8.dp,0.dp),
            shape = RoundedCornerShape(20),
            border = BorderStroke(1.dp, if(pressState.value) Color.Red else Color.Yellow),
            colors = ButtonDefaults.buttonColors(backgroundColor = Color.Blue,contentColor = Color.White,disabledBackgroundColor = Color.Gray,disabledContentColor = Color.Black),
            contentPadding = ButtonDefaults.ContentPadding) {
                Text(text = stringResource(id = R.string.login),fontSize = 14.sp)
        }
    }
}
Copy the code

Jetpack Compose Button,IconButton, etc

1. The use of Button

The use of IconButton

The use of the three: FloatingActionButton and ExtendedFloatingActionButton

4. IconToggleButton

A RadioButton

6. TextButton

Related Posts

Performance comparison of Flutter and native applications

Android Notes: RecyclerView level 4 cache

Installation and configuration of Flutter in Mac environment