移动互联网开发--1.搭建类微信页面

移动互联网开发第一课
要求完成以下需求:
1．页面具有标题“微信”
2．页面具有中间显示框
3．页面具有底部选择框，并且具有选择事件
4．页面底部选择框在进行改变的时候，我们需要中间显示框的页面同步改变
5．页面的布局清晰
源码链接： github源码.

一、分析具体布局

  具体的布局分为上中下3部分，具体分为三行。使用横向的，vertical的LinearLayout。上方，中间以及按钮下方的字都使用textview，下方的4个图形按钮则是使用Image button（相应的图标需要提前准备好放入resource文件夹中）。
  每个按钮按按下之后都会发生页面的跳转和button颜色的改变，每个button都会对应特定的textview布局的页面，分析完毕。

二、xml相应代码

top.xml：设置布局LinearLayout（vertical），在其中添加textview，想要将其中的内容居中就需要调整布局，详见代码top.xml

bottom.xml：含有4个LinearLayout（vertical），Imagebutton和textview。每3个构成一按钮的整体，共有4个，使用如下语句来设置它们的所占比，这样4个部分就各占1/4，平均有对称。

android:layout_weight="1"

tab1-4.xml：4个xml文件，其中仅有textview，分别对应不同页面的不同button所显示的页面

activity_main.xml：布局为LinearLayout（vertical）+FrameLayout，使用帧布局，使用

<include  layout="具体位置">

语句，在上方和下方分别显示出已经配置好的top.xml和bottom.xml，同上方法添加语句设置weight=1，就能够正常显示上中下的结构。

至此，xml文件全部完成。

三、Java相应代码

xxxFragment.java：在java文件夹下新建Fragment中选择Fragment(Blank)，创建一个新的Fragment，所使用的包为

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.app.Fragment;

创建4个Fragment，分别对应4个tab.xml，将其封装为对应的类，方便在MainActivity.java中直接调用，直接更改以下语句即可

return inflater.inflate(R.layout.名字, container, false);

MainActivity.java：（重点）
继承OnClickListener接口—implements View.OnClickListener

所使用的包	
import android.app.Activity;
import android.app.Fragment;
import android.app.FragmentManager ;
import android.app.FragmentTransaction;
import android.os.Bundle;
import android.util.Log;
import android.view.View;
import android.view.Window;
import android.widget.ImageButton;
import android.widget.LinearLayout;

对应函数功能介绍：
注册控件
将所有要使用的控件全部创建成类，Fragment，LinearLayout，ImageButton，FragmentManager全都要写。

将视图初始化
initView（）：使用findViewById函数将对应的控件和之前注册的对应起来

将Fragment进行初始化
initFragment（）：将4个对应的tab1-4挨个添加到Fragment中
注意：fragment的add被作为事务来处理。每次更改必须要commit。

将所有的textview隐藏起来
hide（FragmentTransaction transaction）：如果不隐藏，虚拟机启动后会将所有的textview一起显示出来，非常乱，将所有的东西都隐藏起来，根据所按的button将对应的内容显示出来。

完成对应文字的显现和button颜色的变化
setSelect(int i)：根据所传递的参数i进行对应的操作，i是根据按钮的位置不同而不同，会使用show和setImageResource函数分别将对应的文本显现出来+按钮由原来的的灰图形色变为新的亮图形。

在每次点击前将所有的图片都回复为灰色
resetImgs（）：试想一下，完成上面的setSelect(int i)函数后，每按下一个button，就会变成亮色，如果缺少将按钮重新恢复成暗色的函数，那么轮流按下4个button后，所有的button都是亮的，那样肯定是不行的。方法就是再次使用setImageResource函数将其恢复。

因为继承了接口，需要重写Onclick方法
onClick（）：监听程序，监听是哪个button被触发（用白话说就是能够知道是那个按钮被按下了，就要根据不同的按钮执行不同的方法），在其开头使用上面的resetImgs（）函数，将颜色恢复（但是很快又会触发颜色改变，因此肉眼会认为是无缝切换），根据不同的按钮，使用R.id.（按钮ID名），定位所按动的button，根据按钮的不同，调用setSelect（）函数切换文字显示+颜色变换。

至此程序已经可以运行，但是仍然可以优化
onClick（）：全屏监听，但是我们只需要监听下方的4个button，会造成大量的内存消耗，因此可以优化，缩小监听范围。或者可以使用另外的监听方法：仅监听按钮。

优化技巧

按钮的id.setOnClickListener(this) ;

    private void initEvent(){
        imageButton1.setOnClickListener(this) ;
        imageButton2.setOnClickListener (this) ;
        imageButton3.setOnClickListener (this) ;
        imageButton4.setOnClickListener (this) ;
    }

小白的第一次实验，肯定有许多的专业名词使用错误和逻辑表达的欠缺，希望各位斧正