Android中的主题(theme)和样式(style)

最新推荐文章于 2024-05-14 11:48:13 发布

TigerChain

最新推荐文章于 2024-05-14 11:48:13 发布

阅读量2.3k

点赞数 1

分类专栏： Android基础篇

本文链接：https://blog.csdn.net/android0012345/article/details/8255285

版权

Android基础篇专栏收录该内容

5 篇文章 0 订阅

订阅专栏

在Android客户端开发中，往往要给用户一些很好的体验，那么就要用到主题和样式，可以用主题和样式来统一管理界面和UI组件。使组件和界面产生一些想要的效果。

一、主题和样式定义：

1、主题(Theme):主题只能针对Activity来说，不能给一个组件设置主题。主题就是包含一种或多种的格式化属性的集合，我们可以为一个Activity设置专门的theme，也可以为所有的Activity设置theme。

2、样式(Style):样式是组件的样式，比如给一个按钮设置宽、高、字体大小等。统一管理，其实样式就相当于java中的封装，就是把相似的属性封装在一个xxx.xml文件中，以便能很好的复用。比如：两个TextView的布局

<TextView
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	android:padding="8dp"
    	android:text="聊天"
    	android:textColor="#fff"
    	android:textSize="18sp" />
                
<TextView
    	android:layout_width="wrap_content"
    	android:layout_height="wrap_content"
    	ndroid:padding="8dp"
    	android:text="你好"
    	android:textColor="#fff"
    	android:textSize="18sp" />

其中两个TextView中除了text属性不一样以外，其它的一样，所以我们就可以把公共部分抽出来写一个成一个style，以便复用。
主题和样式都是资源，我们可以使用Android系统中默认的主题和样式，也可以自定义主题和样式来满足我们实际开发中的需求。

二、主题和样式的创建步骤：(自定义主题和样式)
1、在res/values文件夹下建立一个styles.xml文件，增加一个<resource></resource>根结点。
2、在<resource>结点下可以建立一个或多个<style></style>结点，style结点中指定了全局且唯一的一个名字，当然也可继承父类的属性。如:<style name="xxx" parent="android:Theme.Dialog"> 就是一个继承了系统的窗口风格名叫xxx的一个主题.
3、在<style></style>中定义一个或多个<item></item>,每一个item定义了一个名字(属性)和这个属性所对应的值。如：<item name="android:textSize">18sp</item>，就指定了文本字体大小为18sp。
4、接下来就可以其它的xml文件中使用自定义的样式或主题了。（只能在Manifest中指定主题）。
举一个自定义样式的例子：就拿上面两个TextView为例，有res/vaules下建立一个styles.xml文件

<style name="MyTextView">
	    <item name="android:layout_width">wrap_content</item>   <!-- 宽度 -->
	    <item name="android:layout_height">wrap_content</item>  <!-- 高度 -->
	    <item name="android:padding">8dp</item>                 <!-- 内间距 -->
	    <item name="android:textColor">#fff</item>              <!-- 字体颜色 -->
	    <item name="android:textSize">18sp</item>              <!-- 字体大小 -->
	</style>

以上就定义了一个TextView的样式，我们在使用的时候只需要使用style属性引入即可：

<TextView
    	style="@style/MyTextView"  <!--  一句话就可以引入样式了 -->
    	android:text="聊天"
 />

效果和上面聊天的TextView一模一样。这样我们也可以很方便的写第二个TextView了。

三、一个实际的例子（对话框形式的activity）

1、效果图：看起来像一个popupWindow 其实是一个activity

未点击之前：点击之后：

废话不多说了，直接上代码。点击之前的界面布局。

二、界面布局:

Mainactivity

activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent" 
    android:background="#cceedd">

   <RelativeLayout 
  			android:layout_width="fill_parent"
  			android:layout_height="45dp"
  			android:id="@+id/title" 
  			android:background="@drawable/title_bar"
  			android:gravity="center_vertical"  >  
  			
            
      		<TextView
        		android:layout_width="wrap_content" 
        		android:layout_height="wrap_content" 
        		android:text="微信"
        		android:layout_centerInParent="true"
        		android:textSize="20sp"		
				android:textColor="#ffffff" /> 
			<ImageButton 
			    android:id="@+id/right_btn"
			    android:layout_width="67dp" 
        		android:layout_height="wrap_content"
        		android:layout_alignParentRight="true" 
        		android:layout_centerVertical="true"
        		android:layout_marginRight="5dp"
        		android:src="@drawable/title_btn_function"
				android:background="@drawable/title_btn_right"
				android:onClick="btnmainright"
			    />      
		</RelativeLayout>

</RelativeLayout>

点击之后是跳到一个新的Acitivity了，只是这里指定了主题，以对话框的形式弹出。

以上界面布局：

DialogActivity

dialogactivity.xml

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:layout_width="fill_parent"
   android:layout_height="fill_parent"   
   >
   
   <RelativeLayout
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"  
       android:layout_marginTop="46dp">
        
    	<LinearLayout
    	    android:id="@+id/main_dialog_layout"
	      	android:layout_width="wrap_content"
        	android:layout_height="wrap_content"
        	android:layout_alignParentRight="true"
        	android:layout_alignParentTop="true"
        	android:orientation="vertical"
        	android:background="@drawable/title_function_bg" >

    		<LinearLayout
    		    android:layout_width="match_parent"
    		    android:layout_height="wrap_content" >

    			<ImageView
    			    android:id="@+id/imageView1"
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:layout_gravity="center_vertical"
    			    android:layout_marginLeft="8dp"
    			    android:src="@drawable/mm_title_btn_compose_normal" />

    			<TextView
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:padding="8dp"
    			    android:text="发起聊天"
    			    android:textColor="#fff"
    			    android:textSize="18sp" />    		    
    		</LinearLayout>
    		<LinearLayout
    		    android:layout_width="match_parent"
    		    android:layout_height="wrap_content" >

    			<ImageView
    			    android:id="@+id/imageView2"
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:layout_gravity="center_vertical"
    			    android:layout_marginLeft="8dp"
    			    android:src="@drawable/mm_title_btn_receiver_normal" />

    			<TextView
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:padding="8dp"
    			    android:text="听筒模式"
    			    android:textColor="#fff"
    			    android:textSize="18sp" />    		    
    		</LinearLayout>
    		<LinearLayout
    		    android:layout_width="match_parent"
    		    android:layout_height="wrap_content" >

    			<ImageView
    			    android:id="@+id/imageView3"
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:layout_gravity="center_vertical"
    			    android:layout_marginLeft="8dp"
    			    android:src="@drawable/mm_title_btn_keyboard_normal" />

    			<TextView
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:padding="8dp"
    			    android:text="登录网页版"
    			    android:textColor="#fff"
    			    android:textSize="18sp" />    		    
    		</LinearLayout>
    		<LinearLayout
    		    android:layout_width="match_parent"
    		    android:layout_height="wrap_content" >

    			<ImageView
    			    android:id="@+id/imageView4"
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:layout_gravity="center_vertical"
    			    android:layout_marginLeft="8dp"
    			    android:src="@drawable/mm_title_btn_qrcode_normal" />

    			<TextView
    			    android:layout_width="wrap_content"
    			    android:layout_height="wrap_content"
    			    android:padding="8dp"
    			    android:text="扫一扫"
    			    android:textColor="#fff"
    			    android:textSize="18sp" />    		    
    		</LinearLayout>

       </LinearLayout>

    </RelativeLayout>
</RelativeLayout>

三、指明DialogActivity的主题：在res/values/styles.xml中定义

<resources xmlns:android="http://schemas.android.com/apk/res/android">

    <style name="AppTheme" parent="android:Theme.Light" />
  <style name="MyDialogStyleTop" parent="android:Theme.Dialog" >  <!-- 继承桌口布局然后再修改 -->
        <item name="android:windowAnimationStyle">@style/AnimTop2</item>
        <item name="android:windowFrame">@null</item><!--边框-->
        <item name="android:windowIsFloating">true</item><!--是否浮现在activity之上-->
        <item name="android:windowIsTranslucent">true</item><!--半透明-->
        <item name="android:windowNoTitle">true</item><!--无标题-->
        <item name="android:windowBackground">@android:color/transparent</item><!--背景透明-->
        <item name="android:backgroundDimEnabled">false</item><!--模糊-->        
     </style>
     <style name="AnimTop2" parent="@android:style/Animation">  
    	<item name="android:windowEnterAnimation">@anim/push_top_in2</item>
        <item name="android:windowExitAnimation">@anim/push_top_out2</item>
   </style>
	
</resources>

其中红色部分引用到了进入和退出的动画。

四、在res/anim/中分别建立push_top_in2.xml和push_top_out2.xml

push_top_in2.xml

<?xml version="1.0" encoding="utf-8"?>
<scale   xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
        android:fromXScale="1.0"   
        android:toXScale="1.0"   
        android:fromYScale="0"   
        android:toYScale="1.0"   
        android:pivotX="0"  
        android:pivotY="10%"  
        android:duration="200" />

push_top_out2.xml

<?xml version="1.0" encoding="utf-8"?>

<scale   xmlns:android="http://schemas.android.com/apk/res/android"
        android:interpolator="@android:anim/accelerate_decelerate_interpolator"  
        android:fromXScale="1.0"   
        android:toXScale="1.0"   
        android:fromYScale="1.0"   
        android:toYScale="0"   
        android:pivotX="0"  
        android:pivotY="10%"  
        android:duration="200" />

以上就基本搞定布局和主题了。下面接下就是给Activity配置主题

在Mainfest.xml文件中配置 DialogActivity的主题

 <activity android:name=".DialogActivity" android:theme="@style/MyDialogStyleTop"></activity>

五、MainActivity代码：

package com.jun.dialogactivity;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }
    public void btnmainright(View view){    //按钮的onclick事件
    	Intent intent = new Intent(this,DialogActivity.class) ;//跳转到DialogActivity界面
    	startActivity(intent) ;
    }
}

DialogActivity代码

package com.jun.dialogactivity;

import android.app.Activity;
import android.os.Bundle;
import android.view.MotionEvent;


public class DialogActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		super.setContentView(R.layout.dialogactivity) ;
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {   //触摸事件，关闭掉本Activity
		finish() ;
		return super.onTouchEvent(event);
	}
}

以上就完成了一个简单的Activity的主题应用。好了就到这里。

TigerChain

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Android中的主题(theme)和样式(style)

在Android客户端开发中，往往要给用户一些很好的体验，那么就要用到主题和样式，可以用主题和样式来统一管理界面和UI组件。使组件和界面产生一些想要的效果。一、主题和样式定义：1、主题(Theme):主题只能针对Activity来说，不能给一个组件设置主题。主题就是包含一种或多种的格式化属性的集合，我们可以为一个Activity设置专门的theme，也可以为所有的Activity设置the
复制链接

扫一扫