直播软件搭建,渐变色按钮带阴影样式

发布于 2022年 05月 19日 18:27

直播软件搭建,渐变色按钮带阴影样式

实现

在drawable文件夹创建文件 bg_button_blue_gradient.xml,内容如下:

 


<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 阴影 -->
    <item
        android:bottom="0dp"
        android:left="0dp"
        android:right="0dp"
        android:top="0dp">
        <shape android:shape="rectangle">
            <!-- 阴影也可以弄成渐变的阴影,偷了懒,选了很浅的颜色#E7EDFE直接当阴影了,有耐心或者有UI图的,可以自己吸色做渐变 -->
            <gradient
                android:angle="270"
                android:endColor="#E7EDFE"
                android:startColor="#E7EDFE"
                android:type="linear"/>
            <corners
                android:bottomLeftRadius="@dimen/dp_60"
                android:bottomRightRadius="@dimen/dp_60"
                android:topLeftRadius="@dimen/dp_60"
                android:topRightRadius="@dimen/dp_60"/>
        </shape>
    </item>
<!-- 实心内容 bottom、left、right、top的距离就是阴影显示的范围,0就是没有阴影显示的范围-->
    <item
        android:bottom="5dp" 
        android:left="3dp"
        android:right="3dp"
        android:top="0dp">
        <shape android:shape="rectangle">
        <!-- 圆角,想要左右两边都是半圆型,大小就要与按钮的高度一样,我按钮高度为dp_60 -->
            <corners android:topLeftRadius="@dimen/dp_60" android:topRightRadius="@dimen/dp_60"
                android:bottomLeftRadius="@dimen/dp_60" android:bottomRightRadius="@dimen/dp_60"/>
        <!-- 渐变的关键,具体自己百度文档,可以按照属性调出你想要的渐变色 -->   
            <gradient android:type="linear" android:useLevel="true" android:startColor="#3D7EFF" android:endColor="#0648F8" android:angle="180" />
        </shape>
    </item>
</layer-list>

使用

建议用LinearLayout当按钮,因为里面好添加其他内容,如果没有其他内容要添加,也可以使用TextView,减少原生控件Button的样式对布局的困扰。

 


    <LinearLayout
        android:id="@+id/ly_create_task"
        android:gravity="center"
        android:layout_marginLeft="@dimen/dp_40"
        android:layout_marginRight="@dimen/dp_40"
        android:layout_marginTop="@dimen/dp_20"
        android:layout_marginBottom="@dimen/dp_15"
        android:background="@drawable/bg_button_blue_gradient"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dp_60">
        <!-- 为了按钮里的内容垂直居中,需要marginBottom,值大约是阴影高度的一半 -->
        <LinearLayout
            android:layout_marginBottom="@dimen/dp_2"
            android:orientation="horizontal"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content">
            <ImageView
                android:layout_width="@dimen/dp_16"
                android:layout_height="@dimen/dp_16"
                android:layout_gravity="center_vertical"
                android:src="@drawable/ic_button_add_circle_border" />
            <TextView
                android:layout_marginLeft="@dimen/dp_3"
                android:layout_width="96dp"
                android:layout_height="22dp"
                android:text="创建盘点任务"
                android:textColor="#ffffffff"
                android:textSize="16sp"
                />
        </LinearLayout>
    </LinearLayout>

 

以上就是直播软件搭建,渐变色按钮带阴影样式, 更多内容欢迎关注之后的文章

 

推荐文章