AS类微信页面开发

功能要求：

开发一个类微信界面，页面分上中下三块，中间部分要根据点击选择事件的时候进行页面切换

思路分析：

上部标题栏和下部导航栏易于实现。四个页面各自创建xml显示不同内容，页面切换利用导航栏点击

选择事件加fragment实现。

实现过程：

1. 导入静态资源

在/res/drawable中

2. 标题栏实现

LinearLayout是表明它的子组件是线性分布的，属性值vertical说明它的垂直分布的。

layout_width和layout_height用于修改组件高宽。 在参数值wrap_content或者match_parent

中，前者是控件显示的内容多大，控件就多大，而后者会填满该控件所在的父容器。当然也可以设置

成特定的大小，如200bp。

TextView其中属性多用于更改文本属性。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="WECHAT"
        android:textSize="40sp"
        tools:ignore="HardcodedText" />

</LinearLayout>

3. 导航栏实现

四个组件相同，这里仅参考第一个“消息”组件。

onClick属性设置为“onClick”，在相应的Activity中实现onClick方法，就可以实现Button绑定

点击监听事件。

<LinearLayout
        android:id="@+id/LinearLayout1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom"
        android:layout_weight="1"
        android:onClick="onClick"
        android:orientation="vertical">

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            app:srcCompat="@drawable/logo" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:gravity="center"
            android:text="消息"
            android:textSize="20sp" />
    </LinearLayout>

4. 中间页面实现

就是白板

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="Fragment1">

    <!-- TODO: Update blank fragment layout -->
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:text="page1" />

</FrameLayout>

5. 主布局文件

include引用top和bottom页面；使用FrameLayout的一个好处是：可以将四个page叠起来。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <include
        layout="@layout/top"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="415dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"/>

    <include
        layout="@layout/bottom"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

6. activity实现

绑定主界面

setContentView(R.layout.main_layout);

以用findViewById()函数寻找四个linearLayout，将返回结果赋予LinearLayout1234

private LinearLayout linearLayout1,linearLayout2,linearLayout3,linearLayout4;

linearLayout1=findViewById(R.id.LinearLayout1);
linearLayout2=findViewById(R.id.LinearLayout2);
linearLayout3=findViewById(R.id.LinearLayout3);
linearLayout4=findViewById(R.id.LinearLayout4);

创建Fragment管理变量manager用于管理所有的Fragment

FragmentManager manager;

manager=getSupportFragmentManager();

实例化各fragment对象

fragment1 = new Fragment1();
fragment2 = new Fragment2();
fragment3 = new Fragment3();
fragment4 = new Fragment4();

设置导航栏四个控件的监听，通过监听调用对应的Fragment界面

linearLayout1.setOnClickListener(this);
linearLayout2.setOnClickListener(this);
linearLayout3.setOnClickListener(this);
linearLayout4.setOnClickListener(this);

定义初始化函数，利用beginTransaction()取得 manager 的transaction 例项,将四个fragment添加进transaction

public void inital(){

    transaction = manager.beginTransaction()
            .add(R.id.content,fragment1)
            .add(R.id.content,fragment2)
            .add(R.id.content,fragment3)
            .add(R.id.content,fragment4)
            .commit();

}

定义fragmentHide()，为了后面根据点击选择事件显示界面，这里用于隐藏所有的fragment。

public void fragmentHide(){

    transaction = manager.beginTransaction()
            .hide(fragment1)
            .hide(fragment2)
            .hide(fragment3)
            .hide(fragment4)
            .commit();

}

定义showFragment(Fragment fragment)，用于显示对应fragment界面

public void showFragment(Fragment fragment){

    transaction = manager.beginTransaction()
            .show(fragment)
            .commit();

}

定义onClick()，首先隐藏所有fragment，再根据点击选择事件显示界面

public void onClick(View v) {

    fragmentHide();

    switch (v.getId()){
        case R.id.LinearLayout1:showFragment(fragment1);
        break;
        case R.id.LinearLayout2:showFragment(fragment2);
        break;
        case R.id.LinearLayout3:showFragment(fragment3);
        break;
        case R.id.LinearLayout4:showFragment(fragment4);
        break;
    }

}

自定义函数的调用

inital();
fragmentHide();
showFragment(fragment1);

实验结果：

实验源码：

实验部分源码