原文出处

标题：LinearLayout+Fragment实现下导航栏效果
作者：天地炫舞
原文链接：https://blog.csdn.net/tiandixuanwuliang/article/details/56279956

前言

本文将利用LinearLayout+Fragment实现下导航栏效果
手机APP开发者可以直接在本测试案例上进行二次开发，可以节省自己手动写导航栏的时间和精力。

实现原理：

先使用在MainActivity中使用LinearLayout做出下导航栏的布局效果；

再实现各个按钮的点击事件，替换掉MainActivity对应的xml文件中的Fragment；

优化部分：1、页面一加载时就要替换index的fragment；2、按钮被点击了，在xml文件中改变当前按钮的状态。

效果图如下：
image.png
下面开始介绍本测试案例。

一、以下是项目工程截图

image.png

二、com.wllfengshu.share中的MainActivity.java为程序入口

java代码如下

  1. package com.wllfengshu.share;
  3. import com.wllfengshu.donate.DonateFragment;
  4. import com.wllfengshu.donate.R;
  5. import com.wllfengshu.index.IndexFragment;
  6. import com.wllfengshu.me.MeFragment;
  7. import com.wllfengshu.query.QueryFragment;
  9. import android.app.Activity;
  10. import android.app.FragmentManager;
  11. import android.app.FragmentTransaction;
  12. import android.os.Bundle;
  13. import android.view.View;
  14. import android.view.View.OnClickListener;
  15. import android.view.Window;
  16. import android.widget.ImageView;
  17. import android.widget.LinearLayout;
  18. import android.widget.TextView;
  20. public class MainActivity extends Activity implements OnClickListener {
  22.     private LinearLayout llIndex, llDonate, llQuery, llMe;
  23.     private ImageView ivIndex, ivDonate, ivQuery, ivMe, ivCurrent;
  24.     private TextView tvIndex, tvDonate, tvQuery, tvMe, tvCurrent;
  25.     private FragmentManager fragmentManager;
  26.     private FragmentTransaction beginTransaction;
  28.     @Override
  29.     protected void onCreate(Bundle savedInstanceState) {
  30.         super.onCreate(savedInstanceState);
  31.         requestWindowFeature(Window.FEATURE_NO_TITLE);
  32.         setContentView(R.layout.activity_main);
  33.         // 浠ヤ笅鏄垵濮嬪寲start
  34.         llIndex = (LinearLayout) findViewById(R.id.llIndex);
  35.         llDonate = (LinearLayout) findViewById(R.id.llDonate);
  36.         llQuery = (LinearLayout) findViewById(R.id.llQuery);
  37.         llMe = (LinearLayout) findViewById(R.id.llMe);
  39.         llIndex.setOnClickListener(this);
  40.         llDonate.setOnClickListener(this);
  41.         llQuery.setOnClickListener(this);
  42.         llMe.setOnClickListener(this);
  44.         ivIndex = (ImageView) findViewById(R.id.ivIndex);
  45.         ivDonate = (ImageView) findViewById(R.id.ivDonate);
  46.         ivQuery = (ImageView) findViewById(R.id.ivQuery);
  47.         ivMe = (ImageView) findViewById(R.id.ivMe);
  49.         tvIndex = (TextView) findViewById(R.id.tvIndex);
  50.         tvDonate = (TextView) findViewById(R.id.tvDonate);
  51.         tvQuery = (TextView) findViewById(R.id.tvQuery);
  52.         tvMe = (TextView) findViewById(R.id.tvMe);
  54.         ivIndex.setSelected(true);
  55.         tvIndex.setSelected(true);
  56.         ivCurrent = ivIndex;
  57.         tvCurrent = tvIndex;
  58.         // 浠ヤ笅鏄垵濮嬪寲end
  60.         fragmentManager = getFragmentManager();
  61.         beginTransaction = fragmentManager.beginTransaction();
  62.         beginTransaction.replace(R.id.ll_main, new IndexFragment());
  63.         beginTransaction.commit();
  64.     }
  66.     @Override
  67.     public void onClick(View v) {
  68.         ivCurrent.setSelected(false);
  69.         tvCurrent.setSelected(false);
  70.         FragmentManager fragmentManager = getFragmentManager();
  71.         FragmentTransaction beginTransaction = fragmentManager
  72.                 .beginTransaction();
  73.         switch (v.getId()) {
  74.         case R.id.llIndex:
  75.             beginTransaction.replace(R.id.ll_main, new IndexFragment());
  76.         case 0:
  77.             ivIndex.setSelected(true);
  78.             ivCurrent = ivIndex;
  79.             tvIndex.setSelected(true);
  80.             tvCurrent = tvIndex;
  81.             break;
  82.         case R.id.llDonate:
  83.             beginTransaction.replace(R.id.ll_main, new DonateFragment());
  84.         case 1:
  85.             ivDonate.setSelected(true);
  86.             ivCurrent = ivDonate;
  87.             tvDonate.setSelected(true);
  88.             tvCurrent = tvDonate;
  89.             break;
  90.         case R.id.llQuery:
  91.             beginTransaction.replace(R.id.ll_main, new QueryFragment());
  92.         case 2:
  93.             ivQuery.setSelected(true);
  94.             ivCurrent = ivQuery;
  95.             tvQuery.setSelected(true);
  96.             tvCurrent = tvQuery;
  97.             break;
  98.         case R.id.llMe:
  99.             beginTransaction.replace(R.id.ll_main, new MeFragment());
  100.         case 3:
  101.             ivMe.setSelected(true);
  102.             ivCurrent = ivMe;
  103.             tvMe.setSelected(true);
  104.             tvCurrent = tvMe;
  105.             break;
  106.         default:
  107.             break;
  108.         }
  109.         beginTransaction.commit();
  110.     }
  112. }

其对应的xml文件代码如下

  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:orientation="vertical" >
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="45dp"
  10.         android:background="#0E6DB0"
  11.         android:gravity="center"
  12.         android:orientation="vertical" >
  14.         <TextView
  15.             android:layout_width="wrap_content"
  16.             android:layout_height="wrap_content"
  17.             android:layout_gravity="center"
  18.             android:text="@string/app_name"
  19.             android:textColor="#ffffff"
  20.             android:textSize="20sp"
  21.             android:textStyle="bold" />
  22.     </LinearLayout>
  24.     <LinearLayout
  25.         android:id="@+id/ll_main"
  26.         android:layout_width="match_parent"
  27.         android:layout_height="0dp"
  28.         android:layout_weight="1"
  29.         android:orientation="vertical" >
  30.     </LinearLayout>
  32.     <LinearLayout
  33.         android:layout_width="match_parent"
  34.         android:layout_height="55dp"
  35.         android:background="#0E6DB0"
  36.         android:orientation="horizontal" >
  38.         <LinearLayout
  39.             android:id="@+id/llIndex"
  40.             android:layout_width="0dp"
  41.             android:layout_height="match_parent"
  42.             android:layout_weight="1"
  43.             android:gravity="center"
  44.             android:orientation="vertical" >
  46.             <ImageView
  47.                 android:id="@+id/ivIndex"
  48.                 android:layout_width="wrap_content"
  49.                 android:layout_height="wrap_content"
  50.                 android:background="#00000000"
  51.                 android:src="@drawable/tab_index" />
  53.             <TextView
  54.                 android:id="@+id/tvIndex"
  55.                 android:layout_width="wrap_content"
  56.                 android:layout_height="wrap_content"
  57.                 android:text="首页"
  58.                 android:textColor="@drawable/tab_textview" />
  59.         </LinearLayout>
  61.         <LinearLayout
  62.             android:id="@+id/llDonate"
  63.             android:layout_width="0dp"
  64.             android:layout_height="match_parent"
  65.             android:layout_weight="1"
  66.             android:gravity="center"
  67.             android:orientation="vertical" >
  69.             <ImageView
  70.                 android:id="@+id/ivDonate"
  71.                 android:layout_width="wrap_content"
  72.                 android:layout_height="wrap_content"
  73.                 android:background="#00000000"
  74.                 android:src="@drawable/tab_donate" />
  76.             <TextView
  77.                 android:id="@+id/tvDonate"
  78.                 android:layout_width="wrap_content"
  79.                 android:layout_height="wrap_content"
  80.                 android:text="捐赠"
  81.                 android:textColor="@drawable/tab_textview" />
  82.         </LinearLayout>
  84.         <LinearLayout
  85.             android:id="@+id/llQuery"
  86.             android:layout_width="0dp"
  87.             android:layout_height="match_parent"
  88.             android:layout_weight="1"
  89.             android:gravity="center"
  90.             android:orientation="vertical" >
  92.             <ImageView
  93.                 android:id="@+id/ivQuery"
  94.                 android:layout_width="wrap_content"
  95.                 android:layout_height="wrap_content"
  96.                 android:background="#00000000"
  97.                 android:src="@drawable/tab_query" />
  99.             <TextView
  100.                 android:id="@+id/tvQuery"
  101.                 android:layout_width="wrap_content"
  102.                 android:layout_height="wrap_content"
  103.                 android:text="查询"
  104.                 android:textColor="@drawable/tab_textview" />
  105.         </LinearLayout>
  107.         <LinearLayout
  108.             android:id="@+id/llMe"
  109.             android:layout_width="0dp"
  110.             android:layout_height="match_parent"
  111.             android:layout_weight="1"
  112.             android:gravity="center"
  113.             android:orientation="vertical" >
  115.             <ImageView
  116.                 android:id="@+id/ivMe"
  117.                 android:layout_width="wrap_content"
  118.                 android:layout_height="wrap_content"
  119.                 android:background="#00000000"
  120.                 android:src="@drawable/tab_me" />
  122.             <TextView
  123.                 android:id="@+id/tvMe"
  124.                 android:layout_width="wrap_content"
  125.                 android:layout_height="wrap_content"
  126.                 android:text="我"
  127.                 android:textColor="@drawable/tab_textview" />
  128.         </LinearLayout>
  129.     </LinearLayout>
  131. </LinearLayout>

三、index页面中

java代码如下

  1. package com.wllfengshu.index;
  3. import com.wllfengshu.donate.R;
  5. import android.app.Fragment;
  6. import android.os.Bundle;
  7. import android.view.LayoutInflater;
  8. import android.view.View;
  9. import android.view.ViewGroup;
  11. public class IndexFragment extends Fragment {
  12.     @Override
  13.     public View onCreateView(LayoutInflater inflater, ViewGroup container,
  14.             Bundle savedInstanceState) {
  16.         View view=inflater.inflate(R.layout.index_fragment, null);
  17.         return view;
  18.     }
  19. }

其对应的xml文件代码如下

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent">
  5.     <TextView 
  6.         android:layout_width="match_parent"
  7.         android:layout_height="match_parent"
  8.         android:text="我是index"/>
  9. </RelativeLayout>

四、其余几个页面中的java代码和xml代码和index页面一样，在此不再重复

说明：本文参考了一些导航栏制作方法，但此种方法代码量最少，最好理解，不需要导入其他jar包，此案例中的一些图片资源、布局等使用其他案例的资源。

源代码：链接：http://download.csdn.net/detail/tiandixuanwuliang/9766787