Android实例-手机安全卫士（三）-设计主页面UI

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

一、目标。

　　主界面UI如图所示:

技术分享

　　方面是一个功能列表提示框（采用TextView），下面是功能列表（采用GridView）。

二、代码实现。

　　1、在主界面布局文件（activity_home.xml）中增加组件。主界面布局文件（activity_home.xml）采用线性布局，上面一个TextView，根据UI设置相应属性；下面一个是GridView，通过android:numColumns属性设置该组件的列数，由于GridView还需要inflate单个布局文件，所以为其设置id。

主界面布局文件代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <TextView
 8         android:layout_width="match_parent"
 9         android:layout_height="60dip"
10         android:background="#00ffff"
11         android:gravity="center"
12         android:text="功能列表"
13         android:textColor="#000000"
14         android:textSize="22sp" />
15 
16     <GridView
17         android:layout_marginTop="15dip"
18         android:verticalSpacing="5dip"
19         android:numColumns="3"
20         android:id="@+id/home_list"
21         android:layout_width="match_parent"
22         android:layout_height="match_parent">
23         
24     </GridView>
25 
26 </LinearLayout>

View Code

　　2、在主界面代码中找到创建GridView对象（取名home_list），并在onCreate方法中通过findViewById找到布局文件中的GridView组件。通过GridView对象（取名home_list）的setAdapter（adapter）方法为其增加一个适配器。由于adapter是个ListAdapter的接口类型，且为实现的方法较多。因此采用新建类（MyAdapter）继承它的简单类（BaseAdapter）即可，并实现简单类（BaseAdapter）中的getCount()、getItem(int position)、getItemId(int position)、getView(int position, View convertView, ViewGroup parent)四个未实现的方法。

　　3、在新建类（MyAdapter）中。

　　　　①.getCount()方法是获得GridView对象的item数量，其数量与各item显示的文本的数量一致，所以在主界面代码里新建一个静态String数组，其值为“手机防盗，通讯卫士，...”等9个内容，并将该数组的长度作为getCount()方法的返回值。同时，为了后面寻找资源方便，在主界面代码里新建一个静态int数组，用于存放图片（drawable）的id。

　　　　②.getView(int position, View convertView, ViewGroup parent) 方法是获取一个View对象用来显示资料组中指定位置（position）的数据。在该方法中采用View对象的inflate (Context context, int resource, ViewGroup root)方法为GridView对象填充一个xml类型的资源，参数Context 表示GridView对象所在的Activity的上下文，int resource表示xml类型资源的id，ViewGroup root表示作为父组件的View对象组，一般写null。inflate（）方法返回View类型(取名为view)。

　　　　③.在layout文件夹下新建xml文件（取名home_list_item.xml），作为填充GridView对象中单个item的xml资源。其布局为线性布局，上面是ImageView控件并为其增加id，下面是TextView控件并为其增加id。增加id的目的是在getView（）方法中找到这两个控件，并根据position替换其中的内容。便于调整和演示，可以为它们设置默认的资源。最后调整长、宽、背景等属性。

用于填充GridView对象中单个item的xml资源（即home_list_item.xml）代码：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5     android:orientation="vertical" >
 6 
 7     <ImageView
 8         android:id="@+id/home_list_item_iv"
 9         android:layout_width="80dip"
10         android:layout_height="80dip"
11         android:layout_gravity="center"
12         android:src="@drawable/a"/>
13 
14     <TextView
15         android:id="@+id/home_list_item_tv"
16         android:layout_width="wrap_content"
17         android:layout_height="wrap_content"
18         android:layout_gravity="center"
19         android:text="手机防盗" 
20         android:textSize="20sp"/>
21 
22 </LinearLayout>

View Code

　　　　④.再回到主界面代码的新建类（MyAdapter）的getView（）方法中，根据inflate（）方法返回的View类型对象通过view.findViewById（）方法找到刚才新建xml文件（home_list_item.xml）中的ImageView对象和TextView对象，并分别通过setImageResource(int resId)和setText(CharSequence text)方法替换其中的内容。在这两个方法中可以通过getView（）方法里的位置（position）参数将String数组和drawable的id数组与GridView对象中每个item对应并填充进去。最后返回View对象（view）。

新建类（MyAdapter）代码：

 1 private class  MyAdapter extends BaseAdapter{
 2 
 3         @Override
 4         public int getCount() {
 5             return names.length;
 6         }
 7         
 8         @Override
 9         public View getView(int position, View convertView, ViewGroup parent) {
10             View view = View.inflate(HomeActivity.this, R.layout.home_list_item, null);            
11             ImageView home_list_iv = (ImageView) view.findViewById(R.id.home_list_item_iv);
12             home_list_iv.setImageResource(drawableId[position]);
13             TextView home_list_tv = (TextView) view.findViewById(R.id.home_list_item_tv);
14             home_list_tv.setText(names[position]);
15             return view;
16         }
17 
18         @Override
19         public Object getItem(int arg0) {
20             
21             return null;
22         }
23 
24         @Override
25         public long getItemId(int position) {
26             
27             return 0;
28         }
29                 
30     }

View Code

　　4、在主界面代码中new一个MyAdapter类，并通过GridView对象（home_list）的setAdapter(ListAdapter adapter)方法将适配器绑至GridView对象上。

主界面代码：

 1 package com.example.mobilesafe;
 2 
 3 import android.app.Activity;
 4 import android.os.Bundle;
 5 import android.view.View;
 6 import android.view.ViewGroup;
 7 import android.widget.BaseAdapter;
 8 import android.widget.GridView;
 9 import android.widget.ImageView;
10 import android.widget.TextView;
11 
12 public class HomeActivity extends Activity {
13     private GridView home_list;
14     private MyAdapter myAdapter;
15     
16     private static String[] names = {
17         "手机防盗","通讯卫士","软件管理",
18         "进程管理","流量统计","手机杀毒",
19         "缓存清理","高级工具","设置中心"
20     };
21     //建立图片文件的id数组
22     private static int[] drawableId = {
23         R.drawable.a,R.drawable.b,R.drawable.c,
24         R.drawable.d,R.drawable.e,R.drawable.f,
25         R.drawable.g,R.drawable.h,R.drawable.i
26     };
27         
28         
29     @Override
30     protected void onCreate(Bundle savedInstanceState) {
31         super.onCreate(savedInstanceState);
32         setContentView(R.layout.activity_home);
33         
34         home_list = (GridView) findViewById(R.id.home_list);
35         myAdapter = new MyAdapter();
36         home_list.setAdapter(myAdapter);
37     }
38         
39     private class  MyAdapter extends BaseAdapter{
40 
41         @Override
42         public int getCount() {
43             return names.length;
44         }
45         
46         @Override
47         public View getView(int position, View convertView, ViewGroup parent) {
48             View view = View.inflate(HomeActivity.this, R.layout.home_list_item, null);            
49             ImageView home_list_iv = (ImageView) view.findViewById(R.id.home_list_item_iv);
50             home_list_iv.setImageResource(drawableId[position]);
51             TextView home_list_tv = (TextView) view.findViewById(R.id.home_list_item_tv);
52             home_list_tv.setText(names[position]);
53             return view;
54         }
55 
56         @Override
57         public Object getItem(int arg0) {
58             
59             return null;
60         }
61 
62         @Override
63         public long getItemId(int position) {
64             
65             return 0;
66         }
67                 
68     }
69 }