目录

一、项目内容以及技术

二、实现过程

1.界面设计分析

2.代码实现

1.layout部分

 2.MainActivity部分

fragment.java文件

三、运行效果

总结

一、项目内容以及技术

1、内容：请根据课程实操实现APP门户界面框架设计，至少包含4个tab页，能实现tab页之间的点击切换；

2、技术：使用布局（layouts）和分段（fragment），对控件进行点击监听；

---

二、实现过程

1.界面设计分析

主界面分为三个部分：

• top：展示标题myweichat，使用textview部件居中展示
• fragment：展示点击底部按钮后显示的内容，能够随着按钮的切换而显示不同的内容，使用四个fragment组件实现
• bottom：实现按钮功能，采用水平的LinearLayout线性布局，并嵌套四个垂直式的LinearLayout，其中每个垂直LinearLayout都包含一个ImageView和一个TextView

2.代码实现

1.layout部分

顶部top.xml

•         在LinearLayout中插入TextView展示标题内容

 底部bottom.xml

• 以单个垂直LinearLayout为例：

    插入一个ImageView图像和一个TextView文本框

效果：

 中间四个fragment.xml

• 以fragment_weixin为例：

效果：

 窗体总布局activity_main.xml

• 使用include语法讲top和bottom导入主布局

 效果：

 2.MainActivity部分

fragment.java文件

• 以WeixinFragment为例：

package com.example.mychat;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class WeixinFragment extends Fragment {


    public WeixinFragment() {
        // Required empty public constructor
    }

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

MainActivity文件声明

private Fragment WeixinFragment = new WeixinFragment();
    private Fragment TongxunluFragment = new TongxunluFragment();
    private Fragment FaxianFragment = new FaxianFragment();
    private Fragment WodeFragment = new WodeFragment();
    private FragmentManager fragmentManager;
    private View layout1,layout2,layout3,layout4;

onCreate函数

• findViewById通过id来进行View的选择
• setonClickListener() 方法为按钮注册一个监听器，点击按钮时就会执行监听器中的 onClick() 方法

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

        layout1 = findViewById(R.id.LinearLayout1);
        layout2 = findViewById(R.id.LinearLayout2);
        layout3 = findViewById(R.id.LinearLayout3);
        layout4 = findViewById(R.id.LinearLayout4);

        layout1.setonClickListener(this);
        layout2.setonClickListener(this);
        layout3.setonClickListener(this);
        layout4.setonClickListener(this);
        initFragment();
        showFragment(0);

        if (getSupportActionBar() != null)
        {
            getSupportActionBar().hide();
        }

    }

initFragment函数

• 向容器中添加fragment组件

    private void initFragment() {
        fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.add(R.id.content,WeixinFragment);
        transaction.add(R.id.content,TongxunluFragment);
        transaction.add(R.id.content,FaxianFragment);
        transaction.add(R.id.content,WodeFragment);
        transaction.commit();
    }

hideFragment函数

• 隐藏未被选中的fragment片段

    public void hideFragment(FragmentTransaction transaction){
        transaction.hide(WeixinFragment);
        transaction.hide(TongxunluFragment);
        transaction.hide(FaxianFragment);
        transaction.hide(WodeFragment);
    }

showFragment函数

• 让fragment随着 i 的改变而改变，i 的值通过onClick函数调用showFragment函数而变化，从而展示fragment组件
• setBackgroundColor函数用来实现底部按钮被点击后改变颜色的效果

    private void showFragment(int i) {
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 0:
                transaction.show(WeixinFragment);
                layout1.setBackgroundColor(Color.rgb(0,255,0));
                layout2.setBackgroundColor(Color.rgb(255,255,255));
                layout3.setBackgroundColor(Color.rgb(255,255,255));
                layout4.setBackgroundColor(Color.rgb(255,255,255));
                break;
            case 1:
                transaction.show(TongxunluFragment);
                layout1.setBackgroundColor(Color.rgb(255,255,255));
                layout2.setBackgroundColor(Color.rgb(0,255,0));
                layout3.setBackgroundColor(Color.rgb(255,255,255));
                layout4.setBackgroundColor(Color.rgb(255,255,255));
                break;
            case 2:
                transaction.show(FaxianFragment);
                layout1.setBackgroundColor(Color.rgb(255,255,255));
                layout2.setBackgroundColor(Color.rgb(255,255,255));
                layout3.setBackgroundColor(Color.rgb(0,255,0));
                layout4.setBackgroundColor(Color.rgb(255,255,255));
                break;
            case 3:
                transaction.show(WodeFragment);
                layout1.setBackgroundColor(Color.rgb(255,255,255));
                layout2.setBackgroundColor(Color.rgb(255,255,255));
                layout3.setBackgroundColor(Color.rgb(255,255,255));
                layout4.setBackgroundColor(Color.rgb(0,255,0));
                break;
        }
        transaction.commit();
    }

onClick函数

• 实现点击下方板块，中间相应的Fragment相互切换，
• 要监听点击事件并做出选择即切换，注意此处点击事件监听的是大模块LinearLayout的点击

    public void onClick(View v) {
        switch (v.getId()){
            case R.id.LinearLayout1:
                showFragment(0);
                break;
            case R.id.LinearLayout2:
                showFragment(1);
                break;
            case R.id.LinearLayout3:
                showFragment(2);
                break;
            case R.id.LinearLayout4:
                showFragment(3);
                break;
        }
    }
}

三、运行效果

---

总结

第一次接触学习Android开发，通过本次实现微信界面的作业，了解掌握到一个app界面总体布局的分步设计，以及一些视图控件、fragment组件、监听事件的作用。

源码已上传至代码仓库：https://gitee.com/wang-ke-11/Mychat