Android弧形广告图,简单封装弧形广告轮播图（ViewPager+贝塞尔曲线）

前言

通过ViewPager和贝塞尔曲线实现了一个弧形广告轮播图。

效果图

弧形ViewPager

实现方法

想要实现这个效果，现在几行代码就可以了：

Step 1. Add it in your root build.gradle at the end of repositories:

allprojects {

repositories {

...

maven { url 'https://www.jitpack.io' }

}

}

Step 2. Add the dependency：

dependencies {

compile 'com.github.Simon986793021:SimonArcViewTest:V1.1'

}

Step 3. create the layout：

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical"

tools:context="com.wind.simonarcviewtest.MainActivity">

android:layout_width="match_parent"

android:layout_height="250dp"

android:id="@+id/hb_banner">

Step 4. use it in Activity

HomeBanner homeBanner= (HomeBanner) findViewById(R.id.hb_banner);

homeBanner.setImagesRes(new int[]{R.drawable.banner5,R.drawable.banner5,R.drawable.banner5,R.drawable.banner5});

通过上面几步就可以实现了。

PS：

这里提供了一个额外的接口来改变图片的缩放：

ArcImageView arcImageView=new ArcImageView(this);

arcImageView.setScale(0.5f);

下面我们再来具体分析下实现过程。

思路

我们可以把弧形ViewPager分为两个部分

1.ViewPager

2.弧形图片

原理

弧形图片是通过二阶贝塞尔曲线画出来的，我们先来看看二阶贝塞尔曲线。

二阶曲线原理：

二阶曲线由两个数据点(A 和 C)，一个控制点(B)来描述曲线状态，大致如下：

贝塞尔曲线

上图中红色曲线部分就是传说中的二阶贝塞尔曲线，那么这条红色曲线是如何生成的呢？接下来我们就以其中的一个状态分析一下：

贝塞尔曲线

连接AB BC，并在AB上取点D，BC上取点E，使其满足条件：

这里写图片描述

贝塞尔曲线

连接DE，取点F，使得:

这里写图片描述

这样获取到的点F就是贝塞尔曲线上的一个点，动态过程如下：

贝塞尔曲线

PS: 二阶曲线对应的方法是quadTo

贝塞尔曲线还有一阶和三阶：

想要了解的点这里

绘制一段二阶贝塞尔曲线需要三个点：一个起始点，一个终点和一个控制点。控制点的位置不同，决定了曲线的弯曲程度不同。绘制二阶贝塞尔曲线的方法为：quadTo(float x1, float y1, float x2, float y2)。

实现过程

1.弧形图片的实现##

我们知道了二阶贝塞尔曲线的原理之后，只需要在图片上加上path就可以。

先在onSizaChanged初始化贝塞尔曲线需要的三个点。

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

this.width = w;

this.height = h;

this.path.reset();

this.path.moveTo(0.0F, 0.0F);

this.path.addRect(0.0F, 0.0F, (float)this.width, (float)(this.height - this.ArcHeight), Path.Direction.CCW);

this.startPoint.x = 0.0F;

this.startPoint.y = (float)(this.height - this.ArcHeight);

this.endPoint.x = (float)this.width;

this.endPoint.y = (float)(this.height - this.ArcHeight);

this.controlPoint.x = (float)(this.width / 2);

this.controlPoint.y = (float)(this.height + this.ArcHeight);

this.invalidate();

}

再在onDraw方法直接调用：

this.path.moveTo(this.startPoint.x, this.startPoint.y);

this.path.quadTo(this.controlPoint.x, this.controlPoint.y, this.endPoint.x, this.endPoint.y);

canvas.drawPath(this.path,this.paint);

完整代码如下：

public class ArcImageView extends android.support.v7.widget.AppCompatImageView {

private Paint paint;

private PointF startPoint;

private PointF endPoint;

private PointF controlPoint;

private int width;

private int height;

private int ArcHeight = 50;

private Path path;

private Bitmap bitmap;

private float mScale=1.0f;

public ArcImageView(Context context) {

super(context);

this.init();

}

public ArcImageView(Context context, @Nullable AttributeSet attrs) {

super(context, attrs);

this.init();

}

public ArcImageView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

}

/**

* 设置弧形高度

*/

public void setArcHeight(int height)

{

this.ArcHeight=height;

}

/**

* 设置图片缩放大小

* @param scale

*/

public void setScale(float scale)

{

this.mScale=scale;

}

private void init() {

this.paint = new Paint();

this.paint.setAntiAlias(true);

this.startPoint = new PointF(0.0F, 0.0F);

this.endPoint = new PointF(0.0F, 0.0F);

this.controlPoint = new PointF(0.0F, 0.0F);

this.path = new Path();

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

this.width = w;

this.height = h;

this.path.reset();

this.path.moveTo(0.0F, 0.0F);

this.path.addRect(0.0F, 0.0F, (float)this.width, (float)(this.height - this.ArcHeight), Path.Direction.CCW);

this.startPoint.x = 0.0F;

this.startPoint.y = (float)(this.height - this.ArcHeight);

this.endPoint.x = (float)this.width;

this.endPoint.y = (float)(this.height - this.ArcHeight);

this.controlPoint.x = (float)(this.width / 2);

this.controlPoint.y = (float)(this.height + this.ArcHeight);

this.invalidate();

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if (bitmap!=null)

{

//计算缩放比例,之前本来是通过宽高计算缩放比例，现在直接提供接口

Matrix matrix = new Matrix();

matrix.setScale(mScale, mScale);

Shader shader = new BitmapShader(bitmap, Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);

shader.setLocalMatrix(matrix);

paint.setShader(shader);

this.path.moveTo(this.startPoint.x, this.startPoint.y);

this.path.quadTo(this.controlPoint.x, this.controlPoint.y, this.endPoint.x, this.endPoint.y);

canvas.drawPath(this.path,this.paint);

}

}

@Override

public void setImageResource(@DrawableRes int resId) {

bitmap = BitmapFactory.decodeResource(getResources(),resId);

Log.i(">>>>>",">>>>");

}

}

在activity调用：

arcImageView= (ArcImageView) findViewById(com.wind.arcview.R.id.iv_img);

arcImageView.setImageResource(R.drawable.banner5);

让我们看看效果：

弧形图片

2.ViewPager的实现##

这里主要是自定义了一个Banner，继承自FrameLayout。然后图片用我们上面提到的弧形图片，加上ViewPager，就能实现弧形ViewPager了。这里对ViewPager整个实现进行了封装，提供了外部接口使用。另外既然是广告轮播图，自然是要自动播放，这里采用线程来delay。就可以达到自动播放的效果。

外部接口添加图片资源：

private void initImgFromRes(int[] imagesRes) {

count = imagesRes.length;

for (int i = 0; i < count; i++) {

ImageView iv_dot = new ImageView(context);

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(

LinearLayout.LayoutParams.WRAP_CONTENT,

LinearLayout.LayoutParams.WRAP_CONTENT);

params.leftMargin = 5;

params.rightMargin = 5;

iv_dot.setImageResource(R.drawable.dot_blur);

ll_dot.addView(iv_dot, params);

iv_dots.add(iv_dot);

}

iv_dots.get(0).setImageResource(R.drawable.dot_focus);

for (int i = 0; i <= count + 1; i++) {

View banner_view = LayoutInflater.from(context).inflate(R.layout.banner_content_layout, null);

ArcImageView imageView_banner_title = (ArcImageView) banner_view.findViewById(R.id.iv_img);

if (i == 0) {

imageView_banner_title.setImageResource(imagesRes[count - 1]);

} else if (i == count + 1) {

imageView_banner_title.setImageResource(imagesRes[0]);

} else {

imageView_banner_title.setImageResource(imagesRes[i - 1]);

}

views.add(banner_view);

}

setAtt();

}

主要实现过程就是这样。

GitHub

觉得有帮助的可以点个star。