Android studio的第一个项目--Wechat简单布局

项目需求

1. 需要有简单的Wechat布局
2. 可在不同页面进行切换且底部图标颜色发生改变
3. 每个页面配一些简单的文字介绍

截图展示

前台界面

两个xml文件编辑首页的Top和Buttom，四个xml文件显示不同页面的文字部分，采用FrameLayout来显示

<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" />

功能实现

为了显示不同页面的跳转需要对fragment监听并切换图标（以下为主要函数功能段）

 //对点击的监听
    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFriends.setOnClickListener(this);
        mTabContacts.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
    }
    
    @Override
    public void onClick(View v) {
        resetImgs();
        switch (v.getId()) {
            case R.id.id_tab_weixin:
                setSelct(0);
                break;
            case R.id.id_tab_friends:
                setSelct(1);
                break;
            case R.id.id_tab_contacts:
                setSelct(2);
                break;
            case R.id.id_tab_setting:
                setSelct(3);
                break;
        }
    }

    //切换图片至暗色
    private void resetImgs(){
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFriends.setImageResource(R.drawable.tab_find_frd_normal);
        mImgContacts.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }

    private void setSelct(int i){
        FragmentTransaction transaction =fm.beginTransaction();
        hideFragment(transaction);//隐藏fragment
        //把图片设置为亮的
        //设置内容区域
        switch (i){
            case 0:
                transaction.show(mTab01);
                mImgWeixin.setImageResource(R.drawable.tab_weixin_pressed);
                break;
            case 1:
                transaction.show(mTab02);
                mImgFriends.setImageResource(R.drawable.tab_find_frd_pressed);
                break;
            case 2:
                transaction.show(mTab03);
                mImgContacts.setImageResource(R.drawable.tab_address_pressed);
                break;
            case 3:
                transaction.show(mTab04);
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

完整代码链接（gitee）*

注意事项

1.注意首页的排版问题（通过设置layout_height和layout_weight）
2.注意build.gradle里面minSdkVersion的取值
3.ImageButton的默认需要改为以下形式，否则在design页面可以看到但是运行之后图片无法显示

android:src="@drawable/*******"