实现的效果图:
图1:
图2:
第一步:
activity_main.xml ,布局代码
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="/apk/res/android"xmlns:app="/apk/res-auto"xmlns:tools="/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context=".MainActivity"><Buttonandroid:layout_width="match_parent"android:layout_height="wrap_content"android:layout_centerInParent="true"android:layout_marginLeft="100dp"android:textColor="#fff"android:text="登录"android:textSize="18dp"android:background="@drawable/button_style"/></RelativeLayout>
第二步:
在 res/drawble 目录下新建自定义xml文件,名字为: button_style.xml
<?xml version="1.0" encoding="utf-8"?><selector xmlns:android="/apk/res/android"><!--点击之前--><item android:state_pressed="false"><shape android:shape="rectangle" ><!--设置渐变色 angle=0 从左到右渲染,angle=90从上到下渲染,angle=180 从右到左渲染,--><!--startColor 为开始颜色 , endColor 为最终后的颜色--><gradientandroid:angle="0"android:startColor="#0626f5"android:endColor="#c95669" /><!--设置角的弧度--><!--radius 越大,按钮越圆--><corners android:radius="30dp" /><!--设置边框以及弧度--><!--width 越大边框越大越明显 , color 设置外边框颜色--><strokeandroid:width="3dp"android:color="#01f5a8" /></shape></item><!--点击之后--><item android:state_pressed="true"><shape><!--点击之后的颜色--><solid android:color="#06f57a"/><!--设置角的弧度--><!--radius 越大,按钮越圆--><corners android:radius="30dp"/><!--点击之后的边框--><!--width 越大边框越大越明显 , color 设置外边框颜色--><strokeandroid:width="3dp"android:color="#f70307"/></shape></item></selector>
MainActivity 不用变,直接点击运行即可!
总结:
1. 渐变色答: < gradientandroid:angle="0" <!--angle=0 从左到右渲染,angle=90从上到下渲染,angle=180 从右到左渲染-->android:startColor="#0626f5"<!--起始颜色-->android:endColor="#c95669" <!--最终颜色-->2. 弧度<corners android:radius="30dp" /><!--radius 越大,按钮越圆-->3. 外边框<strokeandroid:width="3dp"<!--width 越大边框越大越明显 -->android:color="#01f5a8" <!--color 设置外边框颜色 -->4. 点击变色<!--点击之前--><item android:state_pressed="false">...点击之前的按钮样式...</item><!--点击之后--><item android:state_pressed="true">...点击之后的按钮样式...</item>