Android项目：手机安全卫士（3）—— 主界面布局
1 总纲
前面实现了“手机安全卫士”的闪屏界面与版本检测升级问题，接下来的任务就是实现主界面了，这个相对简单，因为没有涉及到具体的功能开发，本文主要内容：九宫格显示功能列表，跑马灯提示效果，自定义样式几个方面，关于项目相关文章，请访问：
- Android项目：手机安全卫士（1）—— 闪屏界面
- Android项目：手机安全卫士（2）—— 版本升级
项目源码地址（实时更新）：https://github.com/xwdoor/MobileSafe
2 九宫格的方式显示主界面
首先创建主界面对应的 Activity：HomeActivity，以及相应的布局文件，这不必多说了。主界面主要显示 9 个功能：”手机防盗”, “通讯卫士”, “软件管理”, “进程管理”, “流量统计”, “手机杀毒”, “缓存清理”, “高级工具”, “设置中心”，呈现 9 宫格的形式，如图所示：
布局文件 activity_home.xml 的内容如代码所示：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".activity.HomeActivity"
android:background="@android:color/white"
android:orientation="vertical">
<TextView
android:id="@+id/tv_title"
android:layout_width="match_parent"
android:layout_height="50dp"
android:text="功能列表"
android:gravity="center"
android:textSize="22sp"
android:background="@android:color/holo_blue_light"
android:textColor="@android:color/black"/>
<GridView
android:id="@+id/gv_fuction"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:verticalSpacing="15dp"
android:numColumns="3"/>
</LinearLayout>主界面，最上方是一个 TextView ，作为标题使用，下方是一个 GridView，用来显示功能列表，并设置列数为 3，当然，作为与 ListView 同一级别的控件，怎么能少的了它的搭档 adapter（适配器）呢，当然，在此之前，需要先创建一个布局文件（item_home_adapter.xml），用于显示 GridView 中的每一个 Item，布局文件如下所示：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:orientation="vertical">
<ImageView
android:id="@+id/iv_icon"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/home_apps" />
<TextView
android:id="@+id/tv_func_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="3dp"
android:text="手机防盗"
android:textColor="@android:color/black"
android:textSize="18sp" />
</LinearLayout>然后，就可以创建我们的适配器了，创建一个 adapter，继承自 BaseAdapter，代码如下：
/**
* 用于主页面九宫格的列表展示所用的adapter
*
* Created by XWdoor on 2016/2/26 026 14:31.
* 博客：
*/
public class HomeAdapter extends BaseAdapter {
private final Context mContext;
//功能列表的文字描述项
private String[] mStrItems;
//功能列表的图片展示项
private int[] mImgIds;
public HomeAdapter(Context context,String[] mStrItems, int[] mImgIds) {
this.mContext = context;
this.mStrItems = mStrItems;
this.mImgIds = mImgIds;
}
//返回功能列表项目数量
@Override
public int getCount() {
return mStrItems.length;
}
//获取某功能项目
@Override
public Object getItem(int position) {
return null;
}
//获取某功能Id
@Override
public long getItemId(int position) {
return position;
}
//显示相应功能的视图
@Override
public View getView(int position, View convertView, ViewGroup parent) {
//生成视图
View view = View.inflate(mContext, R.layout.item_home_adapter,null);
//获取视图中的图片展示项的控件
ImageView ivIcon = (ImageView) view.findViewById(R.id.iv_icon);
//获取文字描述项的控件
TextView tvFuncName = (TextView) view.findViewById(R.id.tv_func_name);
//设置文字和图片
ivIcon.setImageResource(mImgIds[position]);
tvFuncName.setText(mStrItems[position]);
return view;
}
}好了，准备就绪，接下来就是给 GridView 设置适配器了，老规矩，代码伺候：
private int[] mImgIds;
private String[] mGvItems;
/**
* Activity启动方法，方便团队开发，参数信息一目了然
*/
public static void startAct(Context context) {
Intent intent = new Intent(context, HomeActivity.class);
context.startActivity(intent);
}
@Override
public void initVariables() {
mGvItems = new String[]{"手机防盗", "通讯卫士", "软件管理", "进程管理", "流量统计", "手机杀毒", "缓存清理", "高级工具", "设置中心"};
mImgIds = new int[]{R.drawable.home_safe,
R.drawable.home_callmsgsafe, R.drawable.home_apps,
R.drawable.home_taskmanager, R.drawable.home_netmanager,
R.drawable.home_trojan, R.drawable.home_sysoptimize,
R.drawable.home_tools, R.drawable.home_settings};
}
@Override
protected void initViews(Bundle savedInstanceState) {
setContentView(R.layout.activity_home);
GridView gvFunction = (GridView) findViewById(R.id.gv_fuction);
HomeAdapter adapter = new HomeAdapter(this,mGvItems,mImgIds);
gvFunction.setAdapter(adapter);
}3 跑马灯提示效果
所谓的跑马灯，相信做过嵌入式开发的都知道，就是有一排 Led 灯，一个一个的顺序点亮。现在要做一个文字提示，有自动播放的效果，请原谅我拙劣的用词。好了，让我们来实现这个效果，先给出代码：
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:singleLine="true"
android:focusable="true"
android:focusableInTouchMode="true"
android:ellipsize="marquee"
android:textColor="#000"
android:textSize="18sp"
android:text="手机安全卫士，作者：xwdoor，博客："
android:layout_marginBottom="6dp"/>对，就一个 TextView 就能搞定，关键点在于几个属性：
- ellipsize 属性：值必须是 marquee，翻译过来，就是跑马灯
- focusable 属性：是否获取焦点，设置为 true，表示获取焦点，因为只有在获取焦点的情况下，跑马灯效果才能生效
- focusableInTouchMode 属性：设置为 true，表示在触摸的情况下，也是获取焦点，原因同上
4 自定义样式（Style）
主界面中的“功能列表”标题栏，在其他功能界面中也会用到，只是显示文字不同而已，所以我们就将它的样式提出来，放到 style.xml 文件中，代码如下所示：
<style name="TitleBar">
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">50dp</item>
<item name="android:gravity">center</item>
<item name="android:textSize">22sp</item>
<item name="android:background">@android:color/holo_blue_light</item>
<item name="android:textColor">@android:color/black</item>
</style>然后在主界面中，修改 TextView 的样式，如下所示：
<TextView
android:id="@+id/tv_title"
android:text="功能列表"
style="@style/TitleBar"/>5 总结
好了，主界面的开发到这里就完成了，本文重点在于 adapter 的使用，和自定义 style 的方法。本来周五就可以更新的，但是到下班时间的时候，还留了一点尾巴，结果到了周六才有时间补上，关于项目相关文章，请访问：
- Android项目：手机安全卫士（1）—— 闪屏界面
- Android项目：手机安全卫士（2）—— 版本升级
项目源码地址（实时更新）：https://github.com/xwdoor/MobileSafe
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
