[移动开发]类微信页面设计

设计目标：

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

设计思路：

? ? ? 在mainactivity.xml布局文件中设计三个主要分区：包含四个tab的bottom.xml、顶部top.xml、展示对应tab内容的fragmentlayout.xml。

? ? ?然后在mainactivity.java同一级文件夹中分别创建四个tab对应的fragment.java,同时编辑好对应的fragment.xml布局文件。接下来就是通过代码完成功能。

功能函数：

? ? ? 首先创建对应的对象：然后在oncreate函数中将控件的ID和对象对应起来，同时创建四个点击监听：
?

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;

然后在oncreate函数中将控件的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();


    }

初始化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();
    }

隐藏所有fragment：

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

    }

根据参数展示对应的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();
    }

点击监听函数：

@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;
        }

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

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

结果展示：

?下面给出gittee代码地址：as_work: android studiohttps://gitee.com/ysy-lvw/as_work