Android studio实现仿微信界面

一.静态界面实现（.xml）

功能需求

1.上方有标题（居中）
2.中间显示内容，内容随着下方控件而切换。
3.下方四个控件可切换。

实现页面展示：

 共三大部分，顶部和底部一直不变，中间部分随着点击切换，还需要一个页面组合这六项内容，一共需要做七个UI前端页面设计

1.top.xml（上方居中有标题）

2.要求有四个控件，可以随时切换，分别是聊天，朋友，通讯录，设置这里就涉及到fragment的使用。

3.bottom

二.界面动态实现

功能需求 每一次点击需要切换 一个页面，并且当前页面对应图标必须标亮，其他则灰蒙蒙；默认打开时在第一个页面，第一个微信图标标亮 

界面实现：

目录结构 在这里插入图片描述

 

这里主要运用了Fragment

    Fragment的优势有以下几点：
    模块化（Modularity）：我们不必把所有代码全部写在Activity中，而是把代码写在各自的Fragment中。
    可重用（Reusability）：多个Activity可以重用一个Fragment。
    可适配（Adaptability）：根据硬件的屏幕尺寸、屏幕方向，能够方便地实现不同的布局，这样用户体验更好。
 

接下来就是初始化界面与事件启动
分析界面实现效果，例如当点击某一导航键时，跳转到该界面主页面，同时除该导航键，其余导航键变暗

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private Fragment mtab01 = new weixin_Fragment();
    private Fragment mtab02 = new friend_Fragment();
    private Fragment mtab03 = new txl_Fragment();
    private Fragment mtab04 = new setting_Fragment();
    private FragmentManager fm;
    private LinearLayout mTabWeixin;
    private LinearLayout mTabFrd;
    private LinearLayout mTabContact;
    private LinearLayout mTabSettings;

    private ImageButton mImgWeixin;
    private ImageButton mImgFrd;
    private ImageButton mImgContact;
    private ImageButton mImgSettings;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        ActionBar action_bar=getSupportActionBar();
        if(action_bar!=null)
            action_bar.hide();/*隐藏activity头*/
        setContentView(R.layout.activity_main);
        initFragment();
        initview();
        setselect(0);
        initEvent();
    }
    private void initFragment(){
        fm =getFragmentManager();
        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();
    }
    private void initview(){
        mTabWeixin=(LinearLayout)findViewById(R.id.id_tab_weixin);
        mTabFrd=(LinearLayout)findViewById(R.id.id_tab_frd);
        mTabContact=(LinearLayout)findViewById(R.id.id_tab_txl);
        mTabSettings=(LinearLayout)findViewById(R.id.id_tab_setting);

        mImgWeixin=(ImageButton)findViewById(R.id.weixin_img);
        mImgFrd=(ImageButton)findViewById(R.id.frd_img);
        mImgContact=(ImageButton)findViewById(R.id.txl_img);
        mImgSettings=(ImageButton)findViewById(R.id.settong_img);
    }
    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);
                mImgSettings.setImageResource(R.drawable.tab_settings_pressed);
                break;
            default:
                break;
        }
        transaction.commit();
    }

    private void hideFragment(FragmentTransaction transaction){
        transaction.hide(mtab01);
        transaction.hide(mtab02);
        transaction.hide(mtab03);
        transaction.hide(mtab04);
    }

    @Override
    public void onClick(View view) {
        resetImgs();
        switch(view.getId())
        {
            case R.id.id_tab_weixin:
                setselect(0);
                break;
            case R.id.weixin_img:
                setselect(0);
                break;
            case R.id.id_tab_frd:
                setselect(1);
                break;
            case R.id.frd_img:
                setselect(1);
                break;
            case R.id.id_tab_txl:
                setselect(2);
                break;
            case R.id.txl_img:
                setselect(2);
                break;
            case R.id.id_tab_setting:
                setselect(3);
                break;
            case R.id.settong_img:
                setselect(3);
                break;
            default:
                break;
        }
    }
    private void resetImgs(){
        mImgWeixin.setImageResource(R.drawable.tab_weixin_normal);
        mImgFrd.setImageResource(R.drawable.tab_find_frd_normal);
        mImgContact.setImageResource(R.drawable.tab_address_normal);
        mImgSettings.setImageResource(R.drawable.tab_settings_normal);
    }
    private void initEvent(){
        mTabWeixin.setOnClickListener(this);
        mTabFrd.setOnClickListener(this);
        mTabContact.setOnClickListener(this);
        mTabSettings.setOnClickListener(this);
        mImgWeixin.setOnClickListener(this);
        mImgFrd.setOnClickListener(this);
        mImgContact.setOnClickListener(this);
        mImgSettings.setOnClickListener(this);
    }
}

代码仓库：https://github.com/zzx-i/mywork-zzx-1.git