Android 底部导航栏实现一 Fragment-replace

【效果】（这里下载的软件收费的试用有水印)

【推荐】这里推荐一个图标网http://iconfont.cn/。以上图标来自此图标网

【项目结构】

【步骤】

①创建布局文件，写底部导航栏

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
     xmlns:tools="http://schemas.android.com/tools"
     android:layout_width="match_parent"
     android:layout_height="match_parent"
     tools:context=".MainActivity"
     android:orientation="vertical">

     <RelativeLayout
         android:id="@+id/rl_content"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1">
        <!--这里设置权重weight为1， 下面不设置权重。-->
         <!--意思是，剩余的位置全都是RelativeLayout的-->
     </RelativeLayout>

     <TextView
         android:layout_width="match_parent"
         android:layout_height="1dp"
         android:background="#797878"/>
     <LinearLayout
         android:layout_width="match_parent"
         android:layout_height="80dp"
         android:orientation="horizontal">
         <LinearLayout
             android:id="@+id/item1"
             android:layout_width="0dp"
             android:layout_weight="1"
             android:layout_height="match_parent"
             android:orientation="vertical">
             <ImageView
                 android:id="@+id/item1_iv"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="3"
                 android:layout_margin="3dp"
                 android:scaleType="fitCenter"
                 android:src="@drawable/wxb"
                 android:padding="1dp"/>
             <TextView
                 android:id="@+id/item1_tv"
                 android:text="女王"
                 android:textSize="16sp"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="1"
                 android:gravity="center"/>
         </LinearLayout>
         <LinearLayout
             android:id="@+id/item2"
             android:layout_width="0dp"
             android:layout_weight="1"
             android:layout_height="match_parent"
             android:orientation="vertical">
             <ImageView
                 android:id="@+id/item2_iv"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="3"
                 android:layout_margin="3dp"
                 android:scaleType="fitCenter"
                 android:src="@drawable/meizhuang"
                 android:padding="4dp"/>
             <TextView
                 android:id="@+id/item2_tv"
                 android:text="美妆"
                 android:textSize="16sp"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="1"
                 android:gravity="center"/>
         </LinearLayout>
         <LinearLayout
             android:id="@+id/item3"
             android:layout_width="0dp"
             android:layout_weight="1"
             android:layout_height="match_parent"
             android:orientation="vertical">
             <ImageView
                 android:id="@+id/item3_iv"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="3"
                 android:layout_margin="3dp"
                 android:scaleType="fitCenter"
                 android:src="@drawable/fuzhuang"
                 android:padding="5dp"/>
             <TextView
                 android:id="@+id/item3_tv"
                 android:text="衣帽"
                 android:textSize="16sp"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="1"
                 android:gravity="center" />
         </LinearLayout>
         <LinearLayout
             android:id="@+id/item4"
             android:layout_width="0dp"
             android:layout_weight="1"
             android:layout_height="match_parent"
             android:orientation="vertical">
             <ImageView
                 android:id="@+id/item4_iv"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="3"
                 android:layout_margin="3dp"
                 android:scaleType="fitCenter"
                 android:src="@drawable/xiebaopeishi"
                 android:padding="3dp"/>
             <TextView
                 android:id="@+id/item4_tv"
                 android:text="鞋包"
                 android:textSize="16sp"
                 android:layout_width="match_parent"
                 android:layout_height="0dp"
                 android:layout_weight="1"
                 android:gravity="center" />
         </LinearLayout>
     </LinearLayout>
 </LinearLayout>

②定义Fragment

【提示】可以通过下图方式创建

 public class FragmentA extends Fragment {

     public FragmentA() {
         // Required empty public constructor
     }

     @Override
     public View onCreateView(LayoutInflater inflater, ViewGroup container,
                              Bundle savedInstanceState) {
         // Inflate the layout for this fragment
         return inflater.inflate(R.layout.fragment_a, container, false);
     }
 }

对于生成的Fragment不用作修改，对应的布局中设置一个背景颜色便于观察。

③MainActivity代码的编写

 public class MainActivity extends AppCompatActivity implements View.OnClickListener{

     private FragmentManager fragmentManager;
     private RelativeLayout rl_content;
     private ImageView item1_iv,item2_iv,item3_iv,item4_iv;
     private TextView item1_tv,item2_tv,item3_tv,item4_tv;
     private LinearLayout item1,item2,item3,item4;
     private ImageView[] ivs;
     private TextView[] tvs;

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

         initView();

         fragmentManager = getSupportFragmentManager();

         initListener();
     }

     private void initListener() {
         item1.setOnClickListener(this);
         item2.setOnClickListener(this);
         item3.setOnClickListener(this);
         item4.setOnClickListener(this);
     }

     private void initView() {
         rl_content = (RelativeLayout) findViewById(R.id.rl_content);
         item1_iv = (ImageView) findViewById(R.id.item1_iv);
         item1_tv = (TextView) findViewById(R.id.item1_tv);
         item1 = (LinearLayout) findViewById(R.id.item1);
         item2_iv = (ImageView) findViewById(R.id.item2_iv);
         item2_tv = (TextView) findViewById(R.id.item2_tv);
         item2 = (LinearLayout) findViewById(R.id.item2);
         item3_iv = (ImageView) findViewById(R.id.item3_iv);
         item3_tv = (TextView) findViewById(R.id.item3_tv);
         item3 = (LinearLayout) findViewById(R.id.item3);
         item4_iv = (ImageView) findViewById(R.id.item4_iv);
         item4_tv = (TextView) findViewById(R.id.item4_tv);
         item4 = (LinearLayout) findViewById(R.id.item4);
         ivs = new ImageView[]{item1_iv,item2_iv,item3_iv,item4_iv};
         tvs = new TextView[]{item1_tv,item2_tv,item3_tv,item4_tv};
     }

     @Override
     public void onClick(View view) {
         switch (view.getId()){
             case R.id.item1: {
                 FragmentTransaction transaction = fragmentManager.beginTransaction();//创建一个事务
                 transaction.replace(R.id.rl_content,new FragmentA());
                 transaction.commit();//事务一定要提交，replace才会有效
                 setCheck(0);//自定义方法
                 break;
             }
             case R.id.item2: {
                 FragmentTransaction transaction = fragmentManager.beginTransaction();
                 transaction.replace(R.id.rl_content,new FragmentB());
                 transaction.commit();
                 setCheck(1);
                 break;
             }
             case R.id.item3: {
                 FragmentTransaction transaction = fragmentManager.beginTransaction();
                 transaction.replace(R.id.rl_content,new FragmentC());
                 transaction.commit();
                 setCheck(2);
                 break;
             }
             case R.id.item4: {
                 FragmentTransaction transaction = fragmentManager.beginTransaction();
                 transaction.replace(R.id.rl_content,new FragmentD());
                 transaction.commit();
                 setCheck(3);
                 break;
             }
             default:break;
         }
     }

     public void setCheck(int itemId){
         //这个方法设置底部导航栏选中时的效果
         for (int i = 0; i < 4; i++) {
             ivs[i].setColorFilter(Color.parseColor("#0f0f0f"));
             tvs[i].setTextColor(Color.parseColor("#0f0f0f"));
         }
         ivs[itemId].setColorFilter(Color.GREEN);
         tvs[itemId].setTextColor(Color.GREEN);
     }
 }

【提示】①这里的点击事件是通过Activity实现Onclick接口的方式

②getSupportFragmentManager()是v4包中的，兼容效果好，如果用getFragmentManager()可能会崩掉

③FragmentManager只需要获取一次，但是事务FragmentTransaction要重新开启。最后事务一定要提交commit。

④方法setCheck是为了设置导航的被选中效果。