700字范文 > Android项目：手机安全卫士（3）—— 主界面布局

Android项目：手机安全卫士（3）—— 主界面布局

时间：2024-04-13 11:11:05

1 总纲

前面实现了“手机安全卫士”的闪屏界面与版本检测升级问题，接下来的任务就是实现主界面了，这个相对简单，因为没有涉及到具体的功能开发，本文主要内容：九宫格显示功能列表，跑马灯提示效果，自定义样式几个方面，关于项目相关文章，请访问：

Android项目：手机安全卫士（1）—— 闪屏界面Android项目：手机安全卫士（2）—— 版本升级

项目源码地址（实时更新）：/xwdoor/MobileSafe

2 九宫格的方式显示主界面

首先创建主界面对应的 Activity：HomeActivity，以及相应的布局文件，这不必多说了。主界面主要显示 9 个功能：”手机防盗”, “通讯卫士”, “软件管理”, “进程管理”, “流量统计”, “手机杀毒”, “缓存清理”, “高级工具”, “设置中心”，呈现 9 宫格的形式，如图所示：

布局文件 activity_home.xml 的内容如代码所示：

<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="/apk/res/android"xmlns:tools="/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="/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 /2/26 026 14:31.* 博客：/xwdoor*/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;}//返回功能列表项目数量@Overridepublic int getCount() {return mStrItems.length;}//获取某功能项目@Overridepublic Object getItem(int position) {return null;}//获取某功能Id@Overridepublic long getItemId(int position) {return position;}//显示相应功能的视图@Overridepublic 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);}@Overridepublic 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};}@Overrideprotected 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，博客：/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"/>