前言
通過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：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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">
<com.wind.arcview.HomeBanner
android:layout_width="match_parent"
android:layout_height="250dp"
android:id="@+id/hb_banner">
</com.wind.arcview.HomeBanner>
</LinearLayout>
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)來描述曲線狀態，大致如下：
貝塞爾曲線
上圖中紅色曲線部分就是傳說中的二階貝塞爾曲線，那么這條紅色曲線是如何生成的呢？接下來我們就以其中的一個狀態分析一下：
貝塞爾曲線
這里寫圖片描述
貝塞爾曲線
這里寫圖片描述
這樣獲取到的點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。
