安卓之页面导航 Navigation


实现基础的页面导航(Navigation)功能:点击按钮,从 Home 页面切换到 Detail 页面

android navigation 不显示actionBar 安卓navigation_Navigation


首先用 Android Studio 创建一个工程,进入工程创建两个Fragment,HomeFragment 和 DetailFragement

android navigation 不显示actionBar 安卓navigation_页面导航_02


创建一个名为 HomeFragment 的布局

android navigation 不显示actionBar 安卓navigation_安卓_03


同理,再创建一个 DetailFragment


然后搭建 HomeFragment的界面

android navigation 不显示actionBar 安卓navigation_Android_04


然后搭建DetailFragment的界面

android navigation 不显示actionBar 安卓navigation_Android_05

创建一个导航文件 my_nav_graph.xml

android navigation 不显示actionBar 安卓navigation_Android_06


android navigation 不显示actionBar 安卓navigation_Navigation_07

跳出这个界面(过程较慢,耐心等待)

android navigation 不显示actionBar 安卓navigation_Navigation_08


连接好逻辑图并在 activity_main 中设置 NavHostFragment

android navigation 不显示actionBar 安卓navigation_ide_09


至此,界面已经搭建完毕,只是按钮还没有任何功能

android navigation 不显示actionBar 安卓navigation_页面导航_10

接下来给按钮添加动作
HomeFrangement.java 中给按钮添加:从Home页面转到Detail的方法

public class HomeFragment extends Fragment {
        
        public HomeFragment() {
            // 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_home, container, false);
        }
    	/***************************以上为自动生成,主要观察以下部分************************/
        @Override
        public void onActivityCreated(@Nullable Bundle savedInstanceState) { //将初始化工作放在此
            super.onActivityCreated(savedInstanceState);
            Button button = getView().findViewById(R.id.button); 
            button.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View view) {
                    NavController control = Navigation.findNavController(view);
                    control.navigate(R.id.action_homeFragment_to_detailFragment);
                }
            });
        }    
    }

这就实现了最简单的从Home转到Detail页面

以下同理,在 DetailFrangement.java 中实现 Detail 转到 Home(简便写法),

public class DetailFragment extends Fragment {
          public DetailFragment() {
              // 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_detail, container, false);
          }
      /***************************以上为自动生成,主要观察以下部分************************/
   @Override
      public void onActivityCreated(@Nullable Bundle savedInstanceState) {
          super.onActivityCreated(savedInstanceState);
          getView().findViewById(R.id.button2).
                  setOnClickListener(Navigation.createNavigateOnClickListener(
                          R.id.action_detailFragment_to_homeFragment));
      }
  }

在导航文件中点击逻辑图的连线,可以在右边的Animations选项中设置动画(每根线都可以设置)

具体动画效果可以自己尝试或者查阅文档

android navigation 不显示actionBar 安卓navigation_Android_11

最后,我们需要在界面的左上角添加一个返回箭头
在 MainActivity 中,

public class MainActivity extends AppCompatActivity {
  
      @Override
      protected void onCreate(Bundle savedInstanceState) {
          super.onCreate(savedInstanceState);
          setContentView(R.layout.activity_main);
          NavController controller = Navigation.findNavController(this,R.id.fragment);
          NavigationUI.setupActionBarWithNavController(this,controller);
      	// 在界面上方增加了返回箭头,但是点击没有功能
      }
      
  	// 添加功能需要重写 onSupportNavigateUp() 
      @Override
      public boolean onSupportNavigateUp() { // 使上方的返回箭头生效
          NavController controller = Navigation.findNavController(this, R.id.fragment);
          return controller.navigateUp();
          // return super.onSupportNavigateUp();
      }
  }

此时界面上方已经添加了返回箭头

修改 Label 属性可以更改上方显示的名称,如下图

android navigation 不显示actionBar 安卓navigation_ide_12


以上为一个最基础的页面导航简例,实现了点击按钮,切换页面的功能