Android中带有recyclerview项目的动态viewpager指示器

OK i know what some developers will say “why use a RecyclerViews’s items as a ViewPager’s page indicator instead of using a TabLayout or TableLayout”.

好的，我知道一些开发人员会说“ 为什么将RecyclerViews的项目用作ViewPager的页面指示器而不是使用TabLayout或TableLayout ”。

The concepts in this article are advanced so for the newbies you should consider taking a course on Android Programming at Udacity with thier java an android Nanodegree Programs you will have the Professional’s feet on the subject.

本文中的概念是高级的，因此对于新手来说，您应该考虑在Udacity上使用Java和android Nanodegree程序来学习Udacity上的Android编程课程，您将在此主题上拥有专业知识。

Sometimes as an Android developer you can be faced with a situation where you are required to give out as much information in a ViewPager’s page indicator as in the ViewPager’s pages itself and as you may already guess a simple title and an icon may not be enough like the TabLayout offers. Imagine that you have a ViewPager in which each page has to display a list of Dishes for a certain restaurant and that it indicators have to act like a title,have an image or logo of the restaurant, show ratings of the restaurant and above all be able to sync with the page change of each page in the ViewPager to show information for every restaurant in the ViewPager’s Adapter.

有时，作为Android开发人员，您可能会面临这样的情况：您需要在ViewPager的页面指示器中提供与ViewPager的页面本身一样多的信息，并且您可能已经猜到了简单的标题和图标可能还不够TabLayout提供。 假设您有一个ViewPager，其中每个页面必须显示特定餐厅的菜肴列表，并且其指示器必须像标题一样，具有餐厅的图像或徽标，显示餐厅的等级，最重要的是能够与ViewPager中每个页面的页面更改同步，以在ViewPager的适配器中显示每个餐厅的信息。

I will show you how to handle all this by using a RecyclerView Adapter with items as indicators and keeping the same sync level as if the ViewPager was actually using Tabs as page indicator.

我将向您展示如何通过使用RecyclerView Adapter(将项目作为指示器)并保持相同的同步级别，就像ViewPager实际使用Tabs作为页面指示器一样来处理所有这些问题。

Lets Code

让代码

Get the full code on Github

在Github上获取完整代码

First we have to make our layouts, the Main Activity layout containing the ViewPager and the RecyclerView,two separate layouts for our Adapter items and a Fragment layout to hold Restaurant data in the ViewPager’s pages, to make this article short i will use only the most important layouts and Code, to see all the files just get the repo on Github

首先，我们必须进行布局，包括ViewPager和RecyclerView的Main Activity布局，用于Adapter项的两个独立布局，以及用于在ViewPager的页面中保存餐厅数据的Fragment布局，为了使本文简短，我将只使用最多的重要的布局和代码，要查看所有文件，只需在Github上获取存储库

设置数据 (Setting up the Data)

In order to have our list of restaurants and dishes with their icons and pictures i created all the data and Resources we will need in the project’s Resources folder, in the Strings.xml file there are six string-arrays, three containing data about the restuarants and three containing data about the dishes.

为了获得带有图标和图片的餐厅和菜肴清单，我创建了所有数据和资源，我们需要在项目的Resources文件夹中，在Strings.xml文件中有六个字符串数组 ，其中三个包含有关餐厅的数据和三个包含有关菜肴的数据。

restaurant_names string-array : contains a list of restaurant names

restaurant_names字符串数组：包含餐厅名称列表

restaurant_icons string-array : contains the names of the restaurant logos in the drawables resource folder

restaurant_icons string-array：包含drawables资源文件夹中的餐厅徽标的名称

restaurant_description string-array : contains descriptions of the restaurants

restaurant_description字符串数组：包含餐厅的描述

dishes string-array : contains names of dishes

dishs字符串数组：包含菜肴名称

dish_description : contains descriptions of the dishes

dish_description：包含菜肴的描述

dish_icons : contains pictures of the dishes found in the drawables resource folder

dish_icons：包含在drawables资源文件夹中找到的菜肴的图片

Note: the restaurants in this list are not real restaurants and all the icons are all made up icons for the sake of simplicity and the food pictures are random pictures gotten on the internet but in a real life scenario all of this data could be gotten from a web api,web service or database.

注意：此列表中的餐厅不是真正的餐厅，为了简单起见，所有图标都是由图标组成的，而食物图片是在互联网上获取的随机图片，但在现实生活中，所有这些数据都可以从中获取网络api，网络服务或数据库。

Now that our data sources are all set let’s put the code together.

现在我们的数据源都已设置好，让我们将代码放在一起。

activity_main.xml

activity_main.xml

MainActivity.java

MainActivity.java

Above is the activity_main.xml and the MainActivity.java class with all the views and code we need, in the Oncreate() method of our MainActivity.java class the layout is inflated and the following functions are executed.

上面是activity_main.xml和MainActivity.java类，其中包含我们需要的所有视图和代码，在MainActivity.java类的Oncreate()方法中，布局被放大 ，并执行以下函数。

initializeComponents() : as the name states this method initializes the Views in the layout, it initializes the RecyclerView which will act as our ViewPager indicator in this case the indicator variable and the ViewPager itself which is the restaurantHolder variable

initializeComponents()：顾名思义，此方法将初始化布局中的Views，它初始化RecyclerView，它将充当我们的ViewPager指示器，在这种情况下，该指示器变量和ViewPager本身即restaurantHolder变量

design() : This method simply uses the Android Palette class to get the vibrant color of the background image and set the apps background color as an overlay to the background image.

design()：此方法仅使用Android Palette类获取背景图像的鲜艳颜色，并将应用程序背景颜色设置为背景图像的叠加层。

getAllRestaurants() : Simply the function that loads the restaurant data from the string-arrays in an ArrayList of restaurantHolder objects in this case the restaurantList variable.

getAllRestaurants()：简单的函数，它从restaurantHolder对象的ArrayList中的字符串数组加载餐厅数据，在这种情况下，是restaurantList变量。

loadData() : This is the core function of the activity, in this function the restaurant data is gotten by executing the getAllRestaurants() method, the restaurantList is then used to create the data adapters which are the indicatorAdapter and the restaurantAdapter

loadData()：这是活动的核心功能，在此功能中，通过执行getAllRestaurants()方法获取餐厅数据，然后使用restaurantList创建数据适配器，即indicatorAdapter和restaurantAdapter

indicatorAdapter : The custom RecyclerView.Adapter used to populate the indicator RecyclerView, this adapter also has an indicatorViewHolder for it items and this is where we actually customize and make dynamic the items as they will be used as tabs for the ViewPager, see the code below

indicatorAdapter：用于填充指示器 RecyclerView的自定义RecyclerView.Adapter ，此适配器还为它的项目提供了一个indicatorViewHolder ，这是我们实际自定义和动态化项目的地方，因为它们将用作ViewPager的选项卡，请参见下面的代码

indicatorAdapter.java

indicatorAdapter.java

restaurantAdapter : The custom FragmentPagerAdapter used to populate the restaurantHolder ViewPager, each page of the ViewPager has a restaurant Fragment in which all the data about the restaurant is presented and the dishes string-arrays are used to populate it RecyclerView with Dishes, check the code of this fragment on github.

restaurantAdapter：用于填充restaurantHolder ViewPager的自定义FragmentPagerAdapter ，ViewPager的每个页面上都有一个餐厅片段，其中显示了有关餐厅的所有数据，并且使用菜式字符串数组将其填充到带有盘的RecyclerView中，检查代码这个片段在github上 。

RecyclerView和ViewPager之间的通信 (Communication Between the RecyclerView and ViewPager)

The indicator RecyclerView and the restaurantHolder ViewPager all use restaurantList to populate their itemViews with restaurantHolder objects by using their various data Adapters therefore the getCount() method of both adapters must exactly return the size() of the restaurantList in order to avoid unwanted behavior and even a crash.

该指标 RecyclerView和restaurantHolder ViewPager全部使用restaurantList来填充他们的 itemViews与restaurantHolder对象 因此，通过使用它们的各种数据适配器，两个适配器的getCount()方法必须精确地返回restaurantList的size()以避免不必要的行为甚至崩溃。

To sync the indicator RecyclerView and the restaurantHolder ViewPager we have to achieve the following

要同步指标 RecyclerView和restaurantHolder ViewPager，我们必须实现以下目标

1. When and item in the RecyclerView is clicked, the ViewPager should automatically move to the coresponding restaurant fragment.
   当单击RecyclerView中的和项时，ViewPager应该自动移至与餐厅相关的核心片段。
2. When the ViewPager is swiped to a new page, the RecyclerView should move to the corresponding item in it adapter an be seen as selected.
   当ViewPager滑动到新页面时，RecyclerView应该移动到适配器中的相应项，并被视为已选中。

To achieve these goals lets move to our indicatorAdapter, in the Adapter there are two variables a view of name selectView and an integer named selectedIndex, the selectView holds a view for the item on which the user has clicked, in the viewHolder of each item there is a View named clicker, it is this view that is responsible for indicating a selected item and is saved in the selectView variable of the adapter when clicked on, the clicker’s backgroundcolor changes to transparent when clicked or selected an it changes to a semi transparent white color when unselected, this selection is taken care of in the onBindViewHolder() method of the adapter.

为了实现这些目标，让我们转到indicatorAdapter，在Adapter中有两个变量，分别是名称为selectView的视图和一个名为selectedIndex的整数， 选择查看适用于哪个用户点击，在每个项目的viewHolder项目视图有一种说法叫唱首歌，正是这种观点是负责指示选定的项目，并保存在适配器时的选择查看变量单击时，单击器或单击器时单击器的背景色变为透明， 而未选择时单击器的背景色变为半透明白色，此选择在适配器的onBindViewHolder()方法中处理。

onBindViewHolder() onBindViewHolder()

The selectedIndex is the number index that indicates which item is currently selected, it value changes when an item in the adapter is clicked, this is also handled in the onBindViewHolder() method of the adapter.

selectedIndex是一个数字索引，指示当前选中的项目，单击适配器中的项目时其值会更改，这也可以在适配器的onBindViewHolder()方法中处理。

Finally we need a way to notify the MainActivity of the changes in selection both in the indicator RecyclerView and the restaurantHolder ViewPager this is actually done in the loadData() method of the MainActivity by using the indicatorAdapter.callback interface, where in it onTitleClicked(int position) method we execute “restaurantHolder.setCurrentItem(position)” to move the restaurantHolder ViewPager to the coresponding fragment and in the same way we set an OnPageChangeListener() to the restaurantHolder so that when it is swiped, in the onPageSelected(int position) method of the listener we simply update the selectedIndex in the indicatorAdapter and execute the indicatorAdapter.notifyDataSetChanged() method, see the loadData() method of the MainActivity.java class above.

最后，我们需要一种方法来通知MainActivity 指示器 RecyclerView和restaurantHolder ViewPager中的选择更改，这实际上是通过使用indicatorAdapter.callback接口在MainActivity的loadData()方法中完成的，其中onTitleClicked(int position)方法，我们执行“ restaurantHolder.setCurrentItem(position)” ，将restaurantHolder ViewPager移至对应的片段，并以相同的方式将onPageChangeListener()设置为restaurantHolder，以便在滑动时将其放在onPageSelected(int position)侦听器的方法，我们只需要更新indicatorAdapter中的selectedIndex并执行indicatorAdapter.notifyDataSetChanged()方法即可，请参见上面MainActivity.java类的loadData()方法。

更新资料 (Update)

To make the indicator RecyclerView look more like a TabLayout with it bottom sliding indicator i created a new View in the indicatorAdapter’s Viewholder to act as such this view will take the place of the holder.clicker as the indicator and will also be the view which is saved in the selectView variable of the adapter, below is the result.

为了使指示器 RecyclerView看起来更像是一个TabLayout，它具有底部滑动指示器，我在indicatorAdapter的Viewholder中创建了一个新View来充当该视图，该视图将代替holder.clicker作为指示器，并且还将是保存在适配器的selectView变量中，结果如下。

dynamic pager indicator

动态寻呼机指示器

That was it for Dynamic ViewPager Indicator with RecyclerView Items, don’t forget to get the code on Github and Happy coding.

带有RecyclerView Items的Dynamic ViewPager Indicator就是这样，不要忘记获取有关Github和Happy编码的代码。

More:Android Simple Image Gallery

更多： Android简单图片库

翻译自: https://android.jlelse.eu/dynamic-viewpager-indicator-with-recyclerview-items-in-android-388493272491