Fragment 实现底部导航栏的简单切换

第一个Android App：
一直想入android这个坑，但一直因为各种原因拖到了现在，今天终于下定决心迈出了第一步。由于公司一直没有android的项目。所以也没有现成的设计和切图，这对于一个刚入坑的人来说真的挺痛苦的，后来实在没办法，就想到了我平时看小说的软件。经历各种办法终于从apk中拿到了切图。下面就开始吧，走起！

目标：

不要想多，今天只是实现底部导航栏的点击切换。

1. 首先将页面的布局写好，这里不多说了。直接上代码。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    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="match_parent"
        android:layout_height="60dp"
        android:background="@drawable/home_bg_shape" >

        <RelativeLayout
            android:id="@+id/bookshelf_layout"
            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/home_bookshelf_image"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/icon_home_tab_bookshelf_n" />

                <TextView
                    android:id="@+id/home_bookshelf_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="@string/bookshelf"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/searchbook_layout"
            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/home_searchbook_image"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/icon_home_tab_searchbook_n" />

                <TextView
                    android:id="@+id/searchbook_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="@string/free"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/bookstore_layout"
            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/home_bookstore_image"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/icon_home_tab_bookstore_n" />

                <TextView
                    android:id="@+id/bookstore_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="@string/bookstore"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/writer_layout"
            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/writer_image"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/icon_home_tab_writer_n" />

                <TextView
                    android:id="@+id/writer_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="@string/writer"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>

        <RelativeLayout
            android:id="@+id/me_layout"
            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/me_image"
                    android:layout_width="wrap_content"
                    android:layout_height="30dp"
                    android:layout_gravity="center_horizontal"
                    android:src="@drawable/icon_home_tab_me_n" />

                <TextView
                    android:id="@+id/me_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:text="@string/me"
                    android:textColor="#82858b" />
            </LinearLayout>
        </RelativeLayout>
    </LinearLayout>

</LinearLayout>

我们运行一下：

效果已经出来了，下面我们就为每个按钮创建一个对应的Fragment：
先创建5个layout文件

bookshelf_layout.xml

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="10dp"
            android:text="@string/bookshelf"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

searchbook_layout.xml

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="10dp"
            android:text="@string/free"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

bookstore_layout.xml

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="10dp"
            android:text="@string/bookstore"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

writer_layout.xml

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

            <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="10dp"
            android:text="@string/writer"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

me_layout.xml

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

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:orientation="vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:padding="10dp"
            android:text="@string/me"
            android:textSize="20sp" />
    </LinearLayout>

</RelativeLayout>

在创建对应的Fragment 类

BookShelfFragment

package com.example.xxxx.anytravel.fragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.xxxx.anytravel.R;

public class BookShelfFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View bookshelfLayout = inflater.inflate(R.layout.bookshelf_layout,
                container, false);
        return bookshelfLayout;
    }
}

SearchBookFragment

package com.example.xxxx.anytravel.fragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.xxxx.anytravel.R;

public class SearchBookFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View searchBookLayout = inflater.inflate(R.layout.searchbook_layout, container,
                false);
        return searchBookLayout;
    }
}

BooKStoreFragment

package com.example.xxxx.anytravel.fragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.xxxx.anytravel.R;

public class BooKStoreFragment extends Fragment {

    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View bookstoreLayout = inflater.inflate(R.layout.bookstore_layout,
                container, false);
        return bookstoreLayout;
    }
}

WriteFragment

package com.example.xxxx.anytravel.fragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.pengq.anytravel.R;

public class WriteFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
            Bundle savedInstanceState) {
        View writeLayout = inflater.inflate(R.layout.writer_layout,
                container, false);
        return writeLayout;
    }
}

MeFragment

package com.example.xxxx.anytravel.fragment;

import android.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.example.pengq.anytravel.R;

public class MeFragment extends Fragment {
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                                 Bundle savedInstanceState) {
            View meLayout = inflater.inflate(R.layout.me_layout,
                    container, false);
            return meLayout;
        }
}

好了，到了这里准备工作已经完成下面只要实现按钮的点击事件并且加载对应的页面即可；

package com.example.xxxx.anytravel.activity;

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.graphics.Color;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
import android.widget.TextView;

import com.example.pengq.anytravel.R;
import com.example.pengq.anytravel.fragment.BooKStoreFragment;
import com.example.pengq.anytravel.fragment.BookShelfFragment;
import com.example.pengq.anytravel.fragment.MeFragment;
import com.example.pengq.anytravel.fragment.SearchBookFragment;
import com.example.pengq.anytravel.fragment.WriteFragment;

import java.util.ArrayList;
import java.util.List;

public class MainActivity extends BaseActivity implements View.OnClickListener {

    private BookShelfFragment bookShelfFragment;
    private BooKStoreFragment booKStoreFragment;
    private SearchBookFragment searchBookFragment;
    private WriteFragment writeFragment;
    private MeFragment meFragment;
    private List<View> bottomTabs;
    private View bookshelfLayout;
    private View searchBookLayout;
    private View bookStoreLayout;
    private View writerLayout;
    private View meLayout;
    private ImageView bookshelfImage;
    private ImageView searchbookImage;
    private ImageView bookstoreImage;
    private ImageView writerImage;
    private ImageView meImage;
    private TextView bookshelfText;
    private TextView searchBookText;
    private TextView bookStoreText;
    private TextView writerText;
    private TextView meText;
    private FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        if (getSupportActionBar() != null) {
            getSupportActionBar().hide();
        }
        setContentView(R.layout.activity_main);
        initViews();
        fragmentManager = getFragmentManager();
        setSelectTab(0);
    }

    private void initViews() {
        bookshelfLayout = findViewById(R.id.bookshelf_layout);
        searchBookLayout = findViewById(R.id.searchbook_layout);
        bookStoreLayout = findViewById(R.id.bookstore_layout);
        writerLayout = findViewById(R.id.writer_layout);
        meLayout = findViewById(R.id.me_layout);
        bookshelfImage = (ImageView) findViewById(R.id.home_bookshelf_image);
        searchbookImage = (ImageView) findViewById(R.id.home_searchbook_image);
        bookstoreImage = (ImageView) findViewById(R.id.home_bookstore_image);
        writerImage = (ImageView) findViewById(R.id.writer_image);
        meImage = (ImageView) findViewById(R.id.me_image);
        bookshelfText = (TextView) findViewById(R.id.home_bookshelf_text);
        searchBookText = (TextView) findViewById(R.id.searchbook_text);
        bookStoreText = (TextView) findViewById(R.id.bookstore_text);
        writerText = (TextView) findViewById(R.id.writer_text);
        meText = (TextView) findViewById(R.id.me_text);
        bookshelfLayout.setOnClickListener(this);
        searchBookLayout.setOnClickListener(this);
        bookStoreLayout.setOnClickListener(this);
        writerLayout.setOnClickListener(this);
        meLayout.setOnClickListener(this);
        bottomTabs = new ArrayList<>(5);
        bottomTabs.add(bookshelfLayout);
        bottomTabs.add(searchBookLayout);
        bottomTabs.add(bookStoreLayout);
        bottomTabs.add(writerLayout);
        bottomTabs.add(meLayout);
    }

    private void setSelectTab(int index) {
        clearSelection();
        // 开启一个Fragment事务
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        // 先隐藏掉所有的Fragment，以防止有多个Fragment显示在界面上的情况
        hideFragments(transaction);
        switch (index) {
            case 0:
                bookshelfImage.setImageResource(R.drawable.icon_home_tab_bookshelf_p);
                bookshelfText.setTextColor(Color.parseColor("#00c98d"));
                if (bookShelfFragment == null) {
                    bookShelfFragment = new BookShelfFragment();
                    transaction.add(R.id.content, bookShelfFragment);
                } else {
                    transaction.show(bookShelfFragment);
                }
                break;
            case 1:
                searchbookImage.setImageResource(R.drawable.icon_home_tab_searchbook_p);
                searchBookText.setTextColor(Color.parseColor("#00c98d"));
                if (searchBookFragment == null) {
                    searchBookFragment = new SearchBookFragment();
                    transaction.add(R.id.content, searchBookFragment);
                } else {
                    transaction.show(searchBookFragment);
                }
                break;
            case 2:
                bookstoreImage.setImageResource(R.drawable.icon_home_tab_bookstore_p);
                bookStoreText.setTextColor(Color.parseColor("#00c98d"));
                if (booKStoreFragment == null) {
                    booKStoreFragment = new BooKStoreFragment();
                    transaction.add(R.id.content, booKStoreFragment);
                } else {
                    transaction.show(booKStoreFragment);
                }
                break;
            case 3:
                writerImage.setImageResource(R.drawable.icon_home_tab_writer_p);
                writerText.setTextColor(Color.parseColor("#00c98d"));
                if (writeFragment == null) {
                    writeFragment = new WriteFragment();
                    transaction.add(R.id.content, writeFragment);
                } else {
                    transaction.show(writeFragment);
                }
                break;
            case 4:
                meImage.setImageResource(R.drawable.icon_home_tab_me_p);
                meText.setTextColor(Color.parseColor("#00c98d"));
                if (meFragment == null) {
                    meFragment = new MeFragment();
                    transaction.add(R.id.content, meFragment);
                } else {
                    transaction.show(meFragment);
                }
                break;
            default:
                break;
        }
        transaction.commit();
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.bookshelf_layout:
                setSelectTab(0);
                break;
            case R.id.searchbook_layout:
                setSelectTab(1);
                break;
            case R.id.bookstore_layout:
                setSelectTab(2);
                break;
            case R.id.writer_layout:
                setSelectTab(3);
                break;
            case R.id.me_layout:
                setSelectTab(4);
                break;
            default:
                break;
        }
    }

    private void clearSelection() {
        bookshelfImage.setImageResource(R.drawable.icon_home_tab_bookshelf_n);
        bookshelfText.setTextColor(Color.parseColor("#82858b"));
        searchbookImage.setImageResource(R.drawable.icon_home_tab_searchbook_n);
        searchBookText.setTextColor(Color.parseColor("#82858b"));
        bookstoreImage.setImageResource(R.drawable.icon_home_tab_bookstore_n);
        bookStoreText.setTextColor(Color.parseColor("#82858b"));
        writerImage.setImageResource(R.drawable.icon_home_tab_writer_n);
        writerText.setTextColor(Color.parseColor("#82858b"));
        meImage.setImageResource(R.drawable.icon_home_tab_me_n);
        meText.setTextColor(Color.parseColor("#82858b"));
    }

    private void hideFragments(FragmentTransaction transaction) {
        if (bookShelfFragment != null) {
            transaction.hide(bookShelfFragment);
        }
        if (searchBookFragment != null) {
            transaction.hide(searchBookFragment);
        }
        if (booKStoreFragment != null) {
            transaction.hide(booKStoreFragment);
        }
        if (writeFragment != null) {
            transaction.hide(writeFragment);
        }
        if (meFragment != null) {
            transaction.hide(meFragment);
        }
    }
}

好，上图（原谅我不会动图）