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

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

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





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

<?xml version="1.0" encoding="utf-8"?>
<!--这里我用了一个重写的线性布局，以便更换状态栏的颜色-->
<!--不清楚怎么设置状态栏颜色的，参考我之前写的博客-->
<!--当然你不想这么麻烦的话，直接使用线性布局也可以-->
<com.example.test.ActionBarLayOut xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/layout_usingId"
>
<!--这个帧布局充满了整个父容器，用于Fragment的替换-->
<!--layout_weight设置为1，为了不要把下面的组件挤出屏幕-->
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/frameLayoutId"
android:layout_weight="1"
>
</FrameLayout>
<!--这个线性布局将包含4个子线性布局-->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
>
<!--这个子线性布局将包含一个ImageView和一个TextView-->
<!--剩下的三个子线性布局也类似-->
<LinearLayout
android:id="@+id/linkManTouchId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/use_linkImageId"
android:layout_width="@dimen/buttomImage"
android:layout_height="@dimen/buttomImage"
android:src="@drawable/unlinkman"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/use_linkTextId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/linkman"
android:gravity="center"
android:textColor="@color/theGray"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/lifeTouchId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/use_lifeImageId"
android:layout_width="@dimen/buttomImage"
android:layout_height="@dimen/buttomImage"
android:src="@drawable/unlife"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/use_lifeTextId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/life"
android:gravity="center"
android:textColor="@color/theGray"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/knowledgeTouchId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/use_knowImageId"
android:layout_width="@dimen/buttomImage"
android:layout_height="@dimen/buttomImage"
android:src="@drawable/unknowledge"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/use_knowTextId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/knowledge"
android:gravity="center"
android:textColor="@color/theGray"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/myTouchId"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
android:layout_weight="1"
android:layout_gravity="center"
>
<ImageView
android:id="@+id/use_myImageId"
android:layout_width="@dimen/buttomImage"
android:layout_height="@dimen/buttomImage"
android:src="@drawable/unmy"
android:layout_gravity="center"
/>
<TextView
android:id="@+id/use_myTextId"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/my"
android:gravity="center"
android:textColor="@color/theGray"
/>
</LinearLayout>
</LinearLayout>
</com.example.test.ActionBarLayOut>

布局效果：



三、新建要替换FrameLayout的布局文件fragment_knowledge.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">

<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/rectangle_width"
android:background="@color/theRed">

<ImageView
android:id="@+id/k_uploadImageId"
android:layout_width="@dimen/titleImage"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/titleRetract"
android:src="@drawable/upload" />

<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center">
<Button
android:id="@+id/k_button_rule"
android:layout_width="@dimen/title_button_W2"
android:layout_height="@dimen/title_button_H"
android:background="@drawable/round_white_food"
android:text="@string/apartment_rule"
android:textColor="@color/theRed"
/>
<Button
android:id="@+id/k_button_tips"
android:layout_width="@dimen/title_button_W2"
android:layout_height="@dimen/title_button_H"
android:background="@drawable/round_red_hotel"
android:text="@string/convenient_tips"
android:textColor="@color/white"
/>
</LinearLayout>

<ImageView
android:id="@+id/k_search_life_ImageId"
android:layout_width="@dimen/titleImage"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/titleRetract"
android:src="@drawable/search" />
</LinearLayout>

<ListView
android:id="@+id/k_listViewOfKnowId"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>

布局效果：



四、新建一个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;
}
}
}

最后看一下效果：