Android Activity与Fragment实现底部导航器

单Activity多Fragment实现底部导航器

最近由于Android基础知识讲解需要，采用单Activity多Fragment实现类似QQ底部导航器示例，这种开发模式广泛应用于App开发，比如QQ,微信，新浪等，关于Android底部导航栏的实现方式特别多，实现也是五花八门，同时Google在自己推出的Material design中也增加了Bottom Navigation导航控制，实现起来更加简单，且支持动态效果更加酷炫，但是因为是基础的知识，所以打算通过自定义来实现，不使用Bottom Navigation（如果是实际的项目开发可以考虑使用哈~~），希望对初学者有所帮助。

BottomNavigationBar 地址：https://github.com/Ashok-Varma/BottomNavigation

分析

整体区域分为两部分：底部的导航区域和其余的内容区域，内容区域使用Fragment最为UI展示，底部导航区域添加点击事件，点击TAB切换Fragment,并做字体颜色和图片的切换，在切换上使用add()和hide()的方式，不使用replase()，至于两者的区别，这里就不再说明了，感兴趣的话可以谷歌。

整体结构

底部导航通常由图片和文字组成，上面为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.

效果图预览：

效果图

感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！