使用Bottom Navigation Activity和Fragment仿微信页面切换

使用使用Bottom Navigation Activity和Fragment仿微信页面切换已经不是什么新鲜的技术了,但前几天尝试了一下,觉得还是写点东西。
Bottom Navigation Activity本质上是个普通的Activity,不一样的是它在创建的时候会自动创建一些相关的资源,方便程序员的使用。那话不多说,直接写怎么用。

1.首先新建一个Bottom Navigation Activity

(可以使用新项目,旧的学习项目也可以)
使用Bottom Navigation Activity和Fragment仿微信页面切换_第1张图片
新建的Activity包含了一个xml文件,这就是活动加载的布局。更改一下布局里的代码,将原本的TextView去掉,写一个一会需要动态加载的碎片(Fragment)。代码如下




    
    

    


2.新建三个Fragment (直接在activity同一目录就好)

使用Bottom Navigation Activity和Fragment仿微信页面切换_第2张图片
每个新建的Fragment中也都包含了一个xml布局文件。建好文件后我们重写Fragment和xml中的代码。

改动一下代码:

首先是Fragment.java中的代码,默认的代码中有许多的方法,这些都不需用。

package com.example.learn;
//Fragment01.java 中的代码

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

public class Fragment01 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

            return inflater.inflate(R.layout.fragment_fragment01, container, false);
    }
}

package com.example.learn;
//Fragment02.java 中的代码

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

public class Fragment02 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

            return inflater.inflate(R.layout.fragment_fragment02, container, false);
    }
}

package com.example.learn;
//Fragment03.java 中的代码

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

public class Fragment03 extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {

            return inflater.inflate(R.layout.fragment_fragment03, container, false);
    }
}

可以看见.java中的大部分代码都被去除了,

这里注意个细节,如果只是想要实现这篇文章实现的效果必须把Fragment.java代码里的其他方法都去除掉,不然无法运行

重写了Fragment中的代码后我们来改动一下xml布局文件里的内容:




    
    





    
    





    
    


这里的代码我们做了很简单的改动,只是改一下原TextView中的文字,方便一会我们区分。

3.添加按钮点击功能

可以看到我们创建的Bottom Navigation Activity相关的布局文件里有三个可以点击的按钮。接下来我们写一下BottomNavigation.java里面的代码:

package com.example.learn;

import android.os.Bundle;
import android.support.design.widget.BottomNavigationView;
import android.support.v4.app.Fragment;
import android.support.v7.app.AppCompatActivity;
import android.support.annotation.NonNull;
import android.view.MenuItem;

public class BottomNavigation extends AppCompatActivity {
    
    private android.support.v4.app.FragmentTransaction transaction;
    private android.support.v4.app.FragmentManager fragmentManager;

    private BottomNavigationView.OnNavigationItemSelectedListener mOnNavigationItemSelectedListener
            = new BottomNavigationView.OnNavigationItemSelectedListener() {

        @Override
        public boolean onNavigationItemSelected(@NonNull MenuItem item) {
            switch (item.getItemId()) {
                case R.id.navigation_home:
                    setFragment(new Fragment01());//点击第一个按钮事设置当前的Fragment
                    return true;
                case R.id.navigation_dashboard:
                    setFragment(new Fragment02());//点击第二个按钮事设置当前的Fragment
                    return true;
                case R.id.navigation_notifications:
                    setFragment(new Fragment03());//点击第三个按钮事设置当前的Fragment
                    return true;
            }
            return false;
        }
    };

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_b);
        BottomNavigationView navView = findViewById(R.id.nav_view);
        
        setFragment(new Fragment01());//活动初始化的时候设置Fragment
        
        navView.setOnNavigationItemSelectedListener(mOnNavigationItemSelectedListener);
    }

    //设置当前碎片,此方法实现Fragment的替换
    private void setFragment(Fragment fragment){
        fragmentManager=getSupportFragmentManager();
        transaction=fragmentManager.beginTransaction();
        transaction.replace(R.id.myframe,fragment);//此处的R.id.myframe,是最上面的那段代码中的Fragment。
        transaction.commit();
    }
}

在上面这段代码中,我们删除了原TextView的相关内容,添加了替换Fragment的方法,在点击按钮后使用函数实现Fragment的替换。至此,我们的代码已经完全实现了。

写在最后:

如果大家只是想单纯的实现这个功能,在新建Fragment类的时候AS会自动添加许多的方法与内容。这部分必须去掉。不然程序会闪退。
另外,碎片中的UI控件不能直接在Activity代码中用FindViewById()来使用。也会导致闪退。

作者:Zxx

你可能感兴趣的:(使用Bottom Navigation Activity和Fragment仿微信页面切换)