类微信界面 开发

820 阅读2分钟

,介绍一下这次的开发主题:针对平常所用的微信APP,制作一个类似微信APP进入后的界           面,有以下要求:

        1.界面按键布局和微信类似

        2.通过点击不同的按键来呈现不同的文本内容

        3.点击后图标变色

制作效果如下:

   

,制作流程如下:

      1.从这个界面的头部开始,显示了“mywechat”,需要一个layout的xml文件,命名为top.xml

      代码很简单,主要是文字以及文本框的背景色,还有文字的位置。

      2. 界面内容暂且放一放,这一步在button上,要让界面显示出四个平行的按键,包括这个            按键的图标以及图标正下方的文字介绍,仍要创建一个layout的xml文件,取名为                    button.xml

          这一步的难点在于四个图标怎么平行放置,尤其是button按键以及下方的文字描述,                这两个是同一级的。对于平行放置,需要对button的位置进行调度,这里我们用到的控            件是:

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:gravity="center"

android:orientation="vertical"

         效果如下:(图标文件会在文章末尾附上链接)

                 

       3.针对中间大文本框的文字描述,这就很简单了,不过这里的布局我使用的是在主页面上            使用FrameLayout组件作为中间的主要显示区域,中间部分使用Fragment实现,                    Fragment可以在一个 Activity 中组合多个片段,从而构建多窗格界面,并在多个                    Activity 中重复使用某个片段。,然后顶部和底部则使用include进行              引入。              对于页面的布局没有什么多说的,唯一要注意的就是页面的布局上,高度调整。

          先创建四个xml文件,分别取名为tab01~04,用来保存中间页面文字以及位置,最后在            系统生成的activity_main.xml文件里对整个FrameLayout进行布局,并导入之前创建的            top和button两个文件,效果如下:

          4.接下来是对用户的行为事件的控制

             上述要求说明通过点击图标变色并转换到相应的界面显示出不同的文本内容

             这本次实验中,需要我们控制的功能事件并不多,只需要我们完成,在底部点击后,                 中间的fragment能够相应的进行轮转即可

             而为了控制这样一个事件,我们需要做两件事:

             1. 监听我们对底部控件的点击

             2. 将监听到的底部点击事件,相应的传递给fragment的事件控制

             对于事件的控制需要在MainActivity.java文件中编写

             对点击事件的监听:

 private void initEvent(){ 

       mtabweixin.setOnClickListener(this); 

       mtabfrd.setOnClickListener(this); 

       mtabaddress.setOnClickListener(this); 

       mtabset.setOnClickListener(this);

       }

对于fragment获取监听并且返回相应,使用switch

最后附上码云链接:

gitee.com/ganchun1130…