效果图
废话不多说,先看效果图:
开发环境
我发现很多人写文章都没写开发环境,抄过去经常也要改不少东西。所以从我做起,我先写一下开发环境。
Android Studio 3.4.2
SDK:Android Q API level29
修改字体
我们先讲讲怎么修改字体。
我只讲我用的方法。安卓默认只有4种字体,我要导入自定义的字体。方法如下:
在app/src/main下新建一个assets文件夹,在assets文件夹里面再新建一个fonts文件夹。将自定义的字体放进去到fonts下面,可以放进去otf格式和ttf格式的字体。
AS3.4.2可以右键新建出fonts文件夹:
new→folder→font resources folder
然后在设置layout.xml
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/title1"
android:id="@+id/title1" />
然后在mainActivity里面设置字体:
public class MainActivity extends AppCompatActivity {
private TextView title1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
title1 = findViewById(R.id.title1);
// 设置字体
Typeface typeface = Typeface.createFromAsset(getAssets(),"fonts/MarkerScratch-Regular-2.ttf");
title1.setTypeface(typeface);
}
}
"fonts/MarkerScratch-Regular-2.ttf"为我在fonts目录下放置的字体,自行改为自己要自定义的字体即可。
更详细的换字体的方法请查看Android TextView更换字体
字体渐变
效果图如下:
新建一个GradientColorTextView类:
import android.widget.TextView;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.util.AttributeSet;
/**
* Created by Haron on 2017/11/14.
*/
public class GradientColorTextView extends TextView {
private LinearGradient mLinearGradient;
private Paint mPaint;
private int mViewWidth = 0;
private Rect mTextBound = new Rect();
public GradientColorTextView (Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
mViewWidth = getMeasuredWidth();
mPaint = getPaint();
String mTipText = getText().toString();
mPaint.getTextBounds(mTipText, 0, mTipText.length(), mTextBound);
mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
new int[]{0xFFFFEABA, 0xFFBE8B49},
null, Shader.TileMode.REPEAT);
mPaint.setShader(mLinearGradient);
canvas.drawText(mTipText, getMeasuredWidth() / 2 - mTextBound.width() / 2, getMeasuredHeight() / 2 + mTextBound.height() / 2, mPaint);
}
}
修改layout.xml:
<com.example.myTextView.GradientColorTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/title1"
android:id="@+id/title1"
android:layout_marginLeft="10dp"
android:textSize="50sp"
/>
引用路径com.example.myTextView.GradientColorTextView改为自己的路径,AS都有提示的。
引用自Android Textview实现文字颜色渐变效果
字体动态渐变
经过上一步应该就已经实现了在两种颜色之间的字体渐变了。接下来就要把颜色改成动态的了。
修改GradientColorTextView.java
package com.example.myTextView;
import android.animation.ValueAnimator;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Rect;
import android.graphics.Shader;
import android.util.AttributeSet;
import android.widget.TextView;
/**
* Created by Haron on 2017/11/14.
*/
/**
* Edit by Negineko on 2019/08/23.
*/
public class GradientColorTextView extends TextView {
private LinearGradient mLinearGradient;
private Paint mPaint;
private int mViewWidth = 0;
private Rect mTextBound = new Rect();
private int[] color = {0xFFFFEABA, 0xFFBE8B49}; // 渐变色范围
private ValueAnimator leftAnimator,rightAnimator;
private boolean isAnimation = true; // 设置渐变色动态变化
public GradientColorTextView (Context context, AttributeSet attrs) {
super(context, attrs);
invalidate();
}
public void setIsAnimation(boolean isAnimation){
this.isAnimation = isAnimation;
}
public void setColor(int[] color){
this.color = color;
invalidate();
}
@Override
protected void onDraw(Canvas canvas) {
mViewWidth = getMeasuredWidth();
mPaint = getPaint();
String mTipText = getText().toString();
mPaint.getTextBounds(mTipText, 0, mTipText.length(), mTextBound);
leftAnimator = ValueAnimator.ofInt(0, color[0]);
rightAnimator = ValueAnimator.ofInt(0, color[1]);
// 自动更新view
invalidate();
// 设置是否有动画
if (isAnimation){
color[0] = color[0]-100;
color[1] = color[1]-100;
}
// 设置颜色渐变
mLinearGradient = new LinearGradient(0, 0, mViewWidth, 0,
color,
null, Shader.TileMode.REPEAT);
// System.out.println(color.toString());
mPaint.setShader(mLinearGradient);
canvas.drawText(mTipText, getMeasuredWidth() / 2 - mTextBound.width() / 2, getMeasuredHeight() / 2 + mTextBound.height() / 2, mPaint);
}
}
给出demo下载地址
myTextViewDemo
版权声明:本文为negineko原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。