Fragment底部导航栏

194 阅读3分钟

一个页面以微信为例,从上到下依次是状态栏,Activity顶部导航栏,Fragment,Activity底部导航栏。

每点击一个底部导航栏都会replace另一个Fragment。

目录

1 设置主界面

1.1 设置底部导航栏UI

1.2 设置底部导航栏图标变色

1.3 Fragment容器和底部导航栏的分割线

2 在Activity的Java代码中进行初始化

2.1 找控件

3 创建一个Fragment

3.1 设置Fragment的布局文件

3.2 找控件

3.3  重置文字

4 Fragment添加至容器中(默认首页)

4.1 获取FragmentManager对象

4.2 获取FragmentTransaction对象

4.3 替换Fragment

5 为每个线性布局添加点击事件

5.1 给底部导航栏的icon和文字变色


1 设置主界面

1.1 设置底部导航栏UI

首先先在主Activity中——的XML文件中设置一个Fragment容器FragmentContainerView,以及一个底部导航栏(用线性布局设置)。

而要让fragment容器占满大部分屏幕,则要把权重设为1。

而底部导航栏的每个UI元素也是权重比例都是1:1:1。

额外:可以单独开一个XML的Layout的XML文件,把底部导航栏放进去,到时候直接include一个layout属性就可以了。

1.2 设置底部导航栏图标变色

设置selector选择器,这个item每当被选择state_selected="true" 时指定一个@drawable触发变色。然后在xml文件中src设置图片。

1.3 Fragment容器和底部导航栏的分割线

View设置背景宽高——把高度设为2dp即可,颜色设置淡一点即可。


2 在Activity的Java代码中进行初始化

2.1 找控件

findViewById(线性布局容器,图片,文字等....)。


3 创建一个Fragment

3.1 设置Fragment的布局文件

你可以在Fragment的XML布局文件中设置各种各样的UI,这里只设置一个文字TextView。

3.2 找控件

findViewById(文字)。

3.3  重置文字

如果Fragment被创建出来的时候,传进来的参数不为空,则把传进来的参数设置到文字上面。


4 Fragment添加至容器中(默认首页)

4.1 获取FragmentManager对象

getSupportFragmentManager()获得一个FragmentManager对象。

4.2 获取FragmentTransaction对象

beginTransaction()获取一个 FragmentTransaction对象。

4.3 替换Fragment

new一个Fragment,用newInstance,并且还能传入参数。


5 为每个线性布局添加点击事件

实现点击事件接口,并实现onclick方法,通过switch的v.getID()判断

5.1 给底部导航栏的icon和文字变色

icon:setSelected(true);

文字:setTextColor(getResources().getColor(R.color.xxx));


注意点击icon的时候要给其他的icon变回来