【安卓笔记】—— 最基础的页面导航 Navigation

实现基础的页面导航（Navigation）功能：点击按钮，从 Home 页面切换到 Detail 页面

首先用 Android Studio 创建一个工程，进入工程

创建两个Fragment，HomeFragment 和 DetailFragement

创建一个名为 HomeFragment 的布局

同理，再创建一个 DetailFragment

---

然后搭建 HomeFragment的界面
然后搭建DetailFragment的界面

创建一个导航文件 my_nav_graph.xml
跳出这个界面（过程较慢，耐心等待）

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

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

接下来给按钮添加动作
在 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选项中设置动画(每根线都可以设置)
具体动画效果可以自己尝试或者查阅文档

最后，我们需要在界面的左上角添加一个返回箭头
在 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 属性可以更改上方显示的名称，如下图

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