android-------实现底部导航的模板

2022-05-09 03:17:41

今天学习了底部导航的模板，样式类型下图。采用Bottom Navigation Activity需要有若干个页面，在底部导航中这几个页面都是独立的，每个页面都有自己的独特的功能，页面之间没有什么前后关系。今天就做个底部导航的简单例子。用三个页面，每个页面分别实现点击图像对图像进行旋转、缩放、移动。如下图

　　第一部分：

　　首先既然用到页面之前的切换，第一想到的就是fragment，所有我们新建三个fragment（带ViewModel，这样可以帮我们保存和管理数据）。然后我们在创建三个矢量图，我用的是looks 1 2 3。然后我们再创建一个图片资源，后面用代码对它进行操作。

　　因为要用fragment，Navigation是必不可少的，新建一个类型为Navigation的文件夹，然后将三个fragment拖入到该文件里的.xml文件。因为他们之间没有什么关系，所有我们就不用线将他们连起来。如下图

　　然后我们创建一个类型为Menu的菜单，添加三个Meun Item，并修改他们的title。点击icon，将我们之前准备好的矢量图，对应的放到里面。修改他们的ID，要和navigation对应的id一样，如下图

　　 android-------实现底部导航的模板

　　第二部分：

　　将我们创建的图片资源拖到每个fragment（先删除之前的textview），修改他们的id变成一样的（方便使用），然后改变他们的位置（放到中心），如下图，修改他们的大小，

　　 android-------实现底部导航的模板

　　第三部分：

　　firstFragment:

package com.example.bottomtest;

import androidx.lifecycle.ViewModel;
import androidx.lifecycle.ViewModelProviders;

import android.animation.ObjectAnimator;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class FirstFragment extends Fragment {

    private FirstViewModel mViewModel;
    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
        imageView = view.findViewById(R.id.imageView);
        return view;
    }

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);
        mViewModel = ViewModelProviders.of(this).get(FirstViewModel.class);
        // 将之间的度数初始化为现在的（就是也保存）
        imageView.setRotation(mViewModel.rotation);
        // TODO: Use the ViewModel
        //ObjectAnimator继承自ValueAnimator，所以ValueAnimator所能使用的方法，ObjectAnimator都可以使用，ObjectAnimator同时也重写了几个方法，比如：ofInt() ofFloat()等4
        ///第一个参数：指定执行动画的控件，第二个参数：指定控件的属性，第三个参数是可变长参数，我们先初始为0
        final ObjectAnimator animator = ObjectAnimator.ofFloat(imageView,"rotation",0);
        // 设置它运动的时间
        animator.setDuration(500);
        // 每当点击图片，图片旋转100度
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animator.setFloatValues(imageView.getRotation(),imageView.getRotation()+100);
                mViewModel.rotation += 100;
                animator.start();
            }
        });
    }

}

　　它对应的ViewModel我们只需添加一个float类型的数据即可，不用我们多写。（如下图）

　　 android-------实现底部导航的模板

　　secondFragment：

package com.example.bottomtest;

import androidx.lifecycle.ViewModelProviders;

import android.animation.ObjectAnimator;
import android.media.Image;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class SecondFragment extends Fragment {

    private SecondViewModel mViewModel;
    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 = ViewModelProviders.of(this).get(SecondViewModel.class);
        imageView.setRotationX(mViewModel.scaleFactor);
        imageView.setRotationY(mViewModel.scaleFactor);
        // TODO: Use the ViewModel
        // scale有两个
        final ObjectAnimator animatorX = ObjectAnimator.ofFloat(imageView,"scaleX",0);
        final ObjectAnimator animatorY = ObjectAnimator.ofFloat(imageView,"scaleY",0);
        animatorX.setDuration(500);
        animatorY.setDuration(500);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                animatorX.setFloatValues(imageView.getScaleX()+ 0.1f );
                animatorY.setFloatValues(imageView.getScaleY()+ 0.1f );
                mViewModel.scaleFactor += 0.1;
                animatorX.start();
                animatorY.start();
            }
        });
    }

}

　　对应的VimeModel如下图：

　　 android-------实现底部导航的模板

　　thirdFragment：

package com.example.bottomtest;

import androidx.lifecycle.ViewModelProviders;

import android.animation.ObjectAnimator;
import android.os.Bundle;

import androidx.annotation.NonNull;
import androidx.annotation.Nullable;
import androidx.fragment.app.Fragment;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

import java.util.Random;

public class ThirdFragment extends Fragment {

    private ThirdViewModel mViewModel;
    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 = ViewModelProviders.of(this).get(ThirdViewModel.class);
        imageView.setX(imageView.getX()+mViewModel.dx);
        // TODO: Use the ViewModel
        final ObjectAnimator animator = ObjectAnimator.ofFloat(imageView,"x",0);
        animator.setDuration(500);
        imageView.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                float dx = new Random().nextBoolean()?100:-100;
                animator.setFloatValues(imageView.getX(),imageView.getX()+dx);
                mViewModel.dx += dx;
                animator.start();
            }
        });
    }

}

　　对应的ViewModel如下图

　　 android-------实现底部导航的模板

　　MainActivity:

package com.example.bottomtest;

import androidx.appcompat.app.AppCompatActivity;
import androidx.navigation.NavController;
import androidx.navigation.Navigation;
import androidx.navigation.ui.AppBarConfiguration;
import androidx.navigation.ui.NavigationUI;

import android.os.Bundle;

import com.google.android.material.bottomnavigation.BottomNavigationView;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        BottomNavigationView navigationView = findViewById(R.id.bottomNavigationView);
        NavController navController = Navigation.findNavController(this, R.id.fragment);
        // 工具条的配置
        AppBarConfiguration configuration = new AppBarConfiguration.Builder(navigationView.getMenu()).build();
        NavigationUI.setupActionBarWithNavController(this,navController,configuration);
        NavigationUI.setupWithNavController(navigationView, navController);
    }
}

android-------实现底部导航的模板

码农公寓

相关文章