In this tutorial, we’ll be customizing the Buttons in our Android Application. If you aren’t aware of Android Buttons, check out this tutorial before proceeding. We’ll be setting selectors and shapes on our buttons in xml.
在本教程中,我们将在Android应用程序中自定义按钮。 如果您不了解Android Button,请先阅读本教程,然后再继续。 我们将在xml中的按钮上设置选择器和形状。
Android按钮设计 ()
A selector is used to define a different behaviour for different states of the Button.
选择器用于为按钮的不同状态定义不同的行为。
What are drawable states?
什么是可绘制状态?
Each of the following events of a view (Button or any other kind of view) are a type of state:
视图的以下每个事件(按钮或任何其他类型的视图)都是一种状态:
- state_pressed state_pressed
- state_selected state_selected
- state_focused state_focused
- state_enabled state_enabled
state_focused is when you hover over the widget. Typically works only on emulators.
当您将鼠标悬停在小部件上时,即为state_focused。 通常仅在模拟器上工作。
state_selected is meant to select the view. Doesn’t work with Buttons. Works with RadioButtons.
state_selected用于选择视图。 与按钮不兼容。 与RadioButtons一起使用。
Typically for a button, there are just three important states: normal, pressed and enabled.
通常,对于一个按钮,只有三个重要的状态:正常,按下和启用。
For each of the states of the selector, we can set a different drawable/color/shape on our button. Let’s get started with the implementation of each of these in a new Android Studio Project.
对于选择器的每种状态,我们可以在按钮上设置不同的drawable / color / shape。 让我们开始在一个新的Android Studio项目中实现这些功能。
Android自定义按钮项目结构 ()
We’ll be looking at each of the drawable files one at a time.
我们将一次查看每个可绘制文件。
The colors are defined in the colors.xml file :
颜色在colors.xml文件中定义:
A selector can be an xml file created inside the drawable folder.
选择器可以是可绘制文件夹内创建的xml文件。
Selector for different background colors.
The following selector file btn_bg_selector.xml
contains the code for setting different background colors on a button for different states.
不同背景颜色的选择器。
以下选择器文件btn_bg_selector.xml
包含用于在按钮上为不同状态设置不同背景色的代码。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/apk/res/android">
<item android:state_pressed="true" android:drawable="@color/red"/>
<item android:state_focused="true" android:drawable="@color/yellow"/>
<item android:drawable="@color/green"/>
</selector>
In the above code, each of the states is represented using item tag. The selector tag behaves like an if – else if statement to an extent. It checks every condition from top to bottom. Whenever the condition matches, it sets the relevant things on the button and stops processing the next item tags.
在上面的代码中,每个状态都使用item标签表示。 选择器标记在某种程度上类似于if – else if语句。 它从上到下检查每个条件。 只要条件匹配,它将在按钮上设置相关内容,并停止处理下一个项目标签。
The third item tag is the default one. It’s important that we keep it at the last. Keeping it at the top would not allow the other two item tags to get executed ever.
第三个标签是默认标签。 重要的是我们将其保留在最后。 将其保持在顶部将永远不会执行其他两个项目标签。
We set the above drawable selector file on our button in the activity_main.xml
as:
我们在activity_main.xml
的按钮上将上述可绘制选择器文件设置为:
<Button
android:id="@+id/btnBgSelector"
android:layout_width="wrap_content"
android:layout_height="wrap_content"