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

    


 

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

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

 

 

 

 

 

 

 

 

 

 

 

 

 

 


 

 

   第一部分:

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

 

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

 

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

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

 

 

 

 

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

 

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

 

 


 

 

 

  第二部分:

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

 

 

 

  android-------实现底部导航的模板  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-------实现底部导航的模板

上一篇:安装Laravel遇到You must enable the openssl extension to download files via https问题


下一篇:codeforces B. Bear and Strings 解题报告