手机安全卫士（五）----- Home界面

上一篇博客中说了Splash界面在启动过程中所经历的过程，重点在于启动的逻辑是什么！！！完成启动界面后，最关键的就是Home界面了。这个是所有功能的集成的地方，由这个界面可以可以衍生出很多的界面，因此，这个界面也是比较编写的。

需求如下：

上面这张图就是Home界面了，包含了这个APP的所有功能。

布局分析： 

这个布局一点也不复杂，很容易就写出来了，但是最关键的地方就GridView的编写。

布局界面代码：

 

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:gravity="center"
    tools:context="com.example.yzg.safepeople.activity.HomeActivity">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical"
        >

        <RelativeLayout
            android:background="@drawable/blue_bkg"
            android:layout_width="match_parent"
            android:layout_height="100dp"
            >
            <!--layout_centerVertical垂直居中-->
            <ImageView
                android:layout_centerVertical="true"
                android:layout_marginLeft="10dp"
                android:id="@+id/iv_home_logo"
                android:layout_width="50dp"
                android:layout_height="50dp"
                android:src="@drawable/iv_home_logo"
                />

            <LinearLayout
                android:layout_marginLeft="5dp"
                android:layout_centerVertical="true"
                android:layout_toRightOf="@+id/iv_home_logo"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:orientation="vertical">

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="志国出品 必属精品"
                    android:textColor="#000"
                    android:textSize="20dp"
                    android:layout_alignEnd="@+id/iv_home_logo"
                    />
                <TextView
                    android:ellipsize="marquee"
                    android:singleLine="true"
                    android:focusable="true"
                    android:focusableInTouchMode="true"
                    android:layout_marginTop="5dp"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="你在桥上看风景 看风景的人在看你 你在桥上看风景 看风景的人在看你 你在桥上看风景 看风景的人在看你 "
                    android:textColor="#000"
                    android:layout_alignEnd="@+id/iv_home_logo"
                    />
            </LinearLayout>

            <ImageView
                android:layout_marginTop="5dp"
                android:layout_marginRight="5dp"
                android:id="@+id/tv_home_setting"
                android:layout_width="35dp"
                android:layout_height="35dp"
                android:src="@drawable/setting"
                android:layout_alignParentRight="true"
                />
        </RelativeLayout>

       <GridView
           android:verticalSpacing="5dp"
           android:horizontalSpacing="5dp"
           android:numColumns="2"
           android:id="@+id/gv_home_item"
           android:layout_width="match_parent"
           android:layout_height="match_parent">
       </GridView>

    </LinearLayout>

</android.support.v7.widget.LinearLayoutCompat>

 布局界面代码重点分析：

我认为最重要的就是gridview了：

android:verticalSpacing="5dp"   表示两个表格的垂直距离是5dp

android:horizontalSpacing="5dp"   表示两个表格的水平距离是5dp

android:numColumns="2"  表示有两列表格

他与listview的区别就是，他能够表示多列！

还有一个就是走马灯效果的字体：

android:ellipsize="marquee"  走马灯效果

android:singleLine="true"  表示字体只占一行

android:focusable="true"  表示此组件获得焦点（按键）

android:focusableInTouchMode="true"  也表示组件获得焦点（触屏）

 接下来就是Home界面的逻辑编写啦！

界面逻辑：

思路：

直接布局即可，但是对于GridView来说，实现步骤如下：

准备数据

准备好GridView中每一个项目的布局

构造适配器

setAdapter即可

 （下面只说关键代码）

准备数据：

 //定义GridView要显示组件内容
    private static final String [] names = {"手机防盗","通讯卫士","软件管家","进程管理","流量统计","病毒查杀","缓存清理","高级工具"};
    private static final String [] descs = {"手机丢失好找","防骚扰防监听","方便管理软件","保持手机畅通","注意流量超标","手机安全保障","手机快步如飞","特性处理更好"};
    private static final int [] icons = {
            R.drawable.a,R.drawable.b,
            R.drawable.c,R.drawable.d,
            R.drawable.e,R.drawable.f,
            R.drawable.j,R.drawable.f
    };

准备好布局：

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:background="@drawable/iv_home_selector"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        >
        <ImageView
            android:id="@+id/iv_home_item"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/b"
            />
        <LinearLayout
            android:layout_marginLeft="5dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            >
            <TextView
                android:id="@+id/iv_home_item_name"
                android:layout_marginTop="8dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="手机丢失好找"
                android:textColor="#000"
                android:textSize="16dp"
                />
            <TextView
                android:id="@+id/iv_home_item_desc"
                android:layout_marginTop="10dp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="手机丢失好找"
                android:textColor="#000"
                android:textSize="14dp"
                />
        </LinearLayout>

    </LinearLayout>

</android.support.v7.widget.LinearLayoutCompat>

效果图：

最难的一步到了，编写Adapter：

 class HomeAdapter extends BaseAdapter {

        //返回有多少项目的个数
        @Override
        public int getCount() {
            return names.length;
        }

        //利用position获得每个项目的对象  根据自 己的需要来使用这个方法
        @Override
        public Object getItem(int position) {
            return null;
        }

        //利用position获得对应项目的ID  根据自己的需要来使用这个方法
        @Override
        public long getItemId(int position) {
            return position;
        }

        //为每一项目的样式赋值
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            View view = View.inflate(getApplicationContext(),R.layout.home_item,null);
            ImageView imageView  = view.findViewById(R.id.iv_home_item);
            TextView name = view.findViewById(R.id.iv_home_item_name);
            TextView desc = view.findViewById(R.id.iv_home_item_desc);
            imageView.setImageResource(icons[position]);
            name.setText(names[position]);
            desc.setText(descs[position]);
            //一定要写returnView  不写的话会报：Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference
            return view;
        }
    }

 小提示：个人认为最好以内部类的形式写在HomeActivity中，这样便于使用外部类中的数据

 

 一定要写  return View  不写的话会报：Attempt to invoke virtual method 'int android.view.View.getImportantForAccessibility()' on a null object reference（找了半天累死了！！！）

最后一步：

//为gridView_items赋值，并且利用这个baseAdapter
    private void initData() {
        HomeAdapter homeAdapter = new HomeAdapter();
        gridView_items.setAdapter(homeAdapter);

    }

这样就完成了一个Home界面，刚刚写的时候感觉好难，但是写完之后，就感觉没有那么难了，所以还是在于自己要多练习这方面的内容，这样才能更快的提升自己！！！