Automatically go to furthest right (last horizontal child) then back to furthest left(first child) in a horizontal scroll view

huangapple go评论79阅读模式
英文:

Automatically go to furthest right (last horizontal child) then back to furthest left(first child) in a horizontal scroll view

问题

我在一个水平的 LinearLayout 中有一些卡片,然后这个 LinearLayout 放在一个 HorizontalScrollView 中,我想要实现类似于图片幻灯片的左右旋转效果。

以下是我的 XML 代码,其中包含了 5 个卡片,它们在水平方向排列:

<HorizontalScrollView
    android:id="@+id/horizontal_scroller"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:scrollbars="none">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <androidx.cardview.widget.CardView
            android:layout_width="180dp"
            android:layout_height="wrap_content"
            android:layout_marginRight="10dp"
            app:cardCornerRadius="8dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="vertical"
                android:paddingBottom="8dp">

                <ImageView
                    android:layout_width="match_parent"
                    android:layout_height="200dp"
                    android:layout_margin="10dp"
                    android:background="@drawable/testimage" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="8dp"
                    android:layout_marginRight="5dp"
                    android:gravity="end"
                    android:text="USD 300"
                    android:textAlignment="viewEnd"
                    android:textColor="#ce375e"
                    android:textSize="15dp" />

                <TextView
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_marginLeft="9dp"
                    android:layout_marginBottom="8dp"
                    android:text="Product 1"
                    android:textSize="14sp" />

            </LinearLayout>
        </androidx.cardview.widget.CardView>

        <!-- ... Repeat similar CardView blocks for Product 2, 3, 4, and 5 ... -->

    </LinearLayout>
</HorizontalScrollView>

我尝试使用了 <ViewFlipper> 等标签,但用户无法在布局中自由滚动。

英文:

I have cards in a horizontal LinearLayout which is then in a HorizontalScrollView that I would like to rotate about left to right and back like an image slideshow.

Here is my XML, it contains 5 cards which are in horizontal alignment

&lt;HorizontalScrollView
android:id=&quot;@+id/horizontal_scroller&quot;
android:layout_width=&quot;fill_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_gravity=&quot;center_horizontal&quot;
android:scrollbars=&quot;none&quot;&gt;
&lt;LinearLayout
android:layout_width=&quot;wrap_content&quot;
android:layout_height=&quot;wrap_content&quot;
android:orientation=&quot;horizontal&quot;&gt;
&lt;androidx.cardview.widget.CardView
android:layout_width=&quot;180dp&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginRight=&quot;10dp&quot;
app:cardCornerRadius=&quot;8dp&quot;&gt;
&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:orientation=&quot;vertical&quot;
android:paddingBottom=&quot;8dp&quot;&gt;
&lt;ImageView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;200dp&quot;
android:layout_margin=&quot;10dp&quot;
android:background=&quot;@drawable/testimage&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;8dp&quot;
android:layout_marginRight=&quot;5dp&quot;
android:gravity=&quot;end&quot;
android:text=&quot;USD 300&quot;
android:textAlignment=&quot;viewEnd&quot;
android:textColor=&quot;#ce375e&quot;
android:textSize=&quot;15dp&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;9dp&quot;
android:layout_marginBottom=&quot;8dp&quot;
android:text=&quot;Product 1&quot;
android:textSize=&quot;14sp&quot; /&gt;
&lt;/LinearLayout&gt;
&lt;/androidx.cardview.widget.CardView&gt;
&lt;androidx.cardview.widget.CardView
android:layout_width=&quot;180dp&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginRight=&quot;10dp&quot;
app:cardCornerRadius=&quot;8dp&quot;&gt;
&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:orientation=&quot;vertical&quot;
android:paddingBottom=&quot;8dp&quot;&gt;
&lt;ImageView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;200dp&quot;
android:layout_margin=&quot;10dp&quot;
android:background=&quot;@drawable/testimage&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;8dp&quot;
android:layout_marginRight=&quot;5dp&quot;
android:gravity=&quot;end&quot;
android:text=&quot;USD 300&quot;
android:textAlignment=&quot;viewEnd&quot;
android:textColor=&quot;#ce375e&quot;
android:textSize=&quot;15dp&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;9dp&quot;
android:layout_marginBottom=&quot;8dp&quot;
android:text=&quot;Product 2&quot;
android:textSize=&quot;14sp&quot; /&gt;
&lt;/LinearLayout&gt;
&lt;/androidx.cardview.widget.CardView&gt;
&lt;androidx.cardview.widget.CardView
android:layout_width=&quot;180dp&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginRight=&quot;10dp&quot;
app:cardCornerRadius=&quot;8dp&quot;&gt;
&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:orientation=&quot;vertical&quot;
android:paddingBottom=&quot;8dp&quot;&gt;
&lt;ImageView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;200dp&quot;
android:layout_margin=&quot;10dp&quot;
android:background=&quot;@drawable/testimage&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;8dp&quot;
android:layout_marginRight=&quot;5dp&quot;
android:gravity=&quot;end&quot;
android:text=&quot;USD 300&quot;
android:textAlignment=&quot;viewEnd&quot;
android:textColor=&quot;#ce375e&quot;
android:textSize=&quot;15dp&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;9dp&quot;
android:layout_marginBottom=&quot;8dp&quot;
android:text=&quot;Product 3&quot;
android:textSize=&quot;14sp&quot; /&gt;
&lt;/LinearLayout&gt;
&lt;/androidx.cardview.widget.CardView&gt;
&lt;androidx.cardview.widget.CardView
android:layout_width=&quot;180dp&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginRight=&quot;10dp&quot;
app:cardCornerRadius=&quot;8dp&quot;&gt;
&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:orientation=&quot;vertical&quot;
android:paddingBottom=&quot;8dp&quot;&gt;
&lt;ImageView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;200dp&quot;
android:layout_margin=&quot;10dp&quot;
android:background=&quot;@drawable/testimage&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;8dp&quot;
android:layout_marginRight=&quot;5dp&quot;
android:gravity=&quot;end&quot;
android:text=&quot;USD 300&quot;
android:textAlignment=&quot;viewEnd&quot;
android:textColor=&quot;#ce375e&quot;
android:textSize=&quot;15dp&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;9dp&quot;
android:layout_marginBottom=&quot;8dp&quot;
android:text=&quot;Product 4&quot;
android:textSize=&quot;14sp&quot; /&gt;
&lt;/LinearLayout&gt;
&lt;/androidx.cardview.widget.CardView&gt;
&lt;androidx.cardview.widget.CardView
android:layout_width=&quot;180dp&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginRight=&quot;10dp&quot;
app:cardCornerRadius=&quot;8dp&quot;&gt;
&lt;LinearLayout
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:orientation=&quot;vertical&quot;
android:paddingBottom=&quot;8dp&quot;&gt;
&lt;ImageView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;200dp&quot;
android:layout_margin=&quot;10dp&quot;
android:background=&quot;@drawable/testimage&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;8dp&quot;
android:layout_marginRight=&quot;5dp&quot;
android:gravity=&quot;end&quot;
android:text=&quot;USD 300&quot;
android:textAlignment=&quot;viewEnd&quot;
android:textColor=&quot;#ce375e&quot;
android:textSize=&quot;15dp&quot; /&gt;
&lt;TextView
android:layout_width=&quot;match_parent&quot;
android:layout_height=&quot;wrap_content&quot;
android:layout_marginLeft=&quot;9dp&quot;
android:layout_marginBottom=&quot;8dp&quot;
android:text=&quot;Product 5&quot;
android:textSize=&quot;14sp&quot; /&gt;
&lt;/LinearLayout&gt;
&lt;/androidx.cardview.widget.CardView&gt;
&lt;/LinearLayout&gt;
&lt;/HorizontalScrollView&gt;

I have tried using tags such as &lt;ViewFlipper with that users cannot scroll themselves within the layout.

答案1

得分: 0

使用计时器进行连续滚动,并使用canScrollHorizontally()来检查是否已滚动到最右边,然后开始向左滚动,
canScrollHorizontally()使用正整数表示向右方向,负整数表示向左方向

private HorizontalScrollView scrollView;
private boolean scrollingLeft;
int pace = 50;
private Timer timer;

timer = new Timer("horizontalScrollViewTimer");
timer.scheduleAtFixedRate(new TimerTask() {
    @Override
    public void run() {
        runOnUiThread(new Runnable() {
            @Override
            public void run() {
                if (scrollView.canScrollHorizontally(1) && !scrollingLeft ) {
                    Log.d(TAG, "向右滚动");
                    scrollView.smoothScrollBy(pace, 0);
                }
                else {
                    Log.d(TAG, "向左滚动");
                    scrollingLeft = true;
                    scrollView.smoothScrollBy(-pace, 0);
                    if (!scrollView.canScrollHorizontally(-1)) // 已到达最左侧,停止向左滚动
                        scrollingLeft = false;
                }
            }
        });
    }
}, 3000, 50);
英文:

Use a timer for continuous scrolling, and using canScrollHorizontally() to check wether it reached the furthest right then start scrolling left,
canScrollHorizontally() takes positive int for right direction, negative int for left direction

private HorizontalScrollView scrollView;
private boolean scrollingLeft;
int pace = 50;
private Timer timer;
timer = new Timer(&quot;horizontalScrollViewTimer&quot;);
timer.scheduleAtFixedRate(new TimerTask() {
@Override
public void run() {
runOnUiThread(new Runnable() {
@Override
public void run() {
if (scrollView.canScrollHorizontally(1)&amp;&amp;!scrollingLeft ) {
Log.d(TAG, &quot;Scrolling right&quot;);
scrollView.smoothScrollBy(pace, 0);
}
else {
Log.d(TAG, &quot;Scrolling left&quot;);
scrollingLeft =true;
scrollView.smoothScrollBy(-pace, 0);
if(!scrollView.canScrollHorizontally(-1)) // reached the furthest left turn of scrolling left
scrollingLeft = false;
}
}
});
}
}, 3000, 50);

huangapple
  • 本文由 发表于 2020年7月25日 21:40:15
  • 转载请务必保留本文链接:https://go.coder-hub.com/63089052.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定