一只大二狗的Android历程--简单自定义按钮样式(Custom Button Style)

2017年3月6日 10:20PM

距离上次写博客已经有5天的时间了,维修队里要准备雷锋月的活动着实花了我不少精力,到处跑赞助,送申请表,,╮(╯_╰)╭
今天写个简短的博客,用一个例子来演示在安卓开发中简单自定义Button的样式(话说这样的博文已经烂大街了吧 。。)

更新说明:下一篇内容重点内容 发现不用这么麻烦,而且还能做渐变色的点击颜色。。。

现在要演示的例子中包含了按钮的圆角,渐变色,点击颜色

<!--这个是放在drawable里的button_style.xml-->

<?xml version="1.0" encoding="UTF-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!--渐变色-->
    <gradient
        android:startColor="#8DEEEE"
        android:endColor="#FF8247"
        android:angle="90" />
    <!--圆角角度,值越大越圆-->
    <corners android:radius="5dip" />
    <!--按钮内的文字位置居中-->
    <padding
        android:left="10dp"
        android:top="10dp"
        android:right="10dp"
        android:bottom="10dp"
        />
</shape>
<!--这个是放在drawable里的button_selector.xml-->

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/unpressed" android:state_pressed="false"/>
    <item android:drawable="@drawable/pressed" android:state_pressed="true"/>
</selector>


<!--这个是放在values/string.xml里的-->

<resources>
    <string name="app_name">Button</string>
    <drawable name="unpressed">#ff6501</drawable>
    <drawable name="pressed">#a44100</drawable>
</resources>
<!--这个是写在activity_main.xml里的-->

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.eee.button.MainActivity">

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/button_style"
        android:text="Button_Style"
        android:id="@+id/button"
        android:layout_marginTop="117dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <Button
        android:text="Press_change_color"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/button"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="62dp"
        android:background="@drawable/button_selector"
        />

</RelativeLayout>

效果图
这里写图片描述

这里写图片描述

PS:请原谅的我的审美吧,感觉略丑啊 = =

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用 Element UI 的 el-tabs 组件时,如果需要在选项卡右边添加自定义按钮,可以通过自定义样式及插槽来实现。 首先,我们可以为选项卡容器(el-tabs)添加一个自定义样式类,例如"custom-tabs",然后在样式中设置该类的 position 为 relative,以便在选项卡右侧定位自定义按钮。 接下来,在 el-tabs 组件内部,我们可以使用插槽来自定义选项卡标签的内容。使用名为"label"的插槽,可以将自定义的标签内容插入到选项卡中。 为了实现在选项卡右侧添加按钮,我们可以在该插槽内部,通过 CSS 绝对定位的方式将按钮添加到选项卡右侧。我们可以使用一个额外的 div 元素来包裹按钮,并设置该元素的 position 为 absolute,然后设置其 right 值为 0,将按钮定位到选项卡右侧。 以下是一个示例代码: ``` <template> <el-tabs class="custom-tabs"> <el-tab-pane label="标签一"> 内容一 </el-tab-pane> <el-tab-pane label="标签二"> 内容二 </el-tab-pane> <template slot="label"> <span>标签三</span> <div class="custom-button"> <el-button type="primary">自定义按钮</el-button> </div> </template> </el-tabs> </template> ``` ```css .custom-tabs { position: relative; } .custom-button { position: absolute; right: 0; top: 0; } ``` 通过以上方式,我们就可以在 el-tabs 组件的选项卡右侧添加自定义按钮了。根据实际需求,可以对按钮进行样式调整、添加点击事件等操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值