小白7码-android原生开发皮毛系列(2)-Button以及Checkbox

1,675 阅读7分钟

在上一章中,大家应该对TextView的使用有一个基本的了解。这一章小白会讲解一下Button系列中的一部分常用的控件。当然很多朋友可能会奇怪为什么标题里还有Checkbox?如果大家阅读过官方API文档,应该不会奇怪。不仅Checkbox,包括RadioButton,ToggleButton甚至Switch其本质都是一个Button,只是大家的具体行为方式有所不同而已,就如同猫和鱼,本质都是动物,只是一个是走,一个是游。至于为什么设计这样的接口继承层级,小白也不明所以,可能的猜测是大家有一个点击的过程。那么还是让我们言归正传吧。

Button

Button(按钮)控件在android原生开发中如TextView一样常见但是又非常重要的控件。它提供了触摸点击等基本交互能力,例如填写表单完成时候通常需要点击保存按钮保存数据。首先Button其实也是一个TextView,这一点小白在上一章中也提到过。所以TextView有的能力,Button也有,甚至我们会发现Button本身监听触发触摸点击事件的能力也是从老祖宗View那边继承过来的。唯一有所不同的是,TextView需要通过设置clickable属性来激活这个能力,而Button是本能的。

  1. 按钮点击

点击按钮处理对应的事件是Button最常用的使用方法。首先我们需要在Activity布局文件中创建一个Button,同时我们需要给这个Button一个身份表识,即id属性。此外通常也会赋予Button一个文本或者图标如下图。

                                                            图1  Button

然后在Activity的代码文件中通过身份表识即id找到Button实例,并通过Button实例的setOnClickListener添加自定义的按钮单击事件。当然你也可以添加触摸,拖拽以及长按等其他交互事件。

                                                    图2 添加单击事件

  1. 个性化定制

在个性化时代的到来,每个控件的形状,样式,配色都必须切合设计的主题。原生内建的按钮样式通常很难满足个性化的需求。所以需要根据自身的需求对按钮的外观进行定制。

这里通过上一章一个自定义深色圆角的保存按钮的例子加以介绍,需求是:背景深色,圆角,点击或者聚焦底色变浅。

  • 在colors.xml定义两个颜色用于按钮默认的背景色和按钮被按下状态时的深一点的背景色。

    < color name="colorButton">#5080FB</ color> < color name="colorButtonDark">#2457DA</ color>

  • 在dimens.xml文件中定义按钮的背景高度以及圆角直径。

    < dimen name="buttonHeight">34dp</ dimen> < dimen name="saveButtonRadius">34dp</ dimen>

  • 新建Save Button selector背景文件。

  • 新建Save Button style。

    <item name="android:background">@drawable/save_button</item> <item name="android:textColor">@color/colorWhite</item>
  • 在strings.xml文件中定义文本。

    < string name="save_button_text">保存</ string>

  • 给Button指定style,文本

最终我们将得到如图3所示自定义的按钮样式,当然大家也可以根据自己的需求定义不同的样式,不同于TextView,Button不需要在style中显式设置clickable,因为它本身就是clickable的。

                          

                                                           图3 自定义按钮

不知道是否有码友注意到当我们自定义按钮背景时候,总是背景里有一层几乎透明的脏脏的类似阴影的颜色层存在,那么这里告诉一个去掉这个颜色层的小技巧: android:stateListAnimator=“@null”. stateListAnimator是android API 21引入的负责更细腻的按钮交互效果处理的属性。但是通常设计上会兼容到andriod API 16。有兴趣的朋友可以自己收集资料研究一下。

Checkbox

复选框(Checkbox)也是比较重要的控件。但是对于手机应用而言,如果你有很多选项,比如几十个或者近百个,那么不太推荐使用复选框,需要寻求其他展现方式。Checkbox是一种Button,准确的来说是叫CompoundButton,可义点击。其行为方式和Button不一样,它会显示勾选或者未勾选。此外在自定义的时候,通过selector设置控件背景时,需要使用checked而不是pressed。

Andriod中Checkbox与Html其他UI中的Checkbox不太一样,它不仅包含复选框的选框,同时也包含文本。正如小白把TextView看作是一个装了文本的盒子一样。Checkbox也是一个盒子,只不过它同时装了选框以及对应文本。让我们来看一个具体的例子。

 如上图所示,默认Checkbox包含两部分,一部分是我们熟悉的选框,另一部分就是文本,默认选框是未选择的,可以通过checked属性进行控制, 也可以通过setChecked方法在代码中动态控制。文本是可选的,可以不设置。如果文本空,则显示留白,但是有一点要注意,即使文本为空,也并不表示Checkbox的大小只有选框大小。两者没有直接关联。

  1. 设置事件

Checkbox和Button一样可以设置监听事件,通过setOnCheckedChangeListener我们就可以及时获得Checkbox的状态,过程和Button一样,直接上代码:

private void initBookGroup1(){

this.bookGroup1 = findViewById(R.id.bookGroup1);

this.bookGroup1.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

// 获取勾选状态,处理选中逻辑

}

});

}

  1. 个性化定制

Checkbox的个性化定制相对来说要复杂一些。有朋友会说设置一下background就好了嘛。曾几何时,我也是这么认为。但是当我开始设置background后我发现这是错误。正如前面小白提到的TextView和Checkbox的盒模型。Checkbox包括选框和文本两部分,它的background属性改变的是整个Checkbox的背景而不它的选项框。我们可以使用上面的按钮的背景稍作改变给Checkbox作背景试试看:                                                    

                                       图5 Checkbox应用background

正如图5所示,当给Checkbox设置背景之后,Checkbox就表现的很奇怪。通过Background并没有达到我们通常想要的个性化定制的要求。事实上,我们只是想要定制选框这部分就可以了,而不是全部。所以结论是我们搞错对象了。幸好官方提供了定制选框的接口,我们可以通过button属性来定制。是的,你没看错,这里是button属性而不是button按钮。button属性接受drawable类型参数。所以图片,矢量图形都是来者不惧的。那么我们先通过一个具体的例子看一下吧:一个未勾选时候显示红色边框,勾选的时候实现黑边,蓝底并有白色勾选图标的勾选框。

  • 在drawable文件夹下添加12dp的勾选图标,具体请参照TextView中关于drawable部分章节的介绍

  • 在colors.xml中添加Checkbox勾选和未勾选时的背景和边框颜色。

    < color name="checkedColor">#0000ff</ color> < color name="checkedBorderColor">#333333</ color> < color name="uncheckedColor">#ff0000</ color>

  • 在dimens.xml中添加Checkbox的大小尺寸,边框宽度和边框偏移等数值。

    < dimen name="checkboxSpacing">3dp</ dimen> < dimen name="checkboxSize">20dp</ dimen> < dimen name="checkboxStroke">2dp</ dimen>

  • 新建selector文件,设置Checkbox未勾选和勾选时候的背景。

  • 给Checkbox应用button属性。

通过上述设置我们就可以得到一个选中后显示如下的Checkbox:

                         

                                                       图7 个性化勾选后的Checkbox

Checkbox的个性化定制通常需要借助layer-list图层层叠来完成。如上面的例子,在Checkbox勾选后,既要显示黑色边框,蓝色背景,同时还有显示勾选图标。通过layer-list我们可以让图标置于蓝色背景上,从而达到我们想要的效果。另外Checkbox的选框与控件通常留有一点控价,而不是全部占用,通过layer-list的top,bottom,left,right偏移就可以很好解决。layer-list的偏移相当于规定了起始绘画点和结束绘画点,超出范围的留白。

结论

通过上面的章节,大家应该对Button以及Checkbox的使用有所了解。Button以及Checkbox相对来说不是很复杂,但是还是满重要的。对于个性化定制来说,Checkbox会复杂一些,但是我相信肯下功夫,一切皆能迎难而解。