【移动开发】作业一类微信界面-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51776197/article/details/127128784

这篇博客详细介绍了如何使用Android的Fragment和Activity实现一个类似微信的门户页面框架。开发者设计了四个Tab页面，并通过点击监听切换不同内容，使用了底部导航栏和顶部分区，展示了代码实现的主要步骤和关键函数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android 作业一

作业一类微信的门户页面框架设计

作业一类微信的门户页面框架设计

一、实验目标

根据课程教学内容完成类微信的门户页面框架设计，APP最少必须包含4个tab页面。框架设计需要使用fragment，activity，不得使用UNIAPP技术进行开发（H5或者小程序）

二、实验过程

1. 设计分区

在mainactivity.xml布局文件中设计三个主要分区：包含四个tab的bottom.xml、顶部top.xml、展示对应tab内容的fragmentlayout.xml。
在mainactivity.java同一级文件夹中分别创建四个tab对应的fragment.java,同时编辑好对应的fragment.xml布局文件。基本布局完成。

在这里插入图片描述

2. 功能函数

2.1 创建对应对象

private weixinFragment  weixinFragment = new weixinFragment();
    private friendFragment friendFragment = new friendFragment();
    private contactFragment contactFragment = new contactFragment();
    private configFragment configFragment = new configFragment();
    private FragmentManager fragmentManager;
    private LinearLayout linearLayout1;
    private LinearLayout linearLayout2;
    private LinearLayout linearLayout3;
    private LinearLayout linearLayout4;
    private ImageView imageView1;
    private ImageView imageView2;
    private ImageView imageView3;
    private ImageView imageView4;

2.2 将控件ID与对象对应起来，并建立监听

@Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        supportRequestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        linearLayout1 = findViewById(R.id.linearlayout_weixin);
        linearLayout2 = findViewById(R.id.linearlayout_friend);
        linearLayout3 = findViewById(R.id.linearlayout_contact);
        linearLayout4 = findViewById(R.id.linearlayout_config);
        imageView1 = findViewById(R.id.imageview_weixin);
        imageView2 = findViewById(R.id.imageview_friend);
        imageView3 = findViewById(R.id.imageview_contact);
        imageView4 = findViewById(R.id.imageview_config);

        linearLayout1.setOnClickListener(this);
        linearLayout2.setOnClickListener(this);
        linearLayout3.setOnClickListener(this);
        linearLayout4.setOnClickListener(this);


        initFragment();


    }

2.3 初始化fragment函数：将四个fragment装进容器（fragmentlayout）中：

 private void initFragment(){
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,weixinFragment);
        transaction.add(R.id.id_content,friendFragment);
        transaction.add(R.id.id_content,contactFragment);
        transaction.add(R.id.id_content,configFragment);
        hideFragment(transaction);
        transaction.show(weixinFragment);
        imageView1.setImageResource(R.drawable.green);
        transaction.commit();
    }

2.4 隐藏所有fragment：

private  void hideFragment(FragmentTransaction transaction){
        transaction.hide(weixinFragment);
        transaction.hide(friendFragment);
        transaction.hide(contactFragment);
        transaction.hide(configFragment);

    }

2.5 根据参数展示对应的fragment，同时更换对应的图片:

private void showfragment(int i){
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch(i){
            case 0:
                transaction.show(weixinFragment);
                emptyimage();
                imageView1.setImageResource(R.drawable.green);
                break;
            case 1:
                transaction.show(friendFragment);
                emptyimage();
                imageView2.setImageResource(R.drawable.green);
                break;
            case 2:
                transaction.show(contactFragment);
                emptyimage();
                imageView3.setImageResource(R.drawable.green);
                break;
            case 3:
                transaction.show(configFragment);
                emptyimage();
                imageView4.setImageResource(R.drawable.green);
                break;
            default:
                break;
        }
        transaction.commit();
    }

2.6 点击监听函数：

@Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.linearlayout_weixin:
                showfragment(0);
                break;
            case R.id.linearlayout_friend:
                showfragment(1);
                break;
            case R.id.linearlayout_contact:
                showfragment(2);
                break;
            case R.id.linearlayout_config:
                showfragment(3);
                break;
            default:
                break;
        }

2.7 将四个tab对应的图片全部换成最初始的图片：

 public void emptyimage(){
        imageView1.setImageResource(R.drawable.blank);
        imageView2.setImageResource(R.drawable.blank);
        imageView3.setImageResource(R.drawable.blank);
        imageView4.setImageResource(R.drawable.blank);
    }