ios和安卓的样式 android样式和主题

转载

网络小墨 2023-09-01 18:46:12

文章标签 ios和安卓的样式 android android studio xml 背景色 文章分类 iOS 移动开发

样式和主题是设置都是在res\values目录下的styles.xml中

1.样式

一种或多种控件的属性集合，相当于CSS，实现继承复用等，方便代码管理。
在styles.xml文件中的的标签内添加

styles.xml代码

<style name="MyStyle" >     <!--设置name-->
        <item name="android:textColor">#FF5722</item>     <!--字体颜色-->
        <item name="android:textSize">20dp</item>      <!--字体大小-->
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">match_parent</item>
<!--        <item name="android:background">#EFEEF1</item>              <!–背景色–>-->
        <item name="android:gravity">center</item>     <!--view中内容的位置限定-->
    </style>

再分别设置TextView和EditView和Button的

<!--    此处没有设置Parent属性，但由于name以MyStyle.开头，所以MyStyle.TextView会完全继承MyStyle,以下同-->
    <style name="MyStyle.TextView" >
        <item name="android:textSize">20dp</item>               <!--字体大小-->
        <item name="android:layout_height">40dp</item>  <!--控件高度-->
<!--        <item name="android:background">#8BC34A</item>            <!–背景色–>-->
    </style>

    <style name="MyStyle.TextView.EditText" >
        <item name="android:layout_width">200dp</item>
        <item name="android:minWidth">200dp</item>
        <item name="android:textSize">20dp</item>
        <item name="android:textColor">#E91E63</item>
        <item name="android:maxLength">10</item>
        <item name="android:lines">1</item>
        <item name="android:selectAllOnFocus">true</item>
    </style>

    <style name="MyStyle.Button" >
        <item name="android:layout_width">114dp</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:layout_marginLeft">20dp</item>
        <item name="android:layout_marginRight">20dp</item>
    </style>

dialog.xml代码
使用方法 style="@style/MyStyle"

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http:///apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <LinearLayout
        style="@style/MyStyle"
        android:orientation="vertical">

        <TextView
            android:id="@+id/tv_title"
            style="@style/MyStyle.TextView"
            android:text="@string/input_phone"
            android:visibility="visible" />


        <LinearLayout
            android:id="@+id/ll_content"
            style="@style/MyStyle">    

            <EditText
                style="@style/MyStyle.TextView.EditText"
                android:hint="@string/phone_number"
                android:background="@drawable/edit_bg"
                />   
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_gravity="bottom"
            android:background="#E0E0E0"
            android:gravity="center"
            android:orientation="horizontal">

            <Button
                android:id="@+id/btn_ok"
                style="@style/MyStyle.Button"
                android:text="@string/confirm"
                android:textColor="#4CAF50"
               />

            <Button
                android:id="@+id/btn_cancel"
                style="@style/MyStyle.Button"
                android:text="@string/cancel"
                android:textColor="#009688"
              />
        </LinearLayout>
    </LinearLayout>
</FrameLayout>

2.主题

主题设置与样式一样。主题用于全局，在此设置了背景色。
此处定义了一个蓝色主题，必须要用到parent继承Theme.AppCompat.Light.DarkActionBar保证兼容性，不然运行会有异常。
styles.xml代码

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <style name="BlueTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#00BCD4</item>
        <item name="colorPrimaryDark">#03A9F4</item>
        <item name="colorAccent">#2196F3</item>
        <item name="android:background">#5402F7</item>              <!--背景色-->

在manifests目录下的AndroidManifest.xml的<application>和<activity>中添加android:theme="@style/**"属性，表示使用该主题。

AndroidManifest.xml

ios和安卓的样式 android样式和主题_android

3.样式优先级高于主题

如下图是样式MyStyle和MyStyle.TextView没有设置背景色的结果

ios和安卓的样式 android样式和主题_android_02

然后把MyStyle和MyStyle.TextView的设置背景色属性取消注释，结果为

ios和安卓的样式 android样式和主题_xml_03

对比结果说明当主题和样式中的属性发生冲突时样式优先级高于主题，可以理解为整个APP的主题我要蓝调，但是个别控件我可以设置另外的风格。

在定义上，样式和主题基本相同，但是它们使用的地方不同。样式用在单独的View，如：EditText、TextView等；主题通过AndroidManifest.xml中的和用在整个应用或者某个 Activity，主题对整个应用或某个Activity进行全局性影响。如果一个应用使用了主题，同时应用下的view也使用了样式，那么当主题和样式属性发生冲突时，样式的优先级高于主题。

4.整体代码

styles.xml代码

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>
    <style name="BlueTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">#00BCD4</item>
        <item name="colorPrimaryDark">#03A9F4</item>
        <item name="colorAccent">#2196F3</item>
        <item name="android:background">#5402F7</item>              <!--背景色-->

    </style>
    <style name="MyStyle" >     <!--设置name-->
        <item name="android:textColor">#FF5722</item>     <!--字体颜色-->
        <item name="android:textSize">20dp</item>      <!--字体大小-->
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_width">match_parent</item>
        <item name="android:background">#EFEEF1</item>              <!--背景色-->
        <item name="android:gravity">center</item>     <!--view中内容的位置限定-->
    </style>

<!--    此处没有设置Parent属性，但由于name以MyStyle.开头，所以MyStyle.TextView会完全继承MyStyle,以下同-->
    <style name="MyStyle.TextView" >
        <item name="android:textSize">20dp</item>               <!--字体大小-->
        <item name="android:layout_height">40dp</item>  <!--控件高度-->
        <item name="android:background">#8BC34A</item>            <!--背景色-->
    </style>

    <style name="MyStyle.TextView.EditText" >
        <item name="android:layout_width">200dp</item>
        <item name="android:minWidth">200dp</item>
        <item name="android:textSize">20dp</item>
        <item name="android:textColor">#E91E63</item>
        <item name="android:maxLength">10</item>
        <item name="android:lines">1</item>
        <item name="android:selectAllOnFocus">true</item>
    </style>

    <style name="MyStyle.Button" >
        <item name="android:layout_width">114dp</item>
        <item name="android:layout_height">50dp</item>
        <item name="android:layout_marginLeft">20dp</item>
        <item name="android:layout_marginRight">20dp</item>
    </style>

</resources>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。