---

一、程序运行效果及界面

程序的界面包括上边框、下边框和中间的内容，上边框显示软件名“微信”，下边框内有四个部分，分别为“消息”、“好友”、“通讯录”和“设置”，四个部分可以随意点击，点击不同的部分中间的内容也会随之变化。

二、实现代码

1.xml文件界面设计

创建top.xml文件，制作顶部的边框。边框的宽度选择65dp，背景颜色选择"#000000"（纯黑），center居中，使用一个TextView来显示文字“微信”，字体大小为30sp，颜色选择"#ffffff"（纯白）

<?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="65dp"android:gravity="center"android:background="#000000"android:orientation="vertical"><TextViewandroid:id="@+id/textView"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="微信"android:textColor="#ffffff"android:textSize="30sp" />
</LinearLayout>

创建bottom.xml文件，制作底部的部分。宽度选择100dp，背景选择事先准备好的图片文件“bottom_bar.9.png”，使用LinearLayout（选择垂直样式vertical）；在LinearLayout中建立图片按钮控件ImageButton和文字控件TextView，图片选择事先准备好的相应图标，TextView中文字对应图标，例如消息（其他三个同理，并为每一个LinearLayout、ImageButton和TextView取好相应的id）：

<?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"android:layout_width="match_parent"android:layout_height="100dp"android:background="@drawable/bottom_bar"android:orientation="horizontal"android:baselineAligned="false"><LinearLayoutandroid:id="@+id/id_tab_news"android:layout_width="0dp"android:layout_height="match_parent"android:layout_weight="1"android:gravity="center"android:orientation="vertical"><ImageButtonandroid:id="@+id/id_tab_news_img"android:layout_width="match_parent"android:layout_height="wrap_content"android:clickable="false"android:background="#000000"android:contentDescription="@string/app_name"app:srcCompat="@drawable/tab_weixin_pressed" /><TextViewandroid:id="@+id/textView1"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_gravity="center_horizontal"android:text="    消息"android:clickable="false"android:textColor="#ffffff"android:textSize="30sp" /></LinearLayout>
</LinearLayout>

创建tab01.xml、tab02.xml、tab03.xml、tab04.xml文件，分别制作中间的四个不同界面。由于这四个界面都只有一行文字，因此只需分别使用一个TextView，“bold”加粗字体，例如tab01：

<?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="match_parent"android:gravity="center"android:orientation="vertical"><TextViewandroid:id="@+id/textView5"android:layout_width="wrap_content"android:layout_height="wrap_content"android:text="这是微信聊天界面"android:textSize="30sp"android:textStyle="bold" />
</LinearLayout>

最后activity_main.xml文件中，将刚刚的top和bottom加入进来，top在最上面，中间用FrameLayout留出空白，bottom在最下面：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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"tools:context=".MainActivity"><LinearLayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><include layout="@layout/top"></include><FrameLayoutandroid:id="@+id/id_content"android:layout_width="match_parent"android:layout_height="0dp"android:layout_weight="1"></FrameLayout><include layout="@layout/bottom"></include></LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>

2.class类文件控制

创建四个Fragment，将刚刚创建的四个tab页面通过Fragment传递到主类，例如newsFragment返回tab01：

package com.example.mywechat;import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;import androidx.fragment.app.Fragment;/*** A simple {@link Fragment} subclass.*/
public class newsFragment extends Fragment {public newsFragment() {// Required empty public constructor}@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {// Inflate the layout for this fragmentreturn inflater.inflate(R.layout.tab01, container, false);}}

3.主类

相应模块以及变量声明：

package com.example.mywechat;import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;import androidx.appcompat.app.AppCompatActivity;import android.annotation.SuppressLint;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;public class MainActivity extends AppCompatActivity implements View.OnClickListener {private LinearLayout mTabweixin;private LinearLayout mTabfriend;private LinearLayout mTabaddress;private LinearLayout mTabsetting;private ImageButton mImgweixin;private ImageButton mImgfriend;private ImageButton mImgaddress;private ImageButton mImgsetting;private final Fragment mTab01=new newsFragment();//将Tab01传递给fragment类型的变量mTab01private final Fragment mTab02=new friendFragment();private final Fragment mTab03=new addressFragment();private final Fragment mTab04=new settingFragment();private FragmentManager fragmentManager;

调整页面的显示，requestWindowFeature去掉界面上多余的部分，调用四个相关的功能函数：

    @Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);requestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_main);initView();initEvent();initFragment();setSelect(0);}

initView( )将bottom中设计的四个部分中的图标和文字绑定，让用户不管是点击图标还是点击文字都能跳转到相应页面

    private void initView(){mTabweixin=(LinearLayout)findViewById(R.id.id_tab_news);mTabfriend=(LinearLayout)findViewById(R.id.id_tab_friend);mTabaddress=(LinearLayout)findViewById(R.id.id_tab_address);mTabsetting=(LinearLayout)findViewById(R.id.id_tab_setting);mImgweixin=(ImageButton)findViewById(R.id.id_tab_news_img);mImgfriend=(ImageButton)findViewById(R.id.id_tab_friend_img);mImgaddress=(ImageButton)findViewById(R.id.id_tab_address_img);mImgsetting=(ImageButton)findViewById(R.id.id_tab_setting_img);}

initEvent( )控制监听范围，只监听屏幕下方四个部分的点击行为

    private void initEvent(){mTabweixin.setOnClickListener(this);mTabfriend.setOnClickListener(this);mTabaddress.setOnClickListener(this);mTabsetting.setOnClickListener(this);}

initFragment( )将Fragment初始化，将四个Fragment放入id_content

    private void initFragment(){fragmentManager=getSupportFragmentManager();FragmentTransaction transaction=fragmentManager.beginTransaction();transaction.add(R.id.id_content,mTab01);transaction.add(R.id.id_content,mTab02);transaction.add(R.id.id_content,mTab03);transaction.add(R.id.id_content,mTab04);transaction.commit();}

将消息、好友、通讯录和设置四个模块分别标号0、1、2、3，setSelect(int i)在收到 i 的值为0时，显示mTab01界面，并且将图标改成tab_news_pressed（图标未点击时是灰色，点击后是绿色），同理，当 i 的值为1、2、3时，也会做相应的改变：

    private void setSelect(int i){FragmentTransaction transaction =fragmentManager.beginTransaction();hideFragment(transaction);switch (i){case 0:transaction.show(mTab01);mImgweixin.setImageResource(R.drawable.tab_news_pressed);break;case 1:transaction.show(mTab02);mImgfriend.setImageResource(R.drawable.tab_friend_pressed);break;case 2:transaction.show(mTab03);mImgaddress.setImageResource(R.drawable.tab_address_pressed);break;case 3:transaction.show(mTab04);mImgsetting.setImageResource(R.drawable.tab_settings_pressed);break;default:break;}transaction.commit();}

hideFragment( )在显示一个tab界面时，将其他几个界面隐藏起来

    private void hideFragment(FragmentTransaction transaction){transaction.hide(mTab01);transaction.hide(mTab02);transaction.hide(mTab03);transaction.hide(mTab04);}

onClick( )对用户的行为传递不同的参数，当用户点击消息部分时，将 0 传递给setSelect( )，其他部分同以此类推：

    @SuppressLint("NonConstantResourceId")@Overridepublic void onClick(View v) {resetImgs();switch(v.getId()){case R.id.id_tab_news:setSelect(0);break;case R.id.id_tab_friend:setSelect(1);break;case R.id.id_tab_address:setSelect(2);break;case R.id.id_tab_setting:setSelect(3);break;default:break;}}

点击其他图标后，将之前的图标变为灰色

    private void resetImgs(){mImgweixin.setImageResource(R.drawable.tab_news_normal);mImgfriend.setImageResource(R.drawable.tab_friend_normal);mImgaddress.setImageResource(R.drawable.tab_address_normal);mImgsetting.setImageResource(R.drawable.tab_settings_normal);}
}

---

代码仓库地址：https://gitee.com/wyy-52/my-wechat/tree/master