后期我们将使用导入三方控件的方式，实现android原生扁平化风格的导航栏，这里我们实现的是普通的不具备动画效果的导航栏。
①ps:android studio的mipmap具有更好的优化效果，但是可能对图片的分辨率有所要求，我们这里采用的图片资源为64x64 png格式的图片资源。
图片Drawable资源：tab_menu_deal.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:drawable="@mipmap/ic_menu_deal_on" android:state_selected="true"/>
<item android:drawable="@mipmap/ic_menu_deal_off"/>
</selector>

②
文字资源：tab_menu_deal_text.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:color="@color/text_blue" android:state_selected="true"/>
<item android:color="@color/text_gray" />
</selector>

③
背景资源 tab_menu_bg.xml：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:state_selected="true">
    <shape>
        <solid android:color="#FFC4C4C4"/>
        </shape>
    </item>
<item>
    <shape>
        <solid android:color="@color/transparent" />
    </shape>
</item>

</selector>

④
编写我们的Activity布局

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">

<RelativeLayout
    android:id="@+id/tab_title"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:background="@color/transparent">
    <TextView
        android:id="@+id/txt_top"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:textSize="18sp"
        android:textColor="@color/text_gray"
        android:text= "@string/infomation" />

    <View
        android:layout_width="match_parent"
        android:layout_height="2px"
        android:background="@color/text_gray"
        android:layout_alignParentBottom="true"/>
    </RelativeLayout>

<LinearLayout
    android:id="@+id/tab_menu"
    android:layout_width="match_parent"
    android:layout_height="56dp"
    android:orientation="horizontal"
    android:layout_alignParentBottom="true">

    <TextView
        android:id="@+id/txt_deal"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/tab_menu_bg"
        android:drawablePadding="3dp"
        android:drawableTop="@drawable/tab_menu_deal"
        android:gravity="center"
        android:textColor="@drawable/tab_menu_deal_text"
        android:text="点餐"/>

    <TextView
        android:id="@+id/txt_poi"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/tab_menu_bg"
        android:drawablePadding="3dp"
        android:drawableTop="@drawable/tab_menu_poi"
        android:gravity="center"
        android:textColor="@drawable/tab_menu_poi_text"
        android:text="商铺"/>

    <TextView
        android:id="@+id/txt_user"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/tab_menu_bg"
        android:drawablePadding="3dp"
        android:drawableTop="@drawable/tab_menu_user"
        android:gravity="center"
        android:textColor="@drawable/tab_menu_user_text"
        android:text="用户"/>

    <TextView
        android:id="@+id/txt_more"
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:background="@drawable/tab_menu_bg"
        android:drawablePadding="3dp"
        android:drawableTop="@drawable/tab_menu_more"
        android:gravity="center"
        android:textColor="@drawable/tab_menu_more_text"
        android:text="更多"/>

    </LinearLayout>

<View
    android:id="@+id/div_tab_bar"
    android:layout_width="match_parent"
    android:layout_height="2px"
    android:background="@color/text_gray"
    android:layout_above="@id/tab_menu"/>

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_below="@id/tab_title"
    android:layout_above="@id/tab_menu"
    android:background="@color/transparent">
    </FrameLayout>

</RelativeLayout>

⑤
创建一个Fragment的简单布局与类：

first_fragment.xml：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/transparent">

<TextView
    android:id="@+id/txt_content"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:text="呵呵"
    android:textColor="@color/text_blue"
    android:textSize="20sp"/>

</LinearLayout>

⑥
FirstFragment.Java:
public class FirstFragment extends Fragment { private String context; private TextView mTextView; public FirstFragment(String context){ this.context = context; } @Nullable @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.first_fragment,container,false); mTextView = (TextView)view.findViewById(R.id.txt_content); //mTextView = (TextView)getActivity().findViewById(R.id.txt_content); mTextView.setText(context); return view; }}

⑦
public class MainActivity extends AppCompatActivity implements View.OnClickListener{
private TextView topBar;
private TextView tabDeal;
private TextView tabPoi;
private TextView tabMore;
private TextView tabUser;

private FrameLayout ly_content;

private FirstFragment f1,f2,f3,f4;
private FragmentManager fragmentManager;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.activity_main);

    bindView();

}

//UI组件初始化与事件绑定
private void bindView() {
    topBar = (TextView)this.findViewById(R.id.txt_top);
    tabDeal = (TextView)this.findViewById(R.id.txt_deal);
    tabPoi = (TextView)this.findViewById(R.id.txt_poi);
    tabUser = (TextView)this.findViewById(R.id.txt_user);
    tabMore = (TextView)this.findViewById(R.id.txt_more);
    ly_content = (FrameLayout) findViewById(R.id.fragment_container);

    tabDeal.setOnClickListener(this);
    tabMore.setOnClickListener(this);
    tabUser.setOnClickListener(this);
    tabPoi.setOnClickListener(this);

}

 //重置所有文本的选中状态
public void selected(){
    tabDeal.setSelected(false);
    tabMore.setSelected(false);
    tabPoi.setSelected(false);
    tabUser.setSelected(false);
}

 //隐藏所有Fragment
public void hideAllFragment(FragmentTransaction transaction){
    if(f1!=null){
        transaction.hide(f1);
    }
    if(f2!=null){
        transaction.hide(f2);
    }
    if(f3!=null){
        transaction.hide(f3);
    }
    if(f4!=null){
        transaction.hide(f4);
    }
}

@Override
public void onClick(View v) {
    FragmentTransaction transaction = getFragmentManager().beginTransaction();
    hideAllFragment(transaction);
    switch(v.getId()){
        case R.id.txt_deal:
            selected();
            tabDeal.setSelected(true);
            if(f1==null){
                f1 = new FirstFragment("第一个Fragment");
                transaction.add(R.id.fragment_container,f1);
            }else{
                transaction.show(f1);
            }
            break;

        case R.id.txt_more:
            selected();
            tabMore.setSelected(true);
            if(f2==null){
                f2 = new FirstFragment("第二个Fragment");
                transaction.add(R.id.fragment_container,f2);
            }else{
                transaction.show(f2);
            }
            break;

        case R.id.txt_poi:
            selected();
            tabPoi.setSelected(true);
            if(f3==null){
                f3 = new FirstFragment("第三个Fragment");
                transaction.add(R.id.fragment_container,f3);
            }else{
                transaction.show(f3);
            }
            break;

        case R.id.txt_user:
            selected();
            tabUser.setSelected(true);
            if(f4==null){
                f4 = new FirstFragment("第四个Fragment");
                transaction.add(R.id.fragment_container,f4);
            }else{
                transaction.show(f4);
            }
            break;
    }

    transaction.commit();
}

}