1.实验目的：
即实验应完成的目标，如图
2.实验环境
Android studio4.0
gitee代码仓库（与as连接）
3.具体实验内容
（1）起始
在mainactivity.java中添加
requestWindowFeature(Window.FEATURE_NO_TITLE)
将初始界面清空
导入要用的图片
直接复制粘贴到drawable即可
对界面进行分析，容易看出这个界面可以大致分为三个部分，分别是上面的顶部文件，中间部分的文件和底部的文件，进行下面步骤
（2）顶部设计
在layout下创建top.xml,放入一个textview，修改文字大小，颜色及基本布局，为了让该文字在框中居中显示，需要先将orientation设置为vertical,然后在Code界面添加语句android:layout_gravity=“center_horizontal”之后WeChat就会在页面的正中上方显示，在code中添加android:textColor="#ffffff"将其设计成白色字体，添加android:background="#000000"以将背景设为黑色效果
<?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">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/app_name"
android:textColor="#ffffff"
android:textSize="20sp" />
</LinearLayout>
（3）底部设计
在layout下创建bottom.xml
放入一个linearlayout,然后放入imagebutton，导入对应图片，然后在下方空白处放一个textview。之后修改文字大小，颜色及基本布局，将textview复制粘贴4份后修改对应的图片，名字，code添加
android:layout_width=“0dp”
android:gravity=“center”
android:layout_weight=“1”
让其平铺并达成效果如图
（4）中间设计
主要是完成居中文本显示，故创建四个新的xml,修改文字大小，及基本布局，效果如图
写了一个之后其他的三个复制粘贴后轻微的修改即可。
<?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">
<TextView
android:id="@+id/textView5"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:text="这是微信聊天界面"
android:textSize="30sp" />
</LinearLayout>
（4）编写****activity_main.xml文件
完成上中下统一
<?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">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<include layout="@layout/top"/>
<FrameLayout
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
</FrameLayout>
<include layout="@layout/bottom"/>
</LinearLayout>
</androidx.constraintlayout.widget.ConstraintLayout>
（5）创建Fragment
为四个xml配四个Fragment，将他们压缩到相应的容器中去，做一个子窗口
即在其return中写入要输出的界面文件名，四个文件是相似的。
return inflater.inflate(R.layout.tab02, container, false);
（6）编写主程序
要达成的效果：点击对应的要有相应，且响应的是正确的界面，图标的颜色会因点击发生变化，之前生成的界面也会在下一个点击之后隐藏起来，避免生成的界面发生重叠现象。
然后我们就可以就开始修改
package com.example.mywechat;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
#建立全活动的点击监听
private LinearLayout mTabWeixin;
private LinearLayout mTabFrd;
private LinearLayout mTabAddress;
private LinearLayout mTabSetting;
private ImageButton mImgWeixin;
private ImageButton mImgFrd;
private ImageButton mImgAddress;
private ImageButton mImgSetting;
private Fragment mTab01 = new weixinFragment();
private Fragment mTab02 = new frdFragment();
private Fragment mTab03 = new contactFragment();
private Fragment mTab04 = new settingFragment();
private FragmentManager fm;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);
setContentView(R.layout.activity_main);
initView();
initFragment();
initEvent();
selectfragment(0);
}
#将4个页面放到Framelayout中
private void initFragment(){
fm = getSupportFragmentManager();
FragmentTransaction transaction = fm.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();
}
将button与图片联系起来，点击图片完成监听
private void initView(){
mTabWeixin=(LinearLayout) findViewById(R.id.id_tab_weixin);
mTabFrd=(LinearLayout) findViewById(R.id.id_tab_frd);
mTabAddress=(LinearLayout) findViewById(R.id.id_tab_contact);
mTabSetting=(LinearLayout) findViewById(R.id.id_tab_settings);
mImgWeixin=(ImageButton)findViewById(R.id.id_tab_weixin_img);
mImgFrd=(ImageButton)findViewById(R.id.id_tab_frd_img);
mImgAddress=(ImageButton)findViewById(R.id.id_tab_contact_img);
mImgSetting=(ImageButton)findViewById(R.id.id_tab_settings_img);
}
#控制图片颜色的变换，点击对应图标时，图标变色
private void selectfragment(int i){
FragmentTransaction transaction=fm.beginTransaction();
hidefragment(transaction);
switch (i){
case 0:
transaction.show(mTab01);
mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
break;
case 1:
transaction.show(mTab02);
mImgFrd.setImageResource(R.drawable.tab_find_frd_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();
}
#点击对应的button之后再把对应的页面显示出来，所以需要一个hide功能的函数
#四个页面都在fragment中，如果不隐藏会造成显示内容的重叠，
#因此让其在显示一个界面之前将所有的界面都hide，
private void hidefragment(FragmentTransaction transaction) {
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
private void initEvent(){
mTabWeixin.setOnClickListener(this);
mTabFrd.setOnClickListener(this);
mTabAddress.setOnClickListener(this);
mTabSetting.setOnClickListener(this);
}
#还需要一个函数来调用灰色的图片，以让点击过后的图片回复原色，这个函数的功能就是调出指定图片的位置
@Override
public void onClick(View v) {
resetimg();
switch (v.getId()) {
case R.id.id_tab_weixin:
selectfragment(0);
break;
case R.id.id_tab_frd:
selectfragment(1);
break;
case R.id.id_tab_contact:
selectfragment(2);
break;
case R.id.id_tab_settings:
selectfragment(3);
break;
default:
break;
}
}
public void resetimg(){
mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
mImgAddress.setImageResource(R.drawable.tab_address_normal);
mImgSetting.setImageResource(R.drawable.tab_settings_normal);
}
}
主要步骤结束
