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

最新推荐文章于 2022-06-05 10:46:47 发布

XWdoor

最新推荐文章于 2022-06-05 10:46:47 发布

阅读量3.8k

点赞数

分类专栏： Android 文章标签： android 手机安全卫士

本文链接：https://blog.csdn.net/xwdoor/article/details/50757216

版权

Android 专栏收录该内容

38 篇文章 1 订阅

订阅专栏

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

1 总纲

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

项目源码地址（实时更新）：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.
     * 博客：http://blog.csdn.net/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;
        }

        //返回功能列表项目数量
        @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，博客：http://blog.csdn.net/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 的方法。本来周五就可以更新的，但是到下班时间的时候，还留了一点尾巴，结果到了周六才有时间补上，关于项目相关文章，请访问：

项目源码地址（实时更新）：https://github.com/xwdoor/MobileSafe

XWdoor

关注

0
点赞
踩
12

收藏

觉得还不错? 一键收藏
0
评论
Android项目：手机安全卫士（3）—— 主界面布局

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

扫一扫