Простой пример сетки Android, использующий RecyclerView с GridLayoutManager (например, старый GridView)
Я знаю, что RecyclerView
заменил функциональность старого ListView
и GridView
. Я ищу очень простой пример, который показывает минимальную настройку сетки с помощью RecyclerView
. Я не ищу длинные объяснения стиля учебника, просто минимальный пример. Я предполагаю, что простейшая grid, имитирующая старый GridView, будет состоять из следующих функций:
- несколько ячеек в строке
- один вид в каждой ячейке
- реагирует на события кликов
- Экспорт GridView в несколько листов Excel
- Добавление заголовка в GridView (Android)
- Столбцы двух связанных таблиц базы данных в одном ASP.NET GridView с EntityDataSource
- Как отключить прокрутку GridView в Android?
- Как реализовать выбор полной строки в GridView без кнопки выбора?
- Высота Gridview снижается
- Android gridview сохраняет выбранный элемент
- Получить индекс Row в событии Rowcommand от Asp.net
- Отображение изображений из определенной папки на SD-карте с использованием gridview
- Сетка изображений внутри ScrollView
- Редактирование строки Gridview - динамическое связывание с DropDownList
- GridView связан с свойствами вложенного classа
- Лучший способ сделать сортировку WPF ListView / 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); } }