chips cope_Android P：Chips and ChipGroup

最新推荐文章于 2023-12-06 06:00:00 发布

cunchi4221

最新推荐文章于 2023-12-06 06:00:00 发布

阅读量881

点赞数

文章标签： android java python css vue ViewUI

原文链接：https://www.journaldev.com/21994/android-p-chips-chipgroup

版权

chips cope

In this tutorial, we’ll be discussing the latest components that are a part of the new Material Design Library: Chips and Chip Groups. We’ll be implementing them in our android application.

在本教程中，我们将讨论作为新材料设计库的一部分的最新组件：芯片和芯片组。我们将在我们的android应用程序中实现它们。

安卓芯片 (Android Chips)

Chips are basically a text displayed in a rounded background. These are checkable and can contain icons as well.

筹码基本上是在圆形背景下显示的文本。这些是可检查的，也可以包含图标。

Chips are a newer and stylised form of RadioButtons.

芯片是RadioButtons的一种更新和风格化形式。

To use Chips in your Android application you need to use the latest Android SDK 28.

要在您的Android应用程序中使用Chips，您需要使用最新的Android SDK 28。

Following are the dependencies that need to be added in the build.gradle:

以下是需要在build.gradle中添加的依赖项：

implementation 'androidx.appcompat:appcompat:1.0.0-alpha1'
implementation 'com.google.android.material:material:1.0.0-alpha1'

Note: At the time of writing above were the versions available.

注意：在撰写本文时，已有可用版本。

What is AndroidX?

什么是AndroidX？

Since the introduction of Android Support v28, Google has refactored the package names. AndroidX is a replacement of the support library. For more details on the new package names check out this link.

自从引入Android支持v28以来，Google便对软件包名称进行了重构。 AndroidX替代了支持库。有关新软件包名称的更多详细信息，请查看此链接。

Android芯片使用情况 (Android Chip Usage)

A Chip is defined in the xml layout as:

芯片在xml布局中定义为：

<com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Default" />

app:chipText displays the textual part in the Chip.

app:chipText显示芯片中的文本部分。

This is how the chip looks on the screen:

这是芯片在屏幕上的外观：

芯片类型 (Types of Chips)

Chips can be styled as:

芯片的样式可以如下：

Default – Pressing this does nothing unless some other xml attribute is present.
默认值 –除非存在其他xml属性，否则按此键将不执行任何操作。
Entry: We need to add the style="@style/Widget.MaterialComponents.Chip.Entry". This makes the Chip checkable and contains a checkmark and close icon by default
条目：我们需要添加style="@style/Widget.MaterialComponents.Chip.Entry" 。这使芯片可检查，并且默认情况下包含选中标记和关闭图标
Choice: This type of chip is generally used to mark/unmark chips for selections. style="@style/Widget.MaterialComponents.Chip.Choice"
Choice style is generally used in Chip groups.
选择：这种类型的芯片通常用于标记/取消标记芯片以供选择。 style="@style/Widget.MaterialComponents.Chip.Choice"
选择样式通常在芯片组中使用。
Actions: This chip is checkable and is used to trigger actions when they are clicked.
style="@style/Widget.MaterialComponents.Chip.Action"
动作：此芯片是可检查的，用于在单击动作时触发动作。
style="@style/Widget.MaterialComponents.Chip.Action"
Filter: This chip is checkable and shows a checkmark when checked.
style="@style/Widget.MaterialComponents.Chip.Filter"
筛选器 ：该芯片是可检查的，并且在选中时显示选中标记。
style="@style/Widget.MaterialComponents.Chip.Filter"

XML属性 (XML Attributes)

app:chipText
app：chipText
app:chipBackgroundColor
app：chipBackgroundColor
app:rippleColor – To show a custom ripple effect when the chip is pressed.
app：rippleColor –按下芯片时显示自定义波纹效果。
app:checkable – Used to set whether the toggle is enabled or not.
app：checkable –用于设置是否启用切换。
app:chipIcon – Used to set a custom drawable icon in the chip.
app：chipIcon –用于在芯片中设置自定义可绘制图标。
app:closeIcon – Generally present in the Entry type chip. We can set our icon using this. The close icon by default is at the right of the text.
app：closeIcon –通常存在于Entry型芯片中。我们可以使用此设置图标。默认情况下，关闭图标位于文本的右侧。
app:closeIconTint
app：closeIconTint
app:checkedIcon – Used to change the check mark icon that is present in Entry and Filter types of Chips.
app：checkedIcon –用于更改芯片的条目和过滤器类型中显示的复选标记图标。
app:chipStartPadding/app:chipEndPadding
app：chipStartPadding / app：chipEndPadding
app:iconStartPadding/app:iconEndPadding
app：iconStartPadding / app：iconEndPadding

Let’s use these attributes in our xml layout:

让我们在xml布局中使用这些属性：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Default" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Entry" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Action" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Filter" />


    </LinearLayout>

Time to add background colors, ripple effects, custom icons:

是时候添加背景颜色，波纹效果，自定义图标了：

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipBackgroundColor="@android:color/holo_blue_bright"
            app:chipText="Background Color" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Ripple Color"
            app:rippleColor="@android:color/holo_orange_dark" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@mipmap/ic_launcher"
            app:chipText="Chip icon" />

    </LinearLayout>

The chips above are jammed against each other. We can add the padding attributes on the Chips to correct it.

上面的芯片彼此卡住。我们可以在Chips上添加padding属性进行更正。

Android ChipGroup (Android ChipGroup)

Similar to RadioGroups, ChipGroups are used to hold Chips.

与RadioGroup相似，ChipGroup用于保存芯片。

<com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="This" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="is" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="a" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="because" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="group" />


    </com.google.android.material.chip.ChipGroup>

ChipGroups by default spaces the Chips present inside it.

默认情况下，ChipGroups将内部存在的Chips隔开。

Few of the XML attributes that can be used with ChipGroups are:

可以与ChipGroups一起使用的XML属性很少是：

app:chipSpacing: To set a custom spacing value between the chips, both horizontally and vertically.
app:chipSpacingHorizontal
app:chipSpacingVertical
app:singleSelection – Setting this as true allows only one of the chips to be checked.
app:singleLine – Sets all the chips present, in a single line only.

app:chipSpacing ：在芯片之间设置水平和垂直方向的自定义间距值。
app:chipSpacingHorizontal
app:chipSpacingVertical
app:singleSelection –设置为true只能检查其中一个芯片。
app:singleLine –仅在一行中设置所有存在的筹码。

Custom Spacing:

自定义间距：

<com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:chipSpacing="25dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Group" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="with" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="custom" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="spacing" />

    </com.google.android.material.chip.ChipGroup>

Let’s merge the above concepts and also implement the click listeners on the Chips in our Android Studio Project.

让我们合并以上概念，并在我们的Android Studio项目中的芯片上实现点击侦听器。

Android Chip，ChipGroup示例项目结构 (Android Chip, ChipGroup Example Project Structure)

Android芯片代码 (Android Chips Code)

The code for the activity_main.xml layout is given below:

下面给出了activity_main.xml布局的代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Default" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Entry" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Action"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Action" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Filter"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Filter" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:orientation="horizontal">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipBackgroundColor="@android:color/holo_blue_bright"
            app:chipText="Background Color" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Ripple Color"
            app:rippleColor="@android:color/holo_orange_dark" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipIcon="@mipmap/ic_launcher"
            app:chipText="Chip icon" />

    </LinearLayout>

    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="This" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="is" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="a" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="because" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="group" />


    </com.google.android.material.chip.ChipGroup>

    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:chipSpacing="25dp">

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Chip" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Group" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="with" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="custom" />

        <com.google.android.material.chip.Chip
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="spacing" />

    </com.google.android.material.chip.ChipGroup>


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="Choose One"
        android:textSize="18sp" />


    <com.google.android.material.chip.ChipGroup
        android:id="@+id/chipGroup"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:singleSelection="true">

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice A" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice B" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="Choice C" />

    </com.google.android.material.chip.ChipGroup>


    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp">


        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipSpacingHorizontal="25dp"
            app:singleLine="true">

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="Chip" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="Group" />


            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="in" />


            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="single" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="line" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="add" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="a" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="horizontal" />

            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Choice"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:chipText="scroll" />

        </com.google.android.material.chip.ChipGroup>

    </HorizontalScrollView>


    <com.google.android.material.chip.Chip
        android:id="@+id/chip"
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginTop="24dp"
        app:chipText="Close Icon Listener" />


</LinearLayout>

We’ve enclosed the ChipGroup which is single line only, into a horizontal scroll view.

我们已经将仅单行的ChipGroup封闭在水平滚动视图中。

The code for the MainActivity.java class is given below:

MainActivity.java类的代码如下：

package com.journaldev.androidchipsandchipgroup;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Toast;

import com.google.android.material.chip.Chip;
import com.google.android.material.chip.ChipGroup;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ChipGroup chipGroup = findViewById(R.id.chipGroup);

        chipGroup.setOnCheckedChangeListener(new ChipGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(ChipGroup chipGroup, int i) {

                Chip chip = chipGroup.findViewById(i);
                if (chip != null)
                    Toast.makeText(getApplicationContext(), "Chip is " + chip.getChipText(), Toast.LENGTH_SHORT).show();


            }
        });

        Chip chip = findViewById(R.id.chip);
        chip.setOnCloseIconClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getApplicationContext(), "Close is Clicked", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

setOnCheckedChangeListener on the ChipGroup only gets triggered when the ChipGroup is set to a single selection.

仅当将ChipGroup设置为单个选择时，才会触发ChipGroup上的setOnCheckedChangeListener。

The output of the above application in action is given below:

上面应用程序的输出如下：

This brings an end to this tutorial. You can download the project from the link below:

本教程到此结束。您可以从下面的链接下载项目：

AndroidChipsAndChipGroup AndroidChipsAndChipGroup

Github Project Link Github项目链接

翻译自: https://www.journaldev.com/21994/android-p-chips-chipgroup

chips cope

cunchi4221

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
chips cope_Android P：Chips and ChipGroup

chips copeIn this tutorial, we’ll be discussing the latest components that are a part of the new Material Design Library: Chips and Chip Groups. We’ll be implementing them in our android application. ...
复制链接

扫一扫