你好,我正在创建一个聊天应用程序,在其中需要创建带有文本的弯曲形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中实现这种类型的设计。
请建议我如何创建这样的设计。谢谢。