如何在Android中创建轮播滚动页面?

人气:1,176 发布:2022-09-10 标签: android carousel android-layout

问题描述

我试图建立一个用户界面我的Andr​​oid应用程序,其中包含了水平滚动转盘垂直滚动页面(像什么Netflix的应用程序一样)。如何在这种类型的行为来实现?

有一个基本的实现就足以让我开始。还有一些其它要求的用户界面,我将包括在这里以供参考,因为它可能会影响哪些类或库,我可以使用。

1)垂直传送带之间滚动应光滑,但是当用户释放,出现的用户界面捕捉到最接近转盘(因此用户在旋转木马行始终,不是两个转盘)。

2)在转盘水平滚动应光滑,但是当用户释放,出现的用户界面捕捉的转盘最接近的项目。的

3)应尽可能覆盖在某个项目上的其他信息在转盘的

4)UI应该适应任何屏幕尺寸。的

5)应该是通航使用箭头键(对于触摸屏无设备)的

6)应能在广泛的安卓版本(可通过支持库)的

7)应确定在一个开源的应用程序在GPL下的

许可使用

可接受的答案,不必满足所有这些要求。至少,一个很好的答案应该包括浏览多个转盘(而不是只有一个旋转木马)。

这里是一个实体模型基本上我所预想(我很灵活,并不一定是这样的..点只是为了澄清我所讲的 - 每一行会包含很多物品可能被滚动左和右,和整个页可以上下滚动)的

解决方案

核心创意

为了有一个灵活的设计,并具有无限项您可以创建一个 RecyclerView 与一个 LinearLayoutManager.VERTICAL 为布局管理。对于每一行,你可以把另一个 RecyclerView 但现在有了一个 LinearLayoutManager.HORIZONTAL 布局管理

结果

来源

code

要求

  

1)垂直传送带之间滚动应光滑,但是当   用户的版本中,出现的用户界面捕捉到最接近转盘(所以   用户永远是对传送带行,而不是两个转盘之间)。

     

2)在转盘水平滚动应光滑,但是当用户   版本中,出现的用户界面捕捉的转盘最接近的项目。

为了实现这些我用 OnScrollListener 当国进SCROLL_STATE_IDLE我检查顶部和底部的观点,看看哪些人有较明显的区域,然后滚动到该位置。对于每个行我这样做是为了为每个行适配器左和右视图。这样,你永远旋转木马或行一侧适合。例如,如果顶部装配在底部不或反之亦然。我认为,如果你多一点,你可以做到这一点发挥,但你必须知道窗口的尺寸和改变转盘的尺寸在运行时。

  

3)应尽可能放在一个项目以覆盖更多的信息   在转盘

如果您使用 RelativeLayout的的FrameLayout 每个项目你可以把信息在各个顶部的根视图其他。正如你所看到的数字是在图像的顶部。

  

4)UI应该适应任何屏幕尺寸。

如果你知道如何支持多种屏幕尺寸,你可以这样做很容易,如果你不知道阅读文档。 支持多画面

  

5)应该是通航使用箭头键(对于触摸屏少   设备)

下面的功能使用

  mRecyclerView.scrollToPosition(位置);
 

  

6)应能在广泛的安卓版本(可通过   支持库)

进口机器人的 support.v7 .widget.RecyclerView;

  

7)应确定在一个开源的应用程序在GPL下

许可使用

确定

编码快乐!

I am attempting to build a UI for my Android app which contains a vertically scrollable page of horizontally scrollable carousels (something like what the Netflix app does). How is this type of behaviour accomplished?

A basic implementation would be enough to get me started. There are a few other requirements for the UI, which I'll include here for reference, since it may impact what classes or libraries I can use.

1) Vertical scrolling between carousels should be smooth, but when user releases, the UI should "snap to" the closest carousel (so the user is always on a carousel row, not between two carousels).

2) Horizontal scrolling on a carousel should be smooth, but when user releases, the UI should "snap to" the closest item in the carousel.

3) Should be possible to overlay additional information over an item in the carousel

4) UI should be adaptable to any screen size.

5) Should be navigable with the arrow keys (for touchscreen-less devices)

6) Should work on a wide range of Android versions (possibly through the support library)

7) Should be OK to use in an open-source app licensed under the GPL

Acceptable answers DO NOT have to meet all of these requirements. At a minimum, a good answer should involve navigating multiple carousels (versus only one carousel).

Here is a mock-up of basically what I am envisioning (I'm flexible, doesn't have to look like this.. point is just to clarify what I am talking about -- each row would contain a lot of items that could be scrolled left and right, and the whole page could be scrolled up and down)

解决方案

Main Idea

In order to have a flexible design and having unlimited items you can create a RecyclerView as a root view with a LinearLayoutManager.VERTICAL as a LayoutManager. for each row you can put another RecyclerView but now with a LinearLayoutManager.HORIZONTAL as a LayoutManager.

Result

Source

Code

Requirements

1) Vertical scrolling between carousels should be smooth, but when user releases, the UI should "snap to" the closest carousel (so the user is always on a carousel row, not between two carousels).

2) Horizontal scrolling on a carousel should be smooth, but when user releases, the UI should "snap to" the closest item in the carousel.

In order to achieve those I used OnScrollListener and when the states goes SCROLL_STATE_IDLE I check top and bottom views to see which of them has more visible region then scroll to that position. for each rows I do so for left and right views for each row adapter. In this way always one side of your carousels or rows fit. for example if top is fitted the bottom is not or vise versa. I think if you play a little more you can achieve that but you must know the dimension of window and change the dimension of carousels at runtime.

3) Should be possible to overlay additional information over an item in the carousel

If you use RelativeLayout or FrameLayout as a root view of each item you can put information on top of each other. as you can see the numbers are on the top of images.

4) UI should be adaptable to any screen size.

if you know how to support multiple screen size you can do so easily, if you do not know read the document. Supporting Multiple Screens

5) Should be navigable with the arrow keys (for touchscreen-less devices)

use below function

mRecyclerView.scrollToPosition(position);

6) Should work on a wide range of Android versions (possibly through the support library)

import android.support.v7.widget.RecyclerView;

7) Should be OK to use in an open-source app licensed under the GPL

Ok

happy coding!!

420