安卓之页面导航 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 属性可以更改上方显示的名称,如下图
以上为一个最基础的页面导航简例,实现了点击按钮,切换页面的功能