如何在Android中使用ImageView和Text创建自定义弯曲布局？

Question

你好，我正在创建一个聊天应用程序，在其中需要创建带有文本的弯曲形ImageView。我不知道如何指定布局的形状。我已经附上了屏幕截图，展示了需求。

我的尝试：

<LinearLayout
    android:id="@+id/left_chat"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="top|left"
    android:orientation="horizontal"
    android:padding="10dp"
    android:visibility="visible" >

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/left_chat_img"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="center"
            android:background="@android:color/transparent"
            android:contentDescription="@string/text_image_description"
            android:scaleType="fitXY"
            android:src="@drawable/user_profile_image" />

        <TextView
            android:id="@+id/chat_receiver_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="2dp"
            android:gravity="center"
            android:maxLength="10"
            android:textColor="@color/color_common_black"
            android:textSize="13sp"
            app:font_name="@string/font_roboto_light" />
    </LinearLayout>

    <LinearLayout
        android:id="@+id/view_chat_left_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:background="@drawable/chat_tab_expert"
        android:gravity="center_vertical"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="10dp"
        android:paddingRight="5dp"
        android:paddingTop="5dp" >

        <TextView
            android:id="@+id/txt_left_chat_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:gravity="top"
            android:textColor="@color/color_common_black"
            android:textSize="15sp"
            app:font_name="@string/font_roboto_regular" />

        <TextView
            android:id="@+id/txt_chat_time_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginLeft="5dp"
            android:gravity="top"
            android:textColor="@color/color_common_black"
            android:textSize="13sp"
            app:font_name="@string/font_roboto_regular" />
    </LinearLayout>
</LinearLayout>

<LinearLayout
    android:id="@+id/view_right_chat"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="top"
    android:gravity="top|right|"
    android:orientation="horizontal"
    android:padding="10dp"
    android:visibility="visible" >

    <LinearLayout
        android:id="@+id/view_chat_right_item"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp"
        android:background="@drawable/shape_chat_cus_bg"
        android:gravity="top"
        android:minHeight="50dp"
        android:minWidth="180dp"
        android:orientation="vertical"
        android:paddingBottom="5dp"
        android:paddingLeft="5dp"
        android:paddingRight="10dp"
        android:paddingTop="5dp" >

        <TextView
            android:id="@+id/txt_right_chat_msg"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="top"
            android:gravity="top"
            android:textColor="@color/color_white"
            android:textSize="15sp"
            app:font_name="@string/font_roboto_regular" />

        <LinearLayout
            android:id="@+id/view_right_icons"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_marginTop="5dp"
            android:gravity="center"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/img_msg_status_right"
                android:layout_width="15dp"
                android:layout_height="13dp"
                android:contentDescription="@string/text_image_description"
                android:scaleType="fitXY"
                android:src="@drawable/ic_scene" />

            <TextView
                android:id="@+id/txt_chat_time_right"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:gravity="top"
                android:textColor="@color/color_white"
                android:textSize="13sp"
                app:font_name="@string/font_roboto_regular" />
        </LinearLayout>
    </LinearLayout>

    <ImageView
        android:id="@+id/img_chat_customer"
        android:layout_width="13dp"
        android:layout_height="13dp"
        android:layout_marginTop="15dp"
        android:background="@android:color/transparent"
        android:contentDescription="@string/text_image_description"
        android:scaleType="fitXY"
        android:src="@drawable/ic_arrow" />

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="5dp"
        android:gravity="center"
        android:orientation="vertical" >

        <com.views.CircularImageView
            android:id="@+id/view_right_chat_img"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_gravity="top"
            android:background="@android:color/transparent"
            android:contentDescription="@string/text_image_description"
            android:scaleType="fitXY"
            android:src="@drawable/user_profile_image"
            android:visibility="visible" />

        <TextView
            android:id="@+id/txt_chat_sender_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="2dp"
            android:gravity="center"
            android:maxLength="10"
            android:textColor="@color/color_common_black"
            android:textSize="13sp"
            app:font_name="@string/font_roboto_light" />
    </LinearLayout>
</LinearLayout>

这是我尝试过的截图，但我没有实现期望的设计。

我使用了带圆角的ImageView，但我不知道如何在Android中实现这种类型的设计。

请建议我如何创建这样的设计。谢谢。

- Shadow

Answer 1

我们需要使用自定义背景和自定义圆形ImageView。

顶部TextView背景：top_text_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@android:color/holo_blue_bright" />
<corners
    android:bottomLeftRadius="0dp"
    android:bottomRightRadius="0dp"
    android:topLeftRadius="5dp"
    android:topRightRadius="10dp" />
</shape>

消息文本背景：msg_text_bg.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle" >
<solid android:color="@color/list_row_bg" />
<corners android:radius="@dimen/dimen_10" />
</shape>

主要活动：test.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res/com.tunedinn.android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_margin="@dimen/dimen_5"
android:background="@android:color/darker_gray"
android:paddingBottom="2dp" >

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentLeft="true"
    android:layout_alignParentTop="true" >

    <RelativeLayout
        android:id="@+id/rl"
        android:layout_width="match_parent"
        android:layout_height="90dp"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/t1"
        android:layout_marginLeft="2dp"
        android:background="@drawable/msg_text_bg"
        android:paddingBottom="10dp" >

        <TextView
            android:id="@+id/t3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_alignParentRight="true"
            android:gravity="right"
            android:text="10 March,2015" />

        <TextView
            android:id="@+id/t2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_marginLeft="80dp"
            android:gravity="left"
            android:text="hello how are you " />

    </RelativeLayout>

    <TextView
        android:id="@+id/t1"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="41dp"
        android:background="@drawable/top_text_bg"
        android:gravity="right"
        android:padding="4dp"
        android:text="Julein Renvoye  " />

    <com.tunedinn.android.view.CircularImageView
        android:id="@+id/fragment_profile_imageview_profile_picture"
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_alignParentTop="true"
        android:scaleType="fitXY"
        android:src="@drawable/andi"
        app:border="true"
        app:border_color="@android:color/holo_blue_bright"
        app:border_width="2dp"
        app:shadow="true" />
 </RelativeLayout>

 </RelativeLayout>

圆形ImageView：

    package com.tunedinn.android.view;

    import android.annotation.SuppressLint;
    import android.content.Context;
    import android.content.res.TypedArray;
    import android.graphics.Bitmap;
    import android.graphics.BitmapShader;
    import android.graphics.Canvas;
    import android.graphics.Color;
    import android.graphics.Paint;
    import android.graphics.Paint.Style;
    import android.graphics.Shader;
    import android.graphics.drawable.BitmapDrawable;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.widget.ImageView;
    import com.tunedinn.android.R;

    @SuppressLint("NewApi")
    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);
        paintBorder.setStyle(Style.STROKE.STROKE);

        // 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();
     }

        public void setBorderWidth(int borderWidth) {
        paintBorder.setStrokeWidth(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);

    }

    @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;
      }
      }

- Elesh Baraiya