简单封装弧形广告轮播图（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)来描述曲线状态，大致如下：

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