【Android】安卓开发实战之使用Fragment（碎片）实现底部导航栏效果

现在的APP一般底部有一个导航栏，点击可以切换不同的内容，但又没有出现一个活动跳转到另一个活动的现象，这个效果如何实现？方法自然是有的，比如说使用Fragment碎片。

一、准备八张图片，放入drawable文件夹下。

二、创建主布局文件using_main.xml

布局效果：

三、新建要替换FrameLayout的布局文件fragment_knowledge.xml，这里以“知识”布局为例，其他三个布局也是类似的

布局效果：

四、新建一个FragmentOfKnowLedge类，继承Fragment类，实现点击接口，其他的三个Fragment类和这个类类似

public class FragmentOfKnowLedge extends Fragment implements View.OnClickListener {
    private Button ruleButton;
    private Button tipsButton;
    /**
     *这个方法可以进行适配器和布局的绑定，初始化Item点击监听
     */
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup contain, Bundle savedInstanceState) {
        //这里获取要替换掉FrameLayout的布局fragment_knowledge.xml
        View view = inflater.inflate(R.layout.fragment_knowledge,contain,false);

        ruleButton = (Button)view.findViewById(R.id.k_button_rule);
        tipsButton = (Button)view.findViewById(R.id.k_button_tips);

        ruleButton.setOnClickListener(this);
        tipsButton.setOnClickListener(this);

        return view;
    }

    @Override
    public void onClick(View view){
        switch(view.getId()){
            case R.id.k_button_rule:
                //--------------------更新“知识”界面顶部标题栏的按键的背景和字体颜色--------------
                ruleButton.setBackground(getResources().getDrawable(R.drawable.round_white_food));
                tipsButton.setBackground(getResources().getDrawable(R.drawable.round_red_hotel));
                ruleButton.setTextColor(getResources().getColor(R.color.theRed));
                tipsButton.setTextColor(getResources().getColor(R.color.white));
                //----------------------------------------------------------------------------------
                break;
            case R.id.k_button_tips:
                //--------------------更新“知识”界面顶部标题栏的按键的背景和字体颜色--------------
                ruleButton.setBackground(getResources().getDrawable(R.drawable.round_red_food));
                tipsButton.setBackground(getResources().getDrawable(R.drawable.round_white_hotel));
                ruleButton.setTextColor(getResources().getColor(R.color.white));
                tipsButton.setTextColor(getResources().getColor(R.color.theRed));
                //----------------------------------------------------------------------------------
                break;
            default:
                break;
        }
    }
}

五、在相应的活动中加载Fragment，我这里的活动是UsingMain

/**
 * 这是本APP的主要活动页
 */
public class UsingMain extends BaseActivity implements View.OnClickListener{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.using_main);
        //---------------------------给状态栏设置颜色-----------------------------------------------
        TextView textViewActionBar = (TextView)findViewById(R.id.actionBarId);
        setActionBarColor(textViewActionBar,getResources().getColor(R.color.theRed));
        //------------------------------------------------------------------------------------------

        //---------------------------添加联系人Fragment---------------------------------------------
        FragmentOfLinkMan fragmentOfLinkMan = new FragmentOfLinkMan();
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.frameLayoutId,fragmentOfLinkMan);
        transaction.commit();
        ImageView linkImage = (ImageView)findViewById(R.id.use_linkImageId);
        TextView linkText = (TextView)findViewById(R.id.use_linkTextId);
        linkImage.setImageResource(R.drawable.linkman);
        linkText.setTextColor(getResources().getColor(R.color.theBlue));
        //------------------------------------------------------------------------------------------

        //---------------------------------添加监听事件---------------------------------------------
        LinearLayout linkll = (LinearLayout)findViewById(R.id.linkManTouchId);
        LinearLayout lifell = (LinearLayout)findViewById(R.id.lifeTouchId);
        LinearLayout knowll = (LinearLayout)findViewById(R.id.knowledgeTouchId);
        LinearLayout myll = (LinearLayout)findViewById(R.id.myTouchId);
        linkll.setOnClickListener(this);
        lifell.setOnClickListener(this);
        knowll.setOnClickListener(this);
        myll.setOnClickListener(this);
        //------------------------------------------------------------------------------------------


    }

    @Override
    public void onClick(View view){
        ImageView linkImage = (ImageView)findViewById(R.id.use_linkImageId);
        ImageView lifeImage = (ImageView)findViewById(R.id.use_lifeImageId);
        ImageView knowImage = (ImageView)findViewById(R.id.use_knowImageId);
        ImageView myImage = (ImageView)findViewById(R.id.use_myImageId);

        TextView linkText = (TextView)findViewById(R.id.use_linkTextId);
        TextView lifeText = (TextView)findViewById(R.id.use_lifeTextId);
        TextView knowText = (TextView)findViewById(R.id.use_knowTextId);
        TextView myText = (TextView)findViewById(R.id.use_myTextId);
        switch (view.getId()){
            case R.id.linkManTouchId://点击“联系人”触发的监听事件
                //---------------------------联系人处高亮，其他灰色---------------------------------
                linkImage.setImageResource(R.drawable.linkman);
                lifeImage.setImageResource(R.drawable.unlife);
                knowImage.setImageResource(R.drawable.unknowledge);
                myImage.setImageResource(R.drawable.unmy);

                linkText.setTextColor(getResources().getColor(R.color.theBlue));
                lifeText.setTextColor(getResources().getColor(R.color.theGray));
                knowText.setTextColor(getResources().getColor(R.color.theGray));
                myText.setTextColor(getResources().getColor(R.color.theGray));
                //----------------------------------------------------------------------------------
                //---------------------------添加联系人Fragment-------------------------------------
                FragmentOfLinkMan fragmentOfLinkMan = new FragmentOfLinkMan();
                FragmentManager fragmentManagerLinkMan = getFragmentManager();
                FragmentTransaction transactionLinkMan = fragmentManagerLinkMan.beginTransaction();
                transactionLinkMan.replace(R.id.frameLayoutId,fragmentOfLinkMan);
                transactionLinkMan.commit();
                //----------------------------------------------------------------------------------
                break;
            case R.id.lifeTouchId://点击“生活”触发的监听事件
                //---------------------------生活处高亮，其他灰色-----------------------------------
                linkImage.setImageResource(R.drawable.unlinkman);
                lifeImage.setImageResource(R.drawable.life);
                knowImage.setImageResource(R.drawable.unknowledge);
                myImage.setImageResource(R.drawable.unmy);

                linkText.setTextColor(getResources().getColor(R.color.theGray));
                lifeText.setTextColor(getResources().getColor(R.color.theBlue));
                knowText.setTextColor(getResources().getColor(R.color.theGray));
                myText.setTextColor(getResources().getColor(R.color.theGray));
                //----------------------------------------------------------------------------------
                //---------------------------添加美食Fragment---------------------------------------
                FragmentOfFood fragmentOfFood = new FragmentOfFood();
                FragmentManager fragmentManagerFood = getFragmentManager();
                FragmentTransaction transactionFood = fragmentManagerFood.beginTransaction();
                transactionFood.replace(R.id.frameLayoutId,fragmentOfFood);
                transactionFood.commit();
                //----------------------------------------------------------------------------------
                break;
            case R.id.knowledgeTouchId://点击“知识”触发的监听事件
                //---------------------------知识处高亮，其他灰色-----------------------------------
                linkImage.setImageResource(R.drawable.unlinkman);
                lifeImage.setImageResource(R.drawable.unlife);
                knowImage.setImageResource(R.drawable.knowledge);
                myImage.setImageResource(R.drawable.unmy);

                linkText.setTextColor(getResources().getColor(R.color.theGray));
                lifeText.setTextColor(getResources().getColor(R.color.theGray));
                knowText.setTextColor(getResources().getColor(R.color.theBlue));
                myText.setTextColor(getResources().getColor(R.color.theGray));
                //----------------------------------------------------------------------------------
                //---------------------------添加知识Fragment---------------------------------------
                FragmentOfKnowLedge fragmentOfKnow = new FragmentOfKnowLedge();
                FragmentManager fragmentManagerKnow = getFragmentManager();
                FragmentTransaction transactionKnow = fragmentManagerKnow.beginTransaction();
                transactionKnow.replace(R.id.frameLayoutId,fragmentOfKnow);
                transactionKnow.commit();
                //----------------------------------------------------------------------------------
                break;
            case R.id.myTouchId://点击“我的”触发的监听事件
                //---------------------------我的处高亮，其他灰色-----------------------------------
                linkImage.setImageResource(R.drawable.unlinkman);
                lifeImage.setImageResource(R.drawable.unlife);
                knowImage.setImageResource(R.drawable.unknowledge);
                myImage.setImageResource(R.drawable.my);

                linkText.setTextColor(getResources().getColor(R.color.theGray));
                lifeText.setTextColor(getResources().getColor(R.color.theGray));
                knowText.setTextColor(getResources().getColor(R.color.theGray));
                myText.setTextColor(getResources().getColor(R.color.theBlue));
                //----------------------------------------------------------------------------------
                break;
            default:break;
        }
    }
}

最后看一下效果：