Fragment实现底部菜单栏

• 运行效果

• 目录结构

1. 继承Fragment实现三个页面

• 第一个Fragment

package com.abudu.fragmentdemo;

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;


public class Fragment1 extends Fragment {
    private int a =0;
    private String TAG = "info";
    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.tab1,container,false);
        return view;

    }

}

• 第二个Fragment

  package com.abudu.fragmentdemo;
  
  import android.os.Bundle;
  import android.support.annotation.NonNull;
  import android.support.annotation.Nullable;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  
  public class Fragment2 extends Fragment {
      @Nullable
      @Override
      public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
          View view = inflater.inflate(R.layout.tab2,container,false);
          return view;
      }
  }
  

• 第三个Fragment

  package com.abudu.fragmentdemo;
  
  import android.os.Bundle;
  import android.support.annotation.NonNull;
  import android.support.annotation.Nullable;
  import android.support.v4.app.Fragment;
  import android.view.LayoutInflater;
  import android.view.View;
  import android.view.ViewGroup;
  
  public class Fragment3 extends Fragment {
      @Nullable
      @Override
      public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
          View view = inflater.inflate(R.layout.tab3,container,false);
          return view;
      }
  }
  

2. 三个Fragment的布局文件

• 首页

  <?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:gravity="center"
      android:background="#2c7e89"
      android:layout_height="match_parent">
  
      <TextView
          android:id="@+id/test1"
          android:text="首页"
          android:textSize="30sp"
          android:textColor="#fff"
          android:gravity="center"
          android:layout_width="match_parent"
          android:layout_height="match_parent" />
  
  </LinearLayout>
  

• 分类

  <?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:gravity="center"
      android:layout_height="match_parent"
      android:background="#550669">
  
      <TextView
          android:text="分类"
          android:textSize="30sp"
          android:textColor="#fff"
          android:gravity="center"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />
  
  </LinearLayout>
  

• 我的

  <?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:gravity="center"
      android:layout_height="match_parent"
      android:background="#5f6ada">
  
  
      <TextView
          android:text="我的"
          android:textSize="30sp"
          android:textColor="#fff"
          android:gravity="center"
          android:layout_width="match_parent"
          android:layout_height="wrap_content" />
  
  </LinearLayout>
  

3. MianActivity.class

package com.abudu.fragmentdemo;

import android.graphics.Color;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private TextView home, sort, user;
    private ImageView homeImg,sortImg,userImg;
    private LinearLayout homeMenu,sortMenu,userMenu;

    private Fragment homeFragment, sortFragment, userFragment;
    private String TAG = "info";


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


    private void init() {
        home = findViewById(R.id.home);
        sort = findViewById(R.id.sort);
        user = findViewById(R.id.user);
        homeImg = findViewById(R.id.homeImg);
        sortImg = findViewById(R.id.sortImg);
        userImg = findViewById(R.id.userImg);
        homeMenu = findViewById(R.id.homeMenu);
        sortMenu = findViewById(R.id.sortMenu);
        userMenu = findViewById(R.id.userMenu);
        homeMenu.setOnClickListener(this);
        sortMenu.setOnClickListener(this);
        userMenu.setOnClickListener(this);


        //启动时显示第一个Fragment
        //获取FragmentManager对象
        FragmentManager manager = getSupportFragmentManager();
        //获取FragmentTransaction对象
        FragmentTransaction transaction = manager.beginTransaction();

        if (homeFragment == null) {
            homeFragment = new Fragment1();
            transaction.add(R.id.frameLayout, homeFragment);
        } else {
            transaction.show(homeFragment);
        }
        transaction.commit();


    }

    @Override  //点击处理
    public void onClick(View view) {
        //获取FragmentManager对象
        FragmentManager manager = getSupportFragmentManager();
        //获取FragmentTransaction对象
        FragmentTransaction transaction = manager.beginTransaction();
        hideFragments(transaction);   //先隐藏所有的Fragment
        menuInit();  //先初始化底部导航栏默认颜色和图标。点击时修改颜色和图片
        switch (view.getId()){
            case R.id.homeMenu:
                home.setTextColor(Color.BLUE);
                homeImg.setImageResource(R.drawable.home2);

                if (homeFragment == null) {
                    homeFragment = new Fragment1();
                    transaction.add(R.id.frameLayout, homeFragment);
                } else {
                    transaction.show(homeFragment);
                }
                break;


            case R.id.sortMenu:
                sort.setTextColor(Color.BLUE);
                sortImg.setImageResource(R.drawable.sort2);

                if (sortFragment == null) {
                    sortFragment = new Fragment2();
                    transaction.add(R.id.frameLayout, sortFragment);
                } else {
                    transaction.show(sortFragment);
                }
                break;


            case R.id.userMenu:
                user.setTextColor(Color.BLUE);
                userImg.setImageResource(R.drawable.user2);

                if (userFragment == null) {
                    userFragment = new Fragment3();
                    transaction.add(R.id.frameLayout, userFragment);
                } else {
                    transaction.show(userFragment);
                }
                break;
        }
        transaction.commit();  //提交处理（重要）

    }


    //先初始化底部导航栏默认颜色和图标，点击时修改颜色和图片
    public void menuInit() {
        home.setTextColor(Color.BLACK);
        sort.setTextColor(Color.BLACK);
        user.setTextColor(Color.BLACK);
        homeImg.setImageResource(R.drawable.home1);
        sortImg.setImageResource(R.drawable.sort1);
        userImg.setImageResource(R.drawable.user1);
    }


    //先隐藏所有的Fragment，点击时显示
    private void hideFragments(FragmentTransaction transaction) {
        if (homeFragment != null) {
            transaction.hide(homeFragment);
        }
        if (sortFragment != null) {
            transaction.hide(sortFragment);
        }
        if (userFragment != null) {
            transaction.hide(userFragment);
        }
    }
}

4. main_activity的布局

• main_activity.xml

  <?xml version="1.0" encoding="utf-8"?>
  <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"
      android:background="#f1eeee"
      tools:context=".MainActivity">
  
  
  
      <FrameLayout
          android:id="@+id/frameLayout"
          android:layout_gravity="center"
          android:layout_width="match_parent"
          android:layout_height="0dp"
          android:background="#435803"
          android:layout_weight="1">
      </FrameLayout>
  
      <include layout="@layout/bottom"/>
  
  
  </LinearLayout>
  

• 底部菜单

  <?xml version="1.0" encoding="utf-8"?>
  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="horizontal"
      android:layout_width="match_parent"
      android:background="#fff"
      android:layout_height="60dp">
  
      <LinearLayout
          android:id="@+id/homeMenu"
          android:layout_width="0dp"
          android:layout_weight="1"
          android:layout_height="match_parent"
          android:orientation="vertical"
          android:gravity="center">
  
          <ImageView
              android:id="@+id/homeImg"
              android:src="@drawable/home2"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />
  
          <TextView
              android:id="@+id/home"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#182bbe"
              android:layout_marginTop="1dp"
              android:text="首页"/>
  
      </LinearLayout>
  
      <LinearLayout
          android:id="@+id/sortMenu"
          android:layout_width="0dp"
          android:layout_weight="1"
          android:layout_height="match_parent"
          android:orientation="vertical"
          android:gravity="center">
  
          <ImageView
              android:id="@+id/sortImg"
              android:src="@drawable/sort1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />
  
          <TextView
              android:id="@+id/sort"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#313030"
              android:layout_marginTop="1dp"
              android:text="分类"/>
  
      </LinearLayout>
  
  
      <LinearLayout
          android:id="@+id/userMenu"
          android:layout_width="0dp"
          android:layout_weight="1"
          android:layout_height="match_parent"
          android:orientation="vertical"
          android:gravity="center">
  
  
          <ImageView
              android:id="@+id/userImg"
              android:src="@drawable/user1"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content" />
  
          <TextView
              android:id="@+id/user"
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              android:textColor="#313030"
              android:layout_marginTop="1dp"
              android:text="我的"/>
  
      </LinearLayout>
  
  </LinearLayout>