Android底部导航栏实现（三）之TextView+LinearLayout

这里简单记录下通过TextView+LinearLayout+Fragment来实现Android底部导航栏。

布局

<!--fragment_text_tab.xml--> 


 


<?xml version="1.0" encoding="utf-8"?> 


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


              android:layout_width="match_parent" 


              android:layout_height="match_parent" 


              android:orientation="vertical"> 


 


    <FrameLayout 


        android:id="@+id/sub_content" 


        android:layout_width="match_parent" 


        android:layout_height="0dp" 


        android:layout_weight="1"> 


 


        <TextView 


            android:id="@+id/activity_text_view" 


            android:layout_width="wrap_content" 


            android:layout_height="wrap_content" 


            android:layout_centerHorizontal="true" 


            android:text="@string/tips" 


            android:textColor="@color/colorPrimary" 


            android:textSize="18sp" 


            android:textStyle="bold|italic"/> 


    </FrameLayout> 


 


    <View 


        android:layout_width="match_parent" 


        android:layout_height="1px" 


        android:background="@color/grey_300"/> 


 


    <include layout="@layout/tab_layout_for_bottom"/> 


 


</LinearLayout> 


 


 


 


<!--tab_layout_for_bottom--> 


 


<?xml version="1.0" encoding="utf-8"?> 


 


 


<LinearLayout 


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


    xmlns:tools="http://schemas.android.com/tools" 


    android:layout_width="match_parent" 


    android:layout_height="56dp" 


    android:background="@color/white" 


    android:orientation="horizontal" 


    tools:showIn="@layout/fragment_text_tab"> 


 


    <TextView 


        android:id="@+id/tv_home" 


        style="@style/viewpager_navigation_bar_tab_style" 


        android:drawableTop="@drawable/home" 


        android:text="@string/item_home"/> 


 


    <TextView 


        android:id="@+id/tv_location" 


        style="@style/viewpager_navigation_bar_tab_style" 


        android:drawableTop="@drawable/location" 


        android:text="@string/item_location"/> 


 


    <TextView 


        android:id="@+id/tv_like" 


        style="@style/viewpager_navigation_bar_tab_style" 


        android:drawableTop="@drawable/like" 


        android:text="@string/item_like"/> 


 


    <TextView 


        android:id="@+id/tv_person" 


        style="@style/viewpager_navigation_bar_tab_style" 


        android:drawableTop="@drawable/person" 


        android:text="@string/item_person"/> 



</LinearLayout> 

代码

mTHome.setOnClickListener(this); 


    mTLocation.setOnClickListener(this); 


    mTLike.setOnClickListener(this); 


    mTMe.setOnClickListener(this); 


    setDefaultFragment();//设置默认显示Fragment 


         


    @Override 


    public void onClick(View view) { 


        resetTabState();//reset the tab state 


        switch (view.getId()) { 


            case R.id.tv_home: 


                setTabState(mTHome, R.drawable.home_fill, getColor(R.color.colorPrimary));//设置Tab状态 


                switchFrgment(0);//切换Fragment 


                break; 


            case R.id.tv_location: 


                setTabState(mTLocation, R.drawable.location_fill, getColor(R.color.colorPrimary)); 


                switchFrgment(1); 


                break; 


            case R.id.tv_like: 


                setTabState(mTLike, R.drawable.like_fill, getColor(R.color.colorPrimary)); 


                switchFrgment(2); 


                break; 


            case R.id.tv_person: 


                setTabState(mTMe, R.drawable.person_fill, getColor(R.color.colorPrimary)); 


                switchFrgment(3); 


                break; 


        } 



    }  

Fragment的切换

/** 


     * switch the fragment accordting to id 


     * @param i id 


     */ 


    private void switchFrgment(int i) { 


        FragmentTransaction transaction = getChildFragmentManager().beginTransaction(); 


        switch (i) { 


            case 0: 


                if (mHomeFragment == null) { 


                    mHomeFragment = mHomeFragment.newInstance(getString(R.string.item_home)); 


                } 


                transaction.replace(R.id.sub_content, mHomeFragment); 


                break; 


            case 1: 


                if (mLocationFragment == null) { 


                    mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location)); 


                } 


                transaction.replace(R.id.sub_content, mLocationFragment); 


                break; 


            case 2: 


                if (mLikeFragment == null) { 


                    mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like)); 


                } 


                transaction.replace(R.id.sub_content, mLikeFragment); 


                break; 


            case 3: 


                if (mPersonFragment == null) { 


                    mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person)); 


                } 


                transaction.replace(R.id.sub_content, mPersonFragment); 


                break; 


        } 


        transaction.commit(); 



    }  

这里面值得注意的地方就是要用getChildFragmentManager()，否则会出现切换Fragment内容不显示的情况。

设置Tab状态