`

CheckBox 和tab的自定义样式

 
阅读更多
打开源码中CheckBox.java文件,我们可以看到如下内容:
public class CheckBox extends CompoundButton {
    public CheckBox(Context context) {
        this(context, null);
    }
    
    public CheckBox(Context context, AttributeSet attrs) {
        this(context, attrs, com.android.internal.R.attr.checkboxStyle);
    }

    public CheckBox(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }
}
可以看到,CheckBox是继承于CompoundButton,而CompoundButton:
public abstract class CompoundButton extends Button implements Checkable
是Button的一个子类,由此可知,CheckBox也为Button的一个子类。从上面的代码中可以看出,CheckBox的不同之处就是添加了属性checkboxStyle,我们在源码中找到该样式的定义如下:
<style name="Widget.CompoundButton.CheckBox">
        <item name="android:background">@android:drawable/btn_check_label_background</item>
        <item name="android:button">@android:drawable/btn_check</item>
    </style>
其中,在资源文件中找到btn_check_label_background,该图片是背景透明没有内容的一张图片,因此CheckBox的显示就是由btn_check决定,我们打开btn_check.xml文件,可以看到以下内容:
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!-- Enabled states -->
        
    <item android:state_checked="true" android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />
    <item android:state_checked="false" android:state_window_focused="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />

    <item android:state_checked="true" android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_pressed" />
    <item android:state_checked="false" android:state_pressed="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_pressed" />

    <item android:state_checked="true" android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on_selected" />
    <item android:state_checked="false" android:state_focused="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off_selected" />

    <item android:state_checked="false"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_off" />
    <item android:state_checked="true"
          android:state_enabled="true"
          android:drawable="@drawable/btn_check_on" />


    <!-- Disabled states -->

    <item android:state_checked="true" android:state_window_focused="false"
          android:drawable="@drawable/btn_check_on_disable" />
    <item android:state_checked="false" android:state_window_focused="false"
          android:drawable="@drawable/btn_check_off_disable" />

    <item android:state_checked="true" android:state_focused="true"
          android:drawable="@drawable/btn_check_on_disable_focused" />
    <item android:state_checked="false" android:state_focused="true"
          android:drawable="@drawable/btn_check_off_disable_focused" />

    <item android:state_checked="false" android:drawable="@drawable/btn_check_off_disable" />
    <item android:state_checked="true" android:drawable="@drawable/btn_check_on_disable" />

</selector>
每一个item就对应着CheckBox在不同的选择状态下显示的效果,了解该文件的内容后,我们就可以更具自己的需要来设计美观的CheckBox。RadioButton的显示与CheckBox基本相似,可以仿照CheckBox加以修改。

 

转载:

http://blog.csdn.net/zhll3377/article/details/7287124

 

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1.制作4个9patch的tab样式,可参考android默认的资源

tab_unselected.9.png tab_selected.9.pngtab_press.9.pngtab_focus.9.png

这4个资源分别代表Tab的4种状态。
.定义Tab的selector样式(就叫它tab_indicator.xml好了),将其放入drawable文件夹下,代码如下:

 

<?xml version="1.0" encoding="utf-8"?>  
<selector xmlns:android="http://schemas.android.com/apk/res/android">  
    <!-- Non focused states -->  
    <item android:state_focused="false" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_unselected" />  
    <item android:state_focused="false" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_selected" />  
    <!-- Focused states -->  
    <item android:state_focused="true" android:state_selected="false" android:state_pressed="false" android:drawable="@drawable/tab_focus" />  
    <item android:state_focused="true" android:state_selected="true" android:state_pressed="false" android:drawable="@drawable/tab_focus" />  
    <!-- Pressed -->  
    <item android:state_pressed="true" android:drawable="@drawable/tab_press" />  
</selector>   
.编写indicator的布局文件(不妨也叫tab_indicator.xml),将其放入layout文件夹下,代码如下:

 

<?xml version="1.0" encoding="utf-8"?>  
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
    android:layout_width="0dip"  
    android:layout_height="64dip"  
    android:layout_weight="1"  
    android:layout_marginLeft="-3dip"  
    android:layout_marginRight="-3dip"  
    android:orientation="vertical"  
    android:background="@drawable/tab_indicator">  
    <ImageView android:id="@+id/icon"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_centerHorizontal="true"  
    />  
    <TextView android:id="@+id/title"  
        android:layout_width="wrap_content"  
        android:layout_height="wrap_content"  
        android:layout_alignParentBottom="true"  
        android:layout_centerHorizontal="true"  
        style="?android:attr/tabWidgetStyle" mce_style="?android:attr/tabWidgetStyle"  
    />   
.接下来就是在TabActivity中使用我们自己编写的Tab样式了:

 

// 首先获取TabWidget  
mTabHost = getTabHost();  
LinearLayout ll = (LinearLayout)mTabHost.getChildAt(0);  
TabWidget tw = (TabWidget)ll.getChildAt(0);   

然后用类似如下代码创建TabSpec,就大功告成了。

 

RelativeLayout tabIndicator1 = (RelativeLayout) LayoutInflater.from(this).inflate(R.layout.tab_indicator, tw, false);  
TextView tvTab1 = (TextView)tabIndicator1.getChildAt(1);  
tvTab1.setText("tab1");  
mTabHot = mTabHost.newTabSpec("TAB_1")  
        .setIndicator(tabIndicator1)  
        .setContent(contentIntent);

 

http://www.cnblogs.com/tt_mc/archive/2010/10/07/1845090.html

分享到:
评论

相关推荐

    带checkbox的下拉框

    4. **样式和自定义**: - **图标和文字**:使用图标与文字结合的方式展示选项,增加视觉效果。 - **主题定制**:根据产品设计风格,调整下拉框的颜色、大小、边框等样式。 - **动画效果**:打开和关闭下拉框时...

    jquery radio checkbox 美化

    综上所述,"jQuery radio checkbox美化"涉及到前端开发中的多方面技能,包括jQuery的选择器和事件处理、CSS样式设计、插件应用、自定义图标、响应式设计以及无障碍性考虑。通过学习和实践这些技巧,可以创建出既美观...

    HTML的checkbox和radio样式美化的简单实例

    为了实现更美观的界面,可以对这些元素进行自定义样式化。 在给定的示例中,通过CSS来美化`checkbox`和`radio`按钮。首先,隐藏了实际的`checkbox`和`radio`输入元素,通过设置`display: none;`,这样可以避免它们...

    checkbox单选复选按钮美化代码.zip

    3. **隐藏原生元素**:为了完全控制美化后的样式,有时我们需要隐藏原生的checkbox和radio元素,然后用一个自定义的元素(如`&lt;span&gt;`或`&lt;div&gt;`)来模拟它们的行为。这可以通过设置`display: none;`来实现,同时使用...

    CSS3实现自定义复选框.zip

    在网页设计中,CSS3(层叠样式表第三版)为开发者提供了丰富的样式控制和表现力,其中之一就是自定义复选框(checkbox)和单选按钮(radiobox)。本资源"CSS3实现自定义复选框.zip"显然是一个示例项目,教你如何使用...

    单选框和复选框样式

    1. 兼容性:在设计自定义样式时,需考虑不同浏览器的兼容性问题,可能需要使用polyfill或者使用渐进增强的方式来确保所有用户都能正常显示。 2. 功能性:美观的同时,不能牺牲功能。确保用户可以通过键盘操作(如Tab...

    仿苹果风格的CheckBox复选框代码.zip

    同时,确保键盘用户可以通过Tab键和空格键激活复选框。 6. **封装和模块化**:将复选框的样式和行为封装到一个可重用的组件中,可以提高代码的组织性和可维护性。这可以通过创建自定义React组件、Vue组件或其他前端...

    纯cssTab切换

    你可以设置不同的标签页和内容区,然后根据当前激活的Tab状态改变其显示样式。例如,使用`display:none`隐藏非活动内容,`display:block`显示活动内容。 2. **使用`radio`和`label`实现Tab切换** 这种方法利用HTML...

    多组超具创意的CSS3开关切换按钮

    前不久我们刚刚为大家分享过一款超清新的纯CSS3自定义Checkbox开关,非常简洁美观。今天我们要继续为大家介绍多组超具创意的CSS3开关切换按钮,一共有8款漂亮的样式。这种纯CSS3开关切换按钮非常适合一些个性化比较...

    c#使用DotNetBar制作的Ribbon窗体

    - 自定义样式:DotNetBar提供了丰富的皮肤和主题,可以改变Ribbon的颜色、字体、边框样式等,以满足个性化需求。 - 动态更新:可以根据应用程序状态动态隐藏、显示或禁用Ribbon上的控件,提供更灵活的交互体验。 ...

    windows ce下制作漂亮的对话框

    3. **自定义控件样式**:Windows CE支持自定义控件的颜色、字体和边框样式。通过修改控件属性,例如改变CheckBox的前景色、背景色,或设置独特的选中和未选中状态图标,可以增强视觉效果。 4. **处理Checkbox控件**...

    WPF Ribbon界面控件

    WPF Ribbon Control Library 支持自定义样式和模板,这意味着你可以根据需求调整控件的颜色、大小、布局等视觉效果。通过修改控件的模板,可以实现独特的界面设计,满足品牌一致性或个性化需求。 ### 事件处理 ...

    集android众多UI组件于一体的实例

    此外,项目中还会涉及到主题和样式(Theme & Style)的应用,通过修改主题,可以统一改变整个应用的视觉效果,而样式则可以单独设置控件的外观。颜色、字体、尺寸、边距等都是可以自定义的属性,这有助于提升应用的...

    WinForm带复选框的下拉表

    5. 用户接口设计:为了提供良好的用户体验,可能需要自定义控件的样式,如调整复选框的大小、颜色和位置,以及控制下拉列表的显示和隐藏行为。 6. 键盘导航:考虑到无障碍性,确保用户可以通过键盘(如Tab键、Enter...

    winform的控件技巧

    6. **控件的自定义样式和皮肤**:通过设置ControlStyles、ForeColor、BackColor、Font等属性,可以改变控件的外观。同时,利用OwnerDraw属性,可以完全自定义控件的绘制逻辑,实现个性化设计。 7. **多态和继承**:...

    MyAndroidTag-OK.zip

    该项目可能包含了自定义的TagView类,实现了标签的布局、样式和交互逻辑。同时,项目可能还包含了适配器和数据模型,以处理标签的动态生成和用户选择。通过解压并分析这个项目的源代码,开发者可以学习到如何在实际...

    VB控件与属性(35种)大全

    10. CommandButton、OptionButton、CheckBox和RadioButton还可以通过Font属性设置字体、ForeColor和BackColor属性设置颜色,TabOrder属性设定控件的焦点顺序,Enabled属性控制控件的启用/禁用状态。 11. TrackBar...

    BOOK看遍所有UI控件

    - **ProgressBar**: 显示进度条,有水平和垂直两种样式。 - **Spinner**: 下拉选择框,通常用于展示有限选项。 2. **布局管理器**: - **LinearLayout**: 按照垂直或水平方向排列子视图。 - **RelativeLayout**...

    jQuery插件逐渐增强的单选按钮和复选框

    1. **样式定制**:允许开发者自定义复选框和单选按钮的外观,包括边框、背景色、大小、图标等,以匹配网站的总体设计。 2. **交互增强**:通过添加鼠标悬停、点击效果,使用户更容易识别已选状态和未选状态。 3. *...

Global site tag (gtag.js) - Google Analytics