CircledImageView在圆圈前面总是有矩形图像

时间:2014-11-24 03:28:58

标签: android android-view wear-os

我可以让CircledImageView工作,除了图像总是矩形,并且在白色圆圈前面(并且部分地覆盖圆圈)。它是否正确?我的假设是我应该在圈内看到图像。

    <android.support.wearable.view.CircledImageView
    android:id="@+id/image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/kids"
    app:circle_radius="60dp"
    app:circle_color="@color/white" />

的xmlns:应用=&#34; HTTP://schemas.android.com/apk/res-auto"

感谢您的任何建议。

我已阅读此内容并没有帮助:Android Wear CircledImageView (and DelayedConfirmationView) Always Square

2 个答案:

答案 0 :(得分:0)

我发现如果你使用固定宽度/高度和app:circle_radius,它显示正确。

  <android.support.wearable.view.CircledImageView
        android:id="@+id/confirm"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_gravity="bottom|end"
        app:circle_color="@color/green"
        app:circle_radius="25dp" />

How it looks

答案 1 :(得分:-4)

您可以创建自己的自定义循环ImageView扩展ImageView类...

我创造了一个..可能你可以使用它..

public class CircularImageView extends ImageView {
    private int borderWidth;
    private int canvasSize;
    private Bitmap image;
    private Paint paint;
    private Paint paintBorder;

    public CircularImageView(final Context context) {
        this(context, null);
    }

    public CircularImageView(Context context, AttributeSet attrs) {
        this(context, attrs, R.attr.circularImageViewStyle);
    }

    public CircularImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);

        // init paint
        paint = new Paint();
        paint.setAntiAlias(true);

        paintBorder = new Paint();
        paintBorder.setAntiAlias(true);

        // load the styled attributes and set their properties
        TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.CircularImageView, defStyle, 0);

        if(attributes.getBoolean(R.styleable.CircularImageView_border, true)) {
            int defaultBorderSize = (int) (4 * getContext().getResources().getDisplayMetrics().density + 0.5f);
            setBorderWidth(attributes.getDimensionPixelOffset(R.styleable.CircularImageView_border_width, defaultBorderSize));
            setBorderColor(attributes.getColor(R.styleable.CircularImageView_border_color, Color.WHITE));
        }

        if(attributes.getBoolean(R.styleable.CircularImageView_shadow, false))
            addShadow();

        attributes.recycle();
    }

    public void setBorderWidth(int borderWidth) {
        this.borderWidth = borderWidth;
        this.requestLayout();
        this.invalidate();
    }

    public void setBorderColor(int borderColor) {
        if (paintBorder != null)
            paintBorder.setColor(borderColor);
        this.invalidate();
    }

    public void addShadow() {
        setLayerType(LAYER_TYPE_SOFTWARE, paintBorder);
        paintBorder.setShadowLayer(4.0f, 0.0f, 2.0f, Color.BLACK);
    }

    @SuppressLint("DrawAllocation")
    @Override
    public void onDraw(Canvas canvas) {
        // load the bitmap
        image = drawableToBitmap(getDrawable());

        // init shader
        if (image != null) {

            canvasSize = canvas.getWidth();
            if(canvas.getHeight()<canvasSize)
                canvasSize = canvas.getHeight();

            BitmapShader shader = new BitmapShader(Bitmap.createScaledBitmap(image, canvasSize, canvasSize, false), Shader.TileMode.CLAMP, Shader.TileMode.CLAMP);
            paint.setShader(shader);

            // circleCenter is the x or y of the view's center
            // radius is the radius in pixels of the cirle to be drawn
            // paint contains the shader that will texture the shape
            int circleCenter = (canvasSize - (borderWidth * 2)) / 2;
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) + borderWidth - 4.0f, paintBorder);
            canvas.drawCircle(circleCenter + borderWidth, circleCenter + borderWidth, ((canvasSize - (borderWidth * 2)) / 2) - 4.0f, paint);
        }
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int width = measureWidth(widthMeasureSpec);
        int height = measureHeight(heightMeasureSpec);
        setMeasuredDimension(width, height);
    }

    private int measureWidth(int measureSpec) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpec);
        int specSize = MeasureSpec.getSize(measureSpec);

        if (specMode == MeasureSpec.EXACTLY) {
            // The parent has determined an exact size for the child.
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            // The child can be as large as it wants up to the specified size.
            result = specSize;
        } else {
            // The parent has not imposed any constraint on the child.
            result = canvasSize;
        }

        return result;
    }

    private int measureHeight(int measureSpecHeight) {
        int result = 0;
        int specMode = MeasureSpec.getMode(measureSpecHeight);
        int specSize = MeasureSpec.getSize(measureSpecHeight);

        if (specMode == MeasureSpec.EXACTLY) {
            // We were told how big to be
            result = specSize;
        } else if (specMode == MeasureSpec.AT_MOST) {
            // The child can be as large as it wants up to the specified size.
            result = specSize;
        } else {
            // Measure the text (beware: ascent is a negative number)
            result = canvasSize;
        }

        return (result + 2);
    }

    public Bitmap drawableToBitmap(Drawable drawable) {
        if (drawable == null) {
            return null;
        } else if (drawable instanceof BitmapDrawable) {
            return ((BitmapDrawable) drawable).getBitmap();
        }

        Bitmap bitmap = Bitmap.createBitmap(drawable.getIntrinsicWidth(),
                drawable.getIntrinsicHeight(), Bitmap.Config.ARGB_8888);
        Canvas canvas = new Canvas(bitmap);
        drawable.setBounds(0, 0, canvas.getWidth(), canvas.getHeight());
        drawable.draw(canvas);

        return bitmap;
    }
}

然后在values / attrs文件中添加以下行..

<declare-styleable name="CircularImageView">
        <attr name="border" format="boolean"></attr>
        <attr name="border_width" format="dimension"></attr>
        <attr name="border_color" format="color"></attr>
        <attr name="shadow" format="boolean"></attr>
    </declare-styleable>
    <declare-styleable name="Theme">
        <attr name="circularImageViewStyle" format="reference"></attr>
    </declare-styleable>

最后你可以像这样定义这个圆形图像视图..

   <youpackage.name.CircularImageView
                xmlns:app="http://schemas.android.com/apk/res/yourpackage.name"
                android:id="@+id/imageView_Company_Logo"
                android:layout_width="65dp"
                android:layout_height="65dp"
                app:border="true"
                app:border_color="@color/App_Theme_Green"
                app:border_width="4dp"
                app:shadow="false"
                android:src="@drawable/ic_launcher" />
  1. 您可以通过在app:border="true"中设置true / false来应用/删除边框,并使用

    更改边框颜色和宽度

    app:border_color="@color/App_Theme_Green" app:border_width="4dp"

  2. 您可以通过在app:border="true"

  3. 中设置true / false来应用/删除阴影

    希望它有帮助.. !!!