Как создать горизонтальный ListView с RecyclerView?

Question

Мне нужно реализовать горизонтальный список в приложении для Android. Я сделал несколько исследований и наткнулся на How can I make a horizontal ListView in Android? и Horizontal ListView in Android?, однако эти вопросы были заданы до того, как был выпущен Recyclerview. Есть ли лучший способ реализовать это сейчас с Recyclerview?

Answer 1

Есть ли лучший способ реализовать это сейчас с Recyclerview?

Да.

Когда вы используете RecyclerView, вам необходимо указать LayoutManager, который отвечает за прокладку каждого элемента в представлении. LinearLayoutManager позволяет вам указать ориентацию, как и обычный LinearLayout.

Чтобы создать горизонтальный список с RecyclerView, вы могли бы сделать что-то вроде этого:

LinearLayoutManager layoutManager 
    = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); 

RecyclerView myList = (RecyclerView) findViewById(R.id.my_recycler_view); 
myList.setLayoutManager(layoutManager); 

Answer 2

Существует RecyclerView подкласс имени HorizontalGridView вы можете использовать его, чтобы иметь горизонтальное направление. VerticalGridView для вертикального направления

Answer 3

Попытка построить горизонтальный ListView занимает слишком много времени. Я разрешил это двумя способами.

1.By с помощью ViewPager, чей адаптер распространяется от PagerAdapter.

2.Выберите RecyclerView так же, как указано выше. Необходимо применять LayoutManager, как показано в следующем коде:

LinearLayoutManager layoutManager 
    = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); 

RecyclerView myList = (RecyclerView) findViewById(R.id.my_recycler_view); 
myList.setLayoutManager(layoutManager); 

Answer 4

Если вы хотите использовать RecyclerView с GridLayoutManager, это способ достижения горизонтальной прокрутки.

recyclerView.setLayoutManager(
new GridLayoutManager(recyclerView.getContext(), rows, GridLayoutManager.HORIZONTAL, false)); 

Answer 5

<android.support.v7.widget.RecyclerView 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:orientation="horizontal" 
     app:layoutManager="android.support.v7.widget.LinearLayoutManager" /> 

Answer 6

С выпуском библиотеки RecyclerView, теперь вы можете выровнять список изображений связать с текстом легко. Вы можете использовать LinearLayoutManager, чтобы указать направление, в котором вы хотели бы сориентировать свой список, вертикальный или горизонтальный, как показано ниже.

Вы можете скачать полный working demo from this post

Answer 7

Если вы хотите использовать Horizontal Recycler View, чтобы действовать как ViewPager то это теперь возможно с помощью LinearSnapHelper, который добавляется в библиотеку поддержки версия 24.2.0.

Во-первых Добавить RecyclerView в вашей деятельности/Фрагмент

<android.support.v7.widget.RecyclerView 
     android:layout_below="@+id/sign_in_button" 
     android:layout_width="match_parent" 
     android:orientation="horizontal" 
     android:id="@+id/blog_list" 
     android:layout_height="match_parent"> 
    </android.support.v7.widget.RecyclerView> 

В моем случае я использовал CardView внутри RecyclerView

blog_row.XML

<?xml version="1.0" encoding="utf-8"?> 
<android.support.v7.widget.CardView 

    xmlns:android="http://schemas.android.com/apk/res/android" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent" 
     xmlns:app="http://schemas.android.com/apk/res-auto" 
     android:layout_margin="15dp" 
     android:orientation="vertical"> 

     <LinearLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent" 
      android:gravity="center" 
      android:orientation="vertical"> 

      <com.android.volley.toolbox.NetworkImageView 
       android:id="@+id/imageBlogPost" 
       android:layout_width="match_parent" 
       android:layout_height="wrap_content" 
       android:adjustViewBounds="true" 
       android:paddingBottom="15dp" 
       android:src="@drawable/common_google_signin_btn_text_light_normal" /> 

      <TextView 
       android:id="@+id/TitleTextView" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:layout_marginBottom="20dp" 

       android:text="Post Title Here" 
       android:textSize="16sp" /> 

      <TextView 
       android:id="@+id/descriptionTextView" 
       android:layout_width="wrap_content" 
       android:layout_height="wrap_content" 
       android:text="Post Description Here" 
       android:paddingBottom="15dp" 
       android:textSize="14sp" /> 
     </LinearLayout> 

    </android.support.v7.widget.CardView> 

В вашей деятельности/Фрагмент

private RecyclerView mBlogList; 




LinearLayoutManager layoutManager 
        = new LinearLayoutManager(this, LinearLayoutManager.HORIZONTAL, false); 
      mBlogList = (RecyclerView) findViewById(R.id.blog_list); 

      mBlogList.setHasFixedSize(true); 
      mBlogList.setLayoutManager(layoutManager); 

LinearSnapHelper snapHelper = new LinearSnapHelper() { 
      @Override 
      public int findTargetSnapPosition(RecyclerView.LayoutManager lm, int velocityX, int velocityY) { 
       View centerView = findSnapView(lm); 
       if (centerView == null) 
        return RecyclerView.NO_POSITION; 

       int position = lm.getPosition(centerView); 
       int targetPosition = -1; 
       if (lm.canScrollHorizontally()) { 
        if (velocityX < 0) { 
         targetPosition = position - 1; 
        } else { 
         targetPosition = position + 1; 
        } 
       } 

       if (lm.canScrollVertically()) { 
        if (velocityY < 0) { 
         targetPosition = position - 1; 
        } else { 
         targetPosition = position + 1; 
        } 
       } 

       final int firstItem = 0; 
       final int lastItem = lm.getItemCount() - 1; 
       targetPosition = Math.min(lastItem, Math.max(targetPosition, firstItem)); 
       return targetPosition; 
      } 
     }; 
     snapHelper.attachToRecyclerView(mBlogList); 

Последний шаг должен установить адаптер RecyclerView

mBlogList.setAdapter(firebaseRecyclerAdapter); 

Answer 8

Полный пример

Единственная реальная разница между вертикальным RecyclerView и горизонтальным - это то, как вы настраиваете LinearLayoutManager. Вот фрагмент кода. Полный пример приведен ниже.

LinearLayoutManager horizontalLayoutManagaer = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false); 
recyclerView.setLayoutManager(horizontalLayoutManagaer); 

Это более полный пример смоделирован my vertical RecyclerView answer.

Обновление Gradle зависимостей

Убедитесь, что следующие зависимости находятся в файле приложения gradle.build:

compile 'com.android.support:appcompat-v7:26.+' 
compile 'com.android.support:recyclerview-v7:26.+' 

Вы можете обновить номера версий все, что the most current.

Создание макета активности

RecyclerView Добавить в макете XML.

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent"> 

    <android.support.v7.widget.RecyclerView 
     android:id="@+id/rvAnimals" 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"/> 

</RelativeLayout> 

Создание макета элемента

Каждый элемент в нашем RecyclerView будет иметь один цветной View над TextView. Создайте новый файл ресурсов макета.

recyclerview_item.xml

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android" 
    android:layout_width="wrap_content" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:padding="10dp"> 

    <View 
     android:id="@+id/colorView" 
     android:layout_width="100dp" 
     android:layout_height="100dp"/> 

    <TextView 
     android:id="@+id/tvAnimalName" 
     android:layout_width="wrap_content" 
     android:layout_height="wrap_content" 
     android:textSize="20sp"/> 

</LinearLayout> 

Создать адаптер

RecyclerView необходим адаптер для заполнения представлений в каждой строке (горизонтальный элемент) с вашими данными. Создайте новый java-файл.

MyRecyclerViewAdapter.java

public class MyRecyclerViewAdapter extends RecyclerView.Adapter<MyRecyclerViewAdapter.ViewHolder> { 

    private List<Integer> mViewColors = Collections.emptyList(); 
    private List<String> mAnimals = Collections.emptyList(); 
    private LayoutInflater mInflater; 
    private ItemClickListener mClickListener; 

    // data is passed into the constructor 
    public MyRecyclerViewAdapter(Context context, List<Integer> colors, List<String> animals) { 
     this.mInflater = LayoutInflater.from(context); 
     this.mViewColors = colors; 
     this.mAnimals = animals; 
    } 

    // inflates the row layout from xml when needed 
    @Override 
    public ViewHolder onCreateViewHolder(ViewGroup parent, int viewType) { 
     View view = mInflater.inflate(R.layout.recyclerview_item, parent, false); 
     ViewHolder viewHolder = new ViewHolder(view); 
     return viewHolder; 
    } 

    // binds the data to the view and textview in each row 
    @Override 
    public void onBindViewHolder(ViewHolder holder, int position) { 
     int color = mViewColors.get(position); 
     String animal = mAnimals.get(position); 
     holder.myView.setBackgroundColor(color); 
     holder.myTextView.setText(animal); 
    } 

    // total number of rows 
    @Override 
    public int getItemCount() { 
     return mAnimals.size(); 
    } 

    // stores and recycles views as they are scrolled off screen 
    public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { 
     public View myView; 
     public TextView myTextView; 

     public ViewHolder(View itemView) { 
      super(itemView); 
      myView = itemView.findViewById(R.id.colorView); 
      myTextView = itemView.findViewById(R.id.tvAnimalName); 
      itemView.setOnClickListener(this); 
     } 

     @Override 
     public void onClick(View view) { 
      if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition()); 
     } 
    } 

    // convenience method for getting data at click position 
    public String getItem(int id) { 
     return mAnimals.get(id); 
    } 

    // allows clicks events to be caught 
    public void setClickListener(ItemClickListener itemClickListener) { 
     this.mClickListener = itemClickListener; 
    } 

    // parent activity will implement this method to respond to click events 
    public interface ItemClickListener { 
     void onItemClick(View view, int position); 
    } 
} 

Примечание

• Хотя не обязательно, я включил функциональные возможности для прослушивания для событий щелчка по пунктам. Это было доступно в старых ListViews и является общей потребностью. Вы можете удалить этот код, если он вам не нужен.

Initialize RecyclerView в деятельности

Добавьте следующий код к вашей основной деятельности.

MainActivity.java

public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener { 

    private MyRecyclerViewAdapter adapter; 

    @Override 
    protected void onCreate(Bundle savedInstanceState) { 
     super.onCreate(savedInstanceState); 
     setContentView(R.layout.activity_main); 

     // data to populate the RecyclerView with 
     ArrayList<Integer> viewColoers = new ArrayList<>(); 
     viewColoers.add(Color.BLUE); 
     viewColoers.add(Color.YELLOW); 
     viewColoers.add(Color.MAGENTA); 
     viewColoers.add(Color.RED); 
     viewColoers.add(Color.BLACK); 

     ArrayList<String> animalNames = new ArrayList<>(); 
     animalNames.add("Horse"); 
     animalNames.add("Cow"); 
     animalNames.add("Camel"); 
     animalNames.add("Sheep"); 
     animalNames.add("Goat"); 

     // set up the RecyclerView 
     RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvAnimals); 
     LinearLayoutManager horizontalLayoutManagaer 
       = new LinearLayoutManager(MainActivity.this, LinearLayoutManager.HORIZONTAL, false); 
     recyclerView.setLayoutManager(horizontalLayoutManagaer); 
     adapter = new MyRecyclerViewAdapter(this, viewColoers, animalNames); 
     adapter.setClickListener(this); 
     recyclerView.setAdapter(adapter); 
    } 

    @Override 
    public void onItemClick(View view, int position) { 
     Toast.makeText(this, "You clicked " + adapter.getItem(position) + " on item position " + position, Toast.LENGTH_SHORT).show(); 
    } 
} 

Примечания

• Обратите внимание, что деятельность реализует ItemClickListener, что мы определили в нашем адаптере. Это позволяет нам обрабатывать события щелчка элемента в onItemClick.

Готовые

Вот так. Теперь вы сможете запустить свой проект и получить что-то похожее на изображение вверху.

Примечание

• цветные взгляды в моем примере, конечно, может быть заменены с изображениями в реальном проекте.
• Vertical RecyclerView example