Android程序开发之Fragment实现底部导航栏实例代码

流行的应用的导航一般分为两种，一种是底部导航，一种是侧边栏。

说明

IDE：AS，Android studio;
模拟器：genymotion;

实现的效果，见下图。

具体实现

为了讲明白这个实现过程，我们贴出来的代码多一写，这样更方便理解 [最后还会放出完整的代码实现] 。看上图的界面做的比较粗糙，但实现过程的骨架都具有了，想要更完美的设计，之后自行完善吧 ^0^。

布局

通过观察上述效果图，发现任意一个选项页面都有三部分组成：

顶部去除ActionBar后的标题栏；

中间一个FragmentLayout用来放相应的Fragment；

底部一个大的LinearLayout放着四个样式一样的（ImagView + TextView）的小Item。

(1) 完整具体的代码，详见：show_main_lay.xml，通过注释可以看到该布局的三部分组成。

附上源码截图吧：

(2) 对于布局的第一部分的顶部标题栏，代码请见：title_layout.xml:

android:layout_width="match_parent"
android:layout_height="56dp"
android:background="@color/colorPrimaryDark"
android:orientation="horizontal">
android:id="@+id/title_imv"
android:layout_width="30dp"
android:layout_height="30dp"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:src="@android:drawable/ic_menu_more" />
android:id="@+id/title_text_tv"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="首 页"
android:textSize="20sp"
android:textColor="@color/bg_color"/>

见下截图：

(3) 布局中间的第二部分我们再分别建立4个.xml布局文件，分别命名为：fg1.xml、fg2.xml、fg3.xml、fg4.xml，内容上只更改一下TextView中的文字说明，如第一个页面，改为第二个页面。下面只给出其中一个fg1.xml：

如图：

（4） 这里也给出Values目录下的colors.xml内容吧，颜色还是比较完整的但是名字不好记：

#3F51B5
#303F9F
#FF4081
#EDEDED
#ff000000
#ffffffff
#ffcccccc
#ff404040
#c0ffff00
#ffffffff
#ffc0c0c0
#c000ff00
#ffffffff
#b0000000
#ff808080
#ffffffff
#fffff0e0
#ffffffff
#ff000000
#ff4b4b4b
#ff000000
#ffffffff
#50000000
#ffffffff
#00000000
#ffffffff
#ffff0000
#60000000
#58567D
#686868
#FFFFFF

#FFFFF0

#FFFFE0

#FFFF00

#FFFAFA

#FFFAF0

#FFFACD

#FFF8DC

#FFF5EE

#FFF0F5

#FFEFD5

#FFEBCD

#FFE4E1

#FFE4C4

#FFE4B5

#FFDEAD

#FFDAB9

#FFD700

#FFC0CB

#FFB6C1

#FFA500

#FFA07A

#FF8C00

#FF7F50

#FF69B4

#FF6347

#FF4500

#FF1493

#FF00FF

#FF00FF

#FF0000

#FDF5E6

#FAFAD2

#FAF0E6

#FAEBD7

#FA8072

#F8F8FF

#F5FFFA

#F5F5F5

#F5F5DC

#F5DEB3

#F4A460

#F0FFFF

#F0FFF0

#F0F8FF

#F0E68C

#F08080

#EEE8AA

#EE82EE

#E9967A

#E6E6FA

#E0FFFF

#DEB887

#DDA0DD

#DCDCDC

#DC143C

#DB7093

#DAA520

#DA70D6

#D8BFD8

#D3D3D3

#D3D3D3

#D2B48C

#D2691E

#CD853F

#CD5C5C

#C71585

#C0C0C0

#BDB76B

#BC8F8F

#BA55D3

#B8860B

#B22222

#B0E0E6

#B0C4DE

#AFEEEE

#ADFF2F

#ADD8E6

#A9A9A9

#A9A9A9

#A52A2A

#A0522D

#9932CC

#98FB98

#9400D3

#9370DB

#90EE90

#8FBC8F

#8B4513

#8B008B

#8B0000

#8A2BE2

#87CEFA

#87CEEB

#808080

#808080

#808000

#800080

#800000

#7FFFD4

#7FFF00

#7CFC00

#7B68EE

#778899

#778899

#708090

#708090

#6B8E23

#6A5ACD

#696969

#696969

#66CDAA

#6495ED

#5F9EA0

#556B2F

#4B0082

#48D1CC

#483D8B

#4682B4

#4169E1

#40E0D0

#3CB371

#32CD32

#2F4F4F

#2F4F4F

#2E8B57

#228B22

#20B2AA

#1E90FF

#191970

#00FFFF

#00FFFF

#00FF7F

#00FF00

#00FA9A

#00CED1

#00BFFF

#008B8B

#008080

#008000

#006400

#0000FF

#0000CD

#00008B

#000080

#000000

如图：

那么到这里我们的界面布局就基本完成了！

相应Fragment的实现类

接下来我们需要写四个相应的Fragment的实现类，同样拷贝4份，改用inflate加载Fragment即可。即，包含四个差不多一样的Fragment,分别起名为：FirstFragment.java、SecondFragment.java、ThirdFragment.java、FourthFragment.java。下面主要展示一下FirstFragment.java的具体代码：

package com.example.dm.myapplication;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
/**
* Created by dm on 16-3-29.
* 第一个页面
*/
public class FirstFragment extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fg1, container, false);
return view;
}
}

如图：

最重要的MainActivity

各个七零八落的小部件都已经准备到序了，现在只剩下这个主界面实现类把他们融合在一起，实现相应的效果了。

MainActivity.java 的编写也很简单，直接看代码和注释就可以了，不多解释额：主要包含几个初始化方法、选中处理、隐藏所有Fragment的方法。详见MainActivity.java：

package com.example.dm.myapplication;
import android.content.Intent;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity; // 注意这里我们导入的V4的包，不要导成app的包了
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
/**
* 主页面内容
* Created by dm on 16-1-19.
*/
public class MainActivity extends FragmentActivity implements View.OnClickListener {
// 初始化顶部栏显示
private ImageView titleLeftImv;
private TextView titleTv;
// 定义4个Fragment对象
private FirstFragment fg1;
private SecondFragment fg2;
private ThirdFragment fg3;
private FourthFragment fg4;
// 帧布局对象，用来存放Fragment对象
private FrameLayout frameLayout;
// 定义每个选项中的相关控件
private RelativeLayout firstLayout;
private RelativeLayout secondLayout;
private RelativeLayout thirdLayout;
private RelativeLayout fourthLayout;
private ImageView firstImage;
private ImageView secondImage;
private ImageView thirdImage;
private ImageView fourthImage;
private TextView firstText;
private TextView secondText;
private TextView thirdText;
private TextView fourthText;
// 定义几个颜色
private int whirt = 0xFFFFFFFF;
private int gray = 0xFF7597B3;
private int dark = 0xff000000;
// 定义FragmentManager对象管理器
private FragmentManager fragmentManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.show_main_lay);
fragmentManager = getSupportFragmentManager();
initView(); // 初始化界面控件
setChioceItem(0); // 初始化页面加载时显示第一个选项卡
}
/**
* 初始化页面
*/
private void initView() {
// 初始化页面标题栏
titleLeftImv = (ImageView) findViewById(R.id.title_imv);
titleLeftImv.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
startActivity(new Intent(MainActivity.this, LoginActivity.class));
}
});
titleTv = (TextView) findViewById(R.id.title_text_tv);
titleTv.setText("首 页");
// 初始化底部导航栏的控件
firstImage = (ImageView) findViewById(R.id.first_image);
secondImage = (ImageView) findViewById(R.id.second_image);
thirdImage = (ImageView) findViewById(R.id.third_image);
fourthImage = (ImageView) findViewById(R.id.fourth_image);
firstText = (TextView) findViewById(R.id.first_text);
secondText = (TextView) findViewById(R.id.second_text);
thirdText = (TextView) findViewById(R.id.third_text);
fourthText = (TextView) findViewById(R.id.fourth_text);
firstLayout = (RelativeLayout) findViewById(R.id.first_layout);
secondLayout = (RelativeLayout) findViewById(R.id.second_layout);
thirdLayout = (RelativeLayout) findViewById(R.id.third_layout);
fourthLayout = (RelativeLayout) findViewById(R.id.fourth_layout);
firstLayout.setOnClickListener(MainActivity.this);
secondLayout.setOnClickListener(MainActivity.this);
thirdLayout.setOnClickListener(MainActivity.this);
fourthLayout.setOnClickListener(MainActivity.this);
}
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.first_layout:
setChioceItem(0);
break;
case R.id.second_layout:
setChioceItem(1);
break;
case R.id.third_layout:
setChioceItem(2);
break;
case R.id.fourth_layout:
setChioceItem(3);
break;
default:
break;
}
}
/**
* 设置点击选项卡的事件处理
*
* @param index 选项卡的标号：0, 1, 2, 3
*/
private void setChioceItem(int index) {
FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
clearChioce(); // 清空, 重置选项, 隐藏所有Fragment
hideFragments(fragmentTransaction);
switch (index) {
case 0:
// firstImage.setImageResource(R.drawable.XXXX); 需要的话自行修改
firstText.setTextColor(dark);
firstLayout.setBackgroundColor(gray);
// 如果fg1为空，则创建一个并添加到界面上
if (fg1 == null) {
fg1 = new FirstFragment();
fragmentTransaction.add(R.id.content, fg1);
} else {
// 如果不为空，则直接将它显示出来
fragmentTransaction.show(fg1);
}
break;
case 1:
// secondImage.setImageResource(R.drawable.XXXX);
secondText.setTextColor(dark);
secondLayout.setBackgroundColor(gray);
if (fg2 == null) {
fg2 = new SecondFragment();
fragmentTransaction.add(R.id.content, fg2);
} else {
fragmentTransaction.show(fg2);
}
break;
case 2:
// thirdImage.setImageResource(R.drawable.XXXX);
thirdText.setTextColor(dark);
thirdLayout.setBackgroundColor(gray);
if (fg3 == null) {
fg3 = new ThirdFragment();
fragmentTransaction.add(R.id.content, fg3);
} else {
fragmentTransaction.show(fg3);
}
break;
case 3:
// fourthImage.setImageResource(R.drawable.XXXX);
fourthText.setTextColor(dark);
fourthLayout.setBackgroundColor(gray);
if (fg4 == null) {
fg4 = new FourthFragment();
fragmentTransaction.add(R.id.content, fg4);
} else {
fragmentTransaction.show(fg4);
}
break;
}
fragmentTransaction.commit(); // 提交
}
/**
* 当选中其中一个选项卡时，其他选项卡重置为默认
*/
private void clearChioce() {
// firstImage.setImageResource(R.drawable.XXX);
firstText.setTextColor(gray);
firstLayout.setBackgroundColor(whirt);
// secondImage.setImageResource(R.drawable.XXX);
secondText.setTextColor(gray);
secondLayout.setBackgroundColor(whirt);
// thirdImage.setImageResource(R.drawable.XXX);
thirdText.setTextColor(gray);
thirdLayout.setBackgroundColor(whirt);
// fourthImage.setImageResource(R.drawable.XXX);
fourthText.setTextColor(gray);
fourthLayout.setBackgroundColor(whirt);
}
/**
* 隐藏Fragment
*
* @param fragmentTransaction
*/
private void hideFragments(FragmentTransaction fragmentTransaction) {
if (fg1 != null) {
fragmentTransaction.hide(fg1);
}
if (fg2 != null) {
fragmentTransaction.hide(fg2);
}
if (fg3 != null) {
fragmentTransaction.hide(fg3);
}
if (fg4 != null) {
fragmentTransaction.hide(fg4);
}
}
}

见图：

到这里我们的功能就基本实现了，是不是还挺简单的。

注意

Fragment相关类导入的时候是v4包还是app包！我们这里导入的是V4的包，在代码的注释部分，已经给出说明；

在完整的代码包中，我们还添加了App启动界面及动画、登录界面，这两部分的内容，这里不做具体的说明，之后继续完善。

以上内容是小逼给大家分享的Android程序开发之Fragment实现底部导航栏实例代码，希望对大家有所帮助！