Android按钮设计，自定义按钮，圆形按钮，颜色
时间：2020-02-23 14:28:47 来源:igfitidea点击:
在本教程中，我们将自定义Android应用程序中的按钮。
如果您不了解Android Button，请先阅读本教程，然后再继续。
我们将在xml中的按钮上设置选择器和形状。
Android按钮设计
选择器用于为按钮的不同状态定义不同的行为。
什么是可绘制状态？
视图的以下每个事件(按钮或者任何其他类型的视图)都是一种状态：
- state_pressed
- state_selected
- state_focused
- state_enabled
当您将鼠标悬停在小部件上时，即为state_focused。
通常仅在模拟器上工作。
state_selected用于选择视图。
与按钮不兼容。
与RadioButtons一起使用。
通常，对于一个按钮，只有三个重要的状态：正常，按下和启用。
对于选择器的每种状态，我们可以在按钮上设置不同的drawable/color/shape。
让我们开始在一个新的Android Studio项目中实现每个功能。
Android自定义按钮项目结构
我们将一次查看每个可绘制文件。
颜色在colors.xml文件中定义：
选择器可以是可绘制文件夹内创建的xml文件。
不同背景颜色的选择器。
以下选择器文件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>
在上面的代码中，每个状态都使用item标签表示。
选择器标记在某种程度上类似于if – else if语句。
它从上到下检查每个条件。
只要条件匹配，它将在按钮上设置相关内容，并停止处理下一个项目标签。
第三个标签是默认标签。
重要的是我们将其保留在最后。
将其保持在顶部将永远不会执行其他两个项目标签。
我们在" activity_main.xml"中的按钮上将上述可绘制选择器文件设置为：
<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"
选择器设置在按钮的背景属性上。
禁用按钮选择器
以下选择器" btn_bg_selector_disabled.xml"用于未启用的按钮。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="https://schemas.android.com/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>
为了使上述选择器正常工作，我们需要将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"
具有不同可绘制对象的选择器
我们可以根据按钮的状态设置不同的可绘制图像来显示。
btn_drawable_selector.xml文件中存在选择器代码。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="https://schemas.android.com/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>
注意：聚焦状态不适用于智能手机。
现在，如果将可绘制图像设置为按钮背景，则其宽度/高度大于按钮的宽度/高度。
因此，我们需要根据可绘制图像设置按钮的宽度/高度。
我们可以通过在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是理想的视图，因为它恰好适合该可绘制对象。
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按钮颜色
我们可以根据选择器中的状态更改按钮上的文本颜色。
来自btn_txt_selector.xml的以下代码可以做到这一点。
我们需要在此处使用" android：color"代替" android：drawable"。
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="https://schemas.android.com/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>
布局中的按钮：
<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按钮形状
我们可以使用xml标签" <shape>"在按钮上设置自定义形状。
这些xml文件也是在drawable文件夹中创建的。
可以在"选择器"内部使用"形状"。
形状可以设置为"矩形"(默认)，"椭圆"，"环"，"线"。
shape标签内最常用的标签是：
- <gradient> –设置渐变的开始和结束颜色以及类型(半径，线性，扫描)
- <描边> –设置边框的颜色和宽度
- <纯色> –在按钮上设置纯色
- <角>-设置半径
Android圆角按钮
btn_shape_round.xml文件的xml代码如下所示：
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
android:padding="16dp"
android:shape="rectangle">
<stroke
android:width="1dp"
android:color="@android:color/black"
<corners android:radius="10dp"
</shape>
就像选择器一样，我们可以在xml布局中的Button的android：background标签上进行设置。
带有渐变的Android按钮形状
在以下btn_shape_gradient.xml文件中，我们将渐变设置为"径向"渐变。
我们也必须设置gradient_radius属性。
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="https://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:endColor="@color/green"
android:gradientRadius="30dp"
android:type="radial"
android:startColor="@color/yellow"
<corners android:radius="@dimen/btn_corner_radius"
<stroke
android:width="4dp"
android:color="@android:color/black"
</shape>
Android按钮形状和选择器一起
btn_selector_shape.xml保存选择器。
每个项目都有指定的形状。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/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>
在"按钮"上进行设置，单击该按钮时形状将从矩形变为椭圆形。
线性渐变的角度应为45的倍数，否则会崩溃。
将Button形状设置为胶囊btn_shape_capsule.xml是我们将选择器内的形状设置为胶囊的地方。
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="https://schemas.android.com/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>
下面给出了托管上述所有按钮示例的MainActivity.java类的代码。
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center_vertical"
android:orientation="horizontal"
android:weightSum="2">
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Selectors"
android:textColor="@android:color/black"
android:textSize="18sp"
android:textStyle="bold|italic"
<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"
<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"
<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
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"
<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"
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:orientation="vertical">
<TextView
android: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"
<Button
android: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"
<Button
android: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"
<Button
android: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"
<ImageButton
android: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"
<Button
android: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>
