수행 방법 ConstraintLayout의 채팅 거품 생성

Question

나는이 모양의 Android xml 레이아웃을 가지고 있으며 채팅 거품이 있습니다. LinearLayout에서 ConstraintLayout
으로 변환하고 싶습니다.
이것은 LinearLayout 버전이며 이것은 ConstraintLayout 버전과 채팅 bubbels가 너무 좋은 보이지 않는

좋아 보인다. 이 거품으로

나는 약간의 도움이 필요. 보시다시피 화살표는 구속하기가 어렵습니다. 나는 하나의 제약 조건을 적용하지만 작동하지 않기 위해 하나의 android.support.constraint.Guideline을 추가했다. 여기

이있는 ConstraintLayout XML

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:gravity="end|center_vertical"> 

    <com.github.curioustechizen.ago.RelativeTimeTextView 
     android:id="@+id/timestamp" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textColor="?AppTheme.ChatBubbleTextColor" 
     android:textSize="@dimen/chat_timestamp_text_size" 
     tools:text="Just Now" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintVertical_bias="1.0" 
     app:layout_constraintRight_toLeftOf="@+id/message" 
     android:layout_marginEnd="8dp" 
     android:layout_marginRight="8dp" /> 

    <TextView 
     android:id="@+id/message" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:background="@drawable/bg_balloon" 
     android:padding="8dp" 
     android:textColor="?AppTheme.ChatBubbleTextColor" 
     android:textSize="@dimen/chat_message_body_text_size" 
     tools:text="This is chat message" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/guideline1" 
     app:layout_constraintBottom_toBottomOf="parent" 
     android:layout_marginTop="8dp" 
     android:layout_marginBottom="8dp" /> 

    <android.support.constraint.Guideline 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:id="@+id/guideline1" 
     android:orientation="vertical" 
     tools:layout_editor_absoluteY="0dp" 
     tools:layout_editor_absoluteX="218dp" 
     app:layout_constraintGuide_percent="0.859375" /> 

    <View 
     android:layout_width="8dp" 
     android:layout_height="8dp" 
     android:background="?AppTheme.ChatBubbleBackGroundColor" 
     android:rotation="45" 
     android:id="@+id/view" 
     app:layout_constraintRight_toLeftOf="@+id/thumbnail" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="@+id/guideline1" 
     app:layout_constraintHorizontal_bias="0.0" 
     android:layout_marginEnd="16dp" 
     android:layout_marginRight="16dp" /> 

    <ImageView 
     android:id="@+id/thumbnail" 
     android:layout_width="22dp" 
     android:layout_height="24dp" 
     tools:src="@drawable/tw__composer_logo_blue" 
     app:layout_constraintTop_toTopOf="parent" 
     app:layout_constraintBottom_toBottomOf="parent" 
     android:layout_marginEnd="8dp" 
     app:layout_constraintRight_toRightOf="parent" 
     android:layout_marginRight="8dp" /> 

</android.support.constraint.ConstraintLayout> 

어쩌면 좋은 것 이것에 대해 거품이나 아이디어를 만들어 GitHub의에서 일부 라이브러리가있다?

Answer 1

나는, 내가 이런 식으로 해결 ChatMessageView

<?xml version="1.0" encoding="utf-8"?> 
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:layout_marginTop="20dp" 
    android:layout_marginBottom="20dp"> 

    <com.github.curioustechizen.ago.RelativeTimeTextView 
     android:id="@+id/timestamp" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="16dp" 
     android:layout_marginEnd="8dp" 
     android:layout_marginLeft="16dp" 
     android:layout_marginRight="8dp" 
     android:layout_marginStart="16dp" 
     android:textColor="?AppTheme.ChatBubbleTextColor" 
     android:textSize="@dimen/chat_timestamp_text_size" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintHorizontal_bias="1.0" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/guideline1" 
     tools:text="Just Now" 
     app:layout_constraintTop_toBottomOf="@+id/chatMessageView" 
     android:layout_marginTop="3dp" /> 

    <android.support.constraint.Guideline 
     android:id="@+id/guideline1" 
     android:layout_width="0dp" 
     android:layout_height="110dp" 
     android:orientation="vertical" 
     app:layout_constraintGuide_percent="0.88611114" 
     tools:layout_editor_absoluteX="319dp" 
     tools:layout_editor_absoluteY="0dp" /> 

    <ImageView 
     android:id="@+id/thumbnail" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="16dp" 
     android:layout_marginTop="16dp" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="@+id/guideline1" 
     app:layout_constraintRight_toRightOf="parent" 
     app:layout_constraintTop_toTopOf="parent" 
     tools:src="@drawable/tw__composer_logo_blue" /> 

    <me.himanshusoni.chatmessageview.ChatMessageView 
     android:id="@+id/chatMessageView" 
     android:layout_width="0dp" 
     android:layout_height="wrap_content" 
     android:layout_marginBottom="16dp" 
     android:layout_marginLeft="8dp" 
     android:layout_marginStart="8dp" 
     android:layout_marginTop="16dp" 
     app:cmv_arrowGravity="center" 
     app:cmv_arrowPosition="right" 
     app:cmv_backgroundColor="?AppTheme.ChatBubbleBackGroundColor" 
     app:cmv_backgroundColorPressed="?AppTheme.ChatBubbleBackGroundColorPressed" 
     app:cmv_contentPadding="10dp" 
     app:cmv_cornerRadius="10dp" 
     app:cmv_showArrow="true" 
     app:layout_constraintBottom_toBottomOf="parent" 
     app:layout_constraintLeft_toLeftOf="parent" 
     app:layout_constraintRight_toLeftOf="@+id/guideline1" 
     app:layout_constraintTop_toTopOf="parent"> 

     <ImageView 
      android:id="@+id/image" 
      android:layout_width="wrap_content" 
      android:layout_height="wrap_content" 
      android:background="?AppTheme.ChatBubbleBackGroundColor"/> 

    </me.himanshusoni.chatmessageview.ChatMessageView> 

</android.support.constraint.ConstraintLayout> 

덕분에 생각