Android实战绘述03-仿微信主界面

1.功能介绍

1:主要实现微信主界面底部四个按钮操作不同界面的功能。
2:使用到的技术，BottomNavigationView和Fragment。
3:缺点，没有ViewPager的滑动的效果，只能通过底部四个按钮切换界面。

2.代码实现

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/nav_view"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#666"
        app:itemTextColor="@drawable/bottom_navigation"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/bottom_nav_menu">

    </android.support.design.widget.BottomNavigationView>


    <LinearLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        app:layout_constraintBottom_toTopOf="@id/nav_view"
        app:layout_constraintTop_toTopOf="parent"
        android:orientation="vertical"/>
</android.support.constraint.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:id="@+id/bookshelf"
        android:title="bookshelf"/>

    <item
        android:id="@+id/handpick"
        android:title="handpick"/>

    <item
        android:id="@+id/find"
        android:title="find"/>

    <item
        android:id="@+id/me"
        android:title="me"/>
</menu>

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="#fff" android:state_checked="true"/>
    <item android:color="#000" android:state_checked="false"/>
</selector>

public class MainActivity extends AppCompatActivity {

    private Fragment mBookShelfFragment;
    private Fragment mHandpickFragment;
    private Fragment mFindFragment;
    private Fragment mMeFragment;
    private Fragment[] fragments;

    private int lastIndex = 0;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);


        mBookShelfFragment = new BookshelfFragment();
        mHandpickFragment = new HandpickFragment();
        mFindFragment = new FindFragment();
        mMeFragment = new MeFragment();
        fragments = new Fragment[]{mBookShelfFragment,mHandpickFragment,mFindFragment,mMeFragment};

        BottomNavigationView navigationView = findViewById(R.id.nav_view);
        BottomNavigationViewHelper.disableShiftMode(navigationView);
        navigationView.setOnNavigationItemSelectedListener(onNavigationItemSelectedListener);
        replaceFragment(0);
    }

    private BottomNavigationView.OnNavigationItemSelectedListener onNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {
        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()){
                case R.id.bookshelf:
                    if (lastIndex != 0){
                        replaceFragment(0);
                        lastIndex = 0;
                    }
                    break;
                case R.id.handpick:
                    if (lastIndex != 1){
                        replaceFragment(1);
                        lastIndex = 1;
                    }
                    break;
                case R.id.find:
                    if (lastIndex != 2){
                        replaceFragment(2);
                        lastIndex = 2;
                    }
                    break;
                case R.id.me:
                    if (lastIndex != 3){
                        replaceFragment(3);
                        lastIndex = 3;
                    }
                    break;
            }
            return true;
        }
    };

    private void replaceFragment(int index){
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.replace(R.id.fragment,fragments[index]);
        transaction.commit();
    }
}

public class BottomNavigationViewHelper {

    @SuppressLint("RestrictedApi")
    public static void disableShiftMode(BottomNavigationView bottomNavigationView) {
        BottomNavigationMenuView view = (BottomNavigationMenuView) bottomNavigationView.getChildAt(0);
        try {
            Field shiftingMode = view.getClass().getDeclaredField("mShiftingMode");
            shiftingMode.setAccessible(true);
            shiftingMode.setBoolean(view, false);
            shiftingMode.setAccessible(false);
            for (int i = 0; i < view.getChildCount(); i++) {
                BottomNavigationItemView item = (BottomNavigationItemView) view.getChildAt(i);
                //noinspection RestrictedApi
                item.setShiftingMode(false);
                // set once again checked value, so view will be updated
                //noinspection RestrictedApi
                item.setChecked(item.getItemData().isChecked());
            }
        } catch (NoSuchFieldException e) {

        } catch (IllegalAccessException e) {

        }
    }
}

3.使用BottomNavigationView的优缺点

1:BottomNavigationView是Material Design推荐使用的，画面感觉更加的好。默认点击效果是向四周扩散。
2:使用BottomNavigationView可以直接通过app:itemTextColor="@drawable/bottom_navigation"，以xml设置点击和未点击时的效果，更加的灵活。通过app:menu="@menu/bottom_nav_menu"设置底部菜单，而且menu中添加在文字和icon，BottomNavigationView会自动进行布局处理。
3:BottomNavigationVie的不足之处，官方可能希望在BottomNavigationView中显示三个item，所以当显示四个的时候，BottomNavigationView就会出现显示错误。对于support-28以下的可以使用BottomNavigationViewHelper（上面代码有提供）这个类来解决。对于support-28，可以通过添加app:labelVisibilityMode="labeled"，来解决。

4.在使用BottomNavigationView时遇到的问题

1:实现OnNavigationItemSelectedListener接口的onNavigationItemSelected之后，返回值一定要返回true，不然点击按钮的时候，按钮上方的页面会正确切换，但是被选中的始终是第一个按钮，不会进行切换。

5.解决不能滑动的问题

//使用BottomNavigationView+ViewPager+FragmentPagerAdapter实现
public class MainActivity extends AppCompatActivity {

    private Fragment mBookShelfFragment;
    private Fragment mHandpickFragment;
    private Fragment mFindFragment;
    private Fragment mMeFragment;

    private MenuItem menuItem;
    private BottomNavigationView navigationView;
    private ViewPager mViewPager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mBookShelfFragment = new BookshelfFragment();
        mHandpickFragment = new HandpickFragment();
        mFindFragment = new FindFragment();
        mMeFragment = new MeFragment();

        List<Fragment> fragments = new ArrayList<>();
        fragments.add(mBookShelfFragment);
        fragments.add(mHandpickFragment);
        fragments.add(mFindFragment);
        fragments.add(mMeFragment);
        MainFragmentPagerAdapter adapter = new MainFragmentPagerAdapter(getSupportFragmentManager(),fragments);

        mViewPager = findViewById(R.id.vp);
        mViewPager.setAdapter(adapter);
        mViewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                //menuItem保存之前的操作，第一次调用走else，之后不是null，
                // 将上一次的操作，走if设置为false
                if (menuItem != null){
                    menuItem.setChecked(false);
                }else {
                    navigationView.getMenu().getItem(0).setChecked(false);
                }
                //更新menuItem，记录本次操作
                menuItem = navigationView.getMenu().getItem(position);
                menuItem.setChecked(true);
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        navigationView = findViewById(R.id.nav_view);
        BottomNavigationViewHelper.disableShiftMode(navigationView);
        navigationView.setOnNavigationItemSelectedListener(new BottomNavigationView.OnNavigationItemSelectedListener() {
            @Override
            public boolean onNavigationItemSelected(@NonNull MenuItem item) {
                switch (item.getItemId()){
                    case R.id.bookshelf:
                        mViewPager.setCurrentItem(0,false);
                        break;
                    case R.id.handpick:
                        mViewPager.setCurrentItem(1,false);
                        break;
                    case R.id.find:
                        mViewPager.setCurrentItem(2,false);
                        break;
                    case R.id.me:
                        mViewPager.setCurrentItem(3,false);
                        break;
                }
                return true;
            }
        });
    }
}