Android-BottomNavigation的创建

BottomNavigation

基本步骤

1. 新建一个项目

2. 选择三个矢量图(随意

3. 创建三个Fragment和相应的ViewModel

   

4. 创建一个Menu资源

   

   会生成一个文件夹和menu.xml文件

   

5. 修改menu.xml

   

6. 创建一个navigation资源,并进行修改

   

7. 修改activity_main.xml

   首先引入我们的menu

   

   设置一个NavHostFragment

   

8. 修改MainActivity

   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.activity_main);
   
       BottomNavigationView bottomNavigationView  = findViewById(R.id.bottomNavigationView);
       NavController controller = Navigation.findNavController(this, R.id.fragment);
   
       AppBarConfiguration configuration = new AppBarConfiguration.Builder(bottomNavigationView.getMenu()).build();
   
       NavigationUI.setupActionBarWithNavController(this,controller,configuration);
       NavigationUI.setupWithNavController(bottomNavigationView,controller);
   
   }
   

9. 效果

   

以上基本就完成了

增加动画(ObjectAnimator)

1. 添加图标

   

2. 修改FirstFragment，添加旋转动画

   public class FirstFragment extends Fragment {
   
       private FirstViewModel mViewModel;
       private ImageView imageView;
   
       public static FirstFragment newInstance() {
           return new FirstFragment();
       }
   
       @Override
       public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                                @Nullable Bundle savedInstanceState) {
           View view = inflater.inflate(R.layout.first_fragment,container,false);
           imageView = view.findViewById(R.id.imageView);
   
   
           return view;
       }
   
       @Override
       public void onActivityCreated(@Nullable Bundle savedInstanceState) {
           super.onActivityCreated(savedInstanceState);
           mViewModel = new ViewModelProvider(this).get(FirstViewModel.class);
   
           imageView.setRotation(mViewModel.rotationPosition);
   
           //添加旋转效果
           ObjectAnimator objectAnimator = ObjectAnimator.ofFloat(imageView, "rotation", 0, 0);
           objectAnimator.setDuration(500);
   
           imageView.setOnClickListener(v->{
               if(!objectAnimator.isRunning()) {
                   objectAnimator.setFloatValues(imageView.getRotation(), imageView.getRotation() + 100);
                   mViewModel.rotationPosition = imageView.getRotation() + 100;
                   objectAnimator.start();
               }
           });
   
       }
   
   }
   

3. 修改SecondFragment，添加缩放动画

   public class SecondFragment extends Fragment {
   
       private SecondViewModel mViewModel;
       private ImageView imageView;
   
       public static SecondFragment newInstance() {
           return new SecondFragment();
       }
   
       @Override
       public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                                @Nullable Bundle savedInstanceState) {
           View view = inflater.inflate(R.layout.second_fragment, container, false);
           imageView = view.findViewById(R.id.imageView);
   
           return view;
       }
   
       @Override
       public void onActivityCreated(@Nullable Bundle savedInstanceState) {
           super.onActivityCreated(savedInstanceState);
           mViewModel = new ViewModelProvider(this).get(SecondViewModel.class);
   
   
           imageView.setScaleX(mViewModel.scaleFactor);
           imageView.setScaleY(mViewModel.scaleFactor);
   
           //缩放动画
           ObjectAnimator scaleX = ObjectAnimator.ofFloat(imageView, "scaleX", 0, 0);
           ObjectAnimator scaleY = ObjectAnimator.ofFloat(imageView, "scaleY", 0, 0);
           scaleX.setDuration(500);
           scaleY.setDuration(500);
   
           imageView.setOnClickListener(v->{
               if(!scaleX.isRunning()){
                   scaleX.setFloatValues(imageView.getScaleX()+0.1f);
                   scaleY.setFloatValues(imageView.getScaleY()+0.1f);
   
                   //记录当前旋转值
                   mViewModel.scaleFactor = imageView.getScaleX() + 0.1f;
   
                   scaleX.start();
                   scaleY.start();
               }
           });
       }
   
   }
   

4. 修改ThirdFragment,添加移动动画

   public class ThirdFragment extends Fragment {
   
       private ThirdViewModel mViewModel;
       private ImageView imageView;
   
       public static ThirdFragment newInstance() {
           return new ThirdFragment();
       }
   
       @Override
       public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container,
                                @Nullable Bundle savedInstanceState) {
           View view =  inflater.inflate(R.layout.third_fragment, container, false);
           imageView = view.findViewById(R.id.imageView);
   
           return view;
       }
   
       @Override
       public void onActivityCreated(@Nullable Bundle savedInstanceState) {
           super.onActivityCreated(savedInstanceState);
           mViewModel = new ViewModelProvider(this).get(ThirdViewModel.class);
   
           imageView.setX(mViewModel.dx+imageView.getX());
   
           ObjectAnimator objectAnimatorX = ObjectAnimator.ofFloat(imageView, "x", 0, 0);
           objectAnimatorX.setDuration(500);
   
           imageView.setOnClickListener(v->{
               if(!objectAnimatorX.isRunning()){
                   float dx = new Random().nextBoolean() ? 100: -100;
                   mViewModel.dx += dx;
   
                   objectAnimatorX.setFloatValues(imageView.getX()+dx);
                   objectAnimatorX.start();
               }
           });
   
       }
   }
   

5. 效果