Button（按钮）与简单动画制作

一、Button（按钮）

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

（一）、下面实现第一个功能：

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

代码：
1，activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<Button
    android:id="@+id/bt_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="登录"
    android:textColor="#ffffff"
    android:textSize="30sp"
    android:tag="1"
   />
<Button
    android:id="@+id/bt_done"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="保存"
    android:layout_below="@id/bt_login"
    android:layout_marginTop="50dp"
    android:textColor="@color/colorPrimary"
    android:enabled="false"/>
<Button
    android:id="@+id/bt_edit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="编辑"
    android:layout_below="@id/bt_login"
    android:layout_marginTop="50dp"
    android:layout_alignRight="@id/bt_login"
    android:textColor="@color/colorPrimary"
    />
  </RelativeLayout>

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资源文件，可以根据不同的状态，设置不同的图片效果，关键节点<selector>。
可以设置的属性：


菜鸟教程

代码：
1,activity_main.xml文件

<?xml version="1.0" encoding="utf-8"?>
<android.support.v7.widget.LinearLayoutCompat xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:orientation="vertical"
>
 <Button
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="分享"
   android:textColor="@drawable/textcolor"
   />
 <EditText
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="显示的文字"
   android:textSize="30dp"
   android:textColor="@drawable/edittextcolor"/>
 <Button
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:background="@drawable/shapeandcolor"
   />
 <Button
   android:layout_width="100dp"
   android:layout_height="100dp"
   android:layout_marginLeft="150dp"
   android:layout_marginTop="100dp"
   android:background="@drawable/regetangleshape"
   />
</android.support.v7.widget.LinearLayoutCompat>

效果展示

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!--配置图片 drawable
    配置颜色color-->
<!--按下-->
  <item android:drawable="@drawable/pressed"
    android:state_pressed="true"/>
<!--无效状态下-->
  <item android:drawable="@drawable/enable"
    android:state_enabled="false"/>
<!--正常状态下-->
  <item android:drawable="@drawable/normal"/>
</selector>

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#0000ff"
    android:state_focused="true"/>
    <!--默认状态下-->
      <item android:color="#0E0C0C"/>
</selector>

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

<?xml version="1.0" encoding="utf-8"?>
<!--长方形
corners: 圆角大小
solid :填充颜色
stroke ：边框颜色 宽度
gradient: 渐变色 UI-拟物化 -扁平化设计
padding 内边距-->
<shape xmlns:android="http://schemas.android.com/apk/res/android"
      android:shape="rectangle">
    <stroke
    android:color="@color/colorAccent"
    android:width="1dp"/>
    <corners
    android:topRightRadius="50dp"
    android:topLeftRadius="50dp"
    android:bottomLeftRadius="50dp"
    android:bottomRightRadius="50dp"/>
      <!--<solid android:color="@color/colorPrimary"/>-->
    <gradient
    android:startColor="@color/colorPrimary"
    android:centerColor="@color/colorAccent"
    android:endColor="@color/colorPrimaryDark"/>
</shape>

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

二、动画

（一）关键帧动画

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

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

    <?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android"
     android:oneshot="false">
   <!--一个item对应一帧：一张图片
    drawable:配置动画的图片
    duration：配置这张图片再整个动画中的播放时间 单位毫秒-->
 <item android:drawable="@drawable/campfire01"
  android:duration="200"/>
<item android:drawable="@drawable/campfire02"
  android:duration="200"/>
<item android:drawable="@drawable/campfire03"
  android:duration="200"/>
<item android:drawable="@drawable/campfire04"
  android:duration="200"/>
<item android:drawable="@drawable/campfire05"
  android:duration="200"/>
<item android:drawable="@drawable/campfire06"
  android:duration="200"/>
<item android:drawable="@drawable/campfire07"
  android:duration="200"/>
<item android:drawable="@drawable/campfire08"
  android:duration="200"/>
<item android:drawable="@drawable/campfire09"
  android:duration="200"/>
 <item android:drawable="@drawable/campfire10"
  android:duration="200"/>
 <item android:drawable="@drawable/campfire11"
  android:duration="200"/>
<item android:drawable="@drawable/campfire12"
android:duration="200"/>
<item android:drawable="@drawable/campfire13"
  android:duration="200"/>
<item android:drawable="@drawable/campfire14"
  android:duration="200"/>
<item android:drawable="@drawable/campfire15"
  android:duration="200"/>
<item android:drawable="@drawable/campfire16"
  android:duration="200"/>
<item android:drawable="@drawable/campfire17"
  android:duration="200"/>
</animation-list>

这样在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）

    <?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:duration="1000"
    android:fillAfter="true"
    android:repeatMode="reverse">
  <!--<translate android:fromXDelta="0"-->
    <!--android:toXDelta="700"/>-->
  <alpha android:fromAlpha="0"
    android:toAlpha="1.0"/>
<scale
  android:fromXScale="0.1"
  android:toYScale="1.0"
  android:toXScale="1.0"
  android:fromYScale="0.1"
  android:pivotX="100"
  android:pivotY="100"
  />
<rotate
  android:fromDegrees="0"
  android:toDegrees="360"
  android:pivotY="200"
  android:pivotX="300"/>
</set>

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

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<View
   android:id="@+id/v_anim"
   android:layout_width="200dp"
   android:layout_height="200dp"
   android:background="@color/colorAccent"
   android:layout_centerInParent="true"/>
</RelativeLayout>

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坐标并没有发生改变，所以如果要改变控件的位置，就还需要学习属性动画才能实现。但是这些动画做起来感觉非常的有趣，能够提高编程兴趣。

©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • 2019一05一12
    今天，晚上我自己作了一朵花，这朵花怎么说呢？是这样作的，第一部，拿点橡皮泥捏成6个圆形，第二部，把6个圆形摁成扁的...
    a8592650cd02阅读 858评论 0赞 1
  • 梦
    "阳光趴在三月膝头酣睡着， 麦苗返青的幽香， 从它繁杂的梦里溢出来。 飘荡在村庄的周围， 东风潜伏在垂柳浓密的发丝间，"
    LauraLuohui阅读 910评论 0赞 0
  • 如果
    如果 你不能让自己喜欢的女孩 坐在 宝马车里 你就不该打扰她 免得 让人笑话
    躺下阅读 832评论 0赞 1
  • 对于android开发者（或者其他的开发者）一篇很好的启发文章
    我一个好朋友，他在一家国内较大借贷平台做前端工程师，每天五点起床，早早的到公司，开始读一些经典的前端类的书籍。起的...
    cuiandroid阅读 1,235评论 0赞 0
  • 杯中世界
    （图：via 家住海淀的林先生） 看着恍惚，喝完恍惚，好像这酒把杯子都带进了血液里，把眼睛都蒙住了，把心的七窍都封...
    丁一文阅读 3,038评论 0赞 2