Circle shape for ViewPager

问题

Hi i have a relative layout with a viewpager.

<RelativeLayout
    android:id="@+id/bubble_circle"
    android:layout_width="200px"
    android:layout_height="200px"
    android:layout_centerHorizontal="true"
    android:background="@drawable/circle">
    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:overScrollMode="never"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@android:color/transparent"/>
</RelativeLayout>>

I want that this view pager has a circle shape. I tried to override the method dispachdraw of relativelayout

paint = new Paint();
mShadowBounds.top = 0;
mShadowBounds.bottom = canvas.getHeight();
mShadowBounds.left = 0;
mShadowBounds.right = canvas.getWidth();

paint.setXfermode(new PorterDuffXfermode(android.graphics.PorterDuff.Mode.DST_IN));
canvas.drawOval(mShadowBounds, paint);

But it paint only a black circle on top. How can i do?

Thanks

回答1:

use below class as parent in xml,

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PorterDuff;
import android.graphics.PorterDuffXfermode;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.util.DisplayMetrics;
import android.util.TypedValue;
import android.widget.FrameLayout;

public class RoundedCornerLayout extends FrameLayout
{
    private final static float CORNER_RADIUS = 100.0f;

    private Bitmap maskBitmap;
    private Paint paint, maskPaint;
    private float cornerRadius;

    public RoundedCornerLayout(Context context)
    {
        super(context);
        init(context, null, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        init(context, attrs, 0);
    }

    public RoundedCornerLayout(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);
        init(context, attrs, defStyle);
    }

    private void init(Context context, AttributeSet attrs, int defStyle)
    {
        pain_border = new Paint();
        pain_border.setFlags(Paint.ANTI_ALIAS_FLAG);
        pain_border.setColor(Color.WHITE);
        pain_border.setStyle(android.graphics.Paint.Style.STROKE);
        pain_border.setStrokeWidth(6);

        paint_inside_background = new Paint();
        paint_inside_background.setColor(Color.parseColor("#686868"));

        DisplayMetrics metrics = context.getResources().getDisplayMetrics();
        cornerRadius = TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, CORNER_RADIUS, metrics);

        paint = new Paint(Paint.ANTI_ALIAS_FLAG);

        maskPaint = new Paint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);
        maskPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));

        setWillNotDraw(false);
    }

    Paint pain_border;
    Paint paint_inside_background;

    @Override
    public void draw(Canvas canvas)
    {

        Bitmap offscreenBitmap = Bitmap.createBitmap(canvas.getWidth(), canvas.getHeight(), Bitmap.Config.ARGB_8888);
        Canvas offscreenCanvas = new Canvas(offscreenBitmap);

        super.draw(offscreenCanvas);

        if (maskBitmap == null)
        {
            maskBitmap = createMask(canvas.getWidth(), canvas.getHeight());
        }
        canvas.drawCircle(maskBitmap.getWidth() / 2, maskBitmap.getHeight() / 2, maskBitmap.getWidth() / 2, paint_inside_background);

        offscreenCanvas.drawBitmap(maskBitmap, 0f, 0f, maskPaint);
        canvas.drawBitmap(offscreenBitmap, 0f, 0f, paint);


        canvas.drawCircle((maskBitmap.getWidth() / 2), (maskBitmap.getHeight() / 2), (maskBitmap.getWidth() - 6) / 2, pain_border);
    }

    private Bitmap createMask(int width, int height)
    {
        Bitmap mask = Bitmap.createBitmap(width, height, Bitmap.Config.ALPHA_8);
        Canvas canvas = new Canvas(mask);

        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);

        canvas.drawRect(0, 0, width, height, paint);

        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawRoundRect(new RectF(0, 0, width, height), cornerRadius, cornerRadius, paint);

        return mask;
    }
}

make sure you have to use dp instead of px to better performance.

回答2:

try this:

create a file oval.xml in the drawable folder.

<shape xmlns:android="http://schemas.android.com/apk/res/android" 
android:shape="oval">
<solid android:color="@color/transparent" />
</shape>

use this drawable as background for your view:

<android.support.v4.view.ViewPager
android:id="@+id/pager"
android:overScrollMode="never"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:background="@android:drawable/oval"/>

来源：https://stackoverflow.com/questions/33038633/circle-shape-for-viewpager