Android学习笔记--style theme浅尝

    技术2022-05-13  11

       在应用程序开发中,其中最重要的就是用户界面的设计,一个好的应用必然有一个好的用户体验,在Android OS中Style风格的设计是提高用户体验的关键技术之一。在Android中有两种方式的风格Style和Theme

       1. 什么是Style?

       Style:是为View和window定义其视觉与风格的属性集合。它遵循的是与Web设计中层叠样式设计非常相似的设计理念--将内容与风格分开,如我们设计一个button,我们可以将button这个控件我们将其功能与它的视觉效果分开设计。所以在定义Style文件时要与layout中.xml文件分开。一般我们保存在/res/values文件下。

       2. 什么是Theme?

       Theme:它是一种适用于整个Activity或者Application的Sytle,也就是说Android所提供的两种Style,style是应用在控件之上,而theme是应用在整个窗体之上。

      Style的实现:我们以自定义一个对话框为例(在API Demo里有很多很好的例子)效果如图:

      

      首先我们要设计一个呈现给用户的对话框的风格,这里通过xml画一个简单的图形,在/res/drawble下建一个bg.xml文件:

      <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android"> <solid android:color="#99cc33"/> <stroke android:width="3dp" color="#ffff8080"/> <corners android:radius="3dp" android:topLeftRadius="20dp"/> <padding android:left="10dp" android:top="10dp" android:right="10dp" android:bottom="10dp" /> </shape>


     

       这是一个简单的画图效果,通过它我们可以设计我们的窗口风格,从SDK文档中我们可以看到它所有的属性:

      <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape=["rectangle" | "oval" | "line" | "ring"] > <gradient android:angle="integer" android:centerX="integer" android:centerY="integer" android:centerColor="integer" android:endColor="color" android:gradientRadius="integer" android:startColor="color" android:type=["linear" | "radial" | "sweep"] android:usesLevel=["true" | "false"] /> <solid android:color="color" /> <stroke android:width="integer" android:color="color" android:dashWidth="integer" android:dashGap="integer" /> <padding android:left="integer" android:top="integer" android:right="integer" android:bottom="integer" /> <corners android:radius="integer" android:topLeftRadius="integer" android:topRightRadius="integer" android:bottomLeftRadius="integer" android:bottomRightRadius="integer" /> </shape>

      在定义这个xml文件的时候需要注意一点就是shape必须为跟节点,它主要属性为android:shape,用来定义填充view的图形形状:

                 "rectangle" :矩形

             "oval"           :椭圆

             "line"            :水平线

             "ring"            :环形

      <gradient>用来定义渐变颜色

      android:angle: 用来定义颜色渐变的角度,为integer类型,0表示从左到右,90表示从下到上,该值必须为45的倍数;

      android:centerX:为渐变色中心相对X抽的位置范围从0到1.0,如果android:type="linear"时,该属性不可用;

      android:centerY:为渐变色中心相对Y抽的位置范围从0到1.0,如果android:type="linear"时,该属性不可用;

      android:centerColor:为可选值,中间色用来分开开始与结束色.

      <solid>定义填充色

      <stroke>定义边色以及边的形式为虚线还是实线以及粗细

      <corners>当shape为矩形时定义其四角为圆形角

     


     

    以上简单介绍了下shape的应用,在定义完装载我们的view的窗口后我们定义其风格,在/res/values下建立一个styles.xml文件,如下:

     <?xml version="1.0" encoding="utf-8"?> <resources> <style name="Theme.CustomDialog" parent="android:style/Theme.Dialog"> <item name="android:windowBackground">@drawable/bg</item> </style> <style name="Text"> <item name="android:layout_width">230px</item> <item name="android:layout_height">300px</item> <item name="android:textColor">#ffffff</item> </style> </resources>

    其中resources为根节点,第一个<style>定义了其应用程序的风格,也就是activity的风格,而这里我们继续了android中Dialog的风格, name属性为我们定义的风格名称,parent的值为继承的风格的位置;

    <style>下有个item元素,如第二个风格Text,这个是我们建立的用来实现TextView的风格,该下的元素item就是TextView的属性,每个item对应一个属性;

    style样式的使用:

    layout布局文件下建立一个.xml文件:

    <TextView xmlns:android="http://schemas.android.com/apk/res/android" style="@style/Text" android:text="This is a generic shape defined in XML.file location: res/drawable/filename.xml The filename will be used as the resource ID. compiled resource datatype: Resource pointer to a ShapeDrawable. resource reference: In Java: R.drawable.filename In XML: @[package:]drawable/filename "/>

    style="@style/Text"就实现了其风格的引用;

    最后建立我们的Activity:

    import android.app.Activity; import android.os.Bundle; public class CustomDialogActivity extends Activity { @Override protected void onCreate(Bundle savedInstanceState) { // TODO Auto-generated method stub super.onCreate(savedInstanceState); setContentView(R.layout.custom_dialog_activity); } }

    最后需要在AndroidManifet.xml文件下加入风格:

    <activity android:name=".CustomDialogActivity"      android:theme="@style/Theme.CustomDialog"></activity>

     


     

    至此,大概效果已经实现了,许多详细的设计参考SDK文档。

     

     

    -----------------------------------------------------------------------------------------水平有限,错误之处还望指教,谢谢~~


    最新回复(0)