效果图
废话少说，直接上效果图
底部导航栏（一）.gif
最近因为实验室的一个项目要大改，一直没时间来学习学习新的东西写篇博客，不过断断续续花了两周的时间总算是把项目弄好了。这篇博客主要是一周前写的Fragment的后续，都知道现在主流APP基本都会有底部导航栏，比如微信，微博，虎扑什么的无一例外使用了底部导航的设计。
本博客所记录的底部导航的实现可能在目前的实际应用中的应用价值不大，这里主要是为了巩固Fragment的使用。
底部导航栏布局
开始我准备使用TextView来实现底部导航的tab，但是我发现在textview中，使用drawable_top属性来指定文字上方附带的图标时，对于图标的大小有很大的限制，不能对图标进行缩放。所以我最后还是选择了使用TextView＋ImageView的Linearlayout的方式来组成tab。
资源文件
因为底部导航栏的每个tab需要有点击和未点击两种UI状态，所以需要为其准备资源文件。
例如图中的第一个tab主页，为Imageview建立一个xml资源文件home_back.xml;
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:drawable="@drawable/ic_home_select"/>
<item android:drawable="@drawable/ic_home"/>
</selector>
然后为TextView建立一个xml资源文件text_color_back.xml;
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_selected="true" android:color="@color/colorTextSelect"/>
<item android:color="@android:color/white"/>
</selector>
其他的三个tab的资源文件跟上面形式一样，照葫芦画瓢就行，这里安利两个图标网站，Android Material 材料风格图标LOGO生成器，阿里巴巴图标库，只能说见到这两个网站有一种想见恨晚的感觉。
主界面布局
准备好了资源文件之后就可以编写主界面的布局，主界面的布局主要就包括底部的四个竖直方向LinearLayout，而每一个LinearLayout都是由ImageView和TextView组成；
布局另外的部分就主要是提供给显示Fragment，这里用FrameLayout进行定位，主界面布局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:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.android.tu.fragmenttest.MainActivity">
<LinearLayout
android:id="@+id/tab_linear"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:background="@color/colorPrimary">
<LinearLayout
android:id="@+id/linear_home"
style="@style/TabLinear">
<ImageView
style="@style/TabImageStyle"
android:src="@drawable/home_back"/>
<TextView
android:text="主页"
android:textColor="@drawable/text_color_back"
style="@style/TabTextStyle"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_list"
style="@style/TabLinear">
<ImageView
style="@style/TabImageStyle"
android:src="@drawable/list_back"/>
<TextView
android:text="消息"
android:textColor="@drawable/text_color_back"
style="@style/TabTextStyle"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_polymer"
style="@style/TabLinear">
<ImageView
style="@style/TabImageStyle"
android:src="@drawable/polymer_back"/>
<TextView
android:text="扩展"
android:textColor="@drawable/text_color_back"
style="@style/TabTextStyle"/>
</LinearLayout>
<LinearLayout
android:id="@+id/linear_user"
style="@style/TabLinear">
<ImageView
style="@style/TabImageStyle"
android:src="@drawable/user_back" />
<TextView
android:text="设置"
android:textColor="@drawable/text_color_back"
style="@style/TabTextStyle"/>
</LinearLayout>
</LinearLayout>
<FrameLayout
android:id="@+id/fragment_frame"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_above="@+id/tab_linear">
</FrameLayout>
</RelativeLayout>
其他的就不多说了，有一点要说的就是在底部的布局中都用到了style，因为这四个tab中的控件都有多个属性相同，所以就提取出来为一个style，在styles.xml文件中定义，例如
<style name="TabImageStyle">
<item name="android:layout_width">35dp</item>
<item name="android:layout_height">35dp</item>
<item name="android:layout_gravity">center_horizontal</item>
</style>
这是底部ImageView提取出来的共同属性，其他的以此类推。
Fragment布局
在实际应用中一般一个Fragmen会对应一个自己的xml布局文件，但在此demo为了演示简单就只用了一个布局文件。
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/fragment_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:gravity="center"
android:textSize="30sp"/>
</RelativeLayout>
自定义Fragment
布局文件都完成了，下面就是处理各种逻辑交互了，首先自定义一个Fragment，引入相应布局
public class FragmentTest extends Fragment{
private String fragmentText;
private TextView fragmentTextView;
public FragmentTest(String fragmentText) {
this.fragmentText=fragmentText;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(R.layout.test_fragment,container,false);
fragmentTextView= (TextView) view.findViewById(R.id.fragment_text);
fragmentTextView.setText(fragmentText);
return view;
}
}
这段代码基本就是前一篇文中说到的Fragment的基本使用的知识了，在onCreatView中加载布局文件，另外还给Fragment定义了一个带String类型的构造函数，用于让TextView来显示不同文字以区分不同的Fragment
底部导航的实现
前面的工作基本都是在做准备，在MainActivity中实现底部导航的功能才是重点。
首先可以说一下实现的大体思路，要导航就是点击相应的tab就切换显示对应的Fragment，所以其实很简单。
- 首先为每一个tab的LinearLayout设置点击事件的监听，当点击tab时，将所有的Fragment都隐藏起来；
- 然后先把所有的tab设置为未选中的状态，再把点击的tab设为选中的状态；
- 最后就是切换到对应Fragment，先判断当前tab对应的Fragment是否有初始化，若已经初始化就直接显示出来，若没有初始化，就先利用fragment的带一个String参数的构造函数初始化一个，然后利用FragmentTransaction的实例将该Fragment添加到对应的布局；
代码如下：
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
LinearLayout homeLinear;
LinearLayout listLinear;
LinearLayout polyLinear;
LinearLayout userLinear;
FragmentTest fragmentHome,fragmentList,fragmentPoly,fragmentUser;
private FragmentManager mfragmentManger;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
homeLinear= (LinearLayout) findViewById(R.id.linear_home);
listLinear= (LinearLayout) findViewById(R.id.linear_list);
polyLinear= (LinearLayout) findViewById(R.id.linear_polymer);
userLinear= (LinearLayout) findViewById(R.id.linear_user);
homeLinear.setOnClickListener(this);
listLinear.setOnClickListener(this);
polyLinear.setOnClickListener(this);
userLinear.setOnClickListener(this);
mfragmentManger = getSupportFragmentManager();
homeLinear.performClick();
}
@Override
public void onClick(View view) {
FragmentTransaction fragmentTransaction = mfragmentManger.beginTransaction();//只能是局部变量，不能为全局变量，否则不能重复commit
//FragmentTransaction只能使用一次
hideAllFragment(fragmentTransaction);
switch (view.getId()){
case R.id.linear_home:
setAllFalse();
homeLinear.setSelected(true);
if (fragmentHome==null){
fragmentHome=new FragmentTest("Home");
fragmentTransaction.add(R.id.fragment_frame,fragmentHome);
}else{
fragmentTransaction.show(fragmentHome);
}
break;
case R.id.linear_list:
setAllFalse();
listLinear.setSelected(true);
if(fragmentList==null){
fragmentList=new FragmentTest("List");
fragmentTransaction.add(R.id.fragment_frame,fragmentList);
}else {
fragmentTransaction.show(fragmentList);
}
break;
case R.id.linear_polymer:
setAllFalse();
polyLinear.setSelected(true);
if(fragmentPoly==null){
fragmentPoly=new FragmentTest("Polymer");
fragmentTransaction.add(R.id.fragment_frame,fragmentPoly);
}else {
fragmentTransaction.show(fragmentPoly);
}
break;
case R.id.linear_user:
setAllFalse();
userLinear.setSelected(true);
if(fragmentUser==null){
fragmentUser=new FragmentTest("User");
fragmentTransaction.add(R.id.fragment_frame,fragmentUser);
}else {
fragmentTransaction.show(fragmentUser);
}
break;
}
fragmentTransaction.commit();//记得必须要commit,否则没有效果
}
private void hideAllFragment(FragmentTransaction fragmentTransaction) {
if(fragmentHome!=null){
fragmentTransaction.hide(fragmentHome);
}
if(fragmentList!=null){
fragmentTransaction.hide(fragmentList);
}
if(fragmentPoly!=null){
fragmentTransaction.hide(fragmentPoly);
}
if(fragmentUser!=null){
fragmentTransaction.hide(fragmentUser);
}
}
private void setAllFalse() {
homeLinear.setSelected(false);
listLinear.setSelected(false);
polyLinear.setSelected(false);
userLinear.setSelected(false);
}
}
这样就已经实现了底部导航的效果，其实很简单，主要的知识都是在Fragment的基本使用中提到过的，就有一个performClick方法我是第一次用，这个是为了模拟一次点击事件，让主界面打开的时候初始化某一个Fragment。
这篇文章因为主要是为了巩固Fragment的使用，没有什么新的知识点，所以以代码为主，后续还会写一些底部导航栏的其他实现方式。
欢迎批评指正，小弟不胜感激。
2017.4.10 15:37
806实验室
网友评论