如何在安卓手机上制作类似于PPT的形状格式的按钮Button(如图,矩形、圆角矩形、透明轮廓矩形、文本TextView矩形点击事件),接下来用代码告诉你
第一步:在src——main——res——drawable 目录 点击右键-New-点击新建Drawable Resource File
然后,我们先将root element 修改成shape
注:
常用的Root element 包括:
1.shape主要是定义一个形状,然后可以设置给某个按钮作为背景,最常用的就是圆角按钮。
2.selector主要是定义不同状态按钮的背景等。
按钮1(文件 btn_1.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 实心长方形 -->
<solid android:color="#FF9999" />
<!-- 设置弧度 -->
<corners android:radius="10dp" />
</shape>
按钮2(文件 btn_2.xml):
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 空心长方形 -->
<stroke
android:width="1dp"
android:color="#AA55AA" />
<!-- 设置弧度 -->
<corners android:radius="8dp" />
</shape>
按钮3(文件 btn_3.xml):
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"> <!-- 点击时候的按钮样式 -->
<shape>
<solid android:color="#11992C" />
<corners android:radius="15dp" />
</shape>
</item>
<item android:state_pressed="false"> <!-- 不点击时候的按钮样式 -->
<shape>
<solid android:color="#B3F7C0" />
<corners android:radius="15dp" />
</shape>
</item>
</selector>
最后就是在xml布局文件中写入Button控件,引用已经在drawable里面定义好的shape
那要怎么引用呢?
android:background="@drawable/btn_1"
用background后面跟“@drawable/文件名”
这是源码:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="15dp">
<Button
android:id="@+id/btn_1"
style="@style/Button_std"
android:text="按钮1"
android:background="@drawable/btn_1"
android:textColor="#FFFFFF"
android:onClick="showToast"
/>
<Button
android:id="@+id/btn_2"
style="@style/Button_std"
android:text="按钮2"
android:textColor="#F70997"
android:background="@drawable/btn_2"
android:layout_below="@id/btn_1"
android:layout_marginTop="10dp"
/>
<Button
android:id="@+id/btn_3"
style="@style/Button_std"
android:text="按钮3"
android:textColor="#FFFFFF"
android:background="@drawable/btn_3"
android:layout_below="@id/btn_2"
android:layout_marginTop="10dp"
/>
<TextView
android:id="@+id/tv_1"
android:layout_width="match_parent"
android:layout_height="40dp"
android:text="文本1"
android:textSize="20sp"
android:textColor="#000000"
android:background="#EEEE00"
android:layout_below="@id/btn_3"
android:layout_marginTop="10dp"
android:gravity="center"
/>
这里的Button为什么没有layout_height 或layout_width等属性呢?
原来是定义在res/value/styles.xml 文件下,在这里把三个按钮的统一格式写出styles里的Button_std
标准,在原布局文件中用style="@style/Button_std" 让代码被复用,同时让原来的布局文件更加简洁。
可以自己在java文件中设置点击事件:
具体效果如下:
没有点击按钮3时的:
点击按钮3:
其他进阶属性,可参考博客: