一对一直播源码,实现Button按下后颜色加深的效果
一对一直播源码,实现Button按下后颜色加深的效果
一、Android开发
在安卓中利用selector可以实现Button的点击效果,布局文件如下所示:
<Button
android:id="@+id/btn_query"
android:layout_width="match_parent"
android:layout_height="48dp"
android:layout_margin="10dp"
android:background="@drawable/shape"
android:text="查 询"
android:textSize="18sp"/>
其中shape为:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 填充的颜色 -->
<solid android:color="@drawable/selector" />
<!-- 设置按钮的四个角为弧形 -->
<!-- android:radius 弧形的半径 -->
<corners
android:bottomLeftRadius="10dp"
android:bottomRightRadius="10dp"
android:topLeftRadius="10dp"
android:topRightRadius="10dp" />
<padding
android:bottom="3dp"
android:left="3dp"
android:right="3dp"
android:top="3dp" />
</shape>
可以看到Button的形状为矩形,但是四个角通过corners可以设置为弧形,进而形成“胶囊”效果。
要实现Button“点击后颜色加深,释放后颜色恢复”的效果,重点在于solid的设置,即颜色的填充。
看一下颜色文件selector:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="#CCCCFF" android:state_pressed="true" />
<item android:color="#FFFFFF" />
</selector>
Android开发中利用selector可以实现一个控件两种不同的状态。在本例中,当按钮的state_pressed为true时,即按钮被按下时颜色为#CCCCFF,否则为#FFFFFF。
二、HarmonyOS开发
鸿蒙开发中并没有selector,但有一个类似的state-container,实现代码如下:
<Button
ohos:id="$+id:btn_query"
ohos:width="match_parent"
ohos:height="48vp"
ohos:margin="10vp"
ohos:text="查 询"
ohos:background_element="$graphic:selector"
ohos:text_size="18fp"/>
其中selector为:
<?xml version="1.0" encoding="utf-8"?>
<state-container
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="oval">
<item
ohos:element="$graphic:shape"
ohos:state="component_state_pressed" />
<item
ohos:element="$graphic:shape_empty"
ohos:state="component_state_empty"/>
</state-container>
可以看到,当Button状态为component_state_pressed时,Button的布局为shape;当其状态为component_state_empty时,Button的布局为shape_empty。
分别给出这两个布局文件:
shape:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<!-- 填充的颜色,这里为按下后的颜色 -->
<solid
ohos:color="#CCCCFF"/>
<!-- 设置按钮的四个角为弧形 -->
<!-- ohos:radius 弧形的半径 -->
<corners
ohos:radius="100"/>
<!-- bounds:Button里面的文字与Button边界的间隔 -->
<bounds
ohos:bottom="3vp"
ohos:left="3vp"
ohos:right="3vp"
ohos:top="3vp" />
</shape>
shape_empty:
<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:shape="rectangle">
<!-- 填充的颜色 -->
<solid
ohos:color="#cccccc"/>
<!-- 设置按钮的四个角为弧形 -->
<!-- ohos:radius 弧形的半径 -->
<corners
ohos:radius="100"/>
<!-- bounds:Button里面的文字与Button边界的间隔 -->
<bounds
ohos:bottom="3vp"
ohos:left="3vp"
ohos:right="3vp"
ohos:top="3vp" />
</shape>
可以发现二者只是填充颜色不同,而这两种颜色分别就是按下与不按下时button的颜色。
以上就是一对一直播源码,实现Button按下后颜色加深的效果, 更多内容欢迎关注之后的文章