Android Activity與Fragment實現底部導航器_Android

單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()，至於兩者的區別，這裡就不再說明了，感興趣的話可以Google。

整體結構

底部導航通常由圖片和文字組成，上面為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.

效果圖預覽：

效果圖

感謝閱讀，希望能協助到大家，謝謝大家對本站的支援！