Android绘制文本与图片及动效详解

目录
  • 绘制文本
  • 绘制图片
  • 绘制路径
  • 逐帧动画
  • 补间动画

绘制文本

绘制类 借助 Canvas 类进行绘制

通过重写View.onDraw 方法来进行旁白描绘

package com.mingrisoft;
import android.app.Fragment;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.LinearGradient;
import android.graphics.Paint;
import android.graphics.Shader;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import android.widget.RelativeLayout;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout fragment = (FrameLayout) findViewById(R.id.frameLayout);  //获取帧布局管理器
        fragment.addView(new MyView(this));  //将自定义视图的内部类添加到布局管理器中
    }
    private class MyView extends View {
        public MyView(Context context) {
            super(context);
        }
        @Override
        protected void onDraw(Canvas canvas) {  //重写onDraw()方法
            Paint paint = new Paint();           //定义一个默认的画笔
            //线性渐变
            Shader shader = new LinearGradient(0, 0, 100, 100,
                    Color.RED, Color.GREEN, Shader.TileMode.MIRROR);
            paint.setShader(shader);                            //为画笔设置渐变器
            canvas.drawRect(10, 10, 280, 150, paint);                //绘制矩形
            super.onDraw(canvas);
        }
    }
}

绘制图片

创建位图对象, JAVA 中bitmap 表示位图对象

创建位图对象 两种方式:

BitMapFactory :

  • 1. 通过图片文件创建
  • 2. 通过输入流创建

BitMap类挖取一块图像创建,将源位图缩放生成,使用颜色数组创建

BitMapFactory:

1.decodeFile,

2.decodeResource,

3.decodeStream

访问SDK资源需要在Mainiefiest.xml 配置访问权限

<uses-premission android:name="android.permission.READ_EXTERNAL_STOTAHE">

同时在Android 上配置访问权限

package com.example.myapplication;
import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.os.Bundle;
import android.os.Environment;
import android.view.View;
import android.widget.FrameLayout;
import androidx.appcompat.app.AppCompatActivity;
/**
  * 手势方式滑动动画
 */
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout frameLayout= (FrameLayout) findViewById(R.id.frameLayout);  //获取帧布局管理器
        frameLayout.addView(new MyView(this));  //将自定义视图的内部类添加到布局管理器中
    }
    }
    class MyView extends View {
        public MyView(Context context) {
            super(context);
        }
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            // 获取SDK上 图片绘制
            String path  = Environment.getExternalStorageDirectory() + "/snail.png";
            Bitmap bitmap = BitmapFactory.decodeFile(path);
            //通过 canvas 类 绘制图片
            Paint paint = new Paint(); //定义
            canvas.drawBitmap(bitmap,150,150, paint);
            // 从图像中挖取一小片 bitMap 类 的 createBitMap(截取一小块), compress(压缩)
            // 从原始图像挖取小部分
            Bitmap bitmap1 = Bitmap.createBitmap(bitmap,23,89,150,168);
            canvas.drawBitmap(bitmap1,270,50, paint);
        }
    }

绘制路径

  • 通过绘制路径
  • 通过绘制路径的文字
package com.example.myapplication;
import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Bundle;
import android.view.View;
import android.widget.FrameLayout;
import androidx.appcompat.app.AppCompatActivity;
/**
  *
 */
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FrameLayout frameLayout= (FrameLayout) findViewById(R.id.frameLayout);  //获取帧布局管理器
        frameLayout.addView(new MyView(this));  //将自定义视图的内部类添加到布局管理器中
    }
    }
    /**
     *  绘制路径
     * */
    class MyView extends View {
        public MyView(Context context) {
            super(context);
        }
        @Override
        protected void onDraw(Canvas canvas) {
            super.onDraw(canvas);
            Paint paint = new Paint();
            paint.setAntiAlias(true) ; // 定义抗锯齿
            paint.setColor(0xFF0000FF);
            paint.setStyle(Paint.Style.STROKE); // 设置样式为描边
            Path path = new Path();
            // 最后一个参数环按照 顺时针还是
            path.addCircle(150,100,50,Path.Direction.CW);
          //  canvas.drawPath(path,paint);
            canvas.drawTextOnPath("活着就是为了修改时间", path,0,0,paint);
        }
    }

逐帧动画

创建动画资源文件 在drawable 目录下面

使用 animation-list
<?xml version="1.0" encoding="utf-8"?>
<animation-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/img001" android:duration="60"/>
    <item android:drawable="@drawable/img002" android:duration="60"/>
    <item android:drawable="@drawable/img003" android:duration="60"/>
    <item android:drawable="@drawable/img004" android:duration="60"/>
    <item android:drawable="@drawable/img005" android:duration="60"/>
    <item android:drawable="@drawable/img006" android:duration="60"/>
</animation-list>

MainActivity 获取AnminationDrawable 方法设置动态图逐帧播放

package com.example.myapplication;
import android.graphics.drawable.AnimationDrawable;
import android.os.Bundle;
import android.view.View;
import android.widget.LinearLayout;
import androidx.appcompat.app.AppCompatActivity;
/**
  *
 */
public class MainActivity extends AppCompatActivity {
    private boolean flag = true;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        LinearLayout linearLayout= (LinearLayout) findViewById(R.id.linearLayout); //获取布局管理器
        //获取AnimationDrawable对象
        final AnimationDrawable anim = (AnimationDrawable) linearLayout.getBackground();
        linearLayout.setOnClickListener(new View.OnClickListener(){
            @Override
            public void onClick(View view) {
                if(flag){
                    anim.start();
                    flag = false;
                }else{
                    anim.stop();
                    flag = true;
                }
            }
        });
    }
    }

补间动画

  • 通过手势滑动查看相片的手机相册
  • 创建一个动画资源
参考手势时候 设置动画资源文件
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<alpha android:fromAlpha="0"
	    android:toAlpha="1"
	    android:duration="4000"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
	<alpha android:fromAlpha="1"
	    android:toAlpha="0"
	    android:duration="2000"/>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="0.0"
        android:fromYScale="0.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="1.0"
        android:toYScale="1.0"
        android:duration="2000"></scale>
</set>
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <scale android:fromXScale="1.0"
        android:fromYScale="1.0"
        android:pivotX="50%"
        android:pivotY="50%"
        android:toXScale="0.0"
        android:toYScale="0.0"
        android:duration="2000"></scale>
</set>
  • 定义并且初始化动画数组
  • 指定切换的动画效果
package com.example.myapplication;
import android.os.Bundle;
import android.view.GestureDetector;
import android.view.MotionEvent;
import android.view.animation.Animation;
import android.view.animation.AnimationUtils;
import android.widget.ImageView;
import android.widget.ViewFlipper;
import androidx.appcompat.app.AppCompatActivity;
public class MainActivity extends AppCompatActivity implements GestureDetector.OnGestureListener {
    ViewFlipper flipper; //定义ViewFlipper
    GestureDetector detector; //定义手势检测器
    Animation[] animation = new Animation[4];//定义动画数组,为ViewFlipper指定切换动画
    final int distance = 50; //定义手势动作两点之间最小距离
    //定义图片数组
    private int[] images = new int[]{R.drawable.img01, R.drawable.img02, R.drawable.img03,
            R.drawable.img04, R.drawable.img05, R.drawable.img06, R.drawable.img07, R.drawable.img08,
    };
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        detector = new GestureDetector(this, this); //创建手势检测器
        flipper = (ViewFlipper) findViewById(R.id.flipper); //获取ViewFlipper
        for (int i = 0; i < images.length; i++) {
            ImageView imageView = new ImageView(this);
            imageView.setImageResource(images[i]);
            flipper.addView(imageView); //加载图片
        }
        //初始化动画数组
        animation[0] = AnimationUtils.loadAnimation(this, R.anim.anim_alpha_in);     //淡入动画
        animation[1] = AnimationUtils.loadAnimation(this, R.anim.anim_alpha_out);      //淡出动画
        animation[2] = AnimationUtils.loadAnimation(this, R.anim.anim_scale_in);      //放大进入动画
        animation[3] = AnimationUtils.loadAnimation(this, R.anim.anim_scale_out);  //缩小退出动画
    }
    @Override
    public boolean onDown(MotionEvent e) {
        return false;
    }
    @Override
    public void onShowPress(MotionEvent e) {
    }
    @Override
    public boolean onSingleTapUp(MotionEvent e) {
        return false;
    }
    @Override
    public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
        return false;
    }
    @Override
    public void onLongPress(MotionEvent e) {
    }
    @Override
    public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
        /*
        如果第一个触点事件的X坐标到第二个触点事件的X坐标的距离超过distance就是从右向左滑动
         */
        if (e1.getX() - e2.getX() > distance) {
            //为flipper设置切换的动画效果
            flipper.setInAnimation(animation[0]);
            flipper.setOutAnimation(animation[1]);
            flipper.showPrevious();
            return true;
            /*
            如果第二个触点事件的X坐标到第一个触点事件的X坐标的距离超过distance就是从左向右滑动
             */
        } else if (e2.getX() - e1.getX() > distance) {
            //为flipper设置切换的动画
            flipper.setInAnimation(animation[2]);
            flipper.setOutAnimation(animation[3]);
            flipper.showNext();
            return true;
        }
        return false;
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //将该Activity上的触碰事件交给GestureDetector处理
        return detector.onTouchEvent(event);
    }
}

到此这篇关于Android绘制文本与图片及动效详解的文章就介绍到这了,更多相关Android绘制文本内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • android绘制曲线和折线图的方法

    本文实例为大家分享了android绘制曲线和折线图的具体代码,供大家参考,具体内容如下 (曲线) (折线) 1.CurveView.java package com.package;   import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.LinearGradient; import android.graphi

  • Android绘制简单条形图

    本文实例为大家分享了Android绘制简单条形图的具体代码,供大家参考,具体内容如下 一种方案是:path先添加一个圆角矩形,再添加一个角的正方形 另一种直接通过api ,radii 需要传入8个数值,分四组,从左上角开始 addRoundRect(RectF rect, float[] radii, Direction dir) 中间有个小点:如果在一个循环里,同时画柱子和文字,会出现前面3个柱子上的文字被柱子覆盖,只有最后1个柱子才展示文字标记. 比如说1是柱子,2是文字,画个柱子,画个文字

  • Android自定义View实现绘制水波浪温度刻度表

    目录 前言 1.onMeasure重新测量 2.绘制刻度 3. 设置刻度动画 4. 绘制中心的圆与文字 5. 水波纹动画 后记 前言 之前的绘制圆环,我们了解了如何绘制想要的形状和进度的一些特点,那么此篇文章我们更近一步,绘制一个稍微复杂一点的刻度与波浪.来一起复习一下Android的绘制. 相对应的这种类型的自定义View网上并不少见,但是如果我们要做一些个性化的效果,最好还是自己绘制一份,也相对的比较容易控制效果,如果想实现上面的效果,我们一般来说分为以下几个步骤: 重写测量方法,确保它是一

  • Android利用Canvas类绘制图形

    本文实例为大家分享了Android利用Canvas类绘制图形的具体代码,供大家参考,具体内容如下 首先介绍一下相关基础知识. 1.画笔(paint) 1.1.作用:画笔对象通过属性来设置笔的颜色.粗细.风格等. 1.2.设置图形绘制属性相关方法: setARGB():设置画笔的颜色:setAlpha():设置绘制图形的透明度:setStyle():设置画笔的样式风格:setStrockWidth():设置画笔的宽度: 1.3.设置文本绘制属性的相关方法: setTextSize():设置字体的大

  • Android TextSwitcher文本切换器和ViewFlipper使用详解

    本文为大家分享了Android TextSwitcher文本切换器的使用,供大家参考,具体内容如下 1.TextSwitcher 使用: 应用分为三步: 1.得到 TextSwitcher 实例对象   TextSwitcher switcher = (TextSwitcher) findViewById(R.id.textSwitcher); 2.为switcher指定ViewSwitcher.ViewFactory工厂,该工厂会产生出转换时需要的View   switcher.setFact

  • Android自定义View圆形图片控件代码详解

    前言 在日常开发中,圆形的图片效果还是很常见的.可以通过给Paint设置Xfermode来实现,这里简单记录如下. 实现 实现圆形效果的核心是PorterDuffXfermode,对于PorterDuffXfermode,这里不展开,可以查询相关资料. 核心代码 //绘制背景 canvas.drawCircle(mSize / 2, mSize / 2, mSize / 2, mPaint); //设置模式为:显示背景层和上层的交集,且显示上层图像 mPaint.setXfermode(new

  • Android中屏幕密度和图片大小的关系详解

    Android中屏幕密度和图片大小的关系详解 前言 Android中支持许多资源,包括图片(Bitmap),对应于bitmap的文件夹是drawable,除了drawable,还有drawable-ldpi.drawable-mdpi.drawable-hdpi.drawable-xhdpi.drawable-xxhdpi等,同一张图片放到上面不同的文件夹中是有区别的,比如一张100 * 100像素大小的图片,分别放在上述各个文件夹中,然后将其设置为ImageView(假设宽高都是wrap_co

  • Android异步下载图片并且缓存图片到本地DEMO详解

    在Android开发中我们经常有这样的需求,从服务器上下载xml或者JSON类型的数据,其中包括一些图片资源,本demo模拟了这个需求,从网络上加载XML资源,其中包括图片,我们要做的解析XML里面的数据,并且把图片缓存到本地一个cache目录里面,并且用一个自定义的Adapter去填充到LIstView,demo运行效果见下图: 通过这个demo,要学会有一下几点 1.怎么解析一个XML 2.demo中用到的缓存图片到本地一个临时目录的思想是怎样的? 3.AsyncTask类的使用,因为要去异

  • Android图片压缩的实例详解

    Android图片压缩的实例详解 在做微信分享的时候,由于分享的缩略图要求不得大于32K,否则不能调起微信,所以总结了一下Android图片的压缩问题,大部分资料都是来自网上各位的分享,自己只是完善或修改了一下,本着继续分享的精神,也方便自己记忆,于是总结如下. android图片压缩主要有两种方式:1.压缩图片分辨率 2.压缩图片质量 一.先看压缩图片分辨率,很好理解,如本来1280*768的图片压缩为640*384大小.废话不说,直接上代码: /** * 按比例压缩图片分辨率 * @para

  • Android Flutter实现GIF动画效果的方法详解

    目录 前言 交错动画机制 代码实现 Interval 介绍 总结 前言 我们之前介绍了不少有关动画的篇章.前面介绍的动画都是只有一个动画效果,那如果我们想对某个组件实现一组动效,比如下面的效果,该怎么办? staggered animation 这个时候我们需要用到组合动效, Flutter 提供了交错动画(Staggered Animation)的方式实现.对于多个 Anmation 对象,可以共用一个 AnimationController,然后在不同的时间段执行动画效果.这就有点像 GIF

  • Android未读消息拖动气泡示例代码详解(附源码)

    前言 拖动清除未读消息可以说在很多应用中都很常见,也被用户广泛接受.本文是一个可以供参考的Demo,希望能有帮助. 提示:以下是本篇文章正文内容,下面案例可供参考 最终效果图及思路 实现关键: 气泡中间的两条边,分别是以ab,cd为数据点,G为控制点的贝塞尔曲线. 步骤: 绘制圆背景以及文本:连接情况绘制贝塞尔曲线:另外端点绘制一个圆 关键代码 1.定义,初始化等 状态:静止.连接.分离.消失 在onSizeChanged中初始化状态,固定气泡以及可动气泡的圆心 代码如下(示例): @Overr

  • Android实现点汇聚成字的动态效果详解

    目录 前言 点阵 点阵图形绘制 由点聚集成字的动画实现 总结 前言 在引入 fl_chart 绘制图表的时候,看到插件有下面这样的动效,随机散乱的圆点最后组合成了 Flutter 的 Logo,挺酷炫的.本篇我们来探讨类似的效果怎么实现. 点阵 在讲解代码实现之前,我们先科普一个知识,即点阵.点阵在日常生活中很常见,比如广告屏,停车系统的显示,行业内称之为 LED 显示屏. LED 显示屏实际上就是由很多 LED 灯组合成的一个显示面板,然后通过显示驱动某些灯亮,某些灯灭就可以实现文字.图形的显

  • Android自定义指示器时间轴效果实例代码详解

    指示器时间轴在外卖.购物类的APP里会经常用到,效果大概就像下面这样,看了网上很多文章,大都是自己绘制,太麻烦,其实通过ListView就可以实现. 在Activity关联的布局文件activity_main.xml中放置一个ListView,代码如下.由于这个列表只是用于展示信息,并不需要用户去点击,所以将其clickable属性置为false:为了消除ListView点击产生的波纹效果,我们设置其listSelector属性的值为透明:我们不需要列表项之间的分割线,所以设置其divider属

  • Android入门教程之ListView的具体使用详解

    目录 ListView 的简单用法 定制 ListView 的界面 提升 ListView 的运行效率 ListView 的点击事件 ListView 的简单用法 在布局中加入 ListView 控件还算简单,先为 ListView 指定一个 id,然后将宽度和高度都设置为 match_parent,这样 ListView 就占满了整个布局的空间 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android&

随机推荐