This is the 9th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

preface

In the previous development, I encountered the situation that the text after international foreign language translation was very long, especially in the Title. The initial solution is to use setEllipsize as End which means to omit anything that can’t be shown and use ellipsis. However, users still hope to display the whole document. After all, foreign users also hope to see complete information in the case that Chinese can be displayed completely, which also conforms to the final effect and achieves information integrity. Fortunately, TextView is a native support for the horse-light display, but in the actual development has encountered the setting horse-light invalid problem, so here to make a record.

Implement running lights in the ToolBar

Because the ToolBar title TextView is not available directly, you cannot set the running light property. So the idea is to add an additional TextView to the ToolBar and hide the TextView title inside the ToolBar.

However, the TextView added to the result has not been able to display the entire text properly, and the display effect has been running lights and ellipsis. The error code is as follows:

  • XML resource file
<android.support.v7.widget.Toolbar
        android:id="@+id/toolbar_top_view"
        android:layout_width="match_parent"
        android:layout_height="@dimen/toolbar_height"
        android:background="? attr/status_bg_color"
        android:gravity="center_vertical"
        android:minHeight="? attr/actionBarSize"
        android:paddingBottom="0dp"
        android:paddingLeft="2dp"
        android:paddingRight="2dp"
        android:paddingTop="0dp"
        android:elevation="0dp"
        app:titleMarginTop="10dp">
        <TextView
            android:id="@+id/tv_title"
            style="@style/toolbar_action_text"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:layout_gravity="center"
            android:singleLine="true"
            android:ellipsize="marquee"
            android:marqueeRepeatLimit="marquee_forever"
            android:textIsSelectable="true"
             />
    </android.support.v7.widget.Toolbar>
Copy the code
  • Application code
   mTvTitle = (TextView) mToolBar.findViewById(R.id.tv_title);
   if(mTvTitle ! =null){
        mTvTitle.setEllipsize(TextUtils.TruncateAt.MARQUEE);
        mTvTitle.setMarqueeRepeatLimit(-1);
        mTvTitle.setFocusable(true);
        mTvTitle.setFocusableInTouchMode(true);
  }
  protected void setTitle(String title) {
     if(mToolBar ! =null) {
       if(mTvTitle ! =null){
          mTvTitle.setText(title);
          mTvTitle.setSelected(true);
       }else{ mToolBar.setTitle(title); }}}Copy the code

Time is relatively long forgotten how to solve the ToolBar running lantern function, here to leave a pit later to fill.

Normal text running lantern effect

In most cases, TextView can be implemented as long as it meets the following conditions:

  1. android:focusable=”true”
  2. android:singleLine=”true”
  3. android:ellipsize=”marquee”
  4. android:marqueeRepeatLimit=”marquee_forever”
  5. android:focusableInTouchMode=”true”
  6. android:focusable=”true”
  7. setSelected(true)
var textView2 = TextView(this)
textView2.also {
    it.isSingleLine = true
    it.ellipsize = TextUtils.TruncateAt.MARQUEE
    it.text = "跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯"
    it.isFocusableInTouchMode = true
    it.isFocusable = true
    it.marqueeRepeatLimit = -1
    it.setHorizontallyScrolling(true)
    it.isSelected = true
}
Copy the code

But the actual operation found in the configuration item as long as the following conditions can also be achieved

The environment
Environment: Android 10
MinSdkVersion: 18
TargetSdkVersion: 29
  1. android:ellipsize=”marquee”
  2. android:marqueeRepeatLimit=”marquee_forever”
  3. android:singleLine=”true”
  4. setSelected(true)
var textView = TextView(this)
textView.also {
    it.isSingleLine = true // Setting maxLine with a single line will result in a collision
    it.ellipsize = TextUtils.TruncateAt.MARQUEE
    it.text = "跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯跑马灯"
    it.marqueeRepeatLimit = -1 // Set the number of running lights to 1, which means unlimited
    it.isSelected = true
}
Copy the code

The setSelected method is used to control whether the setSelected effect is displayed. When True, the setSelected effect is executed. But there are a lot of reference cases where TextView doesn’t work:

  1. Focus is lost when multiple TextViews appear on the page
  2. Page click EditText, focus lost
  3. A dialog box is displayed, and the focus is lost

Through the test, it is found that only the third case will make TextView running lantern effect invalid. When the popover starts, the running lantern stops playing, and the running lantern resumes playing after the popover disappears. The failure of TextView running lantern will also not occur.

At present, there is indeed no problem mentioned in other cases after verification. It is temporarily impossible to determine whether it is caused by special scenarios, but the basic functions have been realized.

Custom implementation of running lantern effect

The native TextView horse-light feature also has drawbacks:

  1. You cannot customize lantern speed
  2. Can not set the direction of running light, only support horizontal direction, not vertical direction
  3. Such as the above other cases will encounter models running lantern can not be achieved

If you want to implement more custom running lights, you need to customize view components to do this, and there are plenty of good third-party open source libraries available. For example, MarqueeView supports horizontal and vertical text running lights.

reference

  • # How to run Android