Textfield and password input box that are more flexible and easy to use in compose

Preface

Jetpack Compose Medium TextField Easy to use , But if you want to customize ui It's not easy to achieve , Let's see the effect :

TextField:

 

  Similar to that OutlinedTextField:

  They all have something in common api And features , Easy to use , But it has a large inner margin, which is difficult to adjust , And its background ui It's not easy to adjust ( The background can be changed to transparent , But I didn't change the source code to ...)

Luckily Compose The basic input box is reserved in :BasicTextField

No margins , No background , It is very suitable for us to customize ui, So I based on BasicTextField It encapsulates , send ui Easier to use

Text

First, let's see how to use it and its effect

 

Then there is the basis GoodTextField Encapsulated for password input PasswordTextField

 

  then api Basic and ordinary TextFild No difference , Just briefly talk about the extra api

/**
 *  More convenient and easy to use TextField( Text input box )
 * [value] The text in the input box 
 * [onValueChange] The change callback of the text in the input box 
 * [modifier] modification 
 * [hint] The content displayed when there is no text in the input box 
 * [maxLines] How many lines of text can be displayed at most 
 * [fontSize]text and hint Font size of 
 * [fontColor]text Font color for 
 * [maxLength] How many words can be displayed at most ,ps: Because the text will be truncated , It will cause the keyboard state to be reset when truncating (TextField characteristic )
 * [contentAlignment]text and hint How 
 * [leading] The components shown on the left 
 * [trailing] The components shown on the right 
 * [background] background 
 * [horizontalPadding] Horizontal internal spacing 
 * [enabled] Can I input ,false Cannot input and copy 
 * [readOnly] Can I input ,true Unable to input , But it's replicable , Get focus , Move the cursor 
 * [textStyle] Font style 
 * [keyboardOptions] Keyboard configuration 
 * [keyboardActions] Keyboard callback 
 * [visualTransformation] Transformation of text presentation 
 * [onTextLayout] Callback executed when calculating the new text layout 
 * [interactionSource] State properties 
 * [cursorBrush] Cursor drawing 
 */
@Composable
fun GoodTextField(
    value: String,
    onValueChange: (String) -> Unit,
    modifier: Modifier = Modifier,
    hint: HintComposeWithTextField? = null,
    @IntRange(from = 1L) maxLines: Int = 1,
    fontSize: TextUnit = 16.sp,
    fontColor: Color = Color333,
    maxLength: Int = Int.MAX_VALUE,
    contentAlignment: Alignment.Vertical = Alignment.CenterVertically,
    leading: (@Composable RowScope.() -> Unit)? = null,
    trailing: (@Composable RowScope.() -> Unit)? = null,
    background: BackgroundComposeWithTextField? = BackgroundComposeWithTextField.DEFAULT,
    horizontalPadding: Dp = 16.dp,
    enabled: Boolean = true,
    readOnly: Boolean = false,
    textStyle: TextStyle = LocalTextStyle.current,
    keyboardOptions: KeyboardOptions = KeyboardOptions.Default,
    keyboardActions: KeyboardActions = KeyboardActions.Default,
    visualTransformation: VisualTransformation = VisualTransformation.None,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    cursorBrush: Brush = SolidColor(MaterialTheme.colors.primary),
){}

  among background Property provides the ability to customize the background

hint Properties are similar to EditText Of hint attribute , But it is more flexible , You can use any Compose Components

maxLength Attribute can control how many words can be input at most

Introduce projects

  In the root project build.gradle Add... To the document :

allprojects {
    repositories {
        maven { url 'https://jitpack.io' }
        ...
    }
}

app Of build.gradle Medium plus , Latest version reference :https://jitpack.io/#ltttttttttttt/ComposeViews

dependencies{
    ...
    implementation 'com.github.ltttttttttttt:ComposeViews:1.0.9'
}

  Then you can use it happily GoodTextField and PasswordTextField 了

The project is open source , welcome star:GitHub - ltttttttttttt/ComposeViews

And there are more than GoodTextField, There are more easy to use Compose Components , such as :

Compose Medium ViewPager:ComposePager

Banner

FlowLayout

More will be added later Compose Components

end