类微信界面设计

类微信界面设计

一、实验目标：

1. 页面具有标题
2. 页面具有中间显示框
3. 页面具有底部选择框，并且具有选择事件
4. 页面底部选择框在进行改变的时候，我们需要中间显示框的页面同步改变
5. 页面的布局清晰

二、实验步骤

(1)页面布局
先设计页面顶部的标题部分top，然后设计底部按钮部分bottom。使用include，在中间部分加入一个framlayout作为显示区域，

1.设计顶部top
使用linerlayout和textview进行简单的标题设计

2.设计底部bottom
主要使用linerlayout，textview，ImageButton进行按钮设计

3.整体布局页面

// 主页面布局代码
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">

        <include layout="@layout/top" />

        <FrameLayout
            android:id="@+id/mf"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1">
        </FrameLayout>

    <include layout="@layout/bottom" />
   </LinearLayout>

(2)事件控制

主要是对底部的按钮进行监听，监听到底部按钮被点击以后，通过framelayout响应，在页面中间显示响应内容

1.监听底部按钮是否被点击
这里的i1到i4是底部bottom设计的imageButton，将对它们进行点击监听

// 代码示例
 private void initEvent(){
        i1.setOnClickListener(this);
        i2.setOnClickListener(this);
        i3.setOnClickListener(this);
        i4.setOnClickListener(this);
    }

2.将点击传递给相对应的framelayout进行相应

整体效果大致如下

（代码仓库地址如下https://gitee.com/frankxxd/android-studio-study.git，欢迎指正）