Android自定义UI实战(基础篇2)---搜索酷炫界面

最新推荐文章于 2024-12-09 20:11:07 发布

MirkoWu

最新推荐文章于 2024-12-09 20:11:07 发布

阅读量1.3k

点赞数 3

分类专栏： Android自定义UI实战

本文链接：https://blog.youkuaiyun.com/MirkoWu/article/details/53116882

版权

本文介绍了如何在Android中自定义一个酷炫的搜索界面，包括中心图片、扩散圆和游标转动三部分的实现。通过自定义View，利用ValueAnimator和自定义Evaluator来创建动态效果，最终达到图片旋转、圆扩散和游标转动的动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在实现搜索功能的时候，比如蓝牙搜索，附近热点搜索等，通常我们需要一个比较友好的界面，以下通过自定义View来实现一个搜索界面。

效果图如下：
这里写图片描述

当实现一个这样的动画的时候，思路是这样的呢？将整个View拆分，可以分为三个部分。

第一部分：实现中间的图片
第二部分：实现扩散的圆
第三部分：实现游标转动

这样一个酷炫的搜索效果就出来了，用到的资源文件主要有两张图片：

这里写图片描述

首先自定义一个类继承自View，实现对应的构造方法，添加自定义属性。上篇有详细的实现流程。
相关代码如下：
定义两张图片的属性

<declare-styleable name="SearchAnimation">

    <attr name="drawable_search_center" format="reference"/>
    <attr name="drawable_search_cursor" format="reference"/>

</declare-styleable>

获取属性：

/**
 * 取得相关自定义属性
 * @param context
 * @param attrs
 */
private void initAttrs(Context context,AttributeSet attrs){
    mContext = context;
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.SearchAnimation);
    drawableSearchCenter  = typedArray.getDrawable(R.styleable.SearchAnimation_drawable_search_center);
    drawableSearchCursor  = typedArray.getDrawable(R.styleable.SearchAnimation_drawable_search_cursor);
    typedArray.recycle();
}

1 绘制中心图片

@Override
protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //首先来绘制中心的图片
        dsCenterW = drawableSearchCenter.getIntrinsicWidth();          //获取到中心图片的宽高
        dsCenterH = drawableSearchCenter.getIntrinsicHeight();
        centerX = ViewSizeHelper.getDeviceWidth((Activity) mContext)/2; //获取到屏幕的宽高
        centerY = ViewSizeHelper.getDeviceHeight((Activity) mContext)/2;

        drawableSearchCenter.setBounds(centerX- (dsCenterW/2),centerY- (dsCenterH/2), centerX+ (dsCenterW/2),centerY+(dsCenterH/2)); //指定Drawable的绘制区域
        drawableSearchCenter.draw(canvas); //绘制drawable到画布上
}

中心图片就简单的实现了。

2 实现扩散圆

圆的动态变化，使用ValueAnimator来实现。通过改变圆的半径，不断的重绘就可以实现这种效果了，

canvas.save();  
canvas.drawCircle(centerX, centerY, radius, mPaint);
canvas.restore();

重点是实现radius的变化，这里使用ValueAnimator，自定义Evalutor来实现（使用ofObject ）
下面来看如何实现自定义的Evalutor
首先定义一个类

/**
 * Created by Mirko on 2016/11/9 20:47.
 */

public class SearchRadius {
   
    private int radius;

    public SearchRadius(int radius){
        this.radius = radius;
    }
    public int getRadius() {
        return radius;
    }
    public void setRadius(int radius) {
        this.radius = radius;
    }
}

创建自定义的Evalutor

/**
 * Created by Mirko on 2016/11/9 20:50.
 */

public class RadiusEvaluator implements TypeEvaluator<

最低0.47元/天解锁文章