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 项目链接