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:
- android:focusable=”true”
- android:singleLine=”true”
- android:ellipsize=”marquee”
- android:marqueeRepeatLimit=”marquee_forever”
- android:focusableInTouchMode=”true”
- android:focusable=”true”
- 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 |
- android:ellipsize=”marquee”
- android:marqueeRepeatLimit=”marquee_forever”
- android:singleLine=”true”
- 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:
- Focus is lost when multiple TextViews appear on the page
- Page click EditText, focus lost
- 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:
- You cannot customize lantern speed
- Can not set the direction of running light, only support horizontal direction, not vertical direction
- 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