码迷,mamicode.com
首页 > 移动开发 > 详细

android项目 之 来电管家(1) ----- 界面设计

时间:2014-09-15 10:06:08      阅读:275      评论:0      收藏:0      [点我收藏+]

标签:界面设计   activitygroup   

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

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

                   1.    添加黑白名单

                   2.    选择拦截模式

                   3.    启用拦截时间段

                   4.    拦截开关

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

         先来看界面:

         bubuko.com,布布扣bubuko.com,布布扣   bubuko.com,布布扣

          从界面其实也可以看出,这里主要应用了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 };
	@Override
	public 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();//必须先清除容器中所有的View
		Intent 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 转为 View
		Window subActivity = getLocalActivityManager().startActivity(
				"subActivity", intent);
		//容器添加View
		container.addView(subActivity.getDecorView(),
				LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT);
	}
	

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

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




 




 

 

android项目 之 来电管家(1) ----- 界面设计

标签:界面设计   activitygroup   

原文地址:http://blog.csdn.net/jesson20121020/article/details/39288135

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!