百度360必应搜狗淘宝本站头条
当前位置:网站首页 > IT技术 > 正文

Android组件样式定制详解 android组件化方案

wptr33 2024-11-14 19:22 21 浏览


前言

android中有很多现成的组件可以使用,但是android上面的程序很多时候用系统自带的组件都不太合适,主要是样式可能不是我们想要的。这个时候我们就需要定制一些样式。本文将讲解如何修改组件的样式。


1、默认样式。

在修改组件的样式之前,我们还是先了解一下组件默认的样式,如下:

当然还有很多的组件,这里就简单的列举一下就可以了。从上面的默认组件可以看出这些组件的样式和你的app的风格不一致。那么这个时候你可能需要做的就是更改组件的样式。(本人觉得默认样式基本上都比较丑,基本上每个app中都需要定制样式)。


2、默认样式文件。

先看看这些组件的样式到底是放在哪里的。\android-sdk-windows\platforms\android-9\data\res\values 里面有两个比较重要的文件:themes.xml 和styles.xml,这两个文件就是样式文件(主题也是样式)。你可以打开styles.xml看看,这里就是系统组件的默认样式。

3、定制样式文件。

我们更关心如何定制样式文件。最简单的方法是参考上面所说到的默认的样式文件然后进行修改。当然你也可以google上搜一些如何修改,不过个人觉得网上讲如何修改的都只给一个实例而已,具体的思路并没有给出。授之于鱼不如授之以渔。

4、样式实例。

4.1 默认样式

我们的实例就选择RadioButton。相信你已经看到过它的默认样式。

看看默认的样式文件:

<style name="Widget.CompoundButton.RadioButton">
  
        <item name="android:background">@android:drawable/btn_radio_label_background</item>

        <item name="android:button">@android:drawable/btn_radio</item>

    </style>

可以看出它其实就有两个重要的样式,一个是background一个是button。

①background。

\android-sdk-windows\platforms\android-9\data\res\drawable-mdpi\btn_radio_label_background 。如图:

(这是透明图标,四周的黑色边框是预览区域)。

②button。

首先找到\android-sdk-windows\platforms\android-9\data\res\drawable\btn_radio。这并不是图片,而是xml文件。里面的内容如下:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
  
    <item android:state_checked="true" android:state_window_focused="false"

          android:drawable="@drawable/btn_radio_on" />
            
    <item android:state_checked="false" android:state_window_focused="false"

          android:drawable="@drawable/btn_radio_off" />
          
    <item android:state_checked="true" android:state_pressed="true"

          android:drawable="@drawable/btn_radio_on_pressed" />
            
    <item android:state_checked="false" android:state_pressed="true"

          android:drawable="@drawable/btn_radio_off_pressed" />
 
    <item android:state_checked="true" android:state_focused="true"

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

          android:drawable="@drawable/btn_radio_off_selected" />
 
    <item android:state_checked="false" android:drawable="@drawable/btn_radio_off" />
      
    <item android:state_checked="true" android:drawable="@drawable/btn_radio_on" />
      
</selector>

这下清楚了吧,原来RadioButton的样式是如此复杂,一共有6中状态(你非得说是8种那么你必须认真看看)。如图:


4.2 定义样式

目录结构如下:

在你的项目中建立一个style.xml文件,文件中的内容当然就是把默认的样式拷贝出来(熟练以后也可以自己写)然后进行一些修改。

style.xml内容如下:

<?xml version="1.0" encoding="utf-8"?> 
<resources xmlns:android="http://schemas.android.com/apk/res/android">
   <style name="MyRadioButton"
        <item name="android:background">@drawable/bt_radio</item
        <item name="android:button">@null</item>

    </style>
 
</resources>

bt_radio是个xml文件,内容如下:

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

bt_required_radio_s和bt_requires_radio_n。如图:


4.3使用样式。

在你xml中添加 style="@style/MyRadioButton" 即可(MyRadioButton是上面的命名)。

使用的布局实例如下:

<?xml version="1.0" encoding="utf-8"?>
  
<RadioGroup xmlns:android="http://schemas.android.com/apk/res/android"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      android:background="#aaaaaa"

      android:orientation="vertical" >
 
    <RadioButton

        style="@style/MyRadioButton"

        android:layout_width="wrap_content"

        android:layout_height="50dip"

        android:layout_marginTop="10dip"

        android:text="ABCD" />
 
    <RadioButton

        style="@style/MyRadioButton"

        android:layout_width="wrap_content"

        android:layout_height="50dip"

        android:layout_marginTop="10dip"

        android:text="EFGH" />
 
</RadioGroup>

效果图:

5、相关说明。

对于style.xml中为什么给background加个图片而把button的图片设置为@null。这点其实要看你个人需要:

①如果你需要的样式是点选以后整个背景都改变那么改background的样式就可以了,而且把button的样式设置成@null,如果不设置的话当然是系统默认的样式。

②如果你只是想把系统样式中的那个带圈的图给换点的话那么改button的样式就可以了。

6、总结。

改默认的组件样式挺简单的,总结步骤如下:

①找到默认的组件样式。

②把样式拷贝到你的项目中进行修改。

③应用样式。

这几个步骤不仅仅是对RadioButton的修改,而是所有的组件都可以这么改,修改方式大同小异。

相关推荐

【推荐】一款开源免费、美观实用的后台管理系统模版

如果您对源码&技术感兴趣,请点赞+收藏+转发+关注,大家的支持是我分享最大的动力!!!项目介绍...

Android架构组件-App架构指南,你还不收藏嘛

本指南适用于那些已经拥有开发Android应用基础知识的开发人员,现在想了解能够开发出更加健壮、优质的应用程序架构。首先需要说明的是:AndroidArchitectureComponents翻...

高德地图经纬度坐标批量拾取(高德地图批量查询经纬度)

使用方法在桌面上新建一个index.txt文件,把下面的代码复制进去保存,再把文件名改成index.html保存,双击运行打开即可...

flutter系列之:UI layout简介(flutter ui设计)

简介对于一个前端框架来说,除了各个组件之外,最重要的就是将这些组件进行连接的布局了。布局的英文名叫做layout,就是用来描述如何将组件进行摆放的一个约束。...

Android开发基础入门(一):UI与基础控件

Android基础入门前言:...

iOS的布局体系-流式布局MyFlowLayout

iOS布局体系的概览在我的CSDN博客中的几篇文章分别介绍MyLayout布局体系中的视图从一个方向依次排列的线性布局(MyLinearLayout)、视图层叠且停靠于父布局视图某个位置的框架布局(M...

TDesign企业级开源设计系统越发成熟稳定,支持 Vue3 / 小程序

TDesing发展越来越好了,出了好几套组件库,很成熟稳定了,新项目完全可以考虑使用。...

WinForm实现窗体自适应缩放(winform窗口缩放)

众所周知,...

winform项目——仿QQ即时通讯程序03:搭建登录界面

上两篇文章已经对CIM仿QQ即时通讯项目进行了需求分析和数据库设计。winform项目——仿QQ即时通讯程序01:原理及项目分析...

App自动化测试|原生app元素定位方法

元素定位方法介绍及应用Appium方法定位原生app元素...

61.C# TableLayoutPanel控件(c# tabcontrol)

摘要TableLayoutPanel在网格中排列内容,提供类似于HTML元素的功能。TableLayoutPanel控件允许你将控件放在网格布局中,而无需精确指定每个控件的位置。其单元格...

想要深入学习Android性能优化?看完这篇直接让你一步到位

...

12个python数据处理常用内置函数(python 的内置函数)

在python数据分析中,经常需要对字符串进行各种处理,例如拼接字符串、检索字符串等。下面我将对python中常用的内置字符串操作函数进行介绍。1.计算字符串的长度-len()函数str1='我爱py...

如何用Python程序将几十个PDF文件合并成一个PDF?其实只要这四步

假定你有一个很无聊的任务,需要将几十个PDF文件合并成一个PDF文件。每一个文件都有一个封面作为第一页,但你不希望合并后的文件中重复出现这些封面。即使有许多免费的程序可以合并PDF,很多也只是简单的将...

Python入门知识点总结,Python三大数据类型、数据结构、控制流

Python基础的重要性不言而喻,是每一个入门Python学习者所必备的知识点,作为Python入门,这部分知识点显得很庞杂,内容分支很多,大部分同学在刚刚学习时一头雾水。...