仿京东底部导航栏实现

项目中我们会经常用到底部导航栏，那么底部导航栏是怎么实现的呢？其实很简单：

我这里面抽取了一个商城类的项目demo，供大家参考：

activity代码如下：

public class MainActivity extends AppCompatActivity {

    private LinearLayout mHomeLl;
    private LinearLayout mCartLl;
    private LinearLayout mMyLl;

    private int selectId = -1;

    private FragmentTransaction mFragmentTransaction;

    private Fragment homeFragment,cartFragment,myFragment,currentFragment;

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

    private void initView() {
        mHomeLl = (LinearLayout) findViewById(R.id.home_ll);
        mCartLl = (LinearLayout) findViewById(R.id.cart_ll);
        mMyLl = (LinearLayout) findViewById(R.id.my_ll);

        changeFragment(0);

        mHomeLl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeFragment(0);
            }
        });

        mCartLl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeFragment(1);
            }
        });

        mMyLl.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                changeFragment(2);
            }
        });
    }

    private void changeFragment(int i){

        if(selectId != -1 && selectId == i){
            return;
        }
        selectId = i;
        if (mFragmentTransaction == null) {
            mFragmentTransaction = getSupportFragmentManager().beginTransaction();
        }
        switch (i){
            case 0:
                if(homeFragment == null){
                    homeFragment = new HomeFragment();
                }
                switchFragment(homeFragment);
                break;
            case 1:
                if(cartFragment == null){
                    cartFragment = new CartFragment();
                }
                switchFragment(cartFragment);
                break;
            case 2:
                if(myFragment == null){
                    myFragment = new MyFragment();
                }
                switchFragment(myFragment);
                break;
        }

    }

    public void switchFragment(Fragment to) {
        if (mFragmentTransaction == null) {
            mFragmentTransaction = getSupportFragmentManager().beginTransaction();
        }
        if (currentFragment != to) {
            if (currentFragment == null) {
                mFragmentTransaction.add(R.id.fl_content, to).commit();
                currentFragment = to;
                mFragmentTransaction = null;
                return;
            }
            if (!to.isAdded()) {
                mFragmentTransaction.hide(currentFragment).add(R.id.fl_content, to).commit();
            } else {
                mFragmentTransaction.hide(currentFragment).show(to).commitAllowingStateLoss();
            }
        }
        currentFragment = to;
        mFragmentTransaction = null;
    }



}

布局代码如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

        <FrameLayout
            android:id="@+id/fl_content"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="#dddddd"
        />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:background="#ffffff"
        >

        <LinearLayout
            android:id="@+id/home_ll"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <ImageView
                android:layout_marginTop="12dp"
                android:id="@+id/home_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/home"
                android:layout_gravity="center"
                />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="35dp"
            android:layout_gravity="center_vertical"
            android:background="#cccccc"
            >

        </View>

        <LinearLayout
            android:id="@+id/cart_ll"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <ImageView
                android:layout_marginTop="12dp"
                android:id="@+id/cart_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/cart"
                android:layout_gravity="center"
                />

        </LinearLayout>

        <View
            android:layout_width="1dp"
            android:layout_height="35dp"
            android:layout_gravity="center_vertical"
            android:background="#cccccc"
            >

        </View>

        <LinearLayout
            android:id="@+id/my_ll"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:orientation="vertical"
            >

            <ImageView
                android:layout_marginTop="12dp"
                android:id="@+id/my_iv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@mipmap/my"
                android:layout_gravity="center"
                />

        </LinearLayout>

    </LinearLayout>


</LinearLayout>

上一张最终效果图：

里面的3张切片图请美工帮忙一下就好了，是不是so easy?^_^