Android P系统芯片与芯片组全面解析:性能提升与技术革新

在本教程中,我们将讨论最新的组件,这些组件是新版材料设计库的一部分:芯片和芯片组。我们将在我们的安卓应用中进行实施。

安卓芯片

芯片基本上是在圆形背景中显示的文本。这些芯片可以进行勾选,并且还可以包含图标。芯片是新型且风格化的单选按钮形式。要在您的Android应用程序中使用芯片,您需要使用最新的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 Support v28引入以来,谷歌已经重构了软件包名称。AndroidX是支持库的替代品。有关新软件包名称的更多细节,请查看此链接。

安卓芯片使用情况

一个芯片在xml布局中被定义为:

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

应用程序: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 – 通常存在于输入类型的芯片中。我们可以使用它来设置我们的图标。关闭图标默认位于文本的右侧。
  • 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="默认" />

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

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

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

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


    </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="背景颜色" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="波纹颜色"
            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="芯片图标" />

    </LinearLayout>

上面的芯片彼此堵塞。我们可以在芯片上添加填充属性来纠正它。

安卓芯片组

与RadioGroups类似,ChipGroups用于容纳Chips。

<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="这是" />

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

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

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

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

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


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

默认情况下,ChipGroups会在其内部分隔出的芯片之间留有空间。可以使用一些与ChipGroups一起使用的XML属性,例如:app:chipSpacing – 设置芯片之间的自定义间距值,包括水平和垂直方向。app:chipSpacingHorizontal – 设置芯片之间的水平间距。app:chipSpacingVertical – 设置芯片之间的垂直间距。app: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="芯片" />

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

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

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

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

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

让我们将上述概念合并,并在我们的Android Studio项目中为芯片实现点击监听器。

Android芯片,ChipGroup示例项目结构

安卓芯片代码

活动主界面的xml布局代码如下:

这是文章《Android P: 芯片和芯片组》的第3部分(共4部分)。

<?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="默认" />

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

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

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

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


    </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="背景颜色" />

        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Choice"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:chipText="波纹颜色"
            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="芯片图标" />

    </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="这" />

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

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

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

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

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


    </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="芯片" />

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

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

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

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

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


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="8dp"
        android:text="选择一个"
        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="选项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="选项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="选项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="芯片" />

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


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


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

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

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

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

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

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

        </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="关闭图标监听器" />


</LinearLayout>

我们已将仅限于单行的ChipGroup封装到了一个水平滚动视图中。MainActivity.java类的代码如下所示:

package com.Olivia.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.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(), "关闭图标被点击", Toast.LENGTH_SHORT).show();
            }
        });

    }
}

当芯片组(ChipGroup)被设置为单选模式时,只有在芯片组上设置了setOnCheckedChangeListener监听器,触发器才会被触发。

运行上述代码后,当用户点击芯片时,会显示一个提示消息,显示被选中的芯片文本;当用户点击关闭图标时,会显示”关闭图标被点击”的提示消息。

这样就结束了本教程。你可以从下面的链接下载该项目。

AndroidChipsAndChipGroup的中文释义是”安卓芯片和芯片组”。

GitHub 项目链接

bannerAds