Android Development: explanation of jetpack compose Button, iconbutton and other buttons

preface

This article will explain the usage of Button, iconbutton, extendedfloatingactionbutton, floatingactionbutton, icontogglebutton, outlinebutton, RadioButton and textbutton in detail. Please read below if you are interested

1: Button usage

Let's take a look at the source code of the Button (the OutlinedButton has the same properties as the Button, but the shapes of the two buttons are different)

@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
) {
   ...
}
  • Content is the content representing the Button. For example, it can be a Text

  • onClick click callback

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

  • Whether enabled is OK (if unavailable, the default is gray, and if available, the default is blue)

    @Preview()
@Composable
fun buttonTest(){
  val context = LocalContext.current
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click 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))
      }
  }
}

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

    @Preview()
@Composable
fun buttonTest(){
  val context = LocalContext.current
  Column(modifier = Modifier.padding(10.dp,10.dp)) {
      Button(
          onClick = {
              Toast.makeText(context,"Click 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))
      }
  }
}

  • The interactionsource can handle the status, such as what effect it has when it is pressed and what effect it has when it is normal. Like before, write Selector in the layout file. For example, in our example below, the color of the border line is green when it is selected and black when it is not selected. interactionSource. Collectiispressedasstate() determines whether to press the state interactionsource Collectisfocusedasstate() determines whether to obtain the state of focus interactionsource Collectisdraggedasstate() determines whether to drag

    @Preview()
@Composable
fun buttonTest(){
  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 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))
      }
  }
}
  • For example, we can set roundedcorner shape (20) to round 20dp

  • elevation shadow buttondefaults elevation (defaultElevation, pressedElevation, disabledElevation) has three attribute values. The first defaultElevation represents the default shadow, pressedElevation represents the shadow when pressed, and disabledElevation represents the shadow when not enabled.

    @Preview()
@Composable
fun buttonTest(){
  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 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))
      }
  }
}

  • colors via buttondefaults Buttoncolors (backgroundColor, contentColor, disabledBackgroundColor, disabledContentColor) sets the color. The first parameter backgroundColor indicates setting the background color, and the second parameter contentColor indicates setting the content color. Here, for example, the color of login text. The third parameter disabledBackgroundColor represents the background color when enable is equal to false, and the fourth parameter disabledContentColor represents the color of the content when enable is equal to false.

    @Preview()
@Composable
fun buttonTest(){
  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 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))
      }
  }
}

  • contentPadding is set through PaddingValues(). The default is buttondefaults contentPadding. Represents the inner margin of the content. PaddingValues has the following methods

    • PaddingValues(all) all indicates that the margin is used up, down, left and right
    • 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(){
 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 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
         // Or contentPadding = PaddingValues(4.dp)
     ){
         Text(text = stringResource(id = R.string.login))
     }
 }
}

2: Usage of IconButton

The construction method of IconButton is as follows

@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
){
   ...
}
  • onClick click callback
  • Modifier modifier
  • Is enabled available
  • Content the content contained in the control
  • Like buttons, interactionSource can handle some logic according to different states. For example, what happens when you press it? What happens when you don't press it.

Here are some examples. For example, IconButton is an icon with + on the left and text on the right. If the text is reduced when pressed, do not press display to add.

@Preview()
@Composable
fun iconButtonTest(){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    val pressText = if(pressState.value) "reduce" else "add to"
    Column(modifier = Modifier.padding(10.dp,10.dp)) {
        IconButton(
            onClick = {
              Toast.makeText(context,"Click 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)
             }
        }
    }
}

3: Usage of FloatingActionButton and ExtendedFloatingActionButton

FloatingActionButton is a Material style control. By default, it is a circular control floating in the lower right corner. The constructor method of FloatingActionButton is as follows:

@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
){
    ...
}
  • onClick click callback
  • Modifier modifier
  • The interactionSource is the same as above, and handles different states
  • Shape shape
  • backgroundColor background color
  • contentColor content color
  • elevation shadow
  • Content control (in fact, the ExtendedFloatingActionButton adds a Row to the content, and a text and Icon are placed in the Row)
@Preview()
@Composable
fun floatingActionButtonTest(){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    val pressText = if(pressState.value) "reduce" else "add to"
    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)
            }
        }
}

ExtendedFloatingActionButton is an extension of FloatingActionButton. The construction method of ExtendedFloatingActionButton 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()
) {
    ...
}
  • Textdisplayed text control
  • onClick click callback
  • Modifier modifier
  • Icon display icon control
  • The interactionSource is the same as above, and handles different states
  • Shape shape
  • backgroundColor background color
  • contentColor content color
  • elevation shadows through floatingactionbuttondefaults The first parameter is the default shadow and the second is the shadow when pressed
@Preview()
@Composable
fun extendedFloatingActionButtonTest(){
    val context = LocalContext.current
    val interactionSource = remember {
        MutableInteractionSource()
    }
    val pressState = interactionSource.collectIsPressedAsState()
    val pressText = if(pressState.value) "reduce" else "add to"
    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))
    }
}

4: Usage of IconToggleButton

IconToggleButton is a kind of control that can change the state of Icon for likes and collections. 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
) {
   ...
}
  • checked status
  • onCheckedChange whether to select listening for status change
  • Modifier modifier
  • Is enabled available
  • The interactionSource is consistent with the Button explanation above
  • Content control content

For example, when we click or select like, we use the red like icon, otherwise we use the black like icon

@Preview()
@Composable
fun iconToggleButtonTest(){
    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 Icon",tint = if(isCheck.value || pressState.value) Color.Red else Color.Black)
        }
    }
}

5: Usage of RadioButton

RadioButton is a radio button. The code of 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()
){
    ...
}
  • selected is checked
  • onClick click callback
  • Modifier modifier
  • Is enabled available
  • The interactionSource is consistent with the Button explanation above
  • Colors sets the color radiobuttondefaults The colors (selectedColor, unselectedColor, disabledColor) method has three parameters. The first selectedColor represents the color when it is selected, the second parameter unselectedColor represents the color when it is not selected, and the third disabledColor represents the color when it is unavailable.
@Preview()
@Composable
fun iconToggleButtonTest(){
    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))
    }
}

6: Usage of TextButton

TextButton text Button. Let's take a look at the code of TextButton. In fact, 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
)
  • onClick click event
  • Modifier modifier
  • Is enabled available
  • The interactionSource is consistent with the Button
  • elevation shadow
  • Shape shape settings
  • Border border settings
  • colors color settings
  • contentPadding content margin setting
  • Control contained in content
@Preview()
@Composable
fun textButtonTest(){
    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 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)
        }
    }
}

end of document

That's all for today's article. Thank you for reading. If you have any questions, you can leave a message in the comment area and look forward to making progress with you. If you like, don't forget Sanlian. Everyone's support and recognition is the biggest driving force I share.

Keywords: Android actionscript

Added by Dodon on Fri, 10 Dec 2021 10:52:20 +0200

Popular Keywords

©2024 Programming VIP