如何创建包含Imageview和textview的圆角布局?

时间:2014-12-08 15:51:54

标签: android android-layout

我必须创建一个包含ImageView和TextView的framelayout。如何创建圆角布局,使其显示在图像中。我尝试将圆形添加到布局的背景中但它不起作用。

enter image description here

3 个答案:

答案 0 :(得分:1)

我有一个类做同样的工作,请检查这个作为参考,在包中添加这个类并使用它 公共类RoundedImageView扩展了ImageView {

public RoundedImageView(Context context) {
    super(context);
}

public RoundedImageView(Context context, AttributeSet attrs) {
    super(context, attrs);
}

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

@Override
protected void onDraw(Canvas canvas) {

    Drawable drawable = getDrawable();

    if (drawable == null) {
        return;
    }

    if (getWidth() == 0 || getHeight() == 0) {
        return;
    }

    Bitmap b = ((BitmapDrawable) drawable).getBitmap();
    if (b == null) {
        return;
    }
    Bitmap bitmap = b.copy(Bitmap.Config.ARGB_8888, true);


    if(bitmap ==null)
    {
        return;
    }
    int w = getWidth(), h = getHeight();

    Bitmap roundBitmap = getCroppedBitmap(bitmap, w);
    canvas.drawBitmap(roundBitmap, 0, 0, null);

}

public static Bitmap getCroppedBitmap(Bitmap bmp, int radius) {
    Bitmap sbmp;

    if (bmp.getWidth() != radius || bmp.getHeight() != radius) {
        float smallest = Math.min(bmp.getWidth(), bmp.getHeight());
        float factor = smallest / radius;
        sbmp = Bitmap.createScaledBitmap(bmp,
                (int) (bmp.getWidth() / factor),
                (int) (bmp.getHeight() / factor), false);
    } else {
        sbmp = bmp;
    }

    Bitmap output = Bitmap.createBitmap(radius, radius, Config.ARGB_8888);
    Canvas canvas = new Canvas(output);

    final int color = 0xffa19774;
    final Paint paint = new Paint();
    final Rect rect = new Rect(0, 0, radius, radius);

    paint.setAntiAlias(true);
    paint.setFilterBitmap(true);
    paint.setDither(true);
    canvas.drawARGB(0, 0, 0, 0);
    paint.setColor(Color.parseColor("#BAB399"));
    canvas.drawCircle(radius / 2 + 0.7f, radius / 2 + 0.7f,
            radius / 2 + 0.1f, paint);
    paint.setXfermode(new PorterDuffXfermode(Mode.SRC_IN));
    canvas.drawBitmap(sbmp, rect, rect, paint);

    return output;
}

}

并使用此类型的XML进行设计

<com.packagename.RoundedImageView
    android:id="@+id/odd_bubble"
    android:layout_width="50dip"
    android:layout_height="50dip"
    android:layout_alignParentLeft="true"
    android:layout_margin="5dip"
    android:src="@drawable/index"
    />

答案 1 :(得分:1)

您可以使用 ArcLibrary 来实现这样的目标:

enter image description here

   <com.stelladk.arclib.ArcLayout
        android:layout_width="200dp"
        android:layout_height="200dp"
        app:ArcType="inner"
        app:ArcRadius="100dp"
        android:background="@drawable/scenery">
        <TextView
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:text="Change"
            android:background="@color/semiwhite"
            android:gravity="center"
            android:layout_gravity="bottom"/>
    </com.stelladk.arclib.ArcLayout>

答案 2 :(得分:0)

创建自定义视图,并在自定义视图内onDraw使用canvas.drawText()放置文字。现在创建一个扩展FrameLayoutRelativeLayout的新类,并使用上面的自定义视图类和RoundedImageView类作为内部类。现在膨胀父类中的2个视图。您现在可以获得圆形图像以及它下面的文本。

仅供参考:您必须将适当的参数传递给drawText()方法,以使其在所需位置对齐