Android P：Chips and ChipGroup-IGI

时间：2020-02-23 14:29:08 　来源:igfitidea点击:

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

安卓芯片

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

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

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

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

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

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

什么是AndroidX？

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

Android芯片使用情况

芯片在xml布局中定义为：

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

app：chipText在芯片中显示文本部分。

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

芯片类型

筹码可以设置为：

默认值–除非存在其他xml属性，否则按此键将不执行任何操作。
条目：我们需要添加style =" @ style/Widget.MaterialComponents.Chip.Entry"。
这使得芯片可检查，并且默认情况下包含选中标记和关闭图标
选择：这种类型的芯片通常用于标记/取消标记芯片以供选择。
style =" @ style/Widget.MaterialComponents.Chip.Choice"
选择样式通常用于芯片组。
动作：该芯片是可检查的，用于在单击动作时触发动作。

style =" @ style/Widget.MaterialComponents.Chip.Action"

筛选器：该芯片是可检查的，并且在选中时显示一个选中标记。

style =" @ style/Widget.MaterialComponents.Chip.Filter"

XML属性

app：chipText
app：chipBackgroundColor
app：rippleColor –按下芯片时显示自定义波纹效果。
app：checkable –用于设置是否启用切换。
app：chipIcon –用于在芯片中设置自定义可绘制图标。
app：closeIcon –通常存在于Entry型芯片中。
我们可以使用此设置图标。
默认情况下，关闭图标位于文本的右侧。
app：closeIconTint
app：checkedIcon –用于更改"筹码类型"和"筹码类型"中的复选标记图标。
app：chipStartPadding/app：chipEndPadding
app：iconStartPadding/app：iconEndPadding

让我们在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>

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

<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>

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

Android ChipGroup

与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将内部存在的Chips隔开。

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

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

自定义间距：

<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>

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

Android芯片代码

下面给出了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>

我们已经将ChipGroup(仅一行)封闭在水平滚动视图中。

MainActivity.java类的代码如下：

package com.theitroad.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();
          }
      });

  }
}

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

Android P：Chips and ChipGroup

安卓芯片

Android芯片使用情况

芯片类型

XML属性

Android ChipGroup

Android芯片代码

相关推荐

最近更新

标签

Android P：Chips and ChipGroup

安卓芯片

Android芯片使用情况

芯片类型

XML属性

Android ChipGroup

Android芯片代码

相关推荐

使用Google Play服务的Android定位

使用PHP MySQL进行Android登录和注册

Android Material Components – MaterialAlertDialog

Android Material Design按钮样式设计

相关推荐

最近更新

标签