一、项目

目录

一、项目总体介绍

二、关键步骤与核心技术

2.1 制作顶部页面

2.2 制作底部页面

2.3 制作主页面

2.4 创建frameLayout

2.5被选中的fragment显示

三、结果展示

四、源码地址

https://github.com/zljdgit/MyApplication-test1.git

---

一、总体介绍

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

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

二、关键步骤与核心技术

2.1 制作顶部页面

在res.layout包里new一个top.xml文件，来写底部部的linearLayout。顶部的设计比较简单 ，我们只需要新建一个LinearLayout，插入一个文本框，设置标题，设置背景、文字颜色大小即可。

代码如下

2.2 制作底部页面

在res.layout包里new一个button.xml文件，来写底部部的linearLayout。下面的button分成四块，每块由一个图标和一段文本构成。所以可以用LinearLayout中再包裹一个LinearLayout，被包裹的每个LinearLayout里包含一个ImageView和TextView控件。

    

2.3 制作主页面

activity_main.xml是用"include" 将刚才写的top和button两个组件放到这个activity_main.xml中来，然后中间用frameLayout标签作为内容区。

2.4 创建frameLayout

在java中的包里创建4个frameLayout，每个对应不同的界面内容。

创建过程：

 四个frameLayout:

frameLayout类中只保留一个方法：

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

并配置frameLayout

在Java文件中初始化Fragment，将四个页面加到fragment中

protected void initFragment() {
        fragmentManager=getFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.id_content,WechatFragment);
        transaction.add(R.id.id_content,Wechat2Fragment);
        transaction.add(R.id.id_content,Wechat3Fragment);
        transaction.add(R.id.id_content,Wechat4Fragment);
        transaction.commit();
    }

 2.5被选中的fragment显示

首先声明变量，并初始化Fragment、LinearLayout、ImageView

然后关键在于显示Fragment和隐藏Fragment

点击Fragment：

@Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.LinearLayout1:
                showfragment(1);
                break;
            case R.id.LinearLayout2:
                showfragment(2);
                break;
            case R.id.LinearLayout3:
                showfragment(3);
                break;
            case R.id.LinearLayout4:
                showfragment(4);
                break;
            default:
                break;
        }
    }

隐藏Fragment：

protected void hideFragment(FragmentTransaction transaction) {

        transaction.hide(WechatFragment);
        transaction.hide(Wechat2Fragment);
        transaction.hide(Wechat3Fragment);
        transaction.hide(Wechat4Fragment);

    }

 显示Fragment：

private void showfragment(int i) {
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideFragment(transaction);
        switch (i){
            case 1:
                transaction.show(WechatFragment);
                break;
            case 2:
                transaction.show(Wechat2Fragment);
                break;
            case 3:
                transaction.show(Wechat3Fragment);
                break;
            case 4:
                transaction.show(Wechat4Fragment);
                break;
            default:
                break;
        }
        transaction.commit();
    }

三、结果展示

点击4个button控件，fragment显示出不同的界面。

            

四、源码地址

https://github.com/zljdgit/MyApplication-test1.git