4、主界面UI设计

主界面设计效果：

一共分为三个部分：

TextView显示“我的手机卫士”，一个View用于分割，中间一个GridView用于显示九大功能模块的图标和名称。

对应的layout为：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="我的手机卫士"
        android:id="@+id/textView"
        android:layout_gravity="center_horizontal"
        android:textSize="30sp"
        android:textStyle="bold" />
    <View
        android:layout_height="1dip"
        android:layout_width="fill_parent"
        android:layout_marginTop="5dip"
        android:background="@drawable/devide_line" />

    <GridView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:id="@+id/gv_main"
        android:layout_gravity="center_horizontal"
        android:numColumns="3"
        android:layout_marginTop="5dip" />
</LinearLayout>

MainActivity代码为：

package com.example.mobilesafe;

import android.app.Activity;
import android.os.Bundle;
import android.widget.GridView;

/**
 * Created by sing on 13-12-24.
 * desc:
 */
public class MainActivity extends Activity {
    //activity_main中的gridview控件
    private GridView gv_main;

    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        gv_main = (GridView)findViewById(R.id.gv_main);
        //为gv_main对象设置适配器，该适配器为每个item填充对应的数据
        gv_main.setAdapter(new MainAdapter(this));
    }
}

使用MainAdapter适配器为GridView的每个item填充数据：

package com.example.mobilesafe;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;

/**
 * Created by sing on 13-12-24.
 * desc:
 */
public class MainAdapter extends BaseAdapter {

    //布局填充器
    private LayoutInflater inflater;

    //保存mainactivity传递来的上下文对象
    private Context context;

    //将9个item的图片id存入数组
    public static final int[] icons = {
        R.drawable.widget01, R.drawable.widget02, R.drawable.widget03,
        R.drawable.widget04, R.drawable.widget05, R.drawable.widget06,
        R.drawable.widget07, R.drawable.widget08, R.drawable.widget09
    };

    //将9个item的标题存入数据
    public static final String[] names = {
        "手机防盗", "通信卫士", "软件管理",
        "进程管理", "流量统计", "手机杀毒",
        "系统优化", "高级工具", "设置中心"
    };

    /**
     * 构造函数
     * @param context
     */
    public MainAdapter(Context context) {
        this.context = context;
        //获取系统中的布局填充器
        inflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    /**
     * 返回gridview有多少个item
     * @return
     */
    @Override
    public int getCount() {
        return names.length;
    }

    /**
     * 返回item对象
     * @param position
     * @return
     */
    @Override
    public Object getItem(int position) {
        return position;
    }

    /**
     * 返回gridview中的item的view对象
     * @param position
     * @param convertView
     * @param parent
     * @return
     */
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = inflater.inflate(R.layout.main_item, null);
        TextView tv_name = (TextView)view.findViewById(R.id.tv_main_item_name);
        ImageView iv_icon = (ImageView)view.findViewById(R.id.iv_main_item_icon);
        tv_name.setText(names[position]);
        iv_icon.setImageResource(icons[position]);
        return view;
    }

    /**
     * 返回item id
     * @param position
     * @return
     */
    @Override
    public long getItemId(int position) {
        return position;
    }



}

其中每个item需要一个layout，这里是main_item.xml：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center_horizontal">

    <ImageView
        android:layout_width="75dip"
        android:layout_height="75dip"
        android:id="@+id/iv_main_item_icon"
        android:src="@drawable/widget01"
        android:layout_marginTop="5dip" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="功能1"
        android:id="@+id/tv_main_item_name"
        android:layout_marginTop="5dip"
        android:textSize="20sp" />
</LinearLayout>

设置LinearLayout为center_horizontal是为了让text文本居中显示在imageview下方，否则会出现不齐的效果：