Android之主题皮肤实现

每个人对于主题皮肤的喜好不同，所以一款好的软件应该有主题皮肤的选项，让用户能选择自己喜好的皮肤和主题，这样才更能获得用户的亲睐

下面通过一个简单的例子实现换肤功能

这个例子我通过了3种不同的方法实现换肤

方案一：

直接使用Android提供的主题

activity_main.java

设置了4个按钮，用于控制主题和界面的跳转

<LinearLayout 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:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:orientation="vertical" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="@string/hello_world" />
    <Button 
        android:id="@+id/id_btn_day"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Day"/>
    
    <Button 
        android:id="@+id/id_btn_night"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Night"/>
    
    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="界面一"
        android:onClick="btn_next1"/>
    
    <Button 
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="界面二"
        android:onClick="btn_next2"/>

</LinearLayout>

MainActivity.java

设置Android自带的主题

public class MainActivity extends Activity
{
	private int mThemeId = -1;// 皮肤主题ID，默认-1 不处理
	private String THEME_KEY = "theme";

	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		if (savedInstanceState != null)
		{
			if (savedInstanceState.getInt(THEME_KEY,-1) != -1)// 读取皮肤主题ID，-1 不处理
			{
				mThemeId = savedInstanceState.getInt(THEME_KEY);
				this.setTheme(mThemeId);//设置主题皮肤
			}
		}
		setContentView(R.layout.activity_main);
		
		this.findViewById(R.id.id_btn_day).setOnClickListener(mOnClickListener);
		this.findViewById(R.id.id_btn_night).setOnClickListener(mOnClickListener);
	}
	
	View.OnClickListener mOnClickListener = new View.OnClickListener()
	{
		@Override
		public void onClick(View v)
		{
			switch (v.getId())
			{
			case R.id.id_btn_day:
				onTheme(android.R.style.Theme_Light);
				break;
			case R.id.id_btn_night:
				onTheme(android.R.style.Theme_Black);
				break;
			default:
				break;
			}
		}
	};
	
	// 设置主题，并重建
	private void onTheme(int iThemeId)
	{
		mThemeId = iThemeId;
		this.recreate();
	}

	// 保存主题ID，onCreate 时读取主题
	@Override
	protected void onSaveInstanceState(Bundle outState)
	{
		super.onSaveInstanceState(outState);
		outState.putInt(THEME_KEY, mThemeId);
	}
	
	public void btn_next1(View view)
	{
		Intent intent = new Intent(MainActivity.this,SecondActivity.class);
		startActivity(intent);
	}
	
	public void btn_next2(View view)
	{
		Intent intent = new Intent(MainActivity.this,ThirdActivity.class);
		startActivity(intent);
	}
}

实现效果如图

  

方案二：

second.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/id_skin_linearlayout" >
    <TextView 
        android:id="@+id/id_skin_textview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"/>
    <Button 
        android:id="@+id/id_skin_bt1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="默认"/>
    <Button 
        android:id="@+id/id_skin_bt2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="皮肤一"/>
    <Button 
        android:id="@+id/id_skin_bt3"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="皮肤二"/>

</LinearLayout>

SecondActivity.java

直接控制使用颜色还是图片作为背景

public class SecondActivity extends Activity
{
	LinearLayout linearLayout;
	TextView textView;
	Button bt1,bt2,bt3;
	
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.second);
		
		textView = (TextView)findViewById(R.id.id_skin_textview);
		textView.setText("默认皮肤");
		linearLayout = (LinearLayout)findViewById(R.id.id_skin_linearlayout);
		linearLayout.setBackgroundColor(Color.BLUE);
		
		bt1 = (Button)findViewById(R.id.id_skin_bt1);
		bt2 = (Button)findViewById(R.id.id_skin_bt2);
		bt3 = (Button)findViewById(R.id.id_skin_bt3);
		bt1.setOnClickListener(new View.OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				linearLayout.setBackgroundColor(Color.BLUE);
				textView.setText("默认皮肤");
			}
		});
		bt2.setOnClickListener(new View.OnClickListener()
		{
			
			@Override
			public void onClick(View v)
			{
				linearLayout.setBackground(getResources().getDrawable(R.drawable.skin1));
				textView.setText("皮肤一");
			}
		});
		bt3.setOnClickListener(new View.OnClickListener()
		{
			@Override
			public void onClick(View v)
			{
				linearLayout.setBackground(getResources().getDrawable(R.drawable.skin2));
				textView.setText("皮肤二");
			}
		});
	}
}

效果如图

  

方案三：

third.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/id_skin_layout" >
    <TextView 
        android:id="@+id/id_skin_textview"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello_world"/>
    <RadioGroup android:id="@+id/radioGroup"
        android:contentDescription="主题设置"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">
        <RadioButton 
	        android:id="@+id/id_skin_btn1"
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:text="默认皮肤"
	        android:checked="true"/>
	    <RadioButton 
	        android:id="@+id/id_skin_btn2"
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:text="皮肤一"/>
	    <RadioButton 
	        android:id="@+id/id_skin_btn3"
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content"
	        android:text="皮肤二"/>
    </RadioGroup>
</LinearLayout>

ThemeSetting.java

通过这个类管理皮肤

public class ThemeSetting
{
	public int nThemeSkin;//使用的皮肤变量
	public int nThemeIndex;//使用的皮肤索引
	
	public static final int THEME_DEFAULT = 0;
	public static final int THEME_PIC = 1;
	public static final int THEME_COLOR = 2;

	public void SetTheme(int nTheme)
	{
		nThemeIndex = nTheme;
		switch (nTheme)
		{
		case THEME_DEFAULT:
			nThemeSkin = R.drawable.skin1;
			break;
		case THEME_PIC:
			nThemeSkin = R.drawable.skin2;
			break;
		case THEME_COLOR:
			nThemeSkin = R.color.ColorBlue;
			break;
		default:
			nThemeSkin = R.drawable.skin1;
			break;
		}
	}
	
	public int GetTheme()
	{
		return nThemeIndex;
	}
}

ThemeSettingObj.java

申明一个皮肤类对象，用于统一管理皮肤类

public class ThemeSettingObj
{
	public static ThemeSetting gThemeSettingObj = new ThemeSetting(); 
}

ThirdActivity.java

public class ThirdActivity extends Activity
{
	public LinearLayout linearLayout;
	public TextView textView;
	
	@Override
	protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
		setContentView(R.layout.third);
		
		//设置默认文字
		textView = (TextView)findViewById(R.id.id_skin_textview);
		textView.setText("默认皮肤");
		
		//设置默认皮肤
		linearLayout = (LinearLayout)findViewById(R.id.id_skin_layout);
		ThemeSettingObj.gThemeSettingObj.SetTheme(ThemeSetting.THEME_DEFAULT);
		linearLayout.setBackground(getResources().getDrawable(ThemeSettingObj.gThemeSettingObj.nThemeSkin));
		
		//根据ID找到RadioGroup实例
		RadioGroup group = (RadioGroup)findViewById(R.id.radioGroup);
		//绑定一个匿名监听器
		group.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener()
		{
			@Override
			public void onCheckedChanged(RadioGroup group, int checkedId)
			{
				//获取变更后的选中项的ID
				int radioButtonId = group.getCheckedRadioButtonId();
				//根据ID获取RadioButton的实例
				RadioButton rb = (RadioButton)findViewById(radioButtonId);
				//更新文本内容，以符合选中项
				textView.setText(rb.getText());
				
				//设置选择不同Id的不同背景
				switch (checkedId)
				{
				case R.id.id_skin_btn1:
					ThemeSettingObj.gThemeSettingObj.SetTheme(ThemeSetting.THEME_DEFAULT);
					break;
				case R.id.id_skin_btn2:
					ThemeSettingObj.gThemeSettingObj.SetTheme(ThemeSetting.THEME_PIC);
					break;
				case R.id.id_skin_btn3:
					ThemeSettingObj.gThemeSettingObj.SetTheme(ThemeSetting.THEME_COLOR);
					break;
				default:
					break;
				}
				linearLayout.setBackground(getResources().getDrawable(ThemeSettingObj.gThemeSettingObj.nThemeSkin));
			}
		});
	}
	
}

效果如图

  

源码下载