Android Activity與Fragment實(shí)現(xiàn)底部導(dǎo)航器

2019-12-12 04:50:46

字體：大中小

供稿：網(wǎng)友

單Activity多Fragment實(shí)現(xiàn)底部導(dǎo)航器

最近由于Android基礎(chǔ)知識(shí)講解需要，采用單Activity多Fragment實(shí)現(xiàn)類(lèi)似QQ底部導(dǎo)航器示例，這種開(kāi)發(fā)模式廣泛應(yīng)用于App開(kāi)發(fā)，比如QQ,微信，新浪等，關(guān)于Android底部導(dǎo)航欄的實(shí)現(xiàn)方式特別多，實(shí)現(xiàn)也是五花八門(mén)，同時(shí)Google在自己推出的Material design中也增加了Bottom Navigation導(dǎo)航控制，實(shí)現(xiàn)起來(lái)更加簡(jiǎn)單，且支持動(dòng)態(tài)效果更加酷炫，但是因?yàn)槭腔A(chǔ)的知識(shí)，所以打算通過(guò)自定義來(lái)實(shí)現(xiàn)，不使用Bottom Navigation（如果是實(shí)際的項(xiàng)目開(kāi)發(fā)可以考慮使用哈~~），希望對(duì)初學(xué)者有所幫助。

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

分析

整體區(qū)域分為兩部分：底部的導(dǎo)航區(qū)域和其余的內(nèi)容區(qū)域，內(nèi)容區(qū)域使用Fragment最為UI展示，底部導(dǎo)航區(qū)域添加點(diǎn)擊事件，點(diǎn)擊TAB切換Fragment,并做字體顏色和圖片的切換，在切換上使用add()和hide()的方式，不使用replase()，至于兩者的區(qū)別，這里就不再說(shuō)明了，感興趣的話可以谷歌。

整體結(jié)構(gòu)

底部導(dǎo)航通常由圖片和文字組成，上面為ImageView，下面為T(mén)extView

底部導(dǎo)航

底部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="首頁(yè)"          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);  }}

四個(gè)Fragment只是一個(gè)簡(jiǎn)單的布局，里面放置了一個(gè)TextView,這里就不再貼出來(lái)O.o.

效果圖預(yù)覽：