Android个人学习笔记-底部导航切换Fragment的实现

前言：虽然经常来CSDN，但是打开自己的博客一看，竟然已经有一年没有更新了，今年刚刚考上计算机研究生，生活也算是一个新的开始，但是作为一个程序员，这可不是一个正常频率，所以接下来的时间还是要保持一定的更新，也算是督促自己继续学习。这篇文章是采用markdown编写的，刚使用没多久，排版不好，敬请谅解。本文主要针对初学者，大牛们请忽略，因为我也是初学者（好几年了还在原地踏步啊！！！）废话太多，下面全是干货（可能会有水货~~~）

底部导航思路

如果你大致了解该部分的思路，那请直接看代码实现部分。

因为我是学习javaweb出身，所以在网页端千奇百怪的导航栏可以供我们直接使用，但在Android端里，导航的实现就需要我们一步步的实现。底部导航的实现可以借鉴微信、微博的布局（如下图）



图中1部分为底部2部分切换显示的内容，在具体的实现过程中，我们可以通过一个主布局，该布局包含一个底部的栏和内容显示栏，也即是1部分和2部分。其中1部分应该用来容纳不同的Fragment，2部分可以采用按钮Button或者TextView来实现。通过监听2部分的点击事件来切换1部分的Fragment，怎么样是不是很简单，下面就开始进行实际的开发。

项目的建立

该部分的项目为一个小的demo，本文具体在于介绍底部导航的实现，所以命名等方面可能不是很规范，其他的方面大家自行屏蔽吧~~~

先上图





图中主要使用的为fragment包和MainActivity类，其中fragment包包含的是不同fragment的切换，MainActivity主要用来展示首页和进行fragment的切换。

布局文件图主要有activity_main.xml和四个fragment布局。

代码实现

首先先看一下效果图，再来看具体的代码：



图中底部有四个TextView，设置点击监听事件，点击后切换显示内容

首先我们来看布局文件：

主布局文件activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/activity_main"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:clipToPadding="true"
android:background="@drawable/background_title"
tools:context="yu.zmqc.followme.MainActivity">
<LinearLayout
android:id="@+id/bottom_menu"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:layout_alignParentBottom="true">
<TextView
android:id="@+id/txt_main"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:background="@drawable/tab_menu_main_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_main_img"
android:gravity="center"
android:textColor="@drawable/tab_menu_main_txt"
android:paddingTop="5dp"
android:text="首页"/>
<TextView
android:id="@+id/txt_clock"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_clock_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_clock_img"
android:gravity="center"
android:textColor="@drawable/tab_menu_clock_txt"
android:paddingTop="5dp"
android:text="收藏"/>
<TextView
android:id="@+id/txt_search"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_main_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_search_img"
android:gravity="center"
android:textColor="@drawable/tab_menu_main_txt"
android:paddingTop="5dp"
android:text="搜索"/>
<TextView
android:id="@+id/txt_user"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:background="@drawable/tab_menu_main_bg"
android:drawablePadding="3dp"
android:drawableTop="@drawable/tab_menu_user_img"
android:gravity="center"
android:textColor="@drawable/tab_menu_main_txt"
android:paddingTop="5dp"
android:text="我"/>
</LinearLayout>
<FrameLayout
android:id="@+id/main_fragment_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@id/bottom_menu"
android:background="#F1F1F1">
</FrameLayout>
</RelativeLayout>

该文件已经经过了删减，如截图有一些不同，通过布局可以看出主布局主要包含四个textView和一个FrameLayout（用来包含Fragment）

Fragment布局文件fragment_main_xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#BED4F1"
android:orientation="horizontal"
android:id="@+id/line"
>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/line"
android:id="@+id/line2"
>
<!-- 添加一个ListView控件 -->
<ListView
android:id="@+id/main_listview"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
</LinearLayout>
</RelativeLayout>

其实该部分的代码没有太多的意义，针对你的不同需求，可以将该部分改成你需要的页面布局，其余的四个布局也就不一一贴出了。

MainActivity.java

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

//底部四个点击TextView
private TextView txt_main;
private TextView txt_clock;
private TextView txt_search;
private TextView txt_user;
//fragmet嵌入在这里
private FrameLayout main_frameLayout;
//Fragment管理
private FragmentManager fragmentManager;
//Fragment类
private MainFragment mainFragment;
private ClockFragment clockFragment;
private SearchFragment searchFragment;
private UserFragment userFragment;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initUI();
}

private void initUI(){
txt_main = (TextView)findViewById(R.id.txt_main);
txt_clock = (TextView)findViewById(R.id.txt_clock);
txt_search = (TextView)findViewById(R.id.txt_search);
txt_user = (TextView)findViewById(R.id.txt_user);
//framlayout获取
main_frameLayout = (FrameLayout)findViewById(R.id.main_fragment_container);
//设置监听器
txt_main.setOnClickListener(this);
txt_user.setOnClickListener(this);
txt_search.setOnClickListener(this);
txt_clock.setOnClickListener(this);

fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
mainFragment = new MainFragment();
transaction.add(R.id.main_fragment_container,mainFragment);
transaction.commit();

txt_main.setSelected(true);
}

@Override
public void onClick(View view) {
//v4包导入getSupportFragmentManager，app包使用getFragmentManager，app包3.0后才使用
fragmentManager = getSupportFragmentManager();
FragmentTransaction transaction = fragmentManager.beginTransaction();
hideAllFragment(transaction);
switch (view.getId()){

case R.id.txt_main:
reTxtSelect();
txt_main.setSelected(true);
if(mainFragment==null){
mainFragment = new MainFragment();
transaction.add(R.id.main_fragment_container,mainFragment);
}else{
transaction.show(mainFragment);
}
break;
case R.id.txt_clock:
reTxtSelect();
txt_clock.setSelected(true);
if(clockFragment==null){
clockFragment = new ClockFragment();
transaction.add(R.id.main_fragment_container,clockFragment);
}else{
transaction.show(clockFragment);
}
break;
case R.id.txt_search:
reTxtSelect();
txt_search.setSelected(true);
if(searchFragment==null){
searchFragment = new SearchFragment();
transaction.add(R.id.main_fragment_container,searchFragment);
}else{
transaction.show(searchFragment);
}
break;
case R.id.txt_user:
reTxtSelect();
txt_user.setSelected(true);
if(userFragment==null){
userFragment = new UserFragment();
transaction.add(R.id.main_fragment_container,userFragment);
}else{
transaction.show(userFragment);
}
break;

}

transaction.commit();

}

//初始化底部菜单选择状态
private void reTxtSelect(){
txt_main.setSelected(false);
txt_clock.setSelected(false);
txt_search.setSelected(false);
txt_user.setSelected(false);
}

//隐藏所有Fragment
public void hideAllFragment(FragmentTransaction transaction){
if(mainFragment!=null){
transaction.hide(mainFragment);
}
if(clockFragment!=null){
transaction.hide(clockFragment);
}
if(searchFragment!=null){
transaction.hide(searchFragment);
}
if(userFragment!=null){
transaction.hide(userFragment);
}
}
}

主类的主要步骤就是获得布局中的四个TextView，然后根据监听点击事件动态切换不同的Fragment。

Fragment类主要代码如下，因为具体的实现需要你自己去添加，该部分只需要一个思路即可：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_main,container,false);
return view;
}

4.一些注意事项

前面主要从思路代码进行了具体的分析，经过简单的修正，我还是自己动手写了一个demo出来，供初学者使用，项目基本包含，一个MainActivity，一个主布局activity_main.xml和四个fragment布局，项目地址在文末给出，实现的具体效果如下：





除此之外分享几个项目编写过程中的注意事项，首先给大家一个下载app图标地址（点击就可以跳转），我们可以在该网站找到自己需要的图标，还支持自定义编辑，简直是程序员的福音。

项目中底部图标使用TextView中的drawableTop属性添加图片，图片采用xml的形式，也即是有点击选中效果，drawablePadding属性主要是设置图片与文字的距离，建议高宽选择wrap_content，因为当你选择match_parent时，无论怎么调整距离都会使得图片跟文字拉的很远，这也是实际开发中遇到的，如果要想使得空白距变大，那再添加一个线性布局吧，可能有更好的方法欢迎大家指教，下面是图片的xml文件，该文件作为底部导航点击文本的drawableTop文件，其中项目中还涉及到了背景的选中变色和字体的选中变色，大体的思路一样：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/home_"
android:state_selected="true"
/>
<!--未点击时背景图片没有变化-->
<item android:drawable="@mipmap/home"/>
</selector>

具体可以参照项目中的实现

5.项目文件

Android studio2.2开发工具

百度云

CSDN