菜鸟流程-Touching App（2）- 设置界面

额，一不小心浪了几天，这篇博客会说说我写设置界面时的代码过程，个人认为是这四个界面里面最简单的一个。但是，由于我和美工是第一次配合弄这个，所以还是遇到了几个坑。
下面进入正题了。

一、界面元素分析

还是先看一下美工给我的图。

第一、我要吐槽的是，这个界面他是过了很久才给我的！！和他妹子去祖国北边的大草原浪去了=。=
第二、我更要吐槽的是，相比于之前的界面，这个界面明显差了点什么。是的，没有给数据。
不过，还好我坚持的是百分比绘图，所以就目测了一下各个组件的长宽比，然后成功在坑爹的美工手上活了下来。

好了，说正经的，分析一下元素。
其实是把一个大的模块重复了四次，所以我们只分析第一块，Items On Display，这个好了。
其实很简单，都用不着自定义view。

一个TextView—>Items On Display
一个空白
一个TextView靠左，一个CheckBox靠右—>Temprature
一个TextView靠左，一个CheckBox靠右—>Humidity
一个TextView靠左，一个CheckBox靠右—>Co
一个TextView靠左，一个CheckBox靠右—>CO2
一个空白
一个横线

下面的部分只需要重复以上步骤就好了。
另外需要考虑的是各个部分所占长宽的大小，显然，这个工作是我目测得到的，不过幸好最后感觉效果还阔以。

我分析之后的图片权重分布是这样的：

、、、本来想做一张图片，上面布满线条和数字来提高一下逼格的，不过有点晚了，我的xml代码我也懒得看了，权重数据就没有。而且绘图软件只有画图和sai，用得都不熟练，暂且偷一回懒吧。

二、实现布局

在我写这篇博客的时候，我学到了自定义属性，组合控件这些知识，然而已经用不上了，代码已经写好了，我也懒得改了，也许哪天心血来潮会改改，毕竟看上去要高大上一点。而目前的代码呢，基于上面那个片段是这样的：

 <!-- 标题1 --><TextView
            style="@style/zhuBiaooTi"android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="2"android:text="Items On Display" /><!-- 标题1空白 --><!-- <Viewandroid:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1"android:background="#00ffffff" /> --><!-- 标题1 副标题1 --><RelativeLayout
            android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" ><TextView
                android:id="@+id/fubiaoti11"style="@style/fuBiaooTi"android:layout_width="fill_parent"android:layout_height="fill_parent"android:text="  Temprature" /><CheckBox
                android:id="@+id/check_temp"android:layout_width="25px"android:layout_height="25px"android:layout_alignParentRight="true"android:layout_marginRight="5dp"android:background="@drawable/checkbox_selector"android:button="@null"android:checked="true"android:gravity="center_vertical"android:layout_centerVertical="true"/></RelativeLayout><!-- 标题1 副标题2 --><RelativeLayout
            android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" ><TextView
                android:id="@+id/fubiaoti12"style="@style/fuBiaooTi"android:layout_width="fill_parent"android:layout_height="fill_parent"android:text="  Humidity" /><CheckBox
                android:id="@+id/check_humi"android:layout_width="25px"android:layout_height="25px"android:layout_alignParentRight="true" android:layout_marginRight="5dp"android:background="@drawable/checkbox_selector"android:button="@null"android:checked="true"  android:layout_centerVertical="true"android:gravity="center_vertical" /></RelativeLayout><!-- 标题1 副标题3 --><RelativeLayout
            android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" ><TextView
                android:id="@+id/fubiaoti13"style="@style/fuBiaooTi"android:layout_width="fill_parent"android:layout_height="fill_parent"android:text="  CO" /><CheckBox
                android:id="@+id/check_co"android:layout_width="25px"android:layout_height="25px"android:layout_alignParentRight="true" android:layout_marginRight="5dp"    android:background="@drawable/checkbox_selector"android:button="@null"  android:layout_centerVertical="true"android:gravity="center_vertical" /></RelativeLayout><!-- 标题1 副标题4 --><RelativeLayout
            android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1" ><TextView
                android:id="@+id/fubiaoti14"style="@style/fuBiaooTi"android:layout_width="fill_parent"android:layout_height="fill_parent"android:text="  CO2" /><CheckBox
                android:id="@+id/check_co2"android:layout_width="25px"android:layout_height="25px"android:layout_alignParentRight="true" android:layout_marginRight="5dp"                    android:background="@drawable/checkbox_selector"android:button="@null"  android:layout_centerVertical="true"android:gravity="center_vertical" /></RelativeLayout><!-- 标题1 下方空白 --><View
            android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="1"android:background="#00ffffff" /><!-- 标题1 下方横线 --><LinearLayout
            android:layout_width="fill_parent"android:layout_height="0dp"android:layout_weight="2"android:orientation="vertical" ><View
                android:layout_width="fill_parent"android:layout_height="2dp"android:layout_gravity="top"android:background="#88ffffff" /></LinearLayout>

额，基本上是把每一行都放在了一个layout里面，这样是因为：
1、只有LinearLayout才有weight属性，所以最外层用的LinearLayout。
2、我觉得RelativeLayout方便布局一点，比如alignParentRight，marginLeft这种，所以每一层都用RelativeLayout包裹了一下。

具体的布置呢，不难，瞟瞟代码就好了。

其中的checkBox的状态用了美工提供的两个图片，xml是这样：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" ><item android:state_checked="true" android:drawable="@drawable/check_ed"></item><item android:state_selected="true" android:drawable="@drawable/check_ed"></item><item android:state_pressed="true" android:drawable="@drawable/check_ed"></item><item android:state_selected="false" android:drawable="@drawable/check"></item></selector>

图片在源代码里面有，感兴趣的大大可以下载了去玩。

上面讲了设置的主界面，也就是中间那一块可以按的部分，我们还需要布置一下顶部。
顶部是这样的，有一个返回按钮，一个DETAILS标题，一个下方的黑色外发光横线，这样一分析就感觉简单了很多，具体的实现我也不说了，直接看代码。

<!-- 标题栏 --><RelativeLayout
        android:id="@+id/biaoti_layout"android:layout_width="fill_parent"android:layout_height="142px"android:background="@drawable/mybiaoti_background" ><!-- 返回按钮 --><FrameLayout android:id="@+id/backbutton_frame"android:layout_width="240px"android:layout_height="142px"><ImageButton
            android:id="@+id/button_back"android:layout_width="15px"android:layout_height="25px"android:layout_gravity="center_vertical"android:scaleType="fitCenter"android:background="@drawable/back_buutton" /><ImageButton android:id="@+id/button_back_frontone"android:layout_gravity="center_vertical"android:layout_width="100px"android:layout_height="60px"android:background="#00ffffff"/></FrameLayout><!-- 标题文字 --><TextView
            android:id="@+id/biaoti_text"android:layout_width="fill_parent"android:layout_height="fill_parent"android:layout_alignParentLeft="true"android:gravity="center"android:text="DETAILS"android:textColor="#ffffffff" /></RelativeLayout>

如果大大们看的稍微认真一点，就会发现我的返回按钮居然有两个ImageButton，而且是放在了FrameLayout里面，也就是一个覆盖了另一个。。。

这是因为，有一个坑，叫做按钮太小根本点不到。

美工忙于划船不靠浆，只好用这个方法了：

用一个透明的按钮覆盖在原来的按钮上，当按钮附近区域被按下时，透明按钮的透明度降低，仿佛按钮被按下一样，就是这么个道理~

最后，其实还有一点框架漏了，那就是左右两边的空白，这个只需要在设置的主界面的最外层的RelativeLayout那里设置宽度为560px（因为目前假设是720*1280px），并且水平居中就可以了。当然，最后在布置界面的时候，需要在java代码里面动态更改这个宽度，跟上一节的原理一样：

获取当前屏幕宽度mScreenWidth后，设置宽度width=560*mScreenWidth/720；，这样就可以匹配屏幕了~

哦，最后上一下完整的Activity的java代码，包括一些事件处理方法等等，不过都还没有实现对应的逻辑，只是弹出了一些logcat方便调试。

package com.example.guochuang;import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.util.DisplayMetrics;
import android.view.KeyEvent;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.CheckBox;
import android.widget.CompoundButton;
import android.widget.CompoundButton.OnCheckedChangeListener;
import android.widget.FrameLayout;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;
import android.widget.Toast;public class SettingActivity extends Activity {// 界面组件RelativeLayout mBiaoTiLayout;LinearLayout mSheZhiLayout;ImageButton mBackButton,mBackButtonFrontOne;TextView mBiaoTiText;CheckBox mCheckTemp, mCheckHumi, mCheckCo, mCheckCo2, mCheckWarning;ImageButton mButtonBackground, mButtonMaintone, mButtonAboutUs;FrameLayout mBackButtonFrame;TextView fubiaoti11,fubiaoti12,fubiaoti13,fubiaoti14,fubiaoti21,fubiaoti22,fubiaoti30,fubiaoti41;// 变量private int mNum;private int mScreenWidth;private int mScreenHeight;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.setting_layout);// 存储主界面的mNum数值Intent intent = getIntent();mNum = intent.getIntExtra("number", 0);DisplayMetrics dm = getResources().getDisplayMetrics();mScreenWidth = dm.widthPixels;mScreenHeight = dm.heightPixels;adaptScreen();initListener();}private void adaptScreen() {// 匹配标题栏layoutmBiaoTiLayout = (RelativeLayout) findViewById(R.id.biaoti_layout);RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) mBiaoTiLayout.getLayoutParams();params.height = 142 * mScreenHeight / 1280;mBiaoTiLayout.setLayoutParams(params);// 匹配标题栏返回按钮//后面一层按钮mBackButton = (ImageButton) findViewById(R.id.button_back);FrameLayout.LayoutParams params2 = (FrameLayout.LayoutParams) mBackButton.getLayoutParams();params2.height = 25 * mScreenHeight / 1280;params2.width = 15 * mScreenWidth / 720;mBackButton.setX(120 * mScreenWidth / 720);mBackButton.setLayoutParams(params2);//按钮底层layoutmBackButtonFrame=(FrameLayout)findViewById(R.id.backbutton_frame);mBackButtonFrame.getLayoutParams().width=240*mScreenWidth/720;mBackButtonFrame.getLayoutParams().height=142*mScreenHeight/1280;//前面一层按钮mBackButtonFrontOne=(ImageButton)findViewById(R.id.button_back_frontone);mBackButtonFrontOne.setX(77*mScreenWidth/720);mBackButtonFrontOne.getLayoutParams().height=60*mScreenHeight/1280;mBackButtonFrontOne.getLayoutParams().width=100*mScreenWidth/720;mBackButtonFrontOne.setBackgroundColor(0x00ffffff);mBackButtonFrontOne.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubmBackButtonFrontOne.setBackgroundColor(0x11ffffff);/*Timer timer=new Timer();TimerTask myTask=new TimerTask() {@Overridepublic void run() {// TODO Auto-generated method stubmBackButtonFrontOne.setBackgroundColor(0x00ffffff);}};timer.schedule(task, 200);*/Intent intent=new Intent();intent.putExtra("number", mNum);intent.setClass(SettingActivity.this, MainActivity.class);SettingActivity.this.startActivity(intent);}});/*mBackButton = (ImageButton) findViewById(R.id.button_back);RelativeLayout.LayoutParams backparams = (RelativeLayout.LayoutParams) mBackButton.getLayoutParams();backparams.height = 25 * mScreenHeight / 1280;backparams.width = 15 * mScreenWidth / 720;mBackButton.setX(120 * mScreenWidth / 720);mBackButton.setLayoutParams(backparams);*/// 匹配标题栏汉字mBiaoTiText = (TextView) findViewById(R.id.biaoti_text);mBiaoTiText.setTextSize(20 * mScreenWidth / 720);// 匹配设置界面层mSheZhiLayout = (LinearLayout) findViewById(R.id.shezhi_layout);RelativeLayout.LayoutParams params3 = (RelativeLayout.LayoutParams) mSheZhiLayout.getLayoutParams();params3.width = 560 * mScreenWidth / 720;// 匹配标题1，标题2按钮mCheckTemp = (CheckBox) findViewById(R.id.check_temp);mCheckHumi = (CheckBox) findViewById(R.id.check_humi);mCheckCo = (CheckBox) findViewById(R.id.check_co);mCheckCo2 = (CheckBox) findViewById(R.id.check_co2);mCheckWarning = (CheckBox) findViewById(R.id.check_warning);adaptButton(mCheckTemp, mCheckHumi, mCheckCo, mCheckCo2, mCheckWarning);mButtonBackground = (ImageButton) findViewById(R.id.button_background);mButtonMaintone = (ImageButton) findViewById(R.id.button_mainTone);mButtonAboutUs = (ImageButton) findViewById(R.id.button_aboutUs);adaptButton(mButtonBackground, mButtonMaintone, mButtonAboutUs);//为各层文字找到控件，准备添加点击事件fubiaoti11=(TextView)findViewById(R.id.fubiaoti11);fubiaoti12=(TextView)findViewById(R.id.fubiaoti12);fubiaoti13=(TextView)findViewById(R.id.fubiaoti13);fubiaoti14=(TextView)findViewById(R.id.fubiaoti14);fubiaoti21=(TextView)findViewById(R.id.fubiaoti21);fubiaoti22=(TextView)findViewById(R.id.fubiaoti22);fubiaoti30=(TextView)findViewById(R.id.textWarning30);fubiaoti41=(TextView)findViewById(R.id.fubiaoti41);//匹配文字控件fubiaoti11.setTextSize(15*mScreenHeight/1280);fubiaoti12.setTextSize(15*mScreenHeight/1280);fubiaoti13.setTextSize(15*mScreenHeight/1280);fubiaoti14.setTextSize(15*mScreenHeight/1280);fubiaoti21.setTextSize(15*mScreenHeight/1280);fubiaoti22.setTextSize(15*mScreenHeight/1280);fubiaoti30.setTextSize(20*mScreenHeight/1280);fubiaoti41.setTextSize(15*mScreenHeight/1280);}private void adaptButton(CheckBox... boxs) {for (CheckBox box : boxs) {RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams)box.getLayoutParams();params.height = Math.min(25 * mScreenHeight / 1280,25 * mScreenWidth / 720);params.width =  Math.min(25 * mScreenHeight / 1280,25 * mScreenWidth / 720);box.setLayoutParams(params);}}private void adaptButton(ImageButton... buttons) {for (ImageButton button : buttons) {RelativeLayout.LayoutParams params = (RelativeLayout.LayoutParams) button.getLayoutParams();params.height = 24 * mScreenHeight / 1280;params.width = 20 * mScreenWidth / 720;button.setLayoutParams(params);}}private void initListener() {mBackButton.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubIntent intent = new Intent();intent.putExtra("number", mNum);intent.setClass(SettingActivity.this, MainActivity.class);SettingActivity.this.startActivity(intent);}});mCheckTemp.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {// TODO Auto-generated method stubif (isChecked) {Toast.makeText(SettingActivity.this, "啊，Temprature被选中了",Toast.LENGTH_SHORT).show();} else {Toast.makeText(SettingActivity.this, "啊，Temprature被取消了",Toast.LENGTH_SHORT).show();}}});mCheckHumi.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {// TODO Auto-generated method stubif (isChecked) {Toast.makeText(SettingActivity.this, "啊，Humidity被选中了",Toast.LENGTH_SHORT).show();} else {Toast.makeText(SettingActivity.this, "啊，Humidity被取消了",Toast.LENGTH_SHORT).show();}}});mCheckCo.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {// TODO Auto-generated method stubif (isChecked) {Toast.makeText(SettingActivity.this, "啊，Co被选中了",Toast.LENGTH_SHORT).show();} else {Toast.makeText(SettingActivity.this, "啊，Co被取消了",Toast.LENGTH_SHORT).show();}}});mCheckCo2.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {// TODO Auto-generated method stubif (isChecked) {Toast.makeText(SettingActivity.this, "啊，Co2被选中了",Toast.LENGTH_SHORT).show();} else {Toast.makeText(SettingActivity.this, "啊，Co2被取消了",Toast.LENGTH_SHORT).show();}}});mCheckWarning.setOnCheckedChangeListener(new OnCheckedChangeListener() {@Overridepublic void onCheckedChanged(CompoundButton buttonView,boolean isChecked) {// TODO Auto-generated method stubif (isChecked) {Toast.makeText(SettingActivity.this, "啊，warning被选中了",Toast.LENGTH_SHORT).show();} else {Toast.makeText(SettingActivity.this, "啊，warning被取消了",Toast.LENGTH_SHORT).show();}}});mButtonBackground.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubToast.makeText(SettingActivity.this, "啊，Background被点了",Toast.LENGTH_SHORT).show();}});mButtonMaintone.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubToast.makeText(SettingActivity.this, "啊，Main tone被点了",Toast.LENGTH_SHORT).show();}});mButtonAboutUs.setOnClickListener(new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubToast.makeText(SettingActivity.this, "啊，About Us被点了",Toast.LENGTH_SHORT).show();}});//为textView添加点击事件，增加按钮范围OnClickListener textViewListener=new OnClickListener() {@Overridepublic void onClick(View v) {// TODO Auto-generated method stubswitch (v.getId()) {case R.id.fubiaoti11:mCheckTemp.setChecked(!mCheckTemp.isChecked());break;case R.id.fubiaoti12:mCheckHumi.setChecked(!mCheckHumi.isChecked());break;case R.id.fubiaoti13:mCheckCo.setChecked(!mCheckCo.isChecked());break;case R.id.fubiaoti14:mCheckCo2.setChecked(!mCheckCo2.isChecked());break;case R.id.fubiaoti21:Toast.makeText(SettingActivity.this, "啊，21被按了，即将进入background界面", 3000).show();break;case R.id.fubiaoti22:Toast.makeText(SettingActivity.this, "啊，22被按了，即将进入main tone界面", 3000).show();break;case R.id.textWarning30:    mCheckWarning.setChecked(!mCheckWarning.isChecked());break;case R.id.fubiaoti41:Toast.makeText(SettingActivity.this, "啊，41被按了，即将进入about us界面", 3000).show();break;default:break;}}};fubiaoti11.setOnClickListener(textViewListener);fubiaoti12.setOnClickListener(textViewListener);fubiaoti13.setOnClickListener(textViewListener);fubiaoti14.setOnClickListener(textViewListener);fubiaoti21.setOnClickListener(textViewListener);fubiaoti22.setOnClickListener(textViewListener);fubiaoti30.setOnClickListener(textViewListener);fubiaoti41.setOnClickListener(textViewListener);}//监听返回按钮@Override  public boolean onKeyDown(int keyCode, KeyEvent event)  {  if (keyCode == KeyEvent.KEYCODE_BACK )  {  Intent intent=new Intent();intent.putExtra("number", mNum);intent.setClass(SettingActivity.this, MainActivity.class);SettingActivity.this.startActivity(intent);}  return true;  }}

唉哟、、粘上来之后才发现，，看得头疼[笑哭][笑哭][笑哭]

最后的界面是这样的，不管是虚拟机320*480px还是手机720*1280px都是一样一样的。

好了，这个界面的介绍就到此为止了，关于源码的下载呢，在这个系列的第一篇有，就不附了。