android项目 之 来电管家（1） ----- 界面设计

           因为需要，最近几天忙着写来电管家这个小软件，现在已经基本写的差不多了，基本的功能也都已实现，就剩下后续的完善了，而之前的记事本项目最近几天没写，但是肯定还是会完成的。

           来电管家的基本功能，这里主要做的是拦截。

                   1.    添加黑白名单

                   2.    选择拦截模式

                   3.    启用拦截时间段

                   4.    拦截开关

          主要功能，就是通过用户选择开启拦截，并选择拦截模式，这时就会启动后台监听服务，监听来电，判断是否挂断，并且，用户可以自由选择拦截时间段，也就是在该时间段内才启用监听服务。

         先来看界面：

           

          从界面其实也可以看出，这里主要应用了ActivityGroup和Activity的组合使用，以达到分页标签的作用，类似很多软件，如QQ。

          直接上代码：

          main.xml        这个就是ActivityGroup的布局文件，图中的四个页面就是四个Activity，就位于主布局文件中的LinearLayout容器中

<?xml version="1.0" encoding="utf-8"?><LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"android:orientation="vertical" android:layout_width="fill_parent"android:layout_height="fill_parent"><RelativeLayout     android:layout_height="fill_parent"android:layout_width="fill_parent"><GridView     android:layout_height="35dp"     android:id="@+id/gvTopBar"android:layout_alignParentTop="true" android:layout_width="fill_parent"android:background="@drawable/tabbar_bg"android:layout_centerVertical="true"></GridView> <ImageView             android:layout_width="match_parent"            android:layout_height="wrap_content"            android:layout_below="@id/gvTopBar"            android:src="@drawable/line"            /><LinearLayout android:id="@+id/Container"android:layout_below="@+id/gvTopBar" android:layout_width="fill_parent"android:layout_height="fill_parent"android:orientation="vertical"></LinearLayout></RelativeLayout></LinearLayout>

        其中GridView用于放置顶部的分布菜单，ImageView就是图中的虚线，而最下面的LinearLayout则是放置四个页面的容器。

        下面给出四个页面的布局文件

        黑白名单页面布局文件  activity_add.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     android:id="@+id/layout"    >           <ListView                 android:id="@+id/lv_show"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1"        android:cacheColorHint="#FFF" >        </ListView>                     <RelativeLayout                 android:id="@+id/add_layout"        android:layout_width="fill_parent"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:visibility="visible"        android:background="@drawable/tabbar_bg"        >       <ImageView             android:layout_width="match_parent"            android:layout_height="wrap_content"            android:src="@drawable/line"            />       <Button        android:id="@+id/btn_add"        android:layout_width="45dp"        android:layout_height="45dp"        android:layout_centerHorizontal="true"        android:background="@drawable/add"        />                          </RelativeLayout>    <RelativeLayout                 android:id="@+id/delete_layout"        android:layout_width="fill_parent"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:visibility="gone"        android:background="@drawable/tabbar_bg"        >       <ImageView             android:layout_width="match_parent"            android:layout_height="wrap_content"            android:src="@drawable/line"            />        <Button             android:id="@+id/btn_cancel"            android:layout_width="45dp"            android:layout_height="45dp"            android:background="@drawable/backup"            />               <TextView             android:id="@+id/tv_select"            android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="共选择了项"            android:layout_centerInParent="true"            />        <Button             android:id="@+id/btn_delete"            android:layout_width="45dp"            android:layout_height="45dp"            android:background="@drawable/delete"            android:layout_alignParentRight="true"            />      </RelativeLayout></LinearLayout>

            

            拦截记录的布局文件activity_callInfo.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >      <ListView                 android:id="@+id/lv_show_callInfo"        android:layout_width="match_parent"        android:layout_height="match_parent"        android:layout_weight="1"         >        </ListView>          <RelativeLayout                 android:id="@+id/add_layout"        android:layout_width="fill_parent"        android:layout_height="50dp"        android:layout_alignParentBottom="true"        android:visibility="visible"        android:background="@drawable/tabbar_bg"        >       <ImageView             android:layout_width="match_parent"            android:layout_height="wrap_content"            android:src="@drawable/line"            />       <Button        android:id="@+id/btn_delete_callInfo"        android:layout_width="45dp"        android:layout_height="45dp"        android:layout_centerHorizontal="true"        android:background="@drawable/delete"        />             </RelativeLayout>  </RelativeLayout>

 

        设置页面的布局文件activity_setting.xml

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical"     ><RelativeLayout     android:layout_width="match_parent"    android:layout_height="40dp"    android:gravity="center"    android:padding="8dp"    android:layout_marginLeft="20dp"    android:layout_marginRight="20dp"    android:layout_marginTop="30dp"    android:background="@drawable/setting_top"    >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="开启监听"         android:textSize="15sp"        /><ToggleButton android:id="@+id/tb_switch"    android:layout_width="44dp"        android:layout_height="20dp"        android:background="@drawable/start_service_off"        android:textOff=""        android:textOn=""        android:layout_alignParentRight="true"    /></RelativeLayout><RelativeLayout     android:layout_width="match_parent"    android:layout_height="40dp"    android:gravity="center"    android:padding="8dp"    android:layout_marginLeft="20dp"    android:layout_marginRight="20dp"    android:background="@drawable/setting_middle"    >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="白名单模式"         android:textSize="15sp"        /><ToggleButton android:id="@+id/tb_whitelist"    android:layout_width="44dp"        android:layout_height="20dp"        android:background="@drawable/start_service_off"        android:textOff=""        android:textOn=""        android:layout_alignParentRight="true"    /></RelativeLayout><RelativeLayout     android:layout_width="match_parent"    android:layout_height="40dp"    android:gravity="center"    android:padding="8dp"    android:layout_marginLeft="20dp"    android:layout_marginRight="20dp"    android:background="@drawable/setting_middle"    >    <TextView        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="启用时间段"         android:textSize="15sp"        /><ToggleButton android:id="@+id/tb_time"    android:layout_width="44dp"        android:layout_height="20dp"        android:background="@drawable/start_service_off"        android:textOff=""        android:textOn=""        android:layout_alignParentRight="true"    /></RelativeLayout><RelativeLayout     android:id="@+id/start_layout"    android:layout_width="match_parent"    android:layout_height="40dp"    android:gravity="center"    android:padding="8dp"    android:layout_marginLeft="20dp"    android:layout_marginRight="20dp"    android:background="@drawable/setting_middle"    ><TextView    android:id="@+id/tv_start_tip"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="开始时间 "         android:textSize="15sp"        android:textColor="@android:color/darker_gray"        /><TextView    android:id="@+id/tv_start_time"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="2014-9-11   >"        android:textSize="15sp"        android:layout_alignParentRight="true"        android:textColor="@android:color/darker_gray"        /></RelativeLayout><RelativeLayout     android:id="@+id/end_layout"    android:layout_width="match_parent"    android:layout_height="40dp"    android:gravity="center"    android:padding="8dp"    android:layout_marginLeft="20dp"    android:layout_marginRight="20dp"    android:background="@drawable/setting_under"    ><TextView    android:id="@+id/tv_end_tip"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="结束时间 "         android:textSize="15sp"        android:textColor="@android:color/darker_gray"        /><TextView    android:id="@+id/tv_end_time"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="2014-9-11   >"        android:textSize="15sp"        android:layout_alignParentRight="true"        android:textColor="@android:color/darker_gray"        /></RelativeLayout>    </LinearLayout>

            图中设置页面中的四周包围的线，其实是用到了.9.png图片。
        
            布局文件就上面这几个，那么顶部的分页菜单，及如何将四个Activity添加进ActivityGroup中。

             1）顶部菜单的实现：

               既然是GridView，当然要用适配器了，这里用的是自定义BaseAdapter，如下：

package com.example.callmanager;import android.app.Activity;import android.content.Context;import android.content.SharedPreferences;import android.view.Gravity;import android.view.View;import android.view.ViewGroup;import android.widget.BaseAdapter;import android.widget.GridView;import android.widget.TextView;public class TabBarAdapter extends BaseAdapter {private Context mContext; private TextView[] txtItems;private int selResId;    public TabBarAdapter(Context c,int[] tabMenuId,int width,int height,int selResId) {         mContext = c;         this.selResId=selResId;        txtItems=new TextView[tabMenuId.length];        for(int i=0;i<tabMenuId.length;i++)        {                txtItems[i] = new TextView(mContext);         txtItems[i].setLayoutParams(new GridView.LayoutParams(width, GridView.LayoutParams.WRAP_CONTENT));//设置ImageView宽高         txtItems[i].setGravity(Gravity.CENTER);        txtItems[i].setPadding(2, 5, 2, 5);         txtItems[i].setText(tabMenuId[i]);        txtItems[i].setTextSize(15);                }    }      public int getCount() {         return txtItems.length;     }      public Object getItem(int position) {         return position;     }      public long getItemId(int position) {         return position;     }      /**      * 设置选中的效果      */      public void SetFocus(int index)      {          for(int i=0;i<txtItems.length;i++)          {              if(i!=index)              {              txtItems[i].setBackgroundResource(0);//恢复未选中的样式                        }          }          txtItems[index].setBackgroundResource(selResId);//设置选中的样式            }          public View getView(int position, View convertView, ViewGroup parent) {         TextView textView;         if (convertView == null) {         textView = txtItems[position];                } else {         textView = (TextView) convertView;         }         return textView;     } } 

           接下来就是将自定义的Adapter与GridView进行绑定了，主要代码如下（位于ActivityGroupDemo.java中）：

public GridView gvTopBar;

private TabBarAdapter topImgAdapter;

/** 顶部菜单 **/<br abp="804" /> int[] topbar_menu_array = { R.string.black_list,R.string.white_list,<br abp="805" />   R.string.call_info,<br abp="806" />   R.string.setting };

@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.main);gvTopBar = (GridView) this.findViewById(R.id.gvTopBar);gvTopBar.setNumColumns(topbar_menu_array.length);// 设置每行列数gvTopBar.setSelector(new ColorDrawable(Color.TRANSPARENT));// 选中的时候为透明色gvTopBar.setGravity(Gravity.CENTER);// 位置居中int width = this.getWindowManager().getDefaultDisplay().getWidth()/ topbar_menu_array.length;topImgAdapter = new TabBarAdapter(this, topbar_menu_array, width, 48,R.drawable.menu_background);gvTopBar.setAdapter(topImgAdapter);// 设置菜单Adapter}

            这样，顶部菜单的功能就已完成，并且，你点击某个菜单时，会有选中时的效果，如图中所示，这里同样使用的是.9.png图片。

 

             2）将四个Activity添加进ActivityGroup,并点击相应的分布标签，进入对应的activity，四个Activity的代码不用多说，就是加载布局文件而已，主要看activityGroup中代码：

public LinearLayout container;// 装载sub Activity的容器

<pre class="java" name="code" abp="813">gvTopBar.setOnItemClickListener(new ItemClickEvent());// 项目点击事件container = (LinearLayout) findViewById(R.id.Container);    SwitchActivity(0);//默认打开第0页

class ItemClickEvent implements OnItemClickListener {@SuppressLint("NewApi") public void onItemClick(AdapterView<?> arg0, View arg1, int arg2,long arg3) {SwitchActivity(arg2);}}/** * 根据ID打开指定的Activity * @param id GridView选中项的序号 */void SwitchActivity(int id){topImgAdapter.SetFocus(id);//选中项获得高亮container.removeAllViews();//必须先清除容器中所有的ViewIntent intent =null;if (id == 0 ) intent = new Intent(ActivityGroupDemo.this, BlackListActivity.class);else if (id == 1)intent = new Intent(ActivityGroupDemo.this,WhiteListActivity.class);else if (id == 2) intent = new Intent(ActivityGroupDemo.this, CallInfo.class);else if (id == 3)intent = new Intent(ActivityGroupDemo.this, SettingActivity.class);intent.addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);//Activity 转为 ViewWindow subActivity = getLocalActivityManager().startActivity("subActivity", intent);//容器添加Viewcontainer.addView(subActivity.getDecorView(),LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);}

          其实，就是利用Intent跳转页面，并将viiew添加进窗口中。

           至此，界面设计部分已完成。