[Android Control] Basic usage record of HorizontalScrollView (scroll bar customization)

HorizontalScrollView is a container used for layout, which can place the view hierarchy that users can view using scroll bars, allowing the view structure to be larger than the screen of the mobile phone. HorizontalScrollView is a FrameLayout (frame layout) whose children move as a whole when scrolled, and the child itself can be a layout manager with a complex hierarchical structure. A common application is for items in a horizontal orientation, where the user can scroll to display the top-level horizontally arranged items.

It is very suitable for infinite sliding of scenes and pictures, multiple custom button layouts at the bottom (supports increment), etc.

Precautions

HorizontalScrollView only supports horizontal scrolling display

ScrollView and HorizontalScrollView can only have one child element, so you can add a LinearLayout layout and put other buttons and other things in this LinearLayout. Then the child element of ScrollViewd will only have one LinearLayout, and the child elements of LinearLayout are not limited.

It cannot be used with ListView at the same time, because ListView has its own scroll bar settings. The most important thing is that if you need to display a large list, using both at the same time will cause ListView to fail in some important optimizations. The reason for this failure is that HorizontalScrollView forces ListView to use the infinite container provided by HorizontalScrollView itself to display the complete list.

TextView also has its own scrollbar, so no need for ScrollView. But the two can be used at the same time, and the result will be a text view displayed in a larger container.

Basic attributes

scrollbars
Set the scroll bar display: none (hidden), horizontal (horizontal), vertical (vertical).

scrollbarFadeDuration
Set the scroll bar fade-out effect (from present to slowly fading until it disappears) time, in milliseconds. In Android 2.2, the scroll bar will disappear after scrolling, and will come out again after scrolling. In versions 1.5 and 1.6, it will always be displayed.

scrollbarSize
Set the width of the scroll bar.

scrollbarStyle
Set the style and position of the scroll bar. Setting values: insideOverlay, insideInset, outsideOverlay, outsideInset

scrollbarThumbHorizontal
Sets the drawable of the horizontal scroll bar.

scrollbarThumbVertical
Set the drawable of the vertical scroll bar.

scrollbarTrackHorizontal
Set the color drawable of the horizontal scroll bar background (track)

soundEffectsEnabled
Set whether there are sound effects when clicking or touching

fadeScrollbars
Whether the scroll bar is always displayed: false is always displayed, true is automatically hidden

overScrollMode
There are total sliding modes 3:
never
setOverScrollMode(View.OVER_SCROLL_NEVER)
Set this mode and continue sliding after sliding to the boundary. Arc halo appears
always
setOverScrollMode(View.OVER_SCROLL_ALWAYS)
Set this mode and continue sliding after sliding to the boundary. There will always be an arc halo
ifContentScrolls
setOverScrollMode(View.OVER_SCROLL_IF_CONTENT_SCROLLS)
Set this mode, if in recycleview If the content can be slid, then sliding to the boundary and continuing to slide will cause an arc halo to appear; if the content in the recycleview cannot be slid, then sliding to the boundary and continuing to slide will not cause an arc halo.

Scroll bar settings

Whether the scroll bar is always displayed

False always displays, true automatically hides

Customize scroll bar sliding background and scroll bar background

Scroll bar sliding background settings:
android:scrollbarThumbHorizontal= "@drawable/shape_main_bottom_scroll_bar"
shape_main_bottom_scroll_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="@color/white" />
    <corners android:radius="360dp" />
</shape>

Scroll bar background setting:
android:scrollbarTrackHorizontal="@drawable/shape_main_bottom_scroll_bg_bar"
shape_main_bottom_scroll_bg_bar.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#357AD5" />
    <corners android:radius="360dp" />
</shape>

Set the width of the scroll bar

android:scrollbarSize="6dp"

Set scroll bar distance

Use paddingBottom in HorizontalScrollView or its control height (layout_height), layout_marginTop, etc. to flexibly use time and distance control

Other general settings

Set scroll speed

This does not provide us with a method that can be set directly. We need to inherit ScrollView ourselves and then override a public void fling (int velocityY) method:

@Override
public void fling(int velocityY) {
    super.fling(velocityY / 2);    //速度变为原来的一半
}

Layout code example

<HorizontalScrollView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:scrollbarThumbHorizontal= "@drawable/shape_main_bottom_scroll_bar"
                android:scrollbarTrackHorizontal="@drawable/shape_main_bottom_scroll_bg_bar"
                android:fadeScrollbars="false"
                android:overScrollMode="never"
                >
                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >
                    <Button
                        android:id="@+id/historyMainSysBtn"
                        style="@style/main_bottom_btn_style"
                        android:background="@mipmap/gongnengicon4"
                        android:layout_marginLeft="0dp"
                        android:text="历史呼叫"
                        />

                    <Button
                        android:id="@+id/handleMainSysBtn"
                        style="@style/main_bottom_btn_style"
                        android:background="@mipmap/gongnengicon5"
                        android:text="办理中"
                        />
                    <Button
                        android:id="@+id/callToNumberMainSysBtn"
                        style="@style/main_bottom_btn_style"
                        android:background="@drawable/szgw_skip_number_btn"
                        android:text="过号"
                        />
                    <Button
                        android:id="@+id/callTransferMainSysBtn"
                        style="@style/main_bottom_btn_style"
                        android:background="@mipmap/gongnengicon7"
                        android:text="呼叫移动"
                        />
                    <Button
                        android:id="@+id/specialCallMainSysBtn"
                        style="@style/main_bottom_btn_style"
                        android:background="@mipmap/gongnengicon8"
                        android:text="特呼"
                        />
                    <Button
                        android:id="@+id/pushMessageMainSysBtn"
                        style="@style/main_bottom_btn_style"
                        android:background="@mipmap/gongnengicon9"
                        android:text="消息推送"
                        />
                
                </LinearLayout>
            </HorizontalScrollView>

Summarize

After simple use, there are more and more controls now, and they are becoming more and more powerful, especially with the advent of Androidx and other controls, but each control has its most suitable scenario.

Just watching and typing is useless
After reading, you must practice it
You must type the code
Be sure to run trial and error
This is meaningful learning