nachos

Introduce

Nachos is a library for APP that provides a custom TextView allowing users to enter text and create material chips in the text field.

Effect demonstration

Installation

Packages up your library into a har, and add the har to the directory entry libs,

Add implementation codes to directory entry/gradle:
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])

Add this line to your module level build.gradle:

allprojects{
    repositories{
        mavenCentral()
    }
}
dependencies { 
    implementation "com.gitee.archermind-ti:nachos:1.0.3"
}

Usage

• Basic Usage
  • Customizing the UI
  • Listening for when a Chip is Touched
  • Reading the Values of the Chips
  • Using a Custom UI Element for the Chips
  • Click Enter to hide textFiled

Basic Usage

Include a NachoTextView in your xml layout as follows:

<com.hootsuite.nachos.NachoTextView
  ohos:id="$+id:id_first_nachoTextView"
  ohos:height="match_content"
  ohos:width="match_parent"
  ohos:left_margin="10vp"
  ohos:right_margin="20vp"/>

Customizing the UI

NachoTextView offers several custom attributes that allow you to control the appearance of the chips it creates:

• chipHorizontalSpacing - The horizontal space between chips
• chipBackground - The background color of the chip, can be a ColorStateList to change color when the chip is clicked
• chipCornerRadius - The corner radius of the chip background
• chipTextColor - The color of the chip text
• chipTextSize - The font size of the chip text
• chipHeight - The height of a single chip
• chipVerticalSpacing - The vertical space between chips on consecutive lines.

Note: chipVerticalSpacing can only be used if chipHeight is also set

Use these attributes as follows:

<com.hootsuite.nachos.NachoTextView
    ohos:id="$+id:id_first_nachoTextView"
    ohos:width="match_parent"
    ohos:height="wrap_content"
    app:chipHorizontalSpacing="2dp"
    app:chipBackground="@color/chip_background"
    app:chipTextColor="@color/cheddar"
    app:chipTextSize="16dp"
    app:chipHeight="30dp"
    app:chipVerticalSpacing="3dp"/>

Don't forget to declare the app namespace on your root layout element:

<StackLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    xmlns:app="http://schemas.huawei.com/res/ohos-auto"
    ohos:id="$+id:root"
    ohos:height="match_content"
    ohos:width="match_parent">
</StackLayout>

Listening for when a Chip is Touched

If you want to perform any custom actions when a chip is clicked you can attach an OnChipClickListener to the NachoTextView:

 nachosTextView.setOnChipClickListener(new OnChipClickListener() {
            @Override
            public void onChipClickListener(Component component) {
                
            }
        });

Reading the Values of the Chips

NachoTextView exposes several methods to read the contents of the text view:

• getAllChips()
  • Returns the actual Chip objects contained in the text view
  • Chip is an interface that represents a chip and declares methods to access the text (getText()), data (getData()), and ui attributes of the chip
• getChipValues()
  • Returns a List of the string values of all the chips in the text
• getTokenValues()
  • Returns a List of the string values of all the tokens (unchipped text) in the text
• getChipAndTokenValues()
  • Returns a combination of the chip values and token values in the text.
  • Effectively a concatenation of the previous two methods (getChipValues() and getTokenValues())

Using a Custom UI Element for the Chips

    nachoTextView.setElement(ResourceTable.Media_fork);

Click Enter to hide textFiled

Click Enter to hide textField

Click Enter to show textFiled

Click any chips to show textField

License

Nachos is released under the Apache License, Version 2.0. See LICENSE for details.