`
fokman
  • 浏览: 242673 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

定义带箭头的Button 样式

 
阅读更多

定义一个圆角的Button 样式

 

<style name="RoundedCornerView">
        <item name="android:background">@drawable/roundedcorner</item>
        <item name="android:cacheColorHint">@color/trans</item>
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:layout_marginLeft">10dp</item>
        <item name="android:layout_marginRight">10dp</item>
        <item name="android:layout_marginBottom">5dp</item>
        <item name="android:padding">12dp</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:layout_height">wrap_content</item>
</style>

 边角样式:

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <stroke android:width="2dp" android:color="@color/light_gray" />
    <corners android:radius="10dp" />
    <solid android:color="@android:color/white"/>
</shape>

 

创建Button:

<style name="RoundedCornerBtn" parent="RoundedCornerView">
        <item name="android:background">@drawable/roundedcorner_btn</item>
        <item name="android:gravity">left|center_vertical</item>
        <item name="android:textColor">@color/gray</item>
</style>

 定义按钮状态处理样式:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:state_pressed="true" >
        <shape>
		    <stroke android:width="2dp" android:color="@color/orange" />
		    <corners android:radius="10dp" />
		    <solid android:color="@color/orange"/>
	    </shape>
    </item>
    <item android:state_focused="true">
        <shape>
		    <stroke android:width="2dp" android:color="@color/light_gray" />
		    <corners android:radius="10dp" />
		    <solid android:color="@android:color/white"/>
	    </shape>
    </item>
    <item >
        <shape>
		    <stroke android:width="2dp" android:color="@color/light_gray" />
		    <corners android:radius="10dp" />
		    <solid android:color="@android:color/white"/>
	    </shape>
    </item>

</selector>

 

最后到layout里面定义样式:

<style name="RoundedCornerBtnWithRightArrow" parent="RoundedCornerBtn">
        <item name="android:drawableRight">@drawable/view_arrow</item>
</style>

 实际效果显示如下:

这样做比使用layout布局要更加容易管理程序

分享到:
评论

相关推荐

    WPF:带阴影、带箭头的Popup提示框

    为了实现这些效果,开发者可能需要使用XAML语言来编写UI布局,定义Popup的样式和模板。例如: ```xml 这是Popup的内容" /&gt; ``` 在这个例子中,`Popup`的`Shadow`属性添加了阴影效果,`...

    纯CSS3 Bootstrap步骤箭头按钮样式

    本篇文章将深入探讨如何利用纯CSS3在Bootstrap中创建具有箭头样式的步骤按钮,以便于用户更直观地了解操作流程。 首先,我们需要理解CSS3的基本概念。CSS3是层叠样式表的第三版,相较于前两版,它引入了许多新的...

    带箭头左右轮播效果网页特效

    CSS则用于定义轮播图的样式,包括箭头的形状、位置、颜色以及轮播内容的过渡动画效果。 首先,HTML结构应包含一个容器元素,用来放置轮播的所有图片或内容,以及左右箭头元素。每个轮播项会有一个特定的类,便于...

    2个MFC不规则Button类

    不规则Button类是指那些形状不再局限于矩形的传统按钮,而是可以自定义为任意形状,如箭头或其他图形。这种功能通常是通过重载MFC中的OnDraw方法实现的,该方法允许程序员在控件上绘制自己的图形。`UniButton`可能...

    图片轮播带左右箭头和下标

    "图片轮播带左右箭头和下标"是这种设计的一个具体实现,结合了HTML、CSS和JavaScript技术。以下是这个主题的详细解释。 **HTML结构:** HTML是页面的基础框架,用于定义内容和布局。对于一个图片轮播,我们需要创建...

    JavaScript实现的带左右箭头的tab标签代码,tab里面可以放html代码,不限于文字

    2. **CSS样式**:定义tab的样式,包括箭头按钮的外观,激活的tab和非激活tab的区别,以及如何通过CSS控制内容的显示和隐藏。 3. **JavaScript逻辑**:为箭头按钮添加事件监听器,当点击时执行相应的切换函数。这个...

    javascript带箭头的表格排序实例

    在JavaScript编程中,实现带箭头的表格排序是一种常见的需求,尤其在数据展示和交互式网页设计中。本文将深入探讨如何使用JavaScript实现这一功能,包括理解基础的HTML表格结构、CSS样式设置以及JavaScript事件处理...

    VC实现带下拉箭头工具栏

    在VC++编程环境中,创建一个带有下拉箭头的工具栏是实现复杂用户界面功能的重要一环。这种设计常见于许多应用程序,特别是那些需要提供多种操作选项的软件,如Internet Explorer浏览器。本示例将详细讲解如何在MFC...

    带左右控制箭头的图片滚动特效

    左右箭头可以用`&lt;button&gt;`或`&lt;a&gt;`标签创建,设置适当的背景图(箭头图标)和鼠标悬停效果。容器则需设置溢出隐藏(`overflow: hidden`)以实现滚动效果。 3. **JavaScript/jQuery 动画**:为了实现动态滚动,我们需要...

    jQuery带箭头的焦点图滑动切换代码.zip

    例如,`&lt;div&gt;`标签用于包裹整个焦点图区域,每个图片对应一个`&lt;img&gt;`标签,而箭头和索引按钮则可能使用`&lt;a&gt;`或`&lt;button&gt;`标签。 2. **CSS样式**:CSS用于设置图片的布局、箭头和索引按钮的位置以及样式。这可以通过...

    banner焦点图轮播带左右箭头

    在IT行业中,"banner焦点图轮播带左右箭头"是一种常见的网页设计元素,用于展示重要信息或吸引用户注意力。这种设计通常出现在网站的首页、产品介绍页等位置,通过循环播放一组图片来呈现多种内容。现在我们来深入...

    50个CSS超炫丽button样式代码

    在button样式设计中,基本属性如`color`、`font-size`、`background-color`、`border-radius`、`padding`和`width`等是必不可少的,它们定义了按钮的文字颜色、字体大小、背景色、圆角、内边距和宽度。 2. 鼠标交互...

    jQuery 左右图片滚动,带箭头控制

    "jQuery 左右图片滚动,带箭头控制"是一个实用的功能,它能为用户提供方便的交互方式,通过点击左右箭头来切换图片。下面我们将深入探讨如何使用jQuery来实现这一功能。 首先,我们需要了解jQuery的基本概念。...

    SplitButton 分裂按钮 WPF

    例如,你可以改变按钮的背景色、边框样式、下拉箭头的形状等。 5. **数据绑定** SplitButton的`Content`和`DropDownItems`可以与数据源进行绑定,实现动态加载按钮内容和下拉菜单选项。这在处理大量或可变的选项时...

    JQuery带箭头图片左右滚动.zip

    在这个项目中,可能会用到`&lt;div&gt;`来定义滑动区域,`&lt;img&gt;`来显示图片,以及可能的`&lt;button&gt;`元素来作为箭头按钮。 CSS(层叠样式表)是负责网页样式和布局的关键。在实现图片左右滚动效果时,CSS将用于定义图片的...

    SplitButton

    WPF允许你通过定义 `ControlTemplate` 来自定义 `SplitButton` 的外观。这可以通过 `Style` 或直接在 `ControlTemplate` 属性中完成,让你能调整按钮和下拉箭头的视觉表现。 7. **数据绑定** `SplitButton` 支持...

    wpf 中炫酷的分裂按钮SplitButton Demo

    可以使用`Style`和`ControlTemplate`元素定义SplitButton的新样式。例如,可以通过调整背景色、边框、鼠标悬停效果等属性,使SplitButton在不同状态下呈现不同的视觉效果。以下是一个简单的样式定义示例: ```xml ...

    Button的CSS样式

    首先,我们来了解CSS中与Button样式相关的基础概念: 1. **元素选择器**:在CSS中,我们可以使用元素选择器(如`button`)来选中所有的按钮元素,并应用样式。例如,`button { color: blue; }`将使所有按钮的文字...

    WPF中的DataGrid、Button、ComboBox等样式+DataGrid分页控件

    ComboBox的样式也可以通过Style和Template进行自定义,包括下拉箭头的样式、选中项的背景色等。 至于DataGrid的分页功能,WPF本身并不内置分页控件,但可以通过第三方库或自定义逻辑实现。一种常见做法是使用...

    qt箭头按钮源码.zip

    我们可以定义箭头按钮的背景色、边框、字体等属性。 - 例如,我们可以设置箭头的颜色、大小、边框宽度以及按钮的高亮效果。在代码中,可以使用`setStyleSheet()`方法应用QSS。 4. **信号与槽**: - ...

Global site tag (gtag.js) - Google Analytics