Android - 如何使用像 Google Forms 这样的动画更改 EditText 线条颜色?
Android - How to change EditText line color with animation like Google Forms?
我正在尝试实现类似于 google 形式的动画,如下面的 gif 所示:
EditText 的底线应该随着从中心开始的填充动画改变颜色。
这可能很容易,但我是 android 的新手,我没有找到任何关于这个问题的在线资源。谁能给我一点提示或提供 link 一些关于我该怎么做的教程?
请参考这篇blog。该博客针对您想要实现的完全相同的动画实施了一种变通方法。您可以通过将 EditText 的背景设置为 #00000000
并在 FrameLayout[=] 中使用两个 Views 来实现此目的21=](一个在另一个之上,最上面的一开始是不可见的)作为 EditText 的底线。当 EditText 获得焦点时,您可以使 View(顶部的一个)可见,并将缩放动画添加到 View 达到类似的效果。
我做了一些看起来像的东西,我会把它放在你的 TextView 下:
package com.example.trist_000.teststack;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class customm extends View {
private class myanim extends Animation{
public myanim(){
this.setRepeatMode(INFINITE);
this.setRepeatCount(INFINITE);
this.setDuration(2000);
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
time =(getWidth()/2)*interpolatedTime;
postInvalidate();
}
}
public customm(Context context) {
super(context);
}
public customm(Context context, AttributeSet attrs) {
super(context, attrs);
myanim anim = new myanim();
this.startAnimation(anim);
}
Paint paint = new Paint();
float time = 0;
@Override
public void onDraw(Canvas canvas){
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(4);
paint.setAntiAlias(true);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(1);
canvas.drawLine(0, getHeight()/2, getWidth(), getHeight()/2, paint);
paint.setStrokeWidth(2);
paint.setColor(Color.RED);
canvas.drawLine(getWidth() / 2, getHeight()/2, (getWidth()/2)-time, getHeight()/2, paint);
canvas.drawLine(getWidth() / 2,getHeight()/2, (getWidth()/2) +time, getHeight()/2, paint);
super.onDraw(canvas);
}
}
在您的 xml 文件中:
<com.example.trist_000.teststack.customm
android:layout_width="300dp"
android:layout_height="5dp" />
你得稍微改进一下 ;).
我认为 google 和 ViewAnimationUtils.createCircularReveal
一样。
这是我如何实现这种效果的(请注意,它适用于 api 21 岁及以上)
另请注意,我使用触摸点以获得更好的用户体验
所以我们需要以下内容:
selector_line_bellow.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:state_focused="true">
<layer-list>
<item android:bottom="-25dp">
<shape android:shape="line">
<solid android:color="@android:color/transparent"/>
<stroke
android:width="3dp"
android:color="#017ba7"/>
</shape>
</item>
</layer-list>
</item>
<!-- default-->
<item >
<layer-list>
<item android:bottom="-25dp">
<shape android:shape="line">
<solid android:color="@android:color/transparent"/>
<stroke
android:width="3dp"
android:color="#11017ba7"/>
</shape>
</item>
</layer-list>
</item>
</selector>
我们的 EditText
看起来像这样
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:background="@drawable/selector_line_bellow"
android:layout_margin="@dimen/margin_big"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:layout_height="wrap_content"/>
最后一次触摸是在您的 activity class 中或将使用此 EditText
的任何地方添加这段代码
editText.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_DOWN) {
ViewAnimationUtils.createCircularReveal(editText,
(int) event.getX(),
(int) event.getY(),
0,
editText.getHeight() * 2).start();
}
return false;
}
});
我正在尝试实现类似于 google 形式的动画,如下面的 gif 所示:
EditText 的底线应该随着从中心开始的填充动画改变颜色。 这可能很容易,但我是 android 的新手,我没有找到任何关于这个问题的在线资源。谁能给我一点提示或提供 link 一些关于我该怎么做的教程?
请参考这篇blog。该博客针对您想要实现的完全相同的动画实施了一种变通方法。您可以通过将 EditText 的背景设置为 #00000000
并在 FrameLayout[=] 中使用两个 Views 来实现此目的21=](一个在另一个之上,最上面的一开始是不可见的)作为 EditText 的底线。当 EditText 获得焦点时,您可以使 View(顶部的一个)可见,并将缩放动画添加到 View 达到类似的效果。
我做了一些看起来像的东西,我会把它放在你的 TextView 下:
package com.example.trist_000.teststack;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.util.AttributeSet;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Transformation;
public class customm extends View {
private class myanim extends Animation{
public myanim(){
this.setRepeatMode(INFINITE);
this.setRepeatCount(INFINITE);
this.setDuration(2000);
}
@Override
protected void applyTransformation(float interpolatedTime, Transformation t) {
super.applyTransformation(interpolatedTime, t);
time =(getWidth()/2)*interpolatedTime;
postInvalidate();
}
}
public customm(Context context) {
super(context);
}
public customm(Context context, AttributeSet attrs) {
super(context, attrs);
myanim anim = new myanim();
this.startAnimation(anim);
}
Paint paint = new Paint();
float time = 0;
@Override
public void onDraw(Canvas canvas){
paint.setStyle(Paint.Style.STROKE);
paint.setStrokeWidth(4);
paint.setAntiAlias(true);
paint.setColor(Color.BLACK);
paint.setStrokeWidth(1);
canvas.drawLine(0, getHeight()/2, getWidth(), getHeight()/2, paint);
paint.setStrokeWidth(2);
paint.setColor(Color.RED);
canvas.drawLine(getWidth() / 2, getHeight()/2, (getWidth()/2)-time, getHeight()/2, paint);
canvas.drawLine(getWidth() / 2,getHeight()/2, (getWidth()/2) +time, getHeight()/2, paint);
super.onDraw(canvas);
}
}
在您的 xml 文件中:
<com.example.trist_000.teststack.customm
android:layout_width="300dp"
android:layout_height="5dp" />
你得稍微改进一下 ;).
我认为 google 和 ViewAnimationUtils.createCircularReveal
一样。
这是我如何实现这种效果的(请注意,它适用于 api 21 岁及以上)
另请注意,我使用触摸点以获得更好的用户体验
所以我们需要以下内容: selector_line_bellow.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_enabled="true"
android:state_focused="true">
<layer-list>
<item android:bottom="-25dp">
<shape android:shape="line">
<solid android:color="@android:color/transparent"/>
<stroke
android:width="3dp"
android:color="#017ba7"/>
</shape>
</item>
</layer-list>
</item>
<!-- default-->
<item >
<layer-list>
<item android:bottom="-25dp">
<shape android:shape="line">
<solid android:color="@android:color/transparent"/>
<stroke
android:width="3dp"
android:color="#11017ba7"/>
</shape>
</item>
</layer-list>
</item>
</selector>
我们的 EditText
看起来像这样
<EditText
android:id="@+id/editText"
android:layout_width="match_parent"
android:background="@drawable/selector_line_bellow"
android:layout_margin="@dimen/margin_big"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:paddingLeft="3dp"
android:paddingRight="3dp"
android:layout_height="wrap_content"/>
最后一次触摸是在您的 activity class 中或将使用此 EditText
的任何地方添加这段代码
editText.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
if(event.getAction()==MotionEvent.ACTION_DOWN) {
ViewAnimationUtils.createCircularReveal(editText,
(int) event.getX(),
(int) event.getY(),
0,
editText.getHeight() * 2).start();
}
return false;
}
});