高仿微信6.0界面

1.使用AndroidStudio新建一个包含BasicActivity的工程

---

为什么使用BasicActivity而不是EmptyActvity是因为BasicActivity中包含了一些对ToolBar和Menu的处理，比较方便。
新建完成之后，浮动按钮我们并不需要，可以删掉相关代码。

2.有关标题栏

---

我们看到微信的标题栏有app名称，搜索，菜单。
我们打开menu.xml，增加如下item

第一个item是搜索，设置app:showAsAction="ifRoom"即将这个菜单的图标显示在标题栏。我们Run'app'发现我们给每个菜单设置的图标并没有显示出来，接下来我们将通过反射，让每个菜单都显示图标

@Override
    protected boolean onPrepareOptionsPanel(View view, Menu menu) {
        if (menu != null) {
            if (menu.getClass() == MenuBuilder.class) {
                try {
                    Method m = menu.getClass().getDeclaredMethod("setOptionalIconsVisible", Boolean.TYPE);
                    m.setAccessible(true);
                    m.invoke(menu, true);
                } catch (Exception e) {
                }
            }
        }
        return super.onPrepareOptionsPanel(view, menu);
    };

接下来我们在MainActivity中捕获菜单的点击事件

 @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        int id = item.getItemId();
        switch (id){
            case R.id.action_search:
                PromptManager.showToast(this,"查找");
                break;
            case R.id.action_group_chat:
                PromptManager.showToast(this,"发起群聊");
                break;
            case R.id.action_add_friend:
                PromptManager.showToast(this,"添加朋友");
                break;
            case R.id.action_scan:
                PromptManager.showToast(this,"扫一扫");
                break;
            case R.id.action_feedback:
                PromptManager.showToast(this,"意见反馈");
                break;
        }

        return super.onOptionsItemSelected(item);
    }

这样我们完成了标题栏的所有功能，但是我们发现有一个小问题，就是我们的右上角的小图标显示的三个点的小图标，这个我尝试了很多种方法都没有解决，如果有哪位朋友知道替换这个图标的方法请一定告诉我。

2.底部导航栏

我们新建bottom.xml我们使用LinearLayout水平布局，包含四个LinearLayout，每个LinearLayout里边有一个ImageButton和一个TextView。表示底部导航栏的四个按钮。其中一个LinearLayout如下

写好之后我们把bottom.xml包含在content.xml中

3.内容区域

---

我们写四个Fragment，每个Fragment表示一个界面
在content_main.xml中引入bottom.xm之前写一个ViewPager

我们在MainActivity中new四个Fragment，并把他添加到ListmFragments中，然后我们为ViewPager设置FragmentPagerAdapter，并为Adapter设置setOnPageChangeListener，获取当前显示的页面，并将底部导航栏图标切换至相应颜色，在点击底部导航栏按钮时切换当前Fragment

 private void initView() {
        mViewPager = (ViewPager) findViewById(R.id.id_viewpager);

        mTabWeixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
        mTabFrd = (LinearLayout) findViewById(R.id.id_tab_frd);
        mTabAddress = (LinearLayout) findViewById(R.id.id_tab_address);
        mTabSettings = (LinearLayout) findViewById(R.id.id_tab_settings);

        mImgWeixin = (ImageButton) findViewById(R.id.id_tab_weixin_img);
        mTvWeixin = (TextView) findViewById(R.id.id_tab_weixin_text);
        mImgFrd = (ImageButton) findViewById(R.id.id_tab_frd_img);
        mImgAddress = (ImageButton) findViewById(R.id.id_tab_address_img);
        mImgSettings = (ImageButton) findViewById(R.id.id_tab_settings_img);

        mFragments = new ArrayList();
        Fragment mTab01 = new MainFragment();
        Fragment mTab02 = new ContactsFragment();
        Fragment mTab03 = new FindFragment();
        Fragment mTab04 = new MineFragment();
        mFragments.add(mTab01);
        mFragments.add(mTab02);
        mFragments.add(mTab03);
        mFragments.add(mTab04);

        mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {

            @Override
            public int getCount() {
                return mFragments.size();
            }

            @Override
            public Fragment getItem(int arg0) {
                return mFragments.get(arg0);
            }
        };
        mViewPager.setAdapter(mAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageSelected(int arg0) {
                int currentItem = mViewPager.getCurrentItem();
                setTab(currentItem);
            }

            @Override
            public void onPageScrolled(int arg0, float arg1, int arg2) {

            }

            @Override
            public void onPageScrollStateChanged(int arg0) {

            }
        });
    }

    

        return super.onOptionsItemSelected(item);
    }
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.id_tab_weixin:
                setSelect(0);
                break;
            case R.id.id_tab_frd:
                setSelect(1);
                break;
            case R.id.id_tab_address:
                setSelect(2);
                break;
            case R.id.id_tab_settings:
                setSelect(3);
                break;

            default:
                break;
        }
    }
    private void setSelect(int i) {
        setTab(i);
        mViewPager.setCurrentItem(i);
    }

    private void setTab(int i) {
        resetImgs();
        /**
         * 设置图片为亮色,切换内容区域
         */
        switch (i) {
            case 0:
                mImgWeixin.setImageResource(R.drawable.icon_bottom_pressed);
                mTvWeixin.setTextColor(getResources().getColor(R.color.color_green));
                break;
            case 1:
                mImgFrd.setImageResource(R.drawable.icon_bottom_pressed);
                break;
            case 2:
                mImgAddress.setImageResource(R.drawable.icon_bottom_pressed);
                break;
            case 3:
                mImgSettings.setImageResource(R.drawable.icon_bottom_pressed);
                break;
        }
    }

    /**
     * 切换图片至暗色
     */
    private void resetImgs() {
        mImgWeixin.setImageResource(R.drawable.icon_bottom);
        mImgFrd.setImageResource(R.drawable.icon_bottom);
        mImgAddress.setImageResource(R.drawable.icon_bottom);
        mImgSettings.setImageResource(R.drawable.icon_bottom);
    }

到这里我们模仿微信主界面的工作已经完成了，当然我们也可以在进入这个主界面之前做一个账号验证

---

后记：这个方法是我在iMooc上看hyman老师的课微信6.0主界面之后发现老师写的那些很多方法已经不能实现了，我就自己在总结了hyman老师的代码之后结合AndroidStudio 的一下特性写出来的一个简单版模仿微信主界面。如果我在书写过程中有错误，希望大家能够指正。如果需要源码，可以私信我。

转载请注明出处