Android 底部导航栏界面(Fragment)

最近在做项目时，需要实现底部导航栏界面，在查找了一些资料及前辈写的代码后，自己实现了界面，如下图所示：



完成如上图所示的丢导航栏界面有很多种方法，因为本人的能力问题，目前只知道两种，一种为ViewPager,另一种则为Fragment，此次在这里讲解的是Fragment实现底部导航栏的方法。

Fragment如何产生，什么是Fragment，Fragment生命周期，如何静态和动态使用Fragment，Fragment回退栈，Fragment事务，以及Fragment的一些特殊用途，例如：没有布局的Fragment有何用处？Fragment如何与Activiy交互？Fragment如何创建对话框？Fragment如何与ActionBar集成等等...在此我不做特别的讲解，可以看如下的网址：/article/5156246.html,在此我只讲解此界面是如何做成的。

1 总体框架：



2 布局文件：

activity_main.xml

<LinearLayout 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"
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="wrap_content"
android:layout_height="60dip"
android:background="@drawable/black"
>
<RelativeLayout
android:id="@+id/date"
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/datephoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clickable="true"
android:background="@drawable/change_photo" />
<TextView
android:id="@+id/datezi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="日期"/>
</LinearLayout>
</RelativeLayout>
<RelativeLayout
android:id="@+id/find"
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/findphoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"

android:clickable="true"
android:background="@drawable/change_photo1" />
<TextView
android:id="@+id/findzi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="留言"/>
</LinearLayout>
</RelativeLayout>

<RelativeLayout
android:id="@+id/message"
android:layout_width="0dip"
android:layout_height="wrap_content"
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/messagephoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:layout_marginTop="4.5dip"
android:clickable="true"
android:background="@drawable/message1" />
<TextView
android:id="@+id/messagezi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="消息"
android:textColor="#82858b"/>

</LinearLayout>

</RelativeLayout>

<RelativeLayout
android:id="@+id/set"
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/setphoto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:clickable="true"
android:background="@drawable/change_photo2" />
<TextView
android:id="@+id/setzi"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:text="设置"
android:textColor="#82858b"/>
</LinearLayout>
</RelativeLayout>

</LinearLayout>
</LinearLayout>

另外四个为Fragment布局文件：

<?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:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="哈哈哈"
android:textSize="25sp"/>

</LinearLayout>

<?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:orientation="vertical" >

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="还好还好\(^o^)/~"
android:textSize="25sp"/>
</LinearLayout>

<?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:orientation="vertical"
android:background="#DCDCDC">

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="这时Fragment"
android:textSize="25sp"/>

</LinearLayout>

<?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:orientation="vertical"
android:background="#DCDCDC"
>

<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="sdfsdfsdfds"
android:textSize="25sp"/>

</LinearLayout>

3 实现逻辑功能的.java文件
MainActivity.java

实现了对Fragment的显示，加载，隐藏

package com.example.textfragement;

import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.ActionBarActivity;
import android.graphics.Color;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.Window;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends FragmentActivity implements OnClickListener {

/*----用于展示动态的fragment*/
private dateFragement showdate;
private findFragment  showfind;
private setupFragment showsetup;
private messageFragment showmessage;

/*-------用于的界面布局  ---------*/
private View  datelayout;
private View  findlayout;
private View setupolayout;
private View messagelayout;

private ImageView  one1;
private ImageView  two1;
private ImageView  three1;
private ImageView  four1;
private TextView   one;
private TextView   two;
private TextView   three;
private TextView   four;

private FragmentManager frangementmanager; //用于对fragement处理

@Override
protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);
requestWindowFeature(Window.FEATURE_NO_TITLE);

setContentView(R.layout.activity_main);
frangementmanager =   getSupportFragmentManager() ;
init();
setTabSelection(0);

}

public void init(){
datelayout = findViewById(R.id.date);
findlayout = findViewById(R.id.find);
setupolayout = findViewById(R.id.set);
messagelayout = findViewById(R.id.message);
one = (TextView)findViewById(R.id.datezi);
two = (TextView)findViewById(R.id.findzi);
three = (TextView)findViewById(R.id.setzi);
four = (TextView)findViewById(R.id.messagezi);
one1 =(ImageView)findViewById(R.id.datephoto);
two1 =(ImageView)findViewById(R.id.findphoto);
three1 = (ImageView)findViewById(R.id.setphoto);
four1 = (ImageView)findViewById(R.id.messagephoto);

datelayout.setOnClickListener(this);
findlayout.setOnClickListener(this);
setupolayout.setOnClickListener(this);
messagelayout.setOnClickListener(this);

}

//选择不同的底部导航
public void  setTabSelection(int index){

FragmentTransaction trans = frangementmanager.beginTransaction();
clearselection();     //清除掉所有选中状态
hideFragements(trans);    //将所有fragement 置于隐藏状态
//显示动态内容
switch (index) {
case  0:
one.setTextColor(Color.GREEN);
one1.setImageResource(R.drawable.date1);;
if(showdate == null){
showdate = new dateFragement();
trans.add(R.id.content, showdate);
}
else
{
trans.show(showdate);
}
trans.commit();
break;

case 1:
two.setTextColor(Color.GREEN);
two1.setImageResource(R.drawable.find1);
if(showfind == null){
showfind = new findFragment();
trans.add(R.id.content, showfind);
}
else
{
trans.show(showfind);
}
trans.commit();
break;
case  2:
three.setTextColor(Color.GREEN);
three1.setImageResource(R.drawable.set1);
if(showsetup == null){
showsetup = new setupFragment();
trans.add(R.id.content, showsetup);
}
else
{
trans.show(showsetup);
}
trans.commit();
break;
case 3 :
four.setTextColor(Color.GREEN);
four1.setImageResource(R.drawable.message);
if(showmessage == null){
showmessage = new messageFragment();
trans.add(R.id.content, showmessage);
}
else{
trans.show(showmessage);
}
trans.commit();
break;

}
}
//清除掉所有的选中状态
public void clearselection(){
one.setTextColor(Color.WHITE);
two.setTextColor(Color.WHITE);
three.setTextColor(Color.WHITE);
four.setTextColor(Color.WHITE);
one1.setImageResource(R.drawable.date);
two1.setImageResource(R.drawable.find);
three1.setImageResource(R.drawable.set);
four1.setImageResource(R.drawable.message1);

}
//将所有fragement 置于隐藏状态

public void hideFragements(FragmentTransaction transaction){
if (showdate != null) {
transaction.hide(showdate);
}
if (showfind != null) {
transaction.hide(showfind);
}
if (showsetup != null) {
transaction.hide(showsetup);
}
if(showmessage != null){
transaction.hide(showmessage);
}

}
@Override
public void onClick(View  v) {
// TODO Auto-generated method stub
switch (v.getId()) {
case R.id.date:
setTabSelection(0);
break;
case R.id.find:
setTabSelection(1);
break;
case R.id.set:
setTabSelection(2);
break;
case R.id.message:
setTabSelection(3);
break;
}

}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}

另外四个.java文件主要是调相对的界面文件：

package com.example.textfragement;

import java.io.IOException;
import java.util.zip.DataFormatException;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.SurfaceView;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.Toast;

public class dateFragement   extends Fragment implements OnClickListener{

@Override
public void onClick(View v) {
// TODO Auto-generated method stub

}

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub

View   datafragment = inflater.inflate(R.layout.date_layout, container,false);
return datafragment;

}

}

package com.example.textfragement;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.widget.GridView;
import android.widget.SimpleAdapter;
import android.widget.TextView;
import android.widget.Toast;

public class findFragment  extends Fragment {

public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub

View   findfragment = inflater.inflate(R.layout.find_layout, container,false);
return findfragment;

}

}

在此我只写了两个Fragment的调用java文件，另外两个大家可以模仿着写。以上就是程序的核心代码，简单清晰，适合大家学习，如果有什么好的代码，也希望能分享给我，大家互相学习。源代码地址:
http://download.csdn.net/detail/danielntz/9411271