新建一个安卓空项目，语言采用Java，基于Android SDK11.0实现，使用虚拟设备Pixel 5 API 30.

1. 实现顶部微信栏-layout_top.xml.

创建时选择LinearLayout，新建一个TextView表示一个文本框，设置gravity为center，即实现居中，文本输入微信，大小设置为24sp.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="wrap_content"><TextViewandroid:id="@+id/textView"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:layout_weight="1"android:gravity="center"android:text="微信"android:textSize="24sp" />
</LinearLayout>

1. 实现底部微信栏-layout_bottom.xml.

导入图片资源于resource目录下，用于实现微信底部菜单栏图片以及点击后图片变换效果。

创建时选择LinearLayout，同时新建四个LinearLayout于父LinearLayout，四个LinearLayout各含一个TextView和一个imageButton，用于实现微信底部菜单栏。

调整图片大小，设置背景，设置垂直布局，TextView文本居中，如果图片大小适合，较为适用的选择wrap_content，系统自动弹性布局高度，每个子LinearLayout的weight权重为1，此底部菜单栏需要不断调整以达到想要的效果，下面是其中一个LinearLayout的配置。

<LinearLayoutandroid:id="@+id/ChatLinear"android:layout_width="match_parent"android:layout_height="match_parent"android:layout_weight="1"android:orientation="vertical"><ImageButtonandroid:id="@+id/imageButton2"android:layout_width="match_parent"android:layout_height="54dp"android:background="#ffffff"android:clickable="false"android:contentDescription="@string/androidx_startup"android:scaleType="centerInside"app:srcCompat="@drawable/chat" /><TextViewandroid:id="@+id/textView2"android:layout_width="match_parent"android:layout_height="wrap_content"android:gravity="center_horizontal"android:text="微信"android:textSize="20sp" />
</LinearLayout>

1. 创建Fragment.

在java目录下创建四个空Fragment，用于实现微信中间内容的展示与切换，需要注意命名，对应生成了四个Fragment_layout.xml，我们修改四个xml的TextView文本内容，分别提示用户聊天界面、联系人界面、发现界面、我的界面。下面是用户聊天界面的展示。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"android:id="@+id/layout1"android:layout_width="match_parent"android:layout_height="match_parent"><TextViewandroid:id="@+id/textView6"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center"android:textSize="40sp"android:text="这是聊天界面！" />
</LinearLayout>

1. 界面整合-activity_main.xml.

使用include标签将之前设计的top.xml和bottom.xml导入，高度选择wrap_content，宽度选择match_parent表示与父LinearLayout一致，中间加入一个FrameLayout，id为content，设置权值为1，为四个fragment_layout.xml保留位置，此时初始的微信界面已经显现。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"xmlns:app="http://schemas.android.com/apk/res-auto"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"tools:context=".MainActivity"android:baselineAligned="false"><includelayout="@layout/layout_top"android:layout_width="match_parent"android:layout_height="wrap_content" /><FrameLayoutandroid:id="@+id/content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><includelayout="@layout/layout_bottom"android:layout_width="match_parent"android:layout_height="wrap_content" /></LinearLayout>

1. 编写MainActivity.

1. 定义initFragment函数，实现Fragment初始化。

首先new四个Fragment私有成员对象，创建事务transaction，对应id为content，关联四个Fragment。

private void initFragment(){
fragmentManager = getSupportFragmentManager();FragmentTransaction transaction = fragmentManager.beginTransaction();transaction.add(R.id.content,chatFragment);transaction.add(R.id.content,contactsFragment);transaction.add(R.id.content,discoveryFragment);transaction.add(R.id.content,selfFragment);transaction.commit();
}

1. 定义initView函数，实现视图初始化。

首先new四个LinearLayout、四个TextView、四个ImageButton私有成员对象，在函数中利用findViewById对应到四个LinearLayout线性布局、四个imageButton图片按钮、四个TextView文本图窗。

private void initView(){
chatLayout = findViewById(R.id.ChatLinear);contactsLayout = findViewById(R.id.ContactsLinear);discoveryLayout = findViewById(R.id.DiscoveryLinear);selfLayout = findViewById(R.id.SelfLinear);chatImageButton = findViewById(R.id.imageButton2);contactsImageButton = findViewById(R.id.imageButton3);discoveryImageButton = findViewById(R.id.imageButton4);selfImageButton = findViewById(R.id.imageButton5);chatText = findViewById(R.id.textView2);contactsText = findViewById(R.id.textView3);discoveryText= findViewById(R.id.textView4);selfText = findViewById(R.id.textView5);
}

1. 定义hideFragment函数，隐藏四个Fragment。

private void hideFragment(FragmentTransaction transaction){transaction.hide(chatFragment);transaction.hide(contactsFragment);transaction.hide(discoveryFragment);transaction.hide(selfFragment);
}

1. 定义选择器selectFragment函数，实现界面切换。

在这一步骤中，首先调用hideFrament，隐藏所有Fragment，使用switch-case语句，用于切换四个Fragment，在这一步骤中，我们实现图片资源的切换，当ImageButton被点击时，我们将图片切换为绿的，符合微信设置，同时将文字从黑变成绿色，符合微信主题。

@SuppressLint("ResourceAsColor")
private void selectFragment(int i){//i是一个选择器，用于选择显示哪个界面FragmentTransaction transaction = fragmentManager.beginTransaction();hideFragment(transaction);//首先隐藏所有页面switch (i){
case 0:transaction.show(chatFragment);chatImageButton.setImageResource(R.drawable.chat_pick);chatText.setTextColor(Color.GREEN);break;case 1:transaction.show(contactsFragment);contactsImageButton.setImageResource(R.drawable.friends_pick);contactsText.setTextColor(Color.GREEN);break;case 2:transaction.show(discoveryFragment);discoveryImageButton.setImageResource(R.drawable.comm_pick);discoveryText.setTextColor(Color.GREEN);break;case 3:transaction.show(selfFragment);selfImageButton.setImageResource(R.drawable.setting_pick);selfText.setTextColor(Color.GREEN);break;default:
break;}transaction.commit();
}

1. 定义resetBtn函数，实现按钮重设。

在这一部分，主要是为了当切换微信菜单栏时，重设所有按钮，使图标不再变绿，切换图片资源，同时，将文本转换为黑色。

@SuppressLint("ResourceAsColor")
private void resetBtn(){
chatImageButton.setImageResource(R.drawable.chat);contactsImageButton.setImageResource(R.drawable.friends);discoveryImageButton.setImageResource(R.drawable.comm);selfImageButton.setImageResource(R.drawable.setting);chatText.setTextColor(Color.BLACK);contactsText.setTextColor(Color.BLACK);discoveryText.setTextColor(Color.BLACK);selfText.setTextColor(Color.BLACK);
}

1. 定义initEvent函数，实现对bottom四个LinearLayout的监听。

在这一部分，需要记得在类implements View.OnClickListener提供接口，实现点击动作的监听。

private void initEvent(){
chatLayout.setOnClickListener(this);contactsLayout.setOnClickListener(this);discoveryLayout.setOnClickListener(this);selfLayout.setOnClickListener(this);
}

1. 整体界面展示。

在类中重写onCreate方法，调用封包函数，运行项目，查看整体运行结果，默认界面是0，表示聊天界面。

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initView();initEvent();initFragment();selectFragment(0);//默认首页是聊天界面
}

1. 总结。

本次较为简单的实现了一个类微信UI的设计，体现大致的界面布局，对于微信的详细功能的实现，将在往后的博客中体现，吸取几点经验教训如下，为后人栽树：

1. 不能忘记implements View.OnClickListener，提供视图的监听接口；

1. 巧妙使用|管道符号，实现bottom底部和center_horizontal水平中心的同时设置；

1. setTextColor设置文本颜色，实现点击时，文本颜色的切换；

1. 创建空Fragment时，会自动生成对应的layout.xml，不需要我们手动创建；

1. 巧妙使用wrap_content让系统为你自动生成美观的布局；

1. switch-case语句记得使用break退出；

1. 使用include标签，插入layout.xml，整合界面。

1. 代码地址。

点击查看源码地址