WeChat v0.01-主界面框体实现

---

实现思路：

1. 界面设计
2. 代码逻辑设计
3. 用户与界面的交互设计

---

界面设计

主要将界面划分为三个区域

1. 顶部区域
   展示标题
2. 内容区域
   展示内容
3. 标签栏区域
   内容切换标识

顶部区域

顶部区域只需要设置一个textView控件
布局设置：

布局使用ConstraintLayout
将上左右三个方向的锚点固定在布局边界
layout_width设置为match_parent,layout_height自行设置合适的高度即可

内容区域

设置四个界面
每个界面为要展示的内容
这里每个界面各设置了一个textView，用于展示效果

底部区域

创建一个水平线性布局(horizontal Linearlayout)
布局设置：

水平布局上左右三个锚点固定在父布局边界，gravity设置为center，宽度设置为match_parent、高度自行设置合适的即可

在水平布局中创建四个垂直线性子布局(vertical Linearlayout)
布局设置：

gravity设置为center，高宽度都设置为match_parent
这时要注意需要设置layout_weight(都为1可平分空间)，否则会被第一个子控件占用所有空间

各垂直布局中添加imageView和textView

imageView选用一个可变色VecotrImage
textView内容自定义

整合三个区域

将以上三个区域添加到MainActivity.xml中
内容区域 添加FragmentLayout
顶部区域 和 底部区域 使用include导入(include是)

设置布局：

三者宽度都设置为 match_parent
顶部区域和底部区域高度设置为wrap_content,内容区域设置为match_content ,
内容区域 将上锚点链接到顶部区域的下锚点，下锚点同理。

---

代码设计

构建类

Tab类

Tab类整合页面切换时产生行为的控件，将其统一调配，其成员如下：

private static class Tab{
        private Fragment fragment;
        private LinearLayout linearLayout;
        private TextView textView;
        private ImageView imageView;
        private int getFocusedColor;
        private int lostFocusedColor;
        ···
}

• fragment
  内容主体容器(将展示内容与标签绑定)
• linerLayout
  获取选中tab事件
• textView
  tab文本
• imageView
  tab图标
• getFocusColor
  tab被选中时颜色
• lostFocusColor
  tab移除选中时颜色(默认颜色)

ManagerTab类

用于控制调配tab行为

    private static class ManagerTab{
        private FragmentManager fragmentManager;
        private int content;
        private List<Tab> tablist;
        private Tab currentTab;
        ···
}

• fragmentManger
  内容调控
• content
  容器ID（用于展示fragment的容器）
• tabList
  tab集合（统一控制tab）
• currentTab
  当前选中的tab

MainActiviy类

public class MainActivity extends AppCompatActivity implements View.OnClickListener{

    private Tab message,contact,find,config;
    private ManagerTab managerTab;

    private int currentID;
	···
}

• Tab *
  四个tab对象，对于fragment内容
• managerTab
  tab管理器
• currentID
  当前选中tab的linearLayout的ID

实现控制逻辑

Tab中主要方法有：

        /**
         * 被选中
         * @param fragmentManager 传入tab所在的fragmentManager
         */
        private void getFocused(FragmentManager fragmentManager){
            FragmentTransaction transaction= fragmentManager.beginTransaction();
            transaction.show(fragment);
            transaction.commit();
            switchColor(getFocusedColor);
        }
        
       /**
         * 移除选中
         * @param fragmentManager 传入tab所在的fragmentManager
         */
        private void lostFoucs(FragmentManager fragmentManager){
            FragmentTransaction transaction= fragmentManager.beginTransaction();
            transaction.hide(fragment);
            transaction.commit();
            switchColor (lostFocusedColor);
        }

用于控制 tab 获取或失去选中

ManagerTab主要方法有：

        /**
         * 初始化管理器 <br/>
         * 必须调用，否则 管理器无法工作
         */
        private void initManagerTab() {
            FragmentTransaction transaction=fragmentManager.beginTransaction();
            for(Tab tab:tablist){
                transaction.add(content,tab.fragment);
            }
            transaction.commit();
            hideAllTab();
            showTab(tablist.get(0));
        }
        /**
         * 转换选中的tab
         * @param tab 选中该tab
         */
        private void switchTab(Tab tab) {
            currentTab.lostFoucs(fragmentManager);
            tab.getFocused(fragmentManager);
            currentTab=tab;
        }

用于初始化 managerTab 和 控制 tab 焦点转换

MainActivity主要方法有：

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // 构造tab对象
        message =new Tab(new fragment_message() ,findViewById(R.id.tab_message),findViewById(R.id.txt_tab_message) ,findViewById(R.id.icon_message),getResources().getColor(R.color.color_selected),getResources().getColor(R.color.color_common));
        contact =new Tab(new fragment_contact() ,findViewById(R.id.tab_contact),findViewById(R.id.txt_tab_contact) ,findViewById(R.id.icon_contact),getResources().getColor(R.color.color_selected),getResources().getColor(R.color.color_common));
        find    =new Tab(new fragment_find()    ,findViewById(R.id.tab_find)   ,findViewById(R.id.txt_tab_find)    ,findViewById(R.id.icon_find)   ,getResources().getColor(R.color.color_selected),getResources().getColor(R.color.color_common));
        config  =new Tab(new fragment_config()  ,findViewById(R.id.tab_config) ,findViewById(R.id.txt_tab_config)  ,findViewById(R.id.icon_config) ,getResources().getColor(R.color.color_selected),getResources().getColor(R.color.color_common));

        // 监听tab (本质上是监听tab的linerlayout)
        message .linearLayout.setOnClickListener(this);
        contact .linearLayout.setOnClickListener(this);
        find    .linearLayout.setOnClickListener(this);
        config  .linearLayout.setOnClickListener(this);

        // 初始化 tab管理器
        managerTab =new ManagerTab(R.id.content, Arrays.asList(message,contact,find,config),getSupportFragmentManager());
        managerTab.initManagerTab();
    }

用于初始化 tab 和 managerTab

---

用户与界面的交互

使用监听作为用户与界面实时交互的接口

public class MainActivity extends AppCompatActivity implements View.OnClickListener{
	···
    public void onClick(View view) {
        // 扔掉冗余事件
        if(view.getId()==currentID) return;
        switch (view.getId()){
            case R.id.tab_message:
            	// 转换tab
                managerTab.switchTab(message);
                // 保存状态信息
                currentID=R.id.tab_message;
                break;
            case R.id.tab_contact:
                managerTab.switchTab(contact);
                currentID=R.id.tab_contact;
                break;
            case R.id.tab_find:
                managerTab.switchTab(find);
                currentID=R.id.tab_find;
                break;
            case R.id.tab_config:
                managerTab.switchTab(config);
                currentID=R.id.tab_config;
                break;
        }
    }
    ···
}

项目分享到了Github：

WeChat