AS作业一：UI界面开发

一、设计目标

开发一个类似微信的主页面框架，UI布局为上中下结构，包含4个tab页面。

开发技术为：layout xml、控件、监听，fragment。

二、功能说明

设计一个类微信ui界面，主要分为上中下三部分，底部标识按钮可以根据用户所进行的不同选择完成相应的切换，在中部界面显示其与底部图标所对应的界面内容。

三、设计流程及核心代码

1）界面整体布局

微信界面主要分为top（标题区）、fragment（核心内容区）和bottom（导航栏区），根据微信界面的主要布局分别对这三个部分进行ui界面设计。

1.1 top

top（标题区）主要设计如下：

top（标题区）界面效果如下：

1.2 fragment

fragment1（核心内容区）主要设计如下（以fragment1为例）：

fragment1（核心内容区）界面效果如下：

 

1.3 bottom 

bottom（导航栏）主要设计如下：

bottom（导航栏）界面效果如下：

1.4 activity_main

activity_main主要设计如下：

 activity_main界面效果如下：

 2）界面跳转实现

2.1 fragment_xxx.java

 创建4个对应的fragment的java文件，通过这4个java文件实现其与layout中的4个xml文件的连接，从而实现对应的页面跳转。

4个fragment文件如下：

fragment1_wechat代码如下（其主要代码类似）：

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

2.2 MainActivity.java

 初始化activity，默认显示微信聊天栏界面

    //初始化activity
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE );
        setContentView(R.layout.activity_main);
        setContentView(R.layout.activity_main);
        initView();
        initFragment();
        initEvent();
        //默认选中微信第一个图标，选中后颜色为绿色
        selectFragment(0);
        imageView1.setImageResource(R.drawable.wechat);
        textView1.setTextColor(getResources().getColor(R.color.green));
        setListener();
    }

 初始化导航栏按钮

    private void restartButton() {
        //初始时bottom栏界面
        imageView1.setImageResource(R.drawable.wechat);
        textView1.setTextColor(getResources().getColor(R.color.black));

        imageView2.setImageResource(R.drawable.tongxun);
        textView2.setTextColor(getResources().getColor(R.color.black));

        imageView3.setImageResource(R.drawable.faxian);
        textView3.setTextColor(getResources().getColor(R.color.black));

        imageView4.setImageResource(R.drawable.me);
        textView4.setTextColor(getResources().getColor(R.color.black));
    }

点击导航栏中不同图标内容后，界面对应不同的变化显示

    public void onClick(View view) {
        //点击完毕后，将初始化按钮
        restartButton();
        //点击不同图标对应不同的颜色变化
        switch(view.getId())
        {
            case R.id.chat:
                selectFragment(0);
                textView1.setTextColor(getResources().getColor(R.color.green));
                break;
            case R.id.tongxun:
                selectFragment(1);
                textView2.setTextColor(getResources().getColor(R.color.green));
                break;
            case R.id.faxian:
                selectFragment(2);
                textView3.setTextColor(getResources().getColor(R.color.green));
                break;
            case R.id.me:
                selectFragment(3);
                textView4.setTextColor(getResources().getColor(R.color.green));
                break;
            default:
                break;
        }
    }

初始化fragment部分和view部分

    private void initFragment(){
        fragmentManager=getSupportFragmentManager();
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        transaction.add(R.id.frame_content, fragment1);
        transaction.add(R.id.frame_content, fragment2);
        transaction.add(R.id.frame_content, fragment3);
        transaction.add(R.id.frame_content, fragment4);
        //提交事务
        transaction.commit();
    }


    private  void initView(){
        linear1 =findViewById(R.id.chat);
        linear2 =findViewById(R.id.tongxun);
        linear3 =findViewById(R.id.faxian);
        linear4 =findViewById(R.id.me);

        imageView1 =findViewById(R.id.imageWeixin);
        imageView2 =findViewById(R.id.imageTongxun);
        imageView3 =findViewById(R.id.imageFaxian);
        imageView4 =findViewById(R.id.imageWode);

        textView1 =findViewById(R.id.textView1);
        textView2 =findViewById(R.id.textView2);
        textView3 =findViewById(R.id.textView3);
        textView4 =findViewById(R.id.textView4);
    }

隐藏图层，根据用户点击框不同，对指定图层进行展示效果

private void hideView(FragmentTransaction transaction){
        transaction.hide(fragment1);
        transaction.hide(fragment2);
        transaction.hide(fragment3);
        transaction.hide(fragment4);
    }

    private void selectFragment(int i){
        FragmentTransaction transaction=fragmentManager.beginTransaction();
        hideView(transaction);
        switch (i){
            case 0:
                transaction.show(fragment1);
                break;
            case 1:
                transaction.show(fragment2);
                break;
            case 2:
                transaction.show(fragment3);
                break;
            case 3:
                transaction.show(fragment4);
                break;
            default:
                break;
        }
        //提交事务
        transaction.commit();
    }

四、运行效果展示

 

总结

         本次实验主要实现了类微信界面的设计，根据所学习了解的基本知识逐步完成了一个简单的界面开发设计，对于所涉及的概念知识等在实验中进行学习并加深了解，对于界面的切换通过隐藏与展示相结合的方式来完成实现。这也是第一次完成移动开发的相关实验，只是刚开始了解与学习，仍然有许多需要改进与学习的内容与知识，后续根据实验要求也将继续完成该项目系统。

源码：https://gitee.com/iiiovoiii/homework.git