添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接
  <com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:checked="true"
    android:enabled="true"/>

1.2 添加开关文字

  <com.google.android.material.switchmaterial.SwitchMaterial
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:checked="true"
    android:enabled="true"
    android:text="我是SwitchMaterial"
    android:textOff=""
    android:textOn=""
    app:showText="true" />

1.3 修改开关的字体大小颜色

	app:switchTextAppearance="@style/ontextoff"
  <style name="ontextoff" parent="Theme.AppCompat.Light">
    <item name="android:textColor">#0d09f1</item>
    <item name="android:textSize">8sp</item>
  </style>

1.4 修改开关轨迹样式颜色

    app:theme="@style/scstyle"
  <style name="scstyle" parent="Theme.AppCompat.Light">
    <!--开启时的颜色-->
    <item name="colorControlActivated">#00e6db</item>
    <!--关闭时的颜色-->
    <item name="colorSwitchThumbNormal">#383434</item>
    <!--关闭时的轨迹颜色-->
    <item name="android:colorForeground">#ecd502</item>
  </style>

1.5 修改宽度设置和距离文字设置

	app:switchMinWidth="60dp"
	app:switchPadding="50dp"

1.6 修改轨道颜色和按钮颜色

	app:trackTint="#cc1023"
	app:thumbTint="#10cc16"

1.7 设置轨道图片

可设置为单一图片或者selector

	app:track="@drawable/vd_clock_clock" 

1.8 设置按钮图片

可设置为单一图片或者selector

	android:thumb="@drawable/thumb_selector"
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:state_checked="true" android:drawable="@drawable/vd_clock_clock"/>
  <item android:state_checked="false" android:drawable="@drawable/vd_clock_timer"/>
</selector>

2.Chip

2.1 Chip的分类

(1)Action chip

  • 使用 style="@style/Widget.MaterialComponents.Chip.Action"
  • 不设置style时,默认使用上述style
  • 默认前后图标都不展示,点击后没有选中状态
    <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Action"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ActionChip" />
    <!--展示效果同上面的一致-->
    <com.google.android.material.chip.Chip
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ActionChip" />

(2)Filter Chip

  • 使用 style="@style/Widget.MaterialComponents.Chip.Filter"
  • 初始状态下, 不展示前后图标
  • 点击之后会展示前面的选中图标,并且具有选中状态
  • 通常应用在 ChipGroup 中
<com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Filter"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="FilterChip" />

(3)Entry Chip

  • 使用style="@style/Widget.MaterialComponents.Chip.Entry"
  • 默认在末尾展示删除按钮;点击后前面展示选中图标,有选中状态
  • 通常可以作为 chipDrawable 使用,比如在填选邮件收件人时可以使用
    <com.google.android.material.chip.Chip
        style="@style/Widget.MaterialComponents.Chip.Entry"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:text="EntryChip " />

(4)Choice Chip

  • 使用style="@style/Widget.MaterialComponents.Chip.Choice"
  • 默认不展示前后的图标,但点击后有选中状态
  • 通常用在 ChipGroup 中 , 通过 ChipGroup 的 singleSelection=true/false 属性可以实现单选或多选

2.2 Chip的属性

类别属性名称具体作用
Shapeapp:chipCornerRadius圆角半径
Sizeapp:chipMinHeight最小高度
Backgroundapp:chipBackgroundColor背景颜色
Borderapp:chipStrokeColor边线颜色
Borderapp:chipStrokeWidth边线宽度
Rippleapp:rippleColor水波纹效果的颜色
Labelandroid:text文本内容
Labelandroid:textColor修改文本颜色
Labelandroid:textAppearance字体样式
Chip Iconapp:chipIconVisible前面的图标是否展示
Chip Iconapp:chipIconchip中文字前面的图标
Chip Iconapp:chipIconTint文字前面的图标着色
Chip Iconapp:chipIconSizechip中文字前面的图标
Close Iconapp:closeIconVisiblechip中文字后面的关闭按钮是否可见
Close Iconapp:closeIconchip中文字后面的关闭图标
Close Iconapp:closeIconSize文字后面的关闭图标的大小
Close Iconapp:closeIconTint文字后面的着色
Checkableapp:checkable是否可以被选中
Checked Iconapp:checkedIconVisible选中状态的图标是否可见
Checked Iconapp:checkedIcon选中状态的图标
Paddingsapp:chipStartPaddingchip左边距
Paddingsapp:chipEndPaddingchip右边距
Paddingsapp:iconStartPaddingchipIcon的左边距
Paddingsapp:iconEndPaddingchipIcon的右边距
Paddingsapp:textStartPadding文本左边距
Paddingsapp:textEndPadding文本右边距
Paddingsapp:closeIconStartPadding关闭按钮的做左边距
Paddingsapp:closeIconEndPadding关闭按钮的右边距

2.3 Chip的监听

(1)点击事件的监听setOnClickListener

chip_normal1.setOnClickListener {
      Toast.makeText(mActivity, "Chip被点击了", Toast.LENGTH_SHORT).show()

(2)选中状态的监听setOnCheckedChangeListener

chip_filter.setOnCheckedChangeListener { buttonView, isChecked ->
    var hintStr = ""
    if (isChecked) {
            hintStr = "被选中了"
    } else {
            hintStr = "取消选中了"
    Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()
  • 只有 checkable 属性为true 时该监听才会生效
  • 未设置 checkable 属性时,如果应用了 filter/entry/choice 的style , 该监听可生效,因为这三种style 中 checkable 的值为true。而 ation 的 style 中 checkable 是默认关闭的

(3)关闭按钮被点击的监听setOnCloseIconClickListener

//关闭按钮的点击监听——closeIcon 没有id,所以必须需要构造匿名监听
chip_entry.setOnCloseIconClickListener {
    Toast.makeText(mActivity, "ClostIcon被点击了", Toast.LENGTH_SHORT).show()

3.ChipGroup

与 RadioGroup 类似,ChipGroup 是用来管理多个Chip的 ,可以控制多个 chip 的布局方式以及事件。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    tools:context=".SecondFragment">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="横向排列" />
    <com.google.android.material.chip.ChipGroup
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />
        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />
        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />
        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />
        <com.google.android.material.chip.Chip
            style="@style/Widget.MaterialComponents.Chip.Entry"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="EntryChip " />
    </com.google.android.material.chip.ChipGroup>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:text="单行滚动排列" />
    <HorizontalScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="16dp">
        <com.google.android.material.chip.ChipGroup
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:singleLine="true">
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />
            <com.google.android.material.chip.Chip
                style="@style/Widget.MaterialComponents.Chip.Entry"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="EntryChip " />
        </com.google.android.material.chip.ChipGroup>
    </HorizontalScrollView>
</LinearLayout>

3.1 ChipGroup的特点

使用 ChipGroup 可以方便的实现 流式布局效果。其特点如下:

  • 默认情况下, ChipGroup 中的 chip 会横向排列,当超过一行时会执行换行操作。
  • 如果我们不想让 Chip 换行,那么为 ChipGroup 设置 app:singleLine="true",如果 Chip 会超过一行,则在外层包裹 HorizontalScrollView
  • 只有当其中包裹的 Chip 是 checkable=true 时,才具有选中效果

3.2 ChipGroup的属性

属性名称作用示例
app:checkedChip初始选中的chipapp:checkedChip=”@id/chipInGroup2_1”
app:chipSpacingChip间的间距app:chipSpacing=”25dp”
app:chipSpacingHorizontalChip间的水平间距app:chipSpacingHorizontal=”35dp”
app:chipSpacingVerticalChip间的垂直间距app:chipSpacingVertical=”10dp”
app:singleLine是否开启单行模式app:singleLine=”true”
app:singleSelection是否开启单选模式app:singleSelection=”true”
  • 如果 app:singleLine="false", app:chipSpacing 会同时控制Chips间的水平和垂直的间距
  • 如果 app:singleLine="true", app:chipSpacing 控制的是Chips之间的水平间距
  • 如果设置了 app:chipSpacing,也设置了 app:chipSpacingHorizontal / app:chipSpacingVerticalapp:chipSpacing的值会被覆盖

3.3 ChipGroup的监听

(1)选中监听setOnCheckedChangeListener

注意: 只有 singleSelction=true 时,该监听才有效。

 //ChipGroup中设置选中监听-- 只有单选的chipGroup才可以使用
        chipGroup2.setOnCheckedChangeListener { chipGroup, selectedId ->
            var hintStr = ""
            when (selectedId) {
                R.id.chipInGroup2_1 -> hintStr = "被选中的是 chipInGroup2_1 "
                R.id.chipInGroup2_2 -> hintStr = "被选中的是 chipInGroup2_2 "
                R.id.chipInGroup2_3 -> hintStr = "被选中的是 chipInGroup2_3 "
                else -> hintStr = "没有选中任何chip"
            Toast.makeText(mActivity, hintStr, Toast.LENGTH_SHORT).show()

(2)获取选中Chipid getCheckedChipIds

	val ids = chipGroup2.getCheckedChipIds()
                    1.SwitchMaterial加强版的Switch直接使用  &lt;com.google.android.material.switchmaterial.SwitchMaterial    android:layout_width="wrap_content"    android:layout_height="match_parent"    android:checked="true"    android:enabled="true"/&gt;添加开关文字  &lt;com.
				
引用: https://blog.csdn.net/qq_34906385/article/details/93524163 app:tabIndicatorColor :指示线的颜色 app:tabIndicatorHeight : 指示线的高度 app:tabIndicatorFullWidth=false 指示线是否铺满宽度 app:tabSelectedTextColor : tab选中时的字体颜色 app:tabTextColor=@color/colorPrimary :未选中字体颜色 app:tabBackground=color : 整个tablayout颜色
最近针对日常业务需求使用react封装了一套[组件库], 大概记录下整个开发过程中的心得。由于篇幅原因,在这里只对开发过程中比较纠结的选型和打包等进行讨论,后续再对具体组件的封装进行讨论。 我们都知道,组件化的开发模式对于我们的开发效率有着极大的提升,针对我们日常使用的基本组件进行封装,可以大量的简化我们对于基本UI的关注度,让我们的工作聚焦在业务逻辑上,很好的分离业务与基础UI的代码,使得整个项目更有调理,这也是我们要进行本组件库开发的原因。 然而现有React开源组件有很多,像ant-design和material-ui等等,是否需要花费精力打造适合自身团队的组件库往往需要酌情考
👉关于作者 众所周知,人生是一个漫长的流程,不断克服困难,不断反思前进的过程。在这个过程中会产生很多对于人生的质疑和思考,于是我决定将自己的思考,经验和故事全部分享出来,以此寻找共鸣 !!! 专注于Android/Unity和各种游戏开发技巧,以及各种资源分享(网站、工具、.
继续这一系列的Material Design之行,昨天讲的是Sliders链接如下:http://blog.csdn.net/ddwhan0123/article/details/50586510 今天讲的是Switch,本来有考虑把它和CheckBox一起做了,但是毕竟实现不同,还是分开做吧,废...
1. 说明 angular-material2自身文档不详,控件不齐,使用上造成了很大的障碍。这里提供一个方案用于封装我们最常用的alert和confirm组件。 2. 官方使用方法之alert ①编写alert内容组件 @Component({ template : `<p>你好</p>` export class AlertComponent { constructor(){ ②在所属模块上声明 //必须声明两处 declarations: [ AlertComponent], entryComponents : [ AlertComponent] ③使用MdD
未维护该库的第一个版本。 正在开发完全用Kotlin重写的新版本。 材料芯片输入 适用于AndroidMaterial Design 组件的实现。 该库提供两个视图: 和 。 要使用此库,您的minSdkVersion必须大于等于15。 在您的项目级别build.gradle中: allprojects { repositories { maven { url " https://jitpack.io " } 在您的应用程序级别build.gradle中: dependencies { compile ' com.github.pchmn:MaterialChipsInput:1.0.8 ' 该视图实现了“材料设计 。 它由一组芯片( ChipView )和一个输入( EditText )组成。 触摸芯片可打开完整的详细视图(如果未禁用)。 上面的描述了ChipsInput视图的行为。 但是,所有内容都是可配置的(可选的头像图标,可 Remember put this for custom attribute usage xmlns:app="http://schemas.android.com/apk/res-auto" For Gradle Add repository repositories { maven { url "http://dl.bintray.com/glomadrian/maven"
Android Material Design是谷歌推出的一种视觉设计语言,用于开发Android应用程序的用户界面。它基于以前的设计语言,但添加了新的元素和特性,使应用程序看起来更加现代和精致。 Material Design的核心原则包括: 1. 材料: 界面元素像一张纸一样,具有厚度和高度,能够在三维空间中移动,反射和投影光影。 2. 移动: 界面元素应该流畅、自然地移动,而不是突兀地切换。 3. 颜色: 使用鲜艳的颜色和对比度,以提高用户体验。 4. 图标: 使用明确、一致和可识别的图标,以帮助用户快速理解和使用应用程序。 5. 排版: 使用清晰、易读的字体和排版方式,以使应用程序易于使用Android Material Design还提供了大量的组件和样式,使应用程序的开发更加简单和快速。开发人员可以使用Material Design的各种资源和工具,轻松地创建具有一致性和美感的应用程序。