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));
}
});
}

}

效果如图


 

 


源码下载