Простой пример сетки Android, использующий RecyclerView с GridLayoutManager (например, старый GridView)

Я знаю, что RecyclerView заменил функциональность старого ListView и GridView . Я ищу очень простой пример, который показывает минимальную настройку сетки с помощью RecyclerView . Я не ищу длинные объяснения стиля учебника, просто минимальный пример. Я предполагаю, что простейшая grid, имитирующая старый GridView, будет состоять из следующих функций:

  • несколько ячеек в строке
  • один вид в каждой ячейке
  • реагирует на события кликов

Короткий ответ

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

 recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns)); 

Если вам нужна дополнительная помощь, обратитесь к следующему примеру.

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

Ниже приведен минимальный пример, который будет выглядеть следующим образом.

введите описание изображения здесь

Начните с пустой активности. Для добавления сетки RecyclerView вы выполните следующие задачи. Все, что вам нужно сделать, это скопировать и вставить код в каждый раздел. Позже вы можете настроить его в соответствии с вашими потребностями.

  • Добавление зависимостей к gradle
  • Добавьте файлы макета xml для активности и ячейки сетки
  • Сделать адаптер RecyclerView
  • Инициализация RecyclerView в вашей деятельности

Обновлять зависимости Gradle

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

 compile 'com.android.support:appcompat-v7:27.1.1' compile 'com.android.support:recyclerview-v7:27.1.1' 

Вы можете обновить номера версий до самых актуальных .

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

Добавьте RecyclerView в ваш xml-макет.

activity_main.xml

     

Создание макета ячейки сетки

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

recyclerview_item.xml

     

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

RecyclerView нуждается в адаптере для заполнения представлений в каждой ячейке вашими данными. Создайте новый java-файл.

MyRecyclerViewAdapter.java

 public class MyRecyclerViewAdapter extends RecyclerView.Adapter { private String[] mData; private LayoutInflater mInflater; private ItemClickListener mClickListener; // data is passed into the constructor MyRecyclerViewAdapter(Context context, String[] data) { this.mInflater = LayoutInflater.from(context); this.mData = data; } // inflates the cell layout from xml when needed @Override @NonNull public ViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) { View view = mInflater.inflate(R.layout.recyclerview_item, parent, false); return new ViewHolder(view); } // binds the data to the TextView in each cell @Override public void onBindViewHolder(@NonNull ViewHolder holder, int position) { holder.myTextView.setText(mData[position]); } // total number of cells @Override public int getItemCount() { return mData.length; } // stores and recycles views as they are scrolled off screen public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { TextView myTextView; ViewHolder(View itemView) { super(itemView); myTextView = itemView.findViewById(R.id.info_text); itemView.setOnClickListener(this); } @Override public void onClick(View view) { if (mClickListener != null) mClickListener.onItemClick(view, getAdapterPosition()); } } // convenience method for getting data at click position String getItem(int id) { return mData[id]; } // allows clicks events to be caught 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); } } 

Заметки

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

Инициализировать RecyclerView в действии

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

MainActivity.java

 public class MainActivity extends AppCompatActivity implements MyRecyclerViewAdapter.ItemClickListener { MyRecyclerViewAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // data to populate the RecyclerView with String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"}; // set up the RecyclerView RecyclerView recyclerView = findViewById(R.id.rvNumbers); int numberOfColumns = 6; recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns)); adapter = new MyRecyclerViewAdapter(this, data); adapter.setClickListener(this); recyclerView.setAdapter(adapter); } @Override public void onItemClick(View view, int position) { Log.i("TAG", "You clicked number " + adapter.getItem(position) + ", which is at cell position " + position); } } 

Заметки

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

Законченный

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

Продолжается

Закругленные углы

  • Использовать CardView

Автоподбор колонн

  • GridLayoutManager – как автоподстроить столбцы?

Дальнейшее изучение

  • Android RecyclerView с примером GridView GridLayoutManager
  • Пример компоновки сетки Android RecyclerView
  • Изучите RecyclerView с примером в Android
  • RecyclerView: grid с заголовком
  • Android GridLayoutManager с RecyclerView в дизайне материалов
  • Начало работы с RecyclerView и CardView на Android

Хотя мне действительно нравится и оцениваю ответ Сурагха , я хотел бы оставить заметку, потому что обнаружил, что кодирование адаптера ( MyRecyclerViewAdapter ) для определения и раскрытия метода Listener onItemClick – не лучший способ сделать это из-за того, что не используется classа. Поэтому мое предложение – позволить Адаптеру обрабатывать операции Listening исключительно (это его цель!) И отделить их от Activity, использующего Adapter ( MainActivity ). Так вот как я бы установил class Adapter:

MyRecyclerViewAdapter.java

 public class MyRecyclerViewAdapter extends RecyclerView.Adapter { private String[] mData = new String[0]; private LayoutInflater mInflater; // Data is passed into the constructor public MyRecyclerViewAdapter(Context context, String[] data) { this.mInflater = LayoutInflater.from(context); this.mData = data; } // Inflates the cell 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 textview in each cell @Override public void onBindViewHolder(ViewHolder holder, int position) { String animal = mData[position]; holder.myTextView.setText(animal); } // Total number of cells @Override public int getItemCount() { return mData.length; } // Stores and recycles views as they are scrolled off screen public class ViewHolder extends RecyclerView.ViewHolder implements View.OnClickListener { public TextView myTextView; public ViewHolder(View itemView) { super(itemView); myTextView = (TextView) itemView.findViewById(R.id.info_text); itemView.setOnClickListener(this); } @Override public void onClick(View view) { onItemClick(view, getAdapterPosition()); } } // Convenience method for getting data at click position public String getItem(int id) { return mData[id]; } // Method that executes your code for the action received public void onItemClick(View view, int position) { Log.i("TAG", "You clicked number " + getItem(position).toString() + ", which is at cell position " + position); } } 

Обратите внимание, что метод onItemClick который теперь определен в MyRecyclerViewAdapter , является местом, где вы хотите закодировать свои задачи для полученного события / действия.

Чтобы завершить это преобразование, необходимо внести лишь небольшое изменение: Управлению больше не нужно реализовывать MyRecyclerViewAdapter.ItemClickListener , потому что теперь это полностью выполняется адаптером . Это было бы окончательной модификацией:

MainActivity.java

 public class MainActivity extends AppCompatActivity { MyRecyclerViewAdapter adapter; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); // data to populate the RecyclerView with String[] data = {"1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24", "25", "26", "27", "28", "29", "30", "31", "32", "33", "34", "35", "36", "37", "38", "39", "40", "41", "42", "43", "44", "45", "46", "47", "48"}; // set up the RecyclerView RecyclerView recyclerView = (RecyclerView) findViewById(R.id.rvNumbers); int numberOfColumns = 6; recyclerView.setLayoutManager(new GridLayoutManager(this, numberOfColumns)); adapter = new MyRecyclerViewAdapter(this, data); adapter.setClickListener(this); recyclerView.setAdapter(adapter); } } 
  • Как скрыть столбец (GridView), но все же получить доступ к его значению?
  • GridView - отображать заголовки на пустом источнике данных
  • Полная обратная передача, вызванная LinkButton внутри GridView внутри UpdatePanel
  • Как я могу экспортировать GridView.DataSource в datatable или dataset?
  • разделители / разделители строк сетки андроида
  • Сортировка GridView: SortDirection всегда по возрастанию
  • GridView с двумя столбцами, шириной заливки
  • Android: Как GridView auto_fit находит количество столбцов?
  • как найти элемент управления в шаблоне редактирования элемента?
  • Как удалить строку из GridView?
  • Как установить GridView внутри ScrollView
  • Давайте будем гением компьютера.