Android 类微信页面开发-part1

887 阅读5分钟

本文为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…