移动开发技术（一）类微信界面设计

最新推荐文章于 2024-06-01 15:41:03 发布

wuwuwulalar

最新推荐文章于 2024-06-01 15:41:03 发布

阅读量403

点赞数 3

分类专栏：移动开发技术文章标签： android

本文链接：https://blog.csdn.net/wuwuwulalar/article/details/109074140

版权

移动开发技术专栏收录该内容

3 篇文章 0 订阅

订阅专栏

功能需求

完成一个类似微信页面的布局，要求：

页面最上方是标题
页面中间有显示框
页面最下方有四个按钮
点击按钮后，按钮图标会变换颜色，且显示框变换文字

功能实现步骤

一、页面布局设置

1. 顶部标题页面设置：

创建layout文件top.xml中，添加文本框，添加文字，设置为居中，修改文字颜色和LinearLayout背景颜色。效果如下
在这里插入图片描述

2. 底部按钮页面设置

先将图片文件导入到/res/drawable中

新建layout布局文件button.xml。
先添加一个LinearLayout(vertical)，修改LinearLayout大小和颜色：修改gravity所对应的配置信息为center，再修改大小，添加id。
在刚刚添加的LinearLayout(vertical)下添加ImageButton，选择要放入的图片，
再添加一个textView，修改textView中的文字和字体的颜色。

复制三个修改好的LinearLayout，修改ImageButton的资源路径，分别修改LinearLayout、ImageButton和textView的id。
效果如下
在这里插入图片描述

3. 中间内容页面设置

新建四个layout.xml文件，分别添加一个textView，修改文字内容，并将textView设置居中（先将LinearLayout的orientation设置为vertical，再将textView的gravity设为center）
效果如下：
在这里插入图片描述

4. 合并各个部分

我们想要的效果是页面最上方是标题，中间显示文本，最下方有四个按钮，故在activity_main.xml中先添加一个LinearLayout
在LinearLayout中按顺序添加三个部分：
通过include标签添加top.xml和button.xml
由于四个显示文本的页面都是在中间，故选择通过放一个FrameLayout在top和button的中间

页面布局完毕，效果如图：
在这里插入图片描述

5. 创建Fragment.java文件

首先添加一条语句，去掉自动生成的项目名称的文字框

requestWindowFeature(Window.FEATURE_NO_TITLE);

我们的目标是实现点击四个button分别切换到不同的四个页面的跳转控制，所以选择使用Fragment类：将四个布局文件压缩分别到fragment类里，成为类的实例对象，将页面对象化
新建四个fragment文件在这里插入图片描述分别在return中修改要返回的布局文件

return inflater.inflate(R.layout.tab03, container, false);

6. 修改MainActivity.java文件

先为fragment类创建实例对象
定义一个FragmentManager来控制Fragment

    private FragmentManager fm;

再写一个初始化Fragment的函数，将四个fragment放到FrameLayout中

 private void initFragment(){
        fm = getSupportFragmentManager();
        FragmentTransaction transaction = fm.beginTransaction();
        transaction.add(R.id.id_content, mTab01);
        transaction.add(R.id.id_content, mTab02);
        transaction.add(R.id.id_content, mTab03);
        transaction.add(R.id.id_content, mTab04);
        transaction.commit();
    }

注意：实例化fragmentmanager时，使用的函数不是getFragmentManager()，而是getSupportFragmentManager()。若使用产生getFragmentManager()由于版本原因会报错
在这里插入图片描述
至此，所有的布局部分也已经完成

二、页面跳转控制

接下来，实现页面跳转控制：
我们需要实现的是，点击按钮，按钮会变色，并且跳转到相应的页面。所以我们需要对ImageButton所属的LinearLayout来进行监听，但是ImageButton和LinearLayout都属于布局文件中的一部分，我们不能直接调用，所以需要创建一个函数initView()来实现对ImageButton和LinearLayout控件实例化，方便我们后续调用

为实现点击按钮之后可以跳转到相应的页面，我们可以先隐藏四个界面，在点击button后再显示出选择的页面。可以选择自定义一个**HideFragment()**函数，调用hide()函数隐藏四个界面。

为实现点击按钮后变色，我们可以定义一个selectFragment()函数来实现：传入一个参数，通过调用transaction的show()函数，展示对应的页面，并通过setImageResource()函数将ImageButton的文件路径改变。

我们需要被点击的图片变化，而其他图标保持灰色，所以被点亮过的图标在另一图标被点亮时需要重新变成灰色，所以定义一个resetimg()函数，在某一图标被点击后亮起来之前，将所有图标都变成原始的灰色。

为实现点击按钮跳转页面，我们需要对进行监听。在最开头的MainActivity后添加implements View.OnClickListener，

public class MainActivity extends AppCompatActivity implements View.OnClickListener

重写onClick函数。通过getId()函数获取被点击的按钮的id，并调用selectFragment()函数。

最后优化一下监听：
定义一个**initEvent()**函数，调用setOnClickListener()函数，设置监听范围为各个button的LinearLayout

运行界面展示

在这里插入图片描述

源码

源码地址