when I set ImageSpan and ellipsize I want see ...and ImageSpan all display

Question

I have a TextView and I want to achieve this ellipse effect:

Here is my XML layout：

<TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:id="@+id/tv1"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:textSize="16sp"
        app:layout_constraintTop_toTopOf="parent"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textColor="@color/white"
        android:ellipsize="end"
        android:maxLines="2"
        />

My code:

        val drawable = ContextCompat.getDrawable(requireSceneContext() , R.drawable.playing_com_into)!!
        drawable.setBounds(0, 0 , dp2px(10) , dp2px(10))

        val text = "电影《We are all human》主题曲,电影《We are all human》主题曲,电影《We are all human》主题曲,电影《We are all human》主题曲,电影《We are all human》主题曲,电影《We are all human》主题曲"
        val span = QMUIAlignMiddleImageSpan(drawable , ALIGN_MIDDLE , -1f)

        val spannableString = SpannableString(text)
        spannableString.setSpan(span , text.length -2 , text.length , Spanned.SPAN_EXCLUSIVE_EXCLUSIVE )
        binding.tv1.text = spannableString

current effect

Here is what I'm getting right now:

I want TextView priority display ImageSpan, After that calculation Text width

Answer 1

I did not find a way to customize the internal layout of the TextView. I calculated the length of the text in the case of two lines, and then subtracted the length of one character, and then set the text and ImageSpan

This is my code

                    TextPaint paint = songDetailTv.getPaint();
                    int textViewWidth = (int) (container.getResources().getDisplayMetrics().widthPixels
                            - (2 * Resource.getDimension(R.dimen.player_recommend_margin_horizontal))
                            - (2 * Resource.getDimension(R.dimen.player_recommend_root_view_margin)));
                    int bufferWidth = (int) paint.getTextSize();
                    int textLength = textViewWidth * 2 - bufferWidth;
                    paint.setTextSize(songDetailTv.getTextSize());
                    CharSequence temp = TextUtils.ellipsize(detail.podcastIntro, paint, textLength * 1f, TextUtils.TruncateAt.END);
                    boolean isEllipsize = temp == detail.podcastIntro;
                    if (!isEllipsize) {
                        songDetailTv.setText(SpannableHelper.getPicAtEnd(R.drawable.playing_com_into, temp, -1));
                    } else {
                        songDetailTv.setText(detail.podcastIntro);
                    }

this is xml，maxline=2

<TextView
        android:id="@+id/tv_song_detail"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/tv_song_publish_time"
        android:ellipsize="end"
        android:gravity="center_vertical"
        android:maxLines="2"
        android:textColor="#98999a"
        android:textSize="12dp"
        android:visibility="gone"
        android:layout_marginTop="15dp"
        tool:text="歌曲详情"
        tool:visibility="visible" />

this is current effect current effect

I don’t know why the calculation is sometimes not so accurate. This may have something to do with the layout of the TextView. But can tolerate

Answer 2

Due to the company’s business, in addition to the need to add Image, it also needs to retain some special text, so I customized a TextView to complete this effect This is code link github

This is current effect

current effect