最近由于Android基礎(chǔ)知識講解需要,采用單Activity多Fragment實現(xiàn)類似QQ底部導航器示例褂痰,這種開發(fā)模式廣泛應(yīng)用于App開發(fā)直晨,比如QQ,微信搀军,新浪等,關(guān)于Android底部導航欄的實現(xiàn)方式特別多勇皇,實現(xiàn)也是五花八門罩句,同時Google在自己推出的Material design中也增加了Bottom Navigation導航控制,實現(xiàn)起來更加簡單敛摘,且支持動態(tài)效果更加酷炫门烂,但是因為是基礎(chǔ)的知識,所以打算通過自定義來實現(xiàn)兄淫,不使用Bottom Navigation(如果是實際的項目開發(fā)可以考慮使用哈~~)屯远,希望對初學者有所幫助。
BottomNavigationBar 地址:https://github.com/Ashok-Varma/BottomNavigation
分析
整體區(qū)域分為兩部分:底部的導航區(qū)域和其余的內(nèi)容區(qū)域捕虽,內(nèi)容區(qū)域使用Fragment最為UI展示慨丐,底部導航區(qū)域添加點擊事件,點擊TAB切換Fragment,并做字體顏色和圖片的切換泄私,在切換上使用add()和hide()的方式房揭,不使用replase(),至于兩者的區(qū)別晌端,這里就不再說明了捅暴,感興趣的話可以谷歌。
底部導航通常由圖片和文字組成斩松,上面為ImageView伶唯,下面為TextView
底部Bottom
使用布局使用RelativeLayout,添加weight惧盹,平分屏幕寬度
<?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="@dimen/bottom_height"
android:background="@color/base_white"
android:orientation="vertical">
<View
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="@color/gray_line" />
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal">
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:id="@+id/layout_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/img_home"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerHorizontal="true"
android:src="@mipmap/icon_home_pressed" />
<TextView
android:id="@+id/tv_home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img_home"
android:layout_centerHorizontal="true"
android:text="首頁"
android:textColor="@color/bottom_text_color_pressed"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:id="@+id/layout_health"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/img_health"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerHorizontal="true"
android:src="@mipmap/icon_health_normal" />
<TextView
android:id="@+id/tv_health"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img_health"
android:layout_centerHorizontal="true"
android:text="健康"
android:textColor="@color/bottom_text_color_normal"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:id="@+id/layout_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/img_msg"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerHorizontal="true"
android:src="@mipmap/icon_msg_normal" />
<TextView
android:id="@+id/tv_msg"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img_msg"
android:layout_centerHorizontal="true"
android:text="消息"
android:textColor="@color/bottom_text_color_normal"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
>
<RelativeLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1">
<RelativeLayout
android:id="@+id/layout_usercenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true">
<ImageView
android:id="@+id/img_usercenter"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_centerHorizontal="true"
android:src="@mipmap/icon_user_normal" />
<TextView
android:id="@+id/tv_usercenter"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/img_usercenter"
android:layout_centerHorizontal="true"
android:text="我的"
android:textColor="@color/bottom_text_color_normal"
android:textSize="12sp" />
</RelativeLayout>
</RelativeLayout>
>
</LinearLayout>
</LinearLayout>
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<FrameLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
android:id="@+id/frame_content"
/>
<include layout="@layout/layout_bottom"/>
</LinearLayout>
MainActivity
public class MainActivity extends BaseActivity implements View.OnClickListener {
private RelativeLayout layout_home;
private RelativeLayout layout_health;
private RelativeLayout layout_msg;
private RelativeLayout layout_usercenter;
private ImageView img_home;
private ImageView img_health;
private ImageView img_msg;
private ImageView img_usercenter;
private TextView tv_home;
private TextView tv_health;
private TextView tv_msg;
private TextView tv_usercenter;
private Fragment[] fragments;
private int currentIndex;
private int index;
private int selectColor;
private int unSelectColor;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
init();
}
@Override
public void init() {
initViews();
initEvent();
initData();
}
public void initViews(){
layout_health=(RelativeLayout)findViewById(R.id.layout_health);
layout_home=(RelativeLayout)findViewById(R.id.layout_home);
layout_msg=(RelativeLayout)findViewById(R.id.layout_msg);
layout_usercenter=(RelativeLayout)findViewById(R.id.layout_usercenter);
img_home=(ImageView)findViewById(R.id.img_home);
img_health=(ImageView)findViewById(R.id.img_health);
img_msg=(ImageView)findViewById(R.id.img_msg);
img_usercenter=(ImageView)findViewById(R.id.img_usercenter);
tv_home=(TextView)findViewById(R.id.tv_home);
tv_health=(TextView)findViewById(R.id.tv_health);
tv_msg=(TextView)findViewById(R.id.tv_msg);
tv_usercenter=(TextView)findViewById(R.id.tv_usercenter);
}
public void initEvent(){
layout_home.setOnClickListener(this);
layout_health.setOnClickListener(this);
layout_msg.setOnClickListener(this);
layout_usercenter.setOnClickListener(this);
}
public void initData(){
selectColor=getResources().getColor(R.color.bottom_text_color_pressed);
unSelectColor=getResources().getColor(R.color.bottom_text_color_normal);
fragments=new Fragment[4];
fragments[0]= HomeFragment.getInstance();
fragments[1]= HealthFragment.getInstance();
fragments[2]= MsgFragment.getInstance();
fragments[3]= UserCenterFragment.getInstance();
getSupportFragmentManager().beginTransaction().add(R.id.frame_content,fragments[0]).commit();
}
@Override
public void onClick(View view) {
switch (view.getId()){
case R.id.layout_home:
index=0;
setTabs(index);
break;
case R.id.layout_health:
index=1;
setTabs(index);
break;
case R.id.layout_msg:
index=2;
setTabs(index);
break;
case R.id.layout_usercenter:
index=3;
setTabs(index);
break;
}
if(currentIndex!=index){
FragmentManager fm=getSupportFragmentManager();
FragmentTransaction ft=fm.beginTransaction();
ft.hide(fragments[currentIndex]);
if(!fragments[index].isAdded()){
ft.add(R.id.frame_content,fragments[index]);
}
ft.show(fragments[index]).commit();
}
currentIndex=index;
}
public void setTabs(int pos){
resetColor();
switch (pos){
case 0:
img_home.setImageResource(R.mipmap.icon_home_pressed);
tv_home.setTextColor(selectColor);
break;
case 1:
img_health.setImageResource(R.mipmap.icon_health_pressed);
tv_health.setTextColor(selectColor);
break;
case 2:
img_msg.setImageResource(R.mipmap.icon_msg_pressed);
tv_msg.setTextColor(selectColor);
break;
case 3:
img_usercenter.setImageResource(R.mipmap.icon_user_pressed);
tv_usercenter.setTextColor(selectColor);
break;
}
}
public void resetColor(){
img_home.setImageResource(R.mipmap.icon_home_normal);
img_health.setImageResource(R.mipmap.icon_health_normal);
img_msg.setImageResource(R.mipmap.icon_msg_normal);
img_usercenter.setImageResource(R.mipmap.icon_user_normal);
tv_home.setTextColor(unSelectColor);
tv_health.setTextColor(unSelectColor);
tv_msg.setTextColor(unSelectColor);
tv_usercenter.setTextColor(unSelectColor);
}
}
四個Fragment只是一個簡單的布局乳幸,里面放置了一個TextView,這里就不再貼出來O.o.
效果圖預(yù)覽: