Android按钮设计，⾃定义按钮，圆形按钮，颜⾊
In this tutorial, we’ll be customizing the Buttons in our Android Application. If you aren’t aware of Android Buttons, check out 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_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.
通常，对于⼀个按钮，只有三个重要的状态：正常，按下和启⽤。改变button按钮的形状
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 l file :
颜⾊在l⽂件中定义：
A selector can be an xml file created inside the drawable folder.
选择器可以是可绘制⽂件夹内创建的xml⽂件。
Selector for different background colors.
The following selector file btn_l contains the code for setting different background colors on a button for different states.
不同背景颜⾊的选择器。
以下选择器⽂件btn_l包含⽤于在按钮上为不同状态设置不同背景⾊的代码。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="schemas.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 the l as:
我们在l的按钮上将上述可绘制选择器⽂件设置为：
<Button
android: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 selector btn_bg_l is used on a button which is not enabled.
以下选择器btn_bg_l⽤于未启⽤的按钮。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="schemas.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。
<Button
android: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 file btn_l
我们可以根据按钮的状态设置不同的可绘制图像来显⽰。
btn_l⽂件中btn_l选择器代码
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="schemas.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中进⾏硬编码或以编程⽅式获取可绘制尺⼨并将其设置在按钮上来实现。 为了⽅便起见，我们在这⾥做了前者：
<Button
android: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 the android:scale attribute to resize the drawable image.
当您需要将可绘制对象显⽰为按钮背景时，ImageButton是理想的视图，因为它恰好适合该可绘制对象。
ImageButton带有android:scale属性，以调整可绘制图像的⼤⼩。
<ImageButton
android: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 from btn_l does so. We need to use android:color here in place of android:drawable.
我们可以根据选择器中的状态更改按钮上的⽂本颜⾊。
来⾃btn_l的以下代码可以btn_l这⼀点。 我们需要在这⾥使⽤android:color代替android:drawable 。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="schemas.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:
布局中的按钮：
<Button
android: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.
shape can be used inside selectors.
我们可以使⽤xml标签<shape>在按钮上设置⾃定义形状。
这些xml⽂件也是在drawable⽂件夹中创建的。
shape可以在selectors内使⽤。
The shape can be set to rectangle(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_l file is given below:
btn_l⽂件的xml代码如下所⽰：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="schemas.android/apk/res/android"
android:padding="16dp"
android:shape="rectangle">
<stroke
android: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_l file, we’ve set the gradient as a radial one. We must set the gradient_radius attribute too.
在下⾯的btn_l⽂件中，我们将渐变设置为radial渐变。 我们也必须设置gradient_radius属性。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。