移动互联网开发之类微信界面设计

微信界面开发（AS）

gitee源码地址：https://gitee.com/si–yue/MyWeChat

微信界面的开发以及图标界面跳转的逻辑实现，最终效果如下图：

界面需求

1. 三部分：页面最上方文本显示“微信”，页面中间显示框，页面最下面方图标选择框。
2. 选择框图标被点击颜色变化，中间显示框同步变化。
3. 布局清晰合理。

微信前端页面

top.xml为最上方文本框文件，tab01.xml…tab04.xml为中间显示框文件，bottom.xml为最下方图标选择框文件，使用include引入top.xml和bottom.xml，以及使用FrameLayout控件构成主页面activity_main.xml：

// activity_main.xml主页代码：
<?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/id_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </FrameLayout>

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

// bottom.xml中单个图标布局代码
<LinearLayout
        android:id="@+id/id_tab_weixin"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical">

        <ImageButton
            android:id="@+id/id_tab_weixin_img"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="#000000"
            android:clickable="false"
            android:contentDescription="@string/app_name"
            app:srcCompat="@drawable/tab_weixin_pressed" />

        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="微信"
            android:clickable="false"
            android:textColor="#ffffff"
            android:textSize="15sp" />
    </LinearLayout>

事件点击后逻辑跳转

初始化各个控件后，监听点击事件，利用fragment进行界面同步转换。

1. 得到Fragment的布局管理器，目的是开启FragmentTransaction。
2. 使用transaction里面的add（）方法，向FragmentLayout容器里添加Fragment。
3. 单击事件，单击微信底部的LinearLayout，则呈现不同的Fragment。
4. 把注册监听器放在一个方法里，有利于后期的维护。
   

// 得到Fragment的布局管理器，目的是开启FragmentTransaction。
//使用transaction里面的add（）方法，向FragmentLayout容器里添加Fragment

    private void initFragment(){
        fm = getSupportFragmentManager();
        FragmentTransaction transaction =fm.beginTransaction();
        transaction.add(R.id.id_content,mTab01);
        transaction.add(R.id.id_content,mTab02);
        transaction.add(R.id.id_content,mTab03);
        transaction.add(R.id.id_content,mTab04);
        transaction.commit();

    }

// 单击事件，单击微信底部的LinearLayout，则呈现不同的Fragment。
 private void setSelect(int i){
        FragmentTransaction transaction= fm.beginTransaction();
        hideFragment(transaction);
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgFrd.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgContact.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSetting.setImageResource(R.drawable.tab_settings_pressed);
                break;
             default:
                    break;
        }
        transaction.commit();
    }

// 把注册监听器放在一个方法里，有利于后期的维护
    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSetting.setOnClickListener(this);
    }

错误预警

由于AS版本问题，使用getFragmentManager()和requestWindowFeature(Window.FEATURE_NO_TITLE)会无效报错，需使用getSupportFragmentManager()和supportRequestWindowFeature(Window.FEATURE_NO_TITLE)。