移动开发技术作业1-UI界面开发

Van丨Van

已于 2023-03-02 10:58:53 修改

阅读量503

点赞数

分类专栏：安卓移动开发文章标签： java android

于 2023-03-01 16:50:21 首次发布

本文链接：https://blog.csdn.net/m0_57949886/article/details/129282357

版权

安卓移动开发专栏收录该内容

2 篇文章 0 订阅

订阅专栏

（一）Fragment绑定与在MainAcitivity中的定义

（二）定义FragmentManager与FragmentTranscation

（三）界面初始化与界面显示/隐藏函数

（四）事件监听

4、总结

一、作业说明

1、功能说明：开发一个类似微信的主页面框架，UI布局为上中下结构，包含4个tab页面；
2、开发技术为：layout xml、控件、监听，fragment

二、实验内容

1、功能简介

如上图所示四个页面，当app启动时，默认显示消息页面。总共有四个页面，每个页面对应显示不同的内容，通过点击下方“消息”、“通讯录”、“发现”、“我”四个图标或文字时，即可以切换到相应的页面，与微信界面UI类似。

2、基本设计流程

（一）新建project

（二）文件创建

此处有两类文件需要创建、一类文件需要导入

右方为已经创建完毕的项目目录
需要创建的文件有：
1、Fragment文件。通过在当前项目目录下右键点击New->Fragment->Fragment(Blank)通过设置两个文件名可以直接生成Fragment.java文件和res/layout下的xml文件。
2、layout下xml文件。此文件用来进行UI设计。

需要进行导入的文件是图片文件，需要将图片放到res/drawble目录下。（本项目中使用的是svg矢量图片，需要将svg格式的图片转换为xml文件之后在项目中使用）

（三）UI设计及编码

UI设计部分在AS中主要是通过XML文件以及可视化的控件拖放控制。

当我们打开res/layout下的xml文件时，会显示如上图所示的设计结构，其中上中下的UI布局时通过LinerLayout的垂直方式实现的。右侧的控件属性可以进行自定义修改，也可以点击右上角的Code选项，通过代码的方式进行修改。

（四）运行调试

最后在编码完成之后，首先检查安卓虚拟机是否正常开启运行，然后运行项目则可以在虚拟机上调试功能

类微信UI界面演示

3、核心代码及功能介绍

（一）Fragment绑定与在MainAcitivity中的定义

public class ContactFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.contact_page, container, false);
    }
}

在新增Fragment时，需要将其与res/layout中的xml文件进行绑定，此Fragment与R.layout.contact_page绑定。

 private Fragment message=new MessageFragment();
 private Fragment contact=new ContactFragment();
 private Fragment find=new FindFragment();
 private Fragment me=new MeFragment();

在MainAcitivity中需要进行Fragment的定义才能使用，代码如上

（二）定义FragmentManager与FragmentTranscation

private FragmentManager fm=getSupportFragmentManager();//定义Manager
private FragmentTransaction transaction=fm.beginTransaction();

FragmentManager是用来进行Fragment的管理操作。FragmentTranscation是Fragment的事务操作，在之后的控件监听中会使用到。

（三）界面初始化与界面显示/隐藏函数

    //显示Fragment
    public void show(Fragment fragment){
        hideFrafment();
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.show(fragment).commit();
    }

    //初始化Fragment
    public void initFragment(){
        transaction
                .add(R.id.content_frame,message)
                .add(R.id.content_frame,contact)
                .add(R.id.content_frame,find)
                .add(R.id.content_frame,me);
        hideFrafment();
        //默认显示页面
        transaction
                .show(message)
                .commit();

    }

    //隐藏所有Fragment
    public void hideFrafment(){
        FragmentTransaction transaction=fm.beginTransaction();
        transaction
                .hide(message)
                .hide(contact)
                .hide(find)
                .hide(me)
                .commit();
    }

在每个函数中都定义了事务对象

FragmentTransaction transaction=fm.beginTransaction();

通过transcation的add、hide、show方法来完成Fragment的加载、隐藏和显示。每一个transcation对象在commit（提交）之后需要重新定义新的transcation对象，否则会提示transcation is already commit的报错。

（四）事件监听

为了事件在点击相应的图标能够切换到相应的界面，则需要使用到ClickListener。

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //初始化Fragment
        initFragment();

        //点击事件
        //clickEvent();

        View main=findViewById(R.id.MainView);
        View l1=findViewById(R.id.Llayout1);
        View l2=findViewById(R.id.Llayout2);
        View l3=findViewById(R.id.Llayout3);
        View l4=findViewById(R.id.Llayout4);

        l1.setOnClickListener(this);
        l2.setOnClickListener(this);
        l3.setOnClickListener(this);
        l4.setOnClickListener(this);

        onClick(main);
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.Llayout1:
                show(message);
                break;
            case R.id.Llayout2:
                show(contact);
                break;
            case R.id.Llayout3:
                show(find);
                break;
            case R.id.Llayout4:
                show(me);
                break;
        }
    }

主要思路是在父视图上设置监听，并且设置子视图的监听，然后通过点击事件来获取所点击视图的id，不同的id对应着不同的show函数以用来切换到不同的界面上去。

这个地方写完之后会出现报错

l1.setOnClickListener(this);

是因为需要添加类的 implement view.onclicklistening，根据编译器的提示添加即可，也就是@Override下的Onclick函数。

4、总结

本次作业完成了类UI的微信布局设计，也是安卓开发的第一个学习项目，在本次学习中因为之前学习过java和了解过ui设计，上手比较快。主要学习的新知识则是关于安卓页面的布局设计，了解了相对布局、线性布局等一些布局方式。通过组件的设置属性以及ID绑定完成了点击事件的监听功能，在完成了整个流程之后，将代码进行了修改，一些对象定义成了私有成员，一些操作封装成为了函数来方便调用，使整个代码看上去有逻辑感。

项目gitee地址:https://gitee.com/shenyufan/android

Van丨Van

关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
移动开发技术作业1-UI界面开发

如上图所示四个页面，当app启动时，默认显示消息页面。总共有四个页面，每个页面对应显示不同的内容，通过点击下方“消息”、“通讯录”、“发现”、“我”四个图标或文字时，即可以切换到相应的页面，与微信界面UI类似。@Override在新增Fragment时，需要将其与res/layout中的xml文件进行绑定，此Fragment与R.layout.contact_page绑定。在MainAcitivity中需要进行Fragment的定义才能使用，代码如上//定义Manager。
复制链接

扫一扫