移动技术开发第一次实验报告
Android Studio微信页面提交
本次代码仓库：https://gitee.com/lv-hongyi/mobile-development-technology
本次实验报告要求如下
1.页面具有标题“微信”
2.页面具有中间显示框
3.页面具有底部选择框，并且具有选择事件
4.页面底部选择框在进行改变的时候，我们需要中间显示框的页面同步改变
5.页面的布局清晰
编写头部文件
首先编写一个头部文件，构成微信界面的顶部。在layout下创建top.xml，将ConstraintLayout改为LinearLayout,加入一个textview，将文本改为微信名称“MyWeChat”，将文字居中，颜色改为白色（#ffffff），大小设置合适，此处我设置为20）。
文字设置好之后设置背景，背景的长度肯定是需要跟界面等宽，所以设置为match_parent；宽度设置合适，此处我设置为65；颜色设置为黑色（#000000）；orientation设置为vertical。
代码如下
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="65dp"
android:gravity="center"
android:background="#000000"
android:orientation="vertical">
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_horizontal"
android:layout_weight="1"
android:text="@string/app_name"
android:textColor="#ffffff"
android:textSize="20sp" />
如图
编写底部文件
头部文件编写完成后编写底部文件。同样是在layout下新建bottom.xml。整个微信界面包括四个bottom：信息，朋友，通讯录，设置；除了这四项外，还需要一个底部框。所以现在导入9张图片：底部框，四个项目的正常状态与按下状态。这里的图片我选择在阿里矢量图网站上下载。根据手机微信，正常状态为灰色，按下状态为绿色。
下载好后，将.png图片复制到drawable文件夹下（这里需要注意图片的名称不能为中文，不能有括号，否则imagebottom选图片时找不到选项）。
在LinearLayout（horizon）下拖入四个LinearLayout（vertical），分别表示信息，朋友，通讯录，设置。由于这四项中的每一项包括一个bottom以及一行文字，所以我们在每一个LinearLayout（vertical）下拖入一个imagebottom和一个textview。将四个imagebottom设置为相应的图片，现将第一个bottom设置为按下的图片，其他均为正常状态下的图片。textview也分别改好。在此处我发现我的图标显示不全，遂从百度得知一行代码：android:scaleType="centerInside"，加入到四个imagebottom下，即可解决图标显示不全的问题。
代码如下(仅给出一个例子)
android:id="@+id/id_message"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center_horizontal"
android:orientation="vertical">
android:id="@+id/id_message_img"
android:layout_width="81dp"
android:layout_height="81dp"
android:background="#000000"
android:contentDescription="@string/app_name"
android:clickable="false"
android:scaleType="centerInside"
app:srcCompat="@drawable/message_press" />
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="@string/id_message"
android:clickable="false"
android:textColor="#ffffff"
android:textSize="15sp" />
如图
布局设计
top.xml与bottom.xml编写好后，我们来设计整体布局。在activity_main.xml中除了我们刚刚编写好的文件外，还应包括一个在按下按钮后出现的界面，所以我们这里还需要加入一个布局FrameLayout。所以我们在LinearLayout下依次添加<include>,FrameLayout,<include>。两个include分别设置为头部文件和底部文件。
设置好后我们发现整个布局并不能如想象中的一样显示。此时我们将FrameLayout的weight设置为1，就可以正常显示了。
代码如下
<?xml version="1.0" encoding="utf-8"?>
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:baselineAligned="false"
android:orientation="vertical"
tools:context=".MainActivity">
android:id="@+id/id_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1">
如图
这样布局就完成了
MainActivity文件编写
在布局文件编写完成后，我们需要解决的问题就是四个按钮按下后图标的变化以及对应的界面。
在layout下新建四个xml文件，表示四个界面。此次实验每个界面仅需有一句话代表就可以，所以我们只需要拖一个textview即可。将文本改为“这是微信聊天/朋友/通讯录/设置界面”，并居中，大小设置合适。
代码如下
<?xml version="1.0" encoding="utf-8"?>
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
android:id="@+id/id_message"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:gravity="center"
android:text="这是微信聊天界面"
android:textSize="30sp"
android:textStyle="bold" />
此处给出信息界面的例图
接下来在java下的第一个package下新建四个Fragment,从而可以在点击按钮时显示刚编好的tab01.xml等文件的内容。这四个Fragment文件只需要修改最后一行的代码（此处给出信息界面的代码）。
return inflater.inflate(R.layout.tab01, container,false);
将R.layout.后改为tab01即可。
接下来定义四个Fragment类对象，然后建立一个FragmentManager 类对象fm。
private FragmentmTab01 =new messageFragment();
private FragmentmTab02 =new friendFragment();
private FragmentmTab03 =new addressFragment();
private FragmentmTab04 =new settingFragment();
private FragmentManagerfm;
定义一个initFragment()函数，即可将四个文件的文字进行传递。
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();
}
定义一个initView()函数，将八个参数一一对应到各自的图片和文字。
private void initView() {
mTabMessage = findViewById(R.id.id_message);
mTabFriend = findViewById(R.id.id_friend);
mTabAddress = findViewById(R.id.id_address);
mTabSetting = findViewById(R.id.id_setting);
mImgMessage = findViewById(R.id.id_message_img);
mImgFriend = findViewById(R.id.id_friend_img);
mImgAddress = findViewById(R.id.id_address_img);
mImgSetting = findViewById(R.id.id_setting_img);
}
定义一个selectfragment()函数，当你点击不同的按钮时，就可显示不同的文字。
private void selectfragment(int i){
FragmentTransaction transaction =fm.beginTransaction();
hideFragment(transaction);
switch (i) {
case 0:
transaction.show(mTab01);
mImgMessage.setImageResource(R.drawable.message_press);
break;
case 1:
transaction.show(mTab02);
mImgFriend.setImageResource(R.drawable.friend_press);
break;
case 2:
transaction.show(mTab03);
mImgAddress.setImageResource(R.drawable.address_press);
break;
case 3:
transaction.show(mTab04);
mImgSetting.setImageResource(R.drawable.setting_press);
break;
default:
break;
}
transaction.commit();
}
在点击之前，我们需要将文字隐藏起来，定义hideFragment()函数
private void hideFragment(FragmentTransaction transaction) {
transaction.hide(mTab01);
transaction.hide(mTab02);
transaction.hide(mTab03);
transaction.hide(mTab04);
}
然后，需要将MainActivity继承AppCompatActivity类，以对四个按钮实施监听。
public class MainActivityextends AppCompatActivityimplements View.OnClickListener
监听四个按钮
public void onClick(View v){
resetImg();
switch (v.getId()){
case R.id.id_message_img:
selectfragment(0);
break;
case R.id.id_friend_img:
selectfragment(1);
break;
case R.id.id_address_img:
selectfragment(2);
break;
case R.id.id_setting_img:
selectfragment(3);
break;
default:
break;
}
}
在点击按钮之后，按钮应从绿色返回之前的灰色，所以定义 resetImg()
public void resetImg(){
mImgMessage.setImageResource(R.drawable.message);
mImgFriend.setImageResource(R.drawable.friend);
mImgAddress.setImageResource(R.drawable.address);
mImgSetting.setImageResource(R.drawable.setting);
}
将以上函数写好之后，写入onCreate()函数中，即可运行。
运行结果
