Android实习札记(5)---Fragment之底部导航栏的实现

最新推荐文章于 2021-05-27 18:36:35 发布

代码拾荒者

最新推荐文章于 2021-05-27 18:36:35 发布

阅读量840

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/u014450015/article/details/50500639

这篇博客介绍了如何在Android应用中使用Fragment来实现底部导航栏功能。通过展示实现流程图和详细代码，作者逐步讲解了如何创建布局、初始化组件、处理点击事件以及切换Fragment，帮助读者理解这一常见UI设计的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Android实习札记(5)---Fragment之底部导航栏的实现

——转载请注明出处:coder-pig

在Part 4我们回顾了一下Fragment的基本概念,在本节中我们就来学习Fragment应用的简单例子吧!

就是使用Fragment来实现简单的底部导航栏,先贴下效果图:

看上去很简单,实现起来也是很简单的哈!那么接着下来就看下实现的流程图吧:

实现流程图:

看完流程图是不是有大概的思路了,那么接着就开始代码的编写吧:

代码实现:

①先写布局,布局的话很简单,一个FrameLayout用来放Fragment,底部一个大的LinearLayout

放着三个小Item,每个Item的布局如下:

[html] view plain copy print ?

<RelativeLayout
android:id="@+id/setting_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/setting_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_tabbar_settings_normal" />
<TextView
android:id="@+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="设置"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>

copy多两个,改下图片,文本资源就可以了,完整布局代码如下:

activity_main.xml

[html] view plain copy print ?

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<FrameLayout
android:id="@+id/content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" >
</FrameLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="#FFFFFF" >
<RelativeLayout
android:id="@+id/course_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/course_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_tabbar_course_normal" />
<TextView
android:id="@+id/course_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="日程"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/found_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/found_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_tabbar_found_normal" />
<TextView
android:id="@+id/found_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="发现"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/setting_layout"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1" >
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerVertical="true"
android:orientation="vertical" >
<ImageView
android:id="@+id/setting_image"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:src="@drawable/ic_tabbar_settings_normal" />
<TextView
android:id="@+id/setting_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="设置"
android:textColor="#7597B3" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
</LinearLayout>

②接着就写三个Fragment的布局,这个看你需要了,这里就一个TextView

写完一式三份,复制多两个,改下颜色和文字

fg1.xml

[html] view plain copy print ?

<?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="match_parent"
android:gravity="center"
android:background="#FAECD8"
android:orientation="vertical" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="日程表Fragment"
/>
</LinearLayout>

③接着写三个Fragment的实现类,同样一式三份,改下inflate加载的Fragment即可

Fragment1.java

[java] view plain copy print ?

package com.jay.example.fragmentforhost;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class Fragment1 extends Fragment {
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fg1, container,false);
return view;
}
}

④接着就到MainActivity的编写了,也很简单,自己看看吧,就不多解释了

就定义的几个方法,初始化选项,选中处理,以及隐藏所有Fragment的方法!

MainActivity.java

[java] view plain copy print ?

package com.jay.example.fragmentforhost;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.FrameLayout;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;
public class MainActivity extends FragmentActivity implements OnClickListener{
//定义3个Fragment的对象
private Fragment1 fg1;
private Fragment2 fg2;
private Fragment3 fg3;
//帧布局对象,就是用来存放Fragment的容器
private FrameLayout flayout;
//定义底部导航栏的三个布局
private RelativeLayout course_layout;
private RelativeLayout found_layout;
private RelativeLayout settings_layout;
//定义底部导航栏中的ImageView与TextView
private ImageView course_image;
private ImageView found_image;
private ImageView settings_image;
private TextView course_text;
private TextView settings_text;
private TextView found_text;
//定义要用的颜色值
private int whirt = 0xFFFFFFFF;
private int gray = 0xFF7597B3;
private int blue =0xFF0AB2FB;
//定义FragmentManager对象
FragmentManager fManager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
fManager = getSupportFragmentManager();
initViews();
}
//完成组件的初始化
public void initViews()
{
course_image = (ImageView) findViewById(R.id.course_image);
found_image = (ImageView) findViewById(R.id.found_image);
settings_image = (ImageView) findViewById(R.id.setting_image);
course_text = (TextView) findViewById(R.id.course_text);
found_text = (TextView) findViewById(R.id.found_text);
settings_text = (TextView) findViewById(R.id.setting_text);
course_layout = (RelativeLayout) findViewById(R.id.course_layout);
found_layout = (RelativeLayout) findViewById(R.id.found_layout);
settings_layout = (RelativeLayout) findViewById(R.id.setting_layout);
course_layout.setOnClickListener(this);
found_layout.setOnClickListener(this);
settings_layout.setOnClickListener(this);
}
//重写onClick事件
@Override
public void onClick(View view) {
switch (view.getId()) {
case R.id.course_layout:
setChioceItem(0);
break;
case R.id.found_layout:
setChioceItem(1);
break;
case R.id.setting_layout:
setChioceItem(2);
break;
default:
break;
}
}
//定义一个选中一个item后的处理
public void setChioceItem(int index)
{
//重置选项+隐藏所有Fragment
FragmentTransaction transaction = fManager.beginTransaction();
clearChioce();
hideFragments(transaction);
switch (index) {
case 0:
course_image.setImageResource(R.drawable.ic_tabbar_course_pressed);
course_text.setTextColor(blue);
course_layout.setBackgroundResource(R.drawable.ic_tabbar_bg_click);
if (fg1 == null) {
// 如果fg1为空，则创建一个并添加到界面上
fg1 = new Fragment1();
transaction.add(R.id.content, fg1);
} else {
// 如果MessageFragment不为空，则直接将它显示出来
transaction.show(fg1);
}
break;
case 1:
found_image.setImageResource(R.drawable.ic_tabbar_found_pressed);
found_text.setTextColor(blue);
found_layout.setBackgroundResource(R.drawable.ic_tabbar_bg_click);
if (fg2 == null) {
// 如果fg1为空，则创建一个并添加到界面上
fg2 = new Fragment2();
transaction.add(R.id.content, fg2);
} else {
// 如果MessageFragment不为空，则直接将它显示出来
transaction.show(fg2);
}
break;
case 2:
settings_image.setImageResource(R.drawable.ic_tabbar_settings_pressed);
settings_text.setTextColor(blue);
settings_layout.setBackgroundResource(R.drawable.ic_tabbar_bg_click);
if (fg3 == null) {
// 如果fg1为空，则创建一个并添加到界面上
fg3 = new Fragment3();
transaction.add(R.id.content, fg3);
} else {
// 如果MessageFragment不为空，则直接将它显示出来
transaction.show(fg3);
}
break;
}
transaction.commit();
}
//隐藏所有的Fragment,避免fragment混乱
private void hideFragments(FragmentTransaction transaction) {
if (fg1 != null) {
transaction.hide(fg1);
}
if (fg2 != null) {
transaction.hide(fg2);
}
if (fg3 != null) {
transaction.hide(fg3);
}
}
//定义一个重置所有选项的方法
public void clearChioce()
{
course_image.setImageResource(R.drawable.ic_tabbar_course_normal);
course_layout.setBackgroundColor(whirt);
course_text.setTextColor(gray);
found_image.setImageResource(R.drawable.ic_tabbar_found_normal);
found_layout.setBackgroundColor(whirt);
found_text.setTextColor(gray);
settings_image.setImageResource(R.drawable.ic_tabbar_settings_normal);
settings_layout.setBackgroundColor(whirt);
settings_text.setTextColor(gray);
}
}

最后说几句:

代码就上面的一点点,解析也很详细,看多两遍就应该能看懂了,

另外注意一点就是Fragment相关类导入的时候是v4包还是app包！

那里很容易出错的,关于app与v4包的Fragment可以看札记(3)的解析!

恩,这节就写到这里,下一节会实现Fragment与ViewPager的简单应用!

敬请期待!

本节代码下载:

http://pan.baidu.com/s/1gdel98B