组建你自己的Theme,组件你的Style

Andorid-Style,组建你自己的Theme,组件你的Style

前言:

今天,尝试了一个新的Demo,也尝试深入学习,话不多说,看一下,这个Demo如何实现的自定义主题与组件Style是如何绑定的。

看右图,那个Du 和Dummy Button是自定义的组件主题。请看下面的主题与组件的Style是如何绑定的。

1.自定APP主题,一个总的主题,相当于Java的工厂模式或一个Map表,通过它,可以调用其它的组件Style,例如下面定义的

metaButtonBarStyle和CircleButtonBarButton

<style name="FullscreenTheme" parent="android:Theme.Holo">
    <item name="android:actionBarStyle">@style/FullscreenActionBarStyle</item>
    <item name="android:windowActionBarOverlay">true</item>
    <item name="android:windowBackground">@null</item>
    <item name="metaButtonBarStyle">?android:attr/buttonBarStyle</item>
    <item name="CircleButtonBarButton">@style/CircleButtonBarButton</item>
</style>

2metaButtonBarStyle和CircleButtonBarButton2.定义组件主题

代码如下:

<!-- Backward-compatible version of ?android:attr/buttonBarStyle -->
<style name="ButtonBar">
    <item name="android:paddingLeft">2dp</item>
    <item name="android:paddingTop">5dp</item>
    <item name="android:paddingRight">2dp</item>
    <item name="android:paddingBottom">0dp</item>
    <item name="android:background">@android:drawable/bottom_bar</item>
</style>

<!-- Backward-compatible version of ?android:attr/buttonBarButtonStyle -->s
<style name="CircleButtonBarButton">
    <item name="android:paddingLeft">2dp</item>
    <item name="android:paddingTop">5dp</item>
    <item name="android:paddingRight">2dp</item>
    <item name="android:paddingBottom">8dp</item>
    <item name="android:background">@drawable/circle_btn</item>
</style>

3.在布局界面如何调用呢,有什么组件呢?哪些是可以使用的呢?就是通才attrs来调用有

<resources>

    <!-- Declare custom theme attributes that allow changing which styles are
         used for button bars depending on the API level.
         ?android:attr/buttonBarStyle is new as of API 11 so this is
         necessary to support previous API levels. -->
    <declare-styleable name="ButtonBarContainerTheme">
        <attr name="metaButtonBarStyle" format="reference" />
        <attr name="CircleButtonBarButton" format="reference" />
    </declare-styleable>

</resources>

4.都写好的,可以用了,也可以考虑做个主题库什么的,把9path图片,自定义的组件风格,等,组成一个Theme,只要把二三十个组件做好,就是一个完整的库.

        android:id="@+id/Test"
        style="?metaButtonBarStyle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="@string/dummy_button" />
<Button
    android:id="@+id/dummy_button"
    style="?CircleButtonBarButton"
    android:layout_width="48dp"
    android:layout_height="48dp"
    android:text="@string/dummy_button"
    android:layout_gravity="right|bottom" />
时间: 08-30

组建你自己的Theme,组件你的Style的相关文章

vue自定义日期组件

vue-datepicker 基于 vuejs 2.x 可自定义主题的日期组件 github Usage 只需要在项目中加入 calendar.vue,就可以使用了. 向组件传入 prop 即可改变 calendar 的样式 Props type(String): 默认 single(选择单天),可选 range(选择多天) / time(选择单天 + 时间) isAbandon(Boolean): 默认 true,早于系统日期的日期选项是否不可选 showInput(Boolean): 默认

Openstack组件部署 — Networking service_Compute Node

目录 目录 前文列表 安装组件 配置通用组件 配置自服务网络选项 配置Linux 桥接代理 配置Nova使用网络 完成安装 验证操作Execute following commands on Controller Node 前文列表 Openstack组件部署 - Overview和前期环境准备 Openstack组建部署 - Environment of Controller Node Openstack组件部署 - Keystone功能介绍与认证实现流程 Openstack组件部署 - Ke

Openstack组件部署 — Nova_Install and configure a compute node

目录 目录 前文列表 Prerequisites 先决条件 Install and configure a compute node Install the packages Edit the etcnovanovaconf file Finalize installation 前文列表 Openstack组件部署 - Overview和前期环境准备 Openstack组建部署 - Environment of Controller Node Openstack组件部署 - Keystone功能

React Native控件之PullToRefreshViewAndroid下拉刷新组件讲解

转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50664323 本文出自:[江清清的博客] (一)前言 今天我们一起来看一下PullToRefreshViewAndroid下拉刷新组件讲解以及使用实例 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Native技术爱好者加入交流!同时博客左侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送! 该PullToRefr

关于vue组件的一个小结

用vue进行开发到目前为止也有将近一年的时间了,在项目技术选型的时候隔壁组选 react的时候我们坚持使用vue作为前端的开发框架.虽然两者思想上的差异不大,但是vue的语法在代码的可读性以及后期的维护成本更加的适合,而且最近看到Apache对react的相关许可限制:这里不讨论react和vue的对比哪个好,技术框架没有最好的,只有适合项目才是最好的. 进入主题....... 组件,是vue的核心之一. 我们可以把页面各个子模块看成一个组件,可以独立拆分出来.这样不仅维护变得简单了,而且代码复

React Native 一个组件styles BUG

'use strict'; var React = require('react-native'); var { StyleSheet, PanResponder, View, Text } = React; var CIRCLE_SIZE = 40; var PanResponderExample = React.createClass({ componentWillMount: function() { this._panResponder = PanResponder.create({ o

Android 主题theme说明 摘记

主题Theme就是用来设置界面UI风格,可以设置整个应用或者某个活动Activity的界面风格.在Android SDK中内置了下面的Theme,可以按标题栏Title Bar和状态栏Status Bar是否可见来分类: [html] view plain copy print? •android:theme="@android:style/Theme.Dialog"   将一个Activity显示为能话框模式 •android:theme="@android:style/T

React组件系统、props与状态(state)

 多个组件合成一个组件: var style = { fontSize: 20, color: '#ff0000' }; var WebSite = React.createClass({ render: function () { return ( <div style={style}> <Name name={this.props.name} /> <Link link={this.props.link} /> </div> ); } }); var N

android的style控制Theme

value-v14就是在API14(4.0)的手机上所使用的Theme(其他版本以此类推) theme的名字叫做AppTheme,后面写有继承自哪个Theme,如下所示 <style name="AppBaseTheme" parent="@android:style/Theme.Light.NoTitleBar"> <item name="android:windowContentOverlay">@null</i