如何在Android studio 上开发微信界面，并实现切换效果

• • 1.思路
  • 2.页面制作
  • • 提示
    • 上部分导航栏
    • 下部分分区栏
    • 中间的展示部分
  • 3.最后合并各栏
  • 4.最后就是java文件中的MainActicity文件
  • 5.可能出现的问题（小结）

1. 首先，需要明白明白，我们的目的是做微信界面，并实现切换效果，在切换时，对应的图标要变成绿色

2. 下面是效果图
   

3. 其中，微信界面，由上部分的导航栏，下部分的分区栏，以及中间的展示栏组成，上部分和下部分是静态的，用LinearLayout控件，中间的展示栏是动态的，由4张页面重叠在一起，我们用frameLayout控件，我们要做的就是点击下面相应的图标，显示对应的页面。

这里放一张全局图，用来展示目录和标出一些重点地方

写的还累我凎，这里用到的就是java文件、还有res里面的Layout里的xml页面文件、以及res里面的drawable里的图标，这个里面的图标我在后面做下部分分区栏时会降到。

效果：

代码：

注意：这里需要用到微信的各个图标，这里我推荐iconfont阿里巴巴矢量图标库，里面用微博或者Github登录即可免费下载所需要的的图标。
这里，我们需要下载8张png文件的图标，4张灰色的，4张绿色的。
效果：

代码：

这里只展示4张中的一张，剩下的三张以此类推
注意，这里我们用的是系统给的frameLayout,创建方式如下图：

第一张效果图：

第一张的代码：

效果：

代码：

代码部分如下图：
注意，所有的函数都在调用时写了注释，方便理解

package com.example.mywechat;

import androidx.appcompat.app.AppCompatActivity;
import android.app.Fragment;
import android.app.FragmentTransaction;
import android.app.FragmentManager;


import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageView;
import android.widget.LinearLayout;

import org.chromium.base.Log;

public class MainActivity extends AppCompatActivity implements  View.OnClickListener{

    //开始获取各个控件

    private LinearLayout weixin;
    private LinearLayout friend;
    private LinearLayout contact;
    private LinearLayout setting;

    private ImageView weixinImg;
    private ImageView friendImg;
    private ImageView contactImg;
    private ImageView settingImg;

    private Fragment tab1 = new tab1();
    private Fragment tab2 = new tab2();
    private Fragment tab3 = new tab3();
    private Fragment tab4 = new tab4();
    private FragmentManager fm;



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


        //初始化下部分分区栏，获取到各个栏，为下面的点击事件做准备，获取各个图片控件，为下面点击更换图片做准备
        initView();
        //初始化Fragment
        initFragment();
        //为下部分各个栏添加监听器，
        initEvent();
        //选择函数，选中下部分的哪个栏，就隐藏frameLayout中重叠的其他三个栏，并将图标换成绿色的
        selectFragment(0);
    }



    private void initView(){
        weixin=(LinearLayout)findViewById(R.id.weixin);
        friend=(LinearLayout)findViewById(R.id.friend);
        contact=(LinearLayout)findViewById(R.id.contact);
        setting=(LinearLayout)findViewById(R.id.setting);

        weixinImg=(ImageView) findViewById(R.id.weixinImg);
        friendImg=(ImageView) findViewById(R.id.friendImg);
        contactImg=(ImageView) findViewById(R.id.contactImg);
        settingImg=(ImageView) findViewById(R.id.settingImg);
    }


    private void initFragment(){
        fm = getFragmentManager();
        FragmentTransaction transaction=fm.beginTransaction();
        transaction.add(R.id.content,tab1);
        transaction.add(R.id.content,tab2);
        transaction.add(R.id.content,tab3);
        transaction.add(R.id.content,tab4);
        transaction.commit();
    }

    private void initEvent(){
        weixin.setOnClickListener((View.OnClickListener) this);
        friend.setOnClickListener((View.OnClickListener) this);
        contact.setOnClickListener((View.OnClickListener) this);
        setting.setOnClickListener((View.OnClickListener) this);
    }


    private void selectFragment(int i){
        FragmentTransaction transaction=fm.beginTransaction();
        //隐藏除选中的其他三个栏，显示当前选中的这个栏
        hideFragment(transaction);
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                transaction.show(tab1);
                weixinImg.setImageResource(R.drawable.new_wc);
                break;
            case 1:
                transaction.show(tab2);
                friendImg.setImageResource(R.drawable.new_cont);
                break;
            case 2:
                transaction.show(tab3);
                contactImg.setImageResource(R.drawable.new_find);
                break;
            case 3:
                transaction.show(tab4);
                settingImg.setImageResource(R.drawable.new_my);
                break;
            default:break;
        }
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(tab1);
        transaction.hide(tab2);
        transaction.hide(tab3);
        transaction.hide(tab4);
    }

    @Override
    public void onClick(View v){
        //每次点击事，将上次变绿的图标重置为灰色的
        resetImgs();
        switch (v.getId()){
            case R.id.weixin:
                selectFragment(0);
                break;
            case R.id.friend:
                selectFragment(1);
                break;
            case R.id.contact:
                selectFragment(2);
                break;
            case R.id.setting:
                selectFragment(3);
                break;
            default:
                break;
        }
    }

    public void resetImgs(){
        weixinImg.setImageResource(R.drawable.wc);
        friendImg.setImageResource(R.drawable.cont);
        contactImg.setImageResource(R.drawable.find);
        settingImg.setImageResource(R.drawable.my);

    }
}

在这次试验中，出现的问题就是frameLayout导入错误，
创建frameLayout的时候，各个frameLayout中用到的是
import androidx.app.Fragment;而在MainActivity中的是
import android.app.Fragment;导入错误了，这里需要把各个frameLayout中的哪个多出来的‘’’x‘’去掉，就ok了。

源码GitHub的地址：
链接: https://github.com/GODFF556/MyWechat.