Android 类微信页面开发-part1

本文为Android类微信页面开发第一课，第一课需要完成的目标为：

1. 页面上方具有标题WeChat。
2. 页面底部具有消息、联系人、朋友、设置4个图标，并且可以通过点击实现页面选择。
3. 发生页面选择时，对应的底部图标颜色变化明显。

实验所用的源码上传至gitee，链接如下

gitee.com/junglewh/an…

期待页面为：

所需环境与素材：

• Windows10操作系统、JDK8.0、Android Studio4.0、对用的SDK5.0。
• 10张图片，包括底部每个图标的两种颜色，整个底部的背景图标及其对用的.9.png文件

实验步骤主要分为两部分，即xml文件的编写和java文件的编写。

实验步骤

1. 首先新建一个AS Project，选择empyt界面，并选择SDK5.0，然后观察可得，四个不同的界面中顶部的内容无变化，优先编写顶部的xml文件即top.xml。
2. 在res文件夹下的layout文件夹中单机右键通过如下方式新建一个xml文件并命名为top.xml

建立文件后，设置其linearlayout组件为vertical，然后在其中添加一个textview布局，设置背景颜色(LinearLayout)为黑色，再设置textview字体为白色，然后将Linearlayout布局放在页面上方，设置合适的行高，再将textview设置在linearlayout中心，调整适当的大小，部分代码如图。       3.然后再配置底部设置，同样方法新建xml文件，命名为bottom,在此xml文件中,设置最外层的Linearlayout布局，使其在布局上方，设置合适的行高，设置水平对齐方式、并设置背景颜色为之前备好的.9文件对应的png文件名，然后在布局中添加一个linearlayout部件，再在此布局下再添加一个textview和一个imagebutton,两个部件都居中，并给Imagebutton组件给指定的图片对应即**app:srcCompat="@drawable/tab_weixin_pressed"，**设置背景颜色为#00000000格式，具体设置为:

  4.然后将第二层的linearlayout复制使其有4份，每一份Linearlayout下对应的textview的id、txet、属性相应改动，再对imagebutton的id、contentdescription属性做出对应的改变，得到的理想界面为

  5.为了实现通过imagebutton实现页面切换，需要再写4个xml文件，每一个xml文件对应一个图标，其中只添加一个textbiew空间来描述这个界面，本项目选择tab01、tab02、ab03、tab04四个xml文件，然后对activity_main文件进行改动，把其最外层的空间改为Linearlayout，然后使用include标签，分别在顶部和底部导入top.xml和bottom.xml文件，再在中间导入framelayout控件以方面后面实现页面的切换，对应的代码如图

然后就完成对xml文件的编写。

   6.接着时对java文件的编写，首先在mainactivity文件所在位置新建Fragment文件

选择blank

单机next后给定名字并选择finish

注:不同的SDK版本在创建此文件时会有不同的结果，考虑到版不兼容问题，本项目使用SDK5.0版本，查看新建好的fragment文件中的Fragment组件导入的包时否为

import android.app.Fragment;

来判断是否为适合的组件，并且对应四个不同的image、界面新建共4个fragement文件，然后进行对mainactivity文件的编写，首先设施页面窗口默认不显示默认的title

requestWindowFeature(Window.FEATURE_NO_TITLE);

  7.然后是其中新建4个Fragment变量(同样要是app包下的Fragment包才可)，对应4个Fragment文件名建立4个Fragment变量

private Fragment xml1=new weixinFragment();
private Fragment xml2=new friendFragment();
private Fragment xml3=new findFragment();
private Fragment xml4=new SettingsFragment();

并且创建一个Fragment管理变量

private FragmentManager fragmentManager;

 8.然后新建一个initFragment函数用以给Fragment页面初始化，在此函数中，将此前定义个4个Fragment变量使用fragmentManager添加到activity_mainw文件的Framelayout布局中

 9.然后对莹bottom.xml下的4个imagebutton控件和4个linearlayout控件同样建立8个变量

private  LinearLayout xmlweixin;
private  LinearLayout xmlfriend;
private  LinearLayout xmlfind;
private  LinearLayout xmlsettings;

private ImageButton xmlimageweixin;
private ImageButton xmlimagefriend;
private ImageButton xmlimagefind;
private ImageButton xmlimagesettings;

 10.然后编写initview函数，将此8个变量和bottom中的8个控件联系起来，先使用findviewbyid函数找到对应的控件，再把它强制转换成对应的变量类型即可。具体函数源码课查可到对应的gitee查看

 11.然后是界面选择函数，通过点击每个图标给界面选择函数发送不同的参数，从而实现界面的选择，在界面选择函数中需要先将4个界面对应的textview控件(即tab01、tab02、ab03、tab04文件中的textview控件)都隐藏，然后通过接收到的参数，通过选择语句把对应的图标切换为深色图片并显示对应的textview(同上一个)控件，界面隐藏函数即hideFragment函数为实现把4个图标偶读变为白色的函数，此函数需要FragmentTransaction 类型变量作为参数，然后使用此函数下的hide方法即可。

private void hideFragment(FragmentTransaction transaction)
{    transaction.hide(xml1);
    transaction.hide(xml2);
    transaction.hide(xml3);
    transaction.hide(xml4);
}

然后就需要设置使点击图变时能够发出对应的参数，即设置监听程序，首先在主函数后加上

public class MainActivity extends Activity implements View.OnClickListener

 12.即implements以后的部分来设置监听，然后发现会有报错，点击ctrl+o实现对应的方法(onCreat 方法)来完善监听程序。此方法的方法体的开始需要一个resetImgs函数，此函数作用为把xml文件中的4个图标都初始化为浅色的图标，然后等待选则的时候，再将对应的图片改为深色。此方法需要view类型的变量作为参数。并且view的getid方法可以得到点击的图标得到id,通过此ID即可向对应的界面选择函数发送参数，从而实现界面选择。

13. 由于监听程序监听的为全部页面，所以在需要一个initEvent函数，来限制监听位置，时程序只监听4个Linearlayout控件即可。

14.然后运行程序

实现了目标，实验结束，本实验所用到的所有代码均上传至gitee

gitee.com/junglewh/an…