自定义style

在Android的编程中,定义的一个按钮的点中,获得焦点等一些状态时,各个状态使用不同的图片,如下在drawable目录下定义了一个Button的各种状态时的样式,btn_blue.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_window_focused="false" android:state_enabled="true"
        android:drawable="@drawable/btn_blue_normal">
    </item>
    <item android:state_window_focused="false" android:state_enabled="false"
        android:drawable="@drawable/btn_blue_normal_disable">
    </item>
    <item android:state_focused="true" android:state_enabled="true"
        android:drawable="@drawable/btn_blue_selected">
    </item>
    <item android:state_pressed="true" android:drawable="@drawable/btn_blue_pressed">
    </item>
    <item android:state_enabled="true" android:drawable="@drawable/btn_blue_normal">
    </item>
    <item android:state_focused="true"
        android:drawable="@drawable/btn_blue_normal_disable_focused">
    </item>
    <item android:drawable="@drawable/btn_blue_normal_disable">
    </item>
</selector>

这里用到了一些按钮状态图片,然后在main.xml文件中定义一个Button,

<Button android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    style="@style/ButtonBlue"
    android:text="按钮"/>

这里用到了style属性。如果这样写style="@drawable/btn_blue"时,是显示不出我们自定义的效果的。

在values目录下,新建attrs.xml。在其中定义:

<resources>

    <style name="ButtonBlue" >
        <item name="android:background">@drawable/btn_blue</item>
    </style>

注意item name="android:background"这里我各个状态主要是改变其背景色,所以这里我写的name="android:background"。在item标签中加载drawable目录下的btn_blue.xml文件。这里<style name="ButtonBlue" >
这里的name是自己写名字,然后在main.xml文件中style属性如下:style="@style/ButtonBlue"


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue2中,你可以使用自定义样式来修改组件的样式。有几种方法可以实现这个目标: 1. 使用内联样式:你可以在模板中使用`style`属性来设置组件的内联样式。例如: ```html <template> <div :style="{ color: textColor, fontSize: fontSize + 'px' }"> 这是一个自定义样式的组件 </div> </template> <script> export default { data() { return { textColor: 'red', fontSize: 14, }; }, }; </script> ``` 在上面的例子中,我们使用`:style`指令来绑定一个对象,对象的属性对应样式的属性,属性值为对应的样式值。 2. 使用全局样式:你可以在Vue的根组件或者其他全局组件中定义全局样式,然后在组件中使用这些样式。例如: ```html <!-- 在根组件或者其他全局组件中 --> <style> .custom-style { color: red; font-size: 14px; } </style> <!-- 在组件中使用全局样式 --> <template> <div class="custom-style"> 这是一个自定义样式的组件 </div> </template> ``` 在上面的例子中,我们在根组件或者其他全局组件中定义了一个名为`.custom-style`的类,然后在组件中使用该类来应用样式。 3. 使用CSS模块化:如果你在Vue项目中启用了CSS模块化,你可以在组件中使用模块化的方式来定义和使用样式。例如: ```html <!-- 在组件中定义模块化样式 --> <style module> .custom-style { color: red; font-size: 14px; } </style> <!-- 在组件中使用模块化样式 --> <template> <div :class="$style.customStyle"> 这是一个自定义样式的组件 </div> </template> ``` 在上面的例子中,我们在组件的`<style>`标签上添加了`module`属性,表示启用CSS模块化。然后我们可以使用`$style`对象来引用模块化的样式。 这些方法可以根据你的具体需求选择适合的方式来自定义组件的样式。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值