Android Activity与Fragment实现底部导航器

2019-12-12 04:50:46

字体：大中小

来源：转载

供稿：网友

单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.

效果图预览：