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按钮设计 (Android Button Design)
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_pressedstate_pressed state_selectedstate_selected state_focusedstate_focused state_enabledstate_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自定义按钮项目结构 (Android Custom Button Project Structure)
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 filebtn_bg_selector.xmlcontains 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="/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 theactivity_main.xmlas:
我们在activity_main.xml的按钮上将上述可绘制选择器文件设置为：
<Buttonandroid:id="@+id/btnBgSelector"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_bg_selector"android:padding="8dp"android:text="Colored Selector" />
The selector is set on the background attribute of the button.
选择器设置在按钮的背景属性上。
禁用按钮选择器 (Selector for Disabled Button)
The following selectorbtn_bg_selector_disabled.xmlis used on a button which is not enabled.
以下选择器btn_bg_selector_disabled.xml用于未启用的按钮。
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:state_enabled="false" android:drawable="@color/yellow"/><item android:state_pressed="true" android:drawable="@color/red"/><item android:drawable="@color/green"/></selector>
For the above selector to work, we need to specify android:enabled as false.
为了使上述选择器正常工作，我们需要将android：enabled指定为false。
<Buttonandroid:id="@+id/btnBgSelectorDisabled"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_bg_selector_disabled"android:enabled="false"android:padding="8dp"android:text="Color Selector Disabled" />
具有不同可绘制对象的选择器 (Selector with Different Drawables)
We can set a different drawable image to be displayed based upon the state of the button.
The selector code that does so is present in the filebtn_drawable_selector.xml
我们可以根据按钮的状态设置不同的可绘制图像来显示。
btn_drawable_selector.xml文件中btn_drawable_selector.xml选择器代码
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:drawable="@drawable/sad" android:state_pressed="true"/><item android:drawable="@drawable/happy" android:state_focused="true"/><item android:drawable="@drawable/happy"/></selector>
Note: The focused state doesn’t work on smart phones.
注意：聚焦状态在智能手机上不起作用。
Now the drawable images when set as the button background can get stretched if it’s width/height is larger than the button’s.
So we need to set the Button width/height in accordance with the drawable image. We can do so either by hardcoding in xml or getting the drawable dimensions programmatically and setting it over the button. For the sake of convenience we’ve done the former here:
现在，将可绘制图像设置为按钮背景时，如果其宽度/高度大于按钮的宽度/高度，则可以拉伸该图像。
因此，我们需要根据可绘制图像设置按钮的宽度/高度。 我们可以通过在xml中进行硬编码或以编程方式获取可绘制尺寸并将其设置在按钮上来实现。 为了方便起见，我们在这里做了前者：
<Buttonandroid:id="@+id/btnDrawableSelector"android:layout_width="48dp"android:layout_height="48dp"android:layout_margin="8dp"android:background="@drawable/btn_drawable_selector"android:padding="16dp" />
ImageButton is the ideal View to be used when you need to display a drawable as the button background only since it fits the drawable appropriately.
ImageButton comes with theandroid:scaleattribute to resize the drawable image.
当您需要将可绘制对象显示为按钮背景时，ImageButton是理想的视图，因为它恰好适合该可绘制对象。
ImageButton带有android:scale属性，以调整可绘制图像的大小。
<ImageButtonandroid:id="@+id/imgButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@color/green"android:padding="8dp"android:scaleType="center"android:src="@drawable/btn_drawable_selector" />
Android按钮颜色 (Android Button Color)
We can change the text color on the button based on the state in the selector.
The following code frombtn_txt_selector.xmldoes so. We need to useandroid:colorhere in place ofandroid:drawable.
我们可以根据选择器中的状态更改按钮上的文本颜色。
来自btn_txt_selector.xml的以下代码可以btn_txt_selector.xml这一点。 我们需要在这里使用android:color代替android:drawable。
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:state_pressed="true" android:color="@color/red"/><item android:state_focused="true" android:color="@color/yellow"/><item android:color="@color/green"/></selector>
The button in the layout:
布局中的按钮：
<Buttonandroid:id="@+id/btnTxtSelector"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="8dp"android:text="Text Selector"android:textColor="@drawable/btn_txt_selector" />
Android按钮形状 (Android Button Shapes)
We can set custom shapes on our button using the xml tag<shape>.
These xml files are created in the drawable folder too.
shapecan be used insideselectors.
我们可以使用xml标签<shape>在按钮上设置自定义形状。
这些xml文件也是在drawable文件夹中创建的。
shape可以在selectors内使用。
The shape can be set torectangle(default),oval,ring,line.
形状可以设置为rectangle（默认），oval，ring，line。
The most used tags inside the shape tag are:
shape标签内最常用的标签是：
<gradient>– Setting start and end colors of the gradient along with the type(radius, linear, sweep)<gradient>–设置渐变的开始和结束颜色以及类型（半径，线性，扫描）<stroke>– Setting border color and width<描边>–设置边框颜色和宽度<solid>– Setting the solid color on the button<纯色>–在按钮上设置纯色<corners>– Setting radius<角>–设置半径
Android圆角按钮 (Android Round Corner Button)
The xml code for the btn_shape_round.xml file is given below:
btn_shape_round.xml文件的xml代码如下所示：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="/apk/res/android"android:padding="16dp"android:shape="rectangle"><strokeandroid:width="1dp"android:color="@android:color/black" /><corners android:radius="10dp" /></shape>
Just like selectors, we can set this on the android:background tag on the Button in our xml layout.
就像选择器一样，我们可以在xml布局中的Button的android：background标签上进行设置。
带有渐变的Android按钮形状 (Android Button Shape With Gradient)
In the following btn_shape_gradient.xml file, we’ve set the gradient as aradialone. We must set the gradient_radius attribute too.
在下面的btn_shape_gradient.xml文件中，我们将渐变设置为radial渐变。 我们也必须设置gradient_radius属性。
<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="/apk/res/android"android:shape="rectangle"><gradientandroid:endColor="@color/green"android:gradientRadius="30dp"android:type="radial"android:startColor="@color/yellow" /><corners android:radius="@dimen/btn_corner_radius" /><strokeandroid:width="4dp"android:color="@android:color/black" /></shape>
Android按钮形状和选择器一起 (Android Button Shape and Selector Together)
The btn_selector_shape.xml holds the selector. Each of the items has a shape specified.
btn_selector_shape.xml保存选择器。 每个项目都有指定的形状。
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:state_pressed="true"><shape android:shape="oval"><gradient android:angle="135" android:endColor="@color/jd_red" android:startColor="@color/green" /><corners android:radius="20dp" /><stroke android:width="2dp" android:color="@android:color/black" /></shape></item><item><shape android:shape="rectangle"><gradient android:angle="225" android:endColor="@color/green" android:startColor="@color/jd_red" /><corners android:radius="@dimen/btn_corner_radius" /><stroke android:width="4dp" android:color="@android:color/black" /></shape></item></selector>
Set this on the Button and the shape would change from rectangle to oval when the button is clicked.
A linear gradient should have the angle specified in the multiples of 45, else it’ll crash.
在“按钮”上进行设置，单击该按钮时形状将从矩形变为椭圆形。
线性渐变的角度应为45的倍数，否则会崩溃。
Setting the Button shape as capsule
btn_shape_capsule.xmlis where we set the shape inside the selectors as a capsule.
将按钮形状设置为胶囊
btn_shape_capsule.xml是我们在选择器内将形状设置为胶囊的地方。
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><item android:state_pressed="true"><shape android:shape="rectangle"><solid android:color="@color/colorAccent" /><corners android:radius="10dp" /></shape></item><item><shape android:shape="rectangle"><solid android:color="@color/yellow" /><corners android:radius="10dp" /></shape></item></selector>
The code for the MainActivity.java class which hosts all of the above button examples is given below.
下面给出了托管上述所有按钮示例的MainActivity.java类的代码。
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_vertical"android:orientation="horizontal"android:weightSum="2"><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Selectors"android:textColor="@android:color/black"android:textSize="18sp"android:textStyle="bold|italic" /><Buttonandroid:id="@+id/btnBgSelector"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_bg_selector"android:padding="8dp"android:text="Colored Selector" /><Buttonandroid:id="@+id/btnBgSelectorDisabled"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_bg_selector_disabled"android:enabled="false"android:padding="8dp"android:text="Color Selector Disabled" /><Buttonandroid:id="@+id/btnDrawableSelector"android:layout_width="48dp"android:layout_height="48dp"android:layout_margin="8dp"android:background="@drawable/btn_drawable_selector"android:padding="16dp" /><ImageButtonandroid:id="@+id/imgButton"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@color/green"android:padding="8dp"android:scaleType="center"android:src="@drawable/btn_drawable_selector" /><Buttonandroid:id="@+id/btnTxtSelector"android:layout_width="wrap_content"android:layout_height="wrap_content"android:padding="8dp"android:text="Text Selector"android:textColor="@drawable/btn_txt_selector" /></LinearLayout><LinearLayoutandroid:layout_width="0dp"android:layout_height="wrap_content"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:text="Shapes+Selectors"android:textColor="@android:color/black"android:textSize="18sp"android:textStyle="bold|italic" /><Buttonandroid:id="@+id/btnRoundShape"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_shape_round"android:padding="8dp"android:text="ROUND SHAPE" /><Buttonandroid:id="@+id/btnBgShape"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@drawable/btn_shape_gradient"android:padding="8dp"android:text="SHAPE WITH GRADIENT" /><Buttonandroid:id="@+id/btnSelectorShape"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_selector_shape"android:padding="8dp"android:text="SELECTOR SHAPE" /><ImageButtonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_shape_gradient"android:padding="8dp"android:scaleType="center"android:src="@drawable/btn_drawable_selector" /><Buttonandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_margin="8dp"android:background="@drawable/btn_shape_capsule"android:padding="8dp"android:text="Text Selector"android:textColor="@drawable/btn_txt_selector" /></LinearLayout></LinearLayout>
Android自定义按钮设计应用程序输出 (Android Custom Button Design App Output)
The output of the above application in action is given below.
下面给出了上面应用程序的输出。
This brings an end to this tutorial on Button selectors and shapes. You can download the final android studio project from the below link.
这结束了有关按钮选择器和形状的本教程。 您可以从下面的链接下载最终的android studio项目。
Download Android Button Design Project 下载Android Button设计项目
翻译自: /19850/android-button-design-custom-round-color
如果觉得《Android按钮设计 自定义按钮 圆形按钮 颜色》对你有帮助，请点赞、收藏，并留下你的观点哦！
