Android应用切换皮肤功能实现(二)

浏览数：21 / 时间：2015年06月11日

原文地址http://www.apkbus.com/forum.php?mod=viewthread&tid=149034&highlight=%E7%9A%AE%E8%82%A4

上次写完应用切换皮肤功能实现的时候，有网友提了些问题。我觉得上次说的还不够详细吧。现在接着再写详细点。
这次再在布局里增加了三个按钮图片的设置和一个字体颜色的设置。
1.其实上次只是讲到了切换皮肤时，只是替换了图片资源，其实连布局都可以切换。当然布局的切换要是apk类型的皮肤包才行。
首先我们写好3个布局，把三个按钮放在界面的上中下。
1）按钮在上面

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:id="@+id/main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".MainActivity"
  7.     android:paddingBottom="@dimen/activity_vertical_margin"
  8.     android:paddingLeft="@dimen/activity_horizontal_margin"
  9.     android:paddingRight="@dimen/activity_horizontal_margin"
  10.     android:paddingTop="@dimen/activity_vertical_margin" >
  12.     <TextView
  13.              android:id="@+id/text"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         android:layout_centerInParent="true"
  17.         android:text="点击界面到设置皮肤界面"
  18.         android:textColor="#000000"
  19.         android:textSize="20sp" >
  20.     </TextView>
  22.     <LinearLayout
  23.         android:layout_alignParentTop="true"
  24.         android:id="@+id/buttonLinear"
  25.         android:layout_width="fill_parent"
  26.         android:layout_height="wrap_content" >
  28.         <LinearLayout
  29.             android:layout_width="0.0dip"
  30.             android:layout_height="fill_parent"
  31.             android:layout_weight="1.0"
  32.             android:gravity="center" >
  34.             <ImageButton
  35.                 android:id="@+id/prev"
  36.                 android:layout_width="wrap_content"
  37.                 android:layout_height="wrap_content"               
  38.                 android:scaleType="center"
  39.                 android:src="@drawable/prev" />
  40.         </LinearLayout>
  42.         <LinearLayout
  43.             android:layout_width="0.0dip"
  44.             android:layout_height="fill_parent"
  45.             android:layout_weight="1.0"
  46.             android:gravity="center" >
  48.             <ImageButton
  49.                 android:id="@+id/play"
  50.                 android:layout_width="wrap_content"
  51.                 android:layout_height="wrap_content"
  52.                 
  53.                 android:scaleType="center"
  54.                 android:src="@drawable/play" />
  55.         </LinearLayout>
  57.         <LinearLayout
  58.             android:layout_width="0.0dip"
  59.             android:layout_height="fill_parent"
  60.             android:layout_weight="1.0"
  61.             android:gravity="center" >
  63.             <ImageButton
  64.                 android:id="@+id/next"
  65.                 android:layout_width="wrap_content"
  66.                 android:layout_height="wrap_content"                
  67.                 android:scaleType="center"
  68.                 android:src="@drawable/next" />
  69.         </LinearLayout>
  70.     </LinearLayout>
  72. </RelativeLayout>
复制代码




2）按钮在中间：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:id="@+id/main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".MainActivity"
  7.     android:paddingBottom="@dimen/activity_vertical_margin"
  8.     android:paddingLeft="@dimen/activity_horizontal_margin"
  9.     android:paddingRight="@dimen/activity_horizontal_margin"
  10.     android:paddingTop="@dimen/activity_vertical_margin" >
  12.     <TextView
  13.              android:id="@+id/text"
  14.         android:layout_alignParentBottom="true"
  15.         android:layout_width="wrap_content"
  16.         android:layout_height="wrap_content"
  17.         android:layout_centerInParent="true"
  18.         android:text="点击界面到设置皮肤界面"
  19.         android:textColor="#000000"
  20.         android:textSize="20sp" >
  21.     </TextView>
  23.     <LinearLayout
  24.         android:layout_centerInParent="true"
  25.         android:id="@+id/buttonLinear"
  26.         android:layout_width="fill_parent"
  27.         android:layout_height="wrap_content" >
  29.         <LinearLayout
  30.             android:layout_width="0.0dip"
  31.             android:layout_height="fill_parent"
  32.             android:layout_weight="1.0"
  33.             android:gravity="center" >
  35.             <ImageButton
  36.                 android:id="@+id/prev"
  37.                 android:layout_width="wrap_content"
  38.                 android:layout_height="wrap_content"               
  39.                 android:scaleType="center"
  40.                 android:src="@drawable/prev" />
  41.         </LinearLayout>
  43.         <LinearLayout
  44.             android:layout_width="0.0dip"
  45.             android:layout_height="fill_parent"
  46.             android:layout_weight="1.0"
  47.             android:gravity="center" >
  49.             <ImageButton
  50.                 android:id="@+id/play"
  51.                 android:layout_width="wrap_content"
  52.                 android:layout_height="wrap_content"
  53.                 
  54.                 android:scaleType="center"
  55.                 android:src="@drawable/play" />
  56.         </LinearLayout>
  58.         <LinearLayout
  59.             android:layout_width="0.0dip"
  60.             android:layout_height="fill_parent"
  61.             android:layout_weight="1.0"
  62.             android:gravity="center" >
  64.             <ImageButton
  65.                 android:id="@+id/next"
  66.                 android:layout_width="wrap_content"
  67.                 android:layout_height="wrap_content"                
  68.                 android:scaleType="center"
  69.                 android:src="@drawable/next" />
  70.         </LinearLayout>
  71.     </LinearLayout>
  73. </RelativeLayout>
复制代码


3）按钮在下面：

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:id="@+id/main"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     tools:context=".MainActivity"
  7.     android:paddingBottom="@dimen/activity_vertical_margin"
  8.     android:paddingLeft="@dimen/activity_horizontal_margin"
  9.     android:paddingRight="@dimen/activity_horizontal_margin"
  10.     android:paddingTop="@dimen/activity_vertical_margin" >
  12.     <TextView
  13.         android:id="@+id/text"
  14.         android:layout_width="wrap_content"
  15.         android:layout_height="wrap_content"
  16.         android:layout_centerInParent="true"
  17.         android:text="点击界面到设置皮肤界面"
  18.         android:textColor="#000000"
  19.         android:textSize="20sp" >
  20.     </TextView>
  22.     <LinearLayout
  23.         android:layout_alignParentBottom="true"
  24.         android:id="@+id/buttonLinear"
  25.         android:layout_width="fill_parent"
  26.         android:layout_height="wrap_content" >
  28.         <LinearLayout
  29.             android:layout_width="0.0dip"
  30.             android:layout_height="fill_parent"
  31.             android:layout_weight="1.0"
  32.             android:gravity="center" >
  34.             <ImageButton
  35.                 android:id="@+id/prev"
  36.                 android:layout_width="wrap_content"
  37.                 android:layout_height="wrap_content"               
  38.                 android:scaleType="center"
  39.                 android:src="@drawable/prev" />
  40.         </LinearLayout>
  42.         <LinearLayout
  43.             android:layout_width="0.0dip"
  44.             android:layout_height="fill_parent"
  45.             android:layout_weight="1.0"
  46.             android:gravity="center" >
  48.             <ImageButton
  49.                 android:id="@+id/play"
  50.                 android:layout_width="wrap_content"
  51.                 android:layout_height="wrap_content"
  52.                 
  53.                 android:scaleType="center"
  54.                 android:src="@drawable/play" />
  55.         </LinearLayout>
  57.         <LinearLayout
  58.             android:layout_width="0.0dip"
  59.             android:layout_height="fill_parent"
  60.             android:layout_weight="1.0"
  61.             android:gravity="center" >
  63.             <ImageButton
  64.                 android:id="@+id/next"
  65.                 android:layout_width="wrap_content"
  66.                 android:layout_height="wrap_content"                
  67.                 android:scaleType="center"
  68.                 android:src="@drawable/next" />
  69.         </LinearLayout>
  70.     </LinearLayout>
  72. </RelativeLayout>
复制代码


这些布局分别放在不同的apk包里。命名要相同，这里都叫activity_main.xml。
然后在BaseActivity里根据不同的皮肤上下文。就可以创建出不同的布局文件。这样就实现了同一个界面，在不同皮肤里。图片不同，布局也不同。
根据不同皮肤上下文，创建view的代码如下：

  1. public static  View createViewFromResource(Context context,String layoutName,ViewGroup root, boolean  attachToRoot) {
  2.                 View resultView =null;
  3.                  
  4.                 try{
  5.                         Context ct =getSkinContext(context);
  6.                         int resid = ct.getResources().getIdentifier(layoutName, "layout", ct.getPackageName());
  7.                         if(resid != 0){
  8.                             resultView= currentInflater.inflate(resid, root, attachToRoot);
  9.                         }else{
  10.                                 resid = context.getResources().getIdentifier(layoutName, "layout",context.getPackageName());
  11.                                 resultView= defalutInflater.inflate(resid, root, attachToRoot);
  12.                         }
  13.                         
  14.                 }catch(Exception e){
  15.                         e.printStackTrace();
  16.                         
  17.                 }
  18.                 return resultView;
  19.         }
复制代码


2.另外一个是字体颜色的设置。因为不同的皮肤下，假如字体颜色不跟着皮肤变化的话，看着会非常的别扭。
我们只需要把字体颜色放在一个xml里。不同的皮肤，解析不同的xml得到颜色，就可以实现字体颜色根据皮肤变化了。
这部分代码如下：

  1. public static int getColorByName(String name){
  2.                 int res = -1;
  3.                  try {                        
  4.                                 
  5.                          String xmlFileName ="skin_color.xml";
  6.                          Document doc  =  getDocumentByFile(xmlFileName);
  7.                          if(doc != null){
  8.                                  String value = getColorByName(doc,name);
  9.                                  res=Color.parseColor(value);
  10.                          }                         
  11.                  
  12.                 } catch (Exception e) {
  13.                         e.printStackTrace();
  14.                 }
  15.                 return res;
  16.                 
  17.         } 
  18.         
  19.         private synchronized static Document getDocumentByFile(String xmlFileName) throws Exception{
  20.                  
  21.                 String path = Constant.SKIN_DIR+"skin_color.xml";
  22.                 File file = new File(path);
  23.                 if(file.exists())
  24.                 {
  25.                         
  26.                         InputStream inputStream = null;
  27.                         try {                                
  28.                                 inputStream = new FileInputStream(file);
  29.                                 return getDocument(inputStream);
  30.                         } catch (Exception e) {
  31.                                 e.printStackTrace();
  32.                         }
  33.                 }
  34.                 return getDocument(MyApplication.getApplication().getAssets().open(xmlFileName));
  35.                  
  36.         }
  38.         private static String getColorByName(Document doc,String name){
  39.                  NodeList nodeList= doc.getElementsByTagName(name);
  40.                  String res =null;
  41.                  if(nodeList != null){
  42.                          int len = nodeList.getLength();
  43.                          if(len > 0){
  44.                                  Element el = (Element)nodeList.item(0);
  45.                                  res = el.getAttribute("value");
  46.                                 
  47.                          }else{
  48.                                  
  49.                          }
  50.                  }
  51.                  return res;
  52.         }
复制代码


下面放上切换皮肤的效果图。无图无真相嘛。
<ignore_js_op>技术分享<ignore_js_op>技术分享<ignore_js_op>技术分享<ignore_js_op>技术分享<ignore_js_op>技术分享<ignore_js_op>技术分享 

最后是源码，想要源码，就回复一下吧，反正又不会怀孕的。技术分享

本帖隐藏的内容

<ignore_js_op>技术分享 2.0.zip (6.5 MB, 下载次数: 117)

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢