利用TextView中的DrawableTop实现图片在文字上方,点击TextView能实现图片旋转

简介: 终于建了一个自己个人小站:https://huangtianyu.gitee.io,以后优先更新小站博客,欢迎进站,O(∩_∩)O~~在今日头条里面Home按钮点击时候,能出现旋转的动画。这里模仿今日头条的Home按钮效果,通过自定义View来实现该效果。

终于建了一个自己个人小站:https://huangtianyu.gitee.io,以后优先更新小站博客,欢迎进站,O(∩_∩)O~~

在今日头条里面Home按钮点击时候,能出现旋转的动画。这里模仿今日头条的Home按钮效果,通过自定义View来实现该效果。

先给出工程代码的GitHub地址:TopTextView

其实主要是在onDraw里面先绘制图片,然后再绘制text。旋转的动画通过animation-rotate实现。具体代码如下:

    @Override
    protected void onDraw(Canvas canvas) {

        if (mDrawableTop == null) {
            super.onDraw(canvas);
            return;
        }
        int drawablePadding = getCompoundDrawablePadding();
        int drawableWidth = this.mDrawableTop.getIntrinsicWidth();
        int drawableHeight = this.mDrawableTop.getIntrinsicHeight();
//        startDrawableX = (getWidth() >> 1) - ((drawablePadding + textWidth + drawableWidth) >> 1);
//        startDrawableY = (getHeight() >> 1) - (drawableHeight >> 1);
        startDrawableX = (getWidth()>>1) - (drawableWidth>>1);
        startDrawableY = (getHeight()>>1) - ((drawableHeight+textHeight+drawablePadding)>>1);
        //画旋转图片
        canvas.save();
        canvas.translate(startDrawableX, startDrawableY);
        this.mDrawableTop.draw(canvas);
        canvas.restore();

        //画文字
//        int boxht = this.getMeasuredHeight() - this.getExtendedPaddingTop() - this.getExtendedPaddingBottom();
//        int textht = getLayout().getHeight();
//        int  voffsetText = boxht - textht >> 1;
//        int boxht = this
        canvas.save();
//        canvas.translate((float) (startDrawableX + drawableWidth + drawablePadding), (float) (getExtendedPaddingTop() + voffsetText));
        canvas.translate((float)(getExtendedPaddingBottom()),(float)(startDrawableY+drawableHeight+drawablePadding));
        getLayout().draw(canvas);
        canvas.restore();
    }

为了实现重复绘制,需要重写下面函数:

 @Override
    public void invalidateDrawable(Drawable drawable) {
//        super.invalidateDrawable(drawable);
        final Rect dirty = drawable.getBounds();
        int scrollX = 0;
        int scrollY = 0;
        if(drawable == this.mDrawableTop){
            scrollX = startDrawableX;
            scrollY = startDrawableY;
        }
        this.invalidate(dirty.left + scrollX-2, dirty.top + scrollY-2, dirty.right + scrollX+2, dirty.bottom + scrollY+2);
    }

具体代码可以参考工程里面代码。

目录
相关文章
|
6月前
|
Java Android开发
18. 【Android教程】图片控件 ImageView
18. 【Android教程】图片控件 ImageView
103 4
|
Android开发
Android BottomSheetDialog使用实现底部拖动弹窗
Android BottomSheetDialog使用实现底部拖动弹窗
532 0
|
XML Android开发 数据格式
Android 实现图片标题轮播
Android 实现图片标题轮播
173 0
|
Web App开发 JavaScript 前端开发
Android---文本中缩略图点击弹出大图效果实现
  很久没有写博客了,这两天一直忙于一个关于考试的项目,将其中的一些效果实现的经验写下来,希望给看到的人或者给有这方面需求的人帮助。   首先来张效果图,没有经过美工处理的 实现基本功能   其实做这个项目复习了很多内容,将之前单个项目中用到的某些功能综合到一起了,例如1、自定义标题栏2、Java和JavaScript的互调3、Activity实现仿Dialog样式4、多线程实现考试倒计时5、退出Activity时保存配置信息(考试剩余时间)6、熟悉UI布局   上面这些效果中,讲讲通过Java和JavaScript互调实现点击文本中缩略图弹出一个大图。
1275 0
|
Android开发
Android 优化个人封装仿网易新闻可滑动标题栏 TabLayout (文字或图标)
      小菜在向朋友推荐了自己修改封装的仿网易顶部滑动标题栏 TabSlideLayout 滑动内容可以是文字也可以是网络图标,其原型为 FlycoTabLayout,但是因为年代很久远,小菜当时技术太渣,存在一些小问题,后期做过一些优化,今天趁机会整理一下。
3040 0
|
Android开发 容器
仿网易新闻可滑动标题栏TabLayout(文字或图标)
    近期有需要,要做一个类似于网易新闻首页中的可滑动标题栏 TabLayout,根据大神写的 FlycoTabLayout 改造了一下,可以加载网络图片,主要实现内容如下:     1.
1707 0
|
前端开发
自定义ImageView实现图片手势滑动、放大缩小效果
上一节说了通过自定义来加载超大图片,同时实现手指的拖动效果。不过,另一种情况就是,我们希望应用能够加载整张图片,如果图片太大就先压缩,如果小于屏幕就直接显示,同时用户可以拖拽移动和缩放图片大小,梳理下流程: 1.自定义View继承ImageView,重新onDraw方法 2.在onDraw先画图片,图片大于屏幕就把图片缩小后显示,图片小于屏幕就直接显示,显示之前要计算显示图片的Rect,Rect是其实就是四个坐标,用来控制显示图片的范围,这个Rect是根据图片的长宽比例计算而来,显示在屏幕中间。
1433 0
|
JavaScript
图片在页面中居中显示
参考1:http://www.lanrentuku.com:8081/js/table-188.html# 参考2:http://www.cnblogs.com/xueming/archive/2012/03/21/VerticalAlign.
785 0

热门文章

最新文章