Button(按钮)与简单动画制作

一、Button(按钮)

因为Button是TextView的子类,所以TextView的很多属性在Button上也可以使用,那一些简单的设置就不用再做了。

(一)、下面实现第一个功能:

1,点击一个按钮,按钮上的提示文字发生改变,比如点击登录后,按钮变成退出按钮;
2,点击一个编辑按钮后,才能点击另一个保存按钮,即如果不点击编辑按钮,则保存一直处于无效状态

代码:
1,activity_main.xml文件



2,MainActivity文件

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
public class MainActivity extends AppCompatActivity  {
Button loginButton;
Button donebutton;
Button editButton;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
     loginButton = findViewById(R.id.bt_login);
     donebutton = findViewById(R.id.bt_done);
     editButton = findViewById(R.id.bt_edit);
    //给按钮添加事件 匿名类和用activity类监听复杂,用lambda表达式
    loginButton.setOnClickListener(view -> {
        if(loginButton.getId() == R.id.bt_login) {
            if (loginButton.getTag().equals("1")) {
                loginButton.setText("退出");
                loginButton.setTag("0");
            } else {
               loginButton.setText("登录");
                loginButton.setTag("1");
            }
        }
    });
    donebutton.setOnClickListener(view ->
    { donebutton.setEnabled(false);
        editButton.setEnabled(true);});

    editButton.setOnClickListener(v -> {
        donebutton.setEnabled(true);
        editButton.setEnabled(false);});
    }
}

效果展示

代码解释:
1,先在xml文件里添加了三个Button按钮,然后设置这三个按钮的位置和大小;
2,为这三个按钮添加事件:
按钮的点击事件 通常接收一个参数:view; 当按钮被点击,系统接收这个事件, 并把这个事件回调给监听者,把当前按钮被点击的按钮作为参数传递过去
注意:使用的时候 需要转化为对应的类型,因此不建议使用;
所以我们改用了Lambda表达式。

(二)、第二个功能

在实际开发过程中,我们可能会有这样的需求:按钮按下的时候是一种颜色,弹起又是一种颜色(也可以是按下是一张图片,弹开就是另一个图片),还有设置按钮的形状和填充颜色以及颜色的分布等功能都可以通过编写一个drawable的资源文件来实现,这种编写的资源文件不单单可以用在Button按钮上,也可以使用在其他控件上;
编写drawable资源文件,可以根据不同的状态,设置不同的图片效果,关键节点
可以设置的属性:


菜鸟教程

代码:
1,activity_main.xml文件



 

效果展示

PS:我们第一个按钮的功能点击之后字体的颜色会发生改变;第二个是输入框,当我们没有点击输入框的时候,输入框里面的字体是黑色的,当我们点击之后输入,字体会变成蓝色;第三个按钮是图片按钮,当我们点击之后变成了另一张图片,弹开之后又变成了另一幅图片;第四个是自己设置形状的按钮,形状是一个圆形,颜色填充是渐变色。
1,backgroundcolor.xml资源文件,这个就是配置的第三个按钮,点击之后可以该变图片;





  

  

  

2,edittextcolor.xml文件,这个设置的是输入框的文字的改变;



    
    
      

3,regetangleshape.xml文件,这个是配置圆形的按钮,以及颜色的填充;注意配置这个文件的话,selector关键字改成了shape。




    
    
      
    

注意: 注意配置是有先后顺序的,必须把默认的状态放在后面, 如果放在前面,优先匹配 ,一旦匹配上了 后面的配置就无效了。

二、动画

(一)关键帧动画

关键帧动画是一种常见的动画形式,其原理是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成动画。
创建动画的方式:

  • 一,使用xml配置动画 ,但动画是固定的
    res -> drawable里面创建动画的xml文件

    
    
       
     
    
    
    
    
    
    
    
    
     
     
    
    
    
    
    
    
    
    

这样在activity_main.xml文件里添加这个动画,就可以展示出下面的效果


效果展示
  • 二,在MainActivity.java文件里面使用代码创建

    public class MainActivity extends AppCompatActivity {
     @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
        @Override
        protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
      //1,创建一个动画资源
      AnimationDrawable animationDrawable = new AnimationDrawable();
      //2,添加每一帧的动画
    
      int[] resID = {R.drawable.campfire01,R.drawable.campfire02,R.drawable.campfire03,
              R.drawable.campfire04,R.drawable.campfire05,R.drawable.campfire06,
              R.drawable.campfire07,R.drawable.campfire08,R.drawable.campfire09,
              R.drawable.campfire10,R.drawable.campfire11,R.drawable.campfire12,
              R.drawable.campfire13,R.drawable.campfire14,R.drawable.campfire15,
              R.drawable.campfire16,R.drawable.campfire17
      };
      for(int id:resID) {
          animationDrawable.addFrame(getResources().getDrawable(id , null), 200);
      }
      //3,使用这个动画资源
      ImageView imageView = findViewById(R.id.iv_animation);
      imageView.setImageDrawable(animationDrawable);
      //启动动画
      animationDrawable.start();
      }
       @Override
        public boolean onTouchEvent(MotionEvent event) {
        if(event.getAction() == MotionEvent.ACTION_DOWN){
    
          
          //1,获取动画控件
          ImageView imageView = findViewById(R.id.iv_animation);
          //2,通过控件获取动画
          AnimationDrawable animationDrawable = (AnimationDrawable)imageView.getDrawable();
          //3,启动动画
          animationDrawable.start();
          }
      return true;
      }
    }
    

使用代码创建的这个动画还添加了一个事件,就是点击一下屏幕,动画才会开始播放;

(二)补间动画

所谓补间动画又叫做中间帧动画,渐变动画,只要建立起始和结束的画面,中间部分由电脑自动生成,省去了中间动画制作的复杂过程。
补间动画能完成一系列简单的变化(如位置、尺寸、透明度、和旋转等)。例如,在你的程序中有一个ImageView组件,我们通过补间动画可以使该视图组件实现放大、缩小、旋转、渐变等。补间动画类位于android.view.animation包中,该包中包含了一些常用的动画实现类Animation:动画抽象类,其他几个实现类继承该类。
分类:

类名 作用
ScaleAnimation 控制尺寸变化的动画类
AlphaAnimation 控制透明度变化的动画类
RotateAnimation 控制旋转变化的动画类
TranslateAnimation 控制位置变化的动画类
AnimationSet 定义动画属性集合类
AnimationUtils 动画工具类

属性:

xml属性 功能
duration 动画持续时间
startOffset 动画开始延迟时间
fromXDelta 动画起始x轴位置
toXDelta 动画结束x轴位置
fromYDelta 动画起始y轴位置
toYDelta 动画结束y轴位置
fromXScale 开始x轴方向缩放值
toXScale 结束时x轴方向缩放值
fromYScale 开始y轴方向缩放值
toYScale 开始y轴方向缩放值
pivotX 旋转、缩放中心点x坐标
pivotY 旋转、缩放中心点y坐标
fillBefore 动画完成后,保持动画前状态,默认true
fillAfter 动画完成后,保持动画后状态,默认false
fillEnabled 是否使用fillBefore值,对fillAfter值无影响,默认为true
repeatMode 重放,restart正序重放,reverse倒序回放,默认restart
repeatCount 重放次数,播放次数=重放次数+1,infinite为无限播放
fromAlpha 开始时透明图(0.0~1.0)
toAlpha 结束时透明图(0.0~1.0)
fromDegrees 开始时角度
toDegrees 结束时角度

创建方式:

  • 一,xml文件配置
    1,创建一个animation.xml文件( res->animation->xxx.xml)

    
    
      
        
      
    
    
    
    

2,将这个动画添加到activity_main.xml文件的一个控件中





3,在MainActivity.java文件中给这个控件添加触摸事件

@Override
public boolean onTouchEvent(MotionEvent event) {
    if(event.getAction() == MotionEvent.ACTION_DOWN){
 //找到需要动画的控件
        View view = findViewById(R.id.v_anim);
        //2,加载xml文件动画文件 -> 得到动画
        Animation translate = AnimationUtils.loadAnimation(this,R.anim.animation);
        //3,将这个动画作用到这个控件上
        view.startAnimation(translate);
       }
      return true;
}
效果展示
  • 二,代码创建

     @Override
    public boolean onTouchEvent(MotionEvent event) {
      if(event.getAction() == MotionEvent.ACTION_DOWN){
    //找到需要动画的控件
      View view = findViewById(R.id.v_anim);
      //代码创建
          //2,创建动画
          AlphaAnimation alphaAnimation = new AlphaAnimation(0,1);
          alphaAnimation.setDuration(3000);
          alphaAnimation.setFillAfter(true);
          RotateAnimation rotateAnimation = new RotateAnimation
                  (0,360,(float)0.5*view.getWidth(),
                          (float)0.5*view.getHeight());
          rotateAnimation.setDuration(3000);
          //3,开启动画
          view.startAnimation(alphaAnimation);
          view.startAnimation(rotateAnimation);
        }
      return true;
      }
    
效果展示

三、学习感悟

现在学习的关键帧动画和补间动画都是添加了一个效果,并没有改变空间的属性,比如给一个控件添加平移的动画,那这个控件平移后的“位置“”虽然改变了,但他的x,y坐标并没有发生改变,所以如果要改变控件的位置,就还需要学习属性动画才能实现。但是这些动画做起来感觉非常的有趣,能够提高编程兴趣。

你可能感兴趣的:(Button(按钮)与简单动画制作)