1 подписчик

Туториал по RecyclerView. Как создать RecyclerView для android на java

5 минут

57 прочтений

21 марта 202221 мар 2022

Чтобы создать список элементов как на фото особого труда не требуется. Не буду писать много воды, приступим сразу.

Язык программирования - java.

Создадим новый проект.

В mainactivity.xml добавим RecyclerView

В MainActivity.java создадим лист с данными и передами его адаптеру, который будет отвечать за вывод данных на экран

public class MainActivity extends AppCompatActivity {
ArrayList<ItemData> dataArrayList;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);

RecyclerView recyclerView = findViewById(R.id.rec_view);

recyclerView.setLayoutManager(new LinearLayoutManager
(this // контекст
, RecyclerView.VERTICAL, // ориентация
false)); //reverseLayout

// Инициализируем лист
dataArrayList = new ArrayList<>();

// наполняем лист данными, передавая данные в другой метод
getAllData("Яна", "Я приду завтра", R.drawable.img);
getAllData("Влад", "Не знаю", R.drawable.img_1);
getAllData("Ксюша", "Привет", R.drawable.img_2);
getAllData("Амир", "Пока", R.drawable.img_3);
getAllData("Вика", "До скорого", R.drawable.img_4);

//создаем адаптер и передаем лист с данными через конструктор
recyclerView.setAdapter(new Adapter(dataArrayList));
}

private void getAllData(String name, String message, int image) {
// принимаем данные и наполняем лист

// можно было и не создавать класс ItemData, а передавать данные сразу в класс адаптера, но так удобнее и меньше шансов ошибиться
ItemData itemData = new ItemData();
itemData.setName(name);
itemData.setMessage(message);
itemData.setImage(image);
dataArrayList.add(itemData);
}
}

ItemData.java

public class ItemData {
String message, name;
int image;

public String getMessage() {
return message;
}

public void setMessage(String message) {
this.message = message;
}

public String getName() {
return name;
}

public void setName(String name) {
this.name = name;
}

public int getImage() {
return image;
}

public void setImage(int image) {
this.image = image;
}
}

вот так будет выглядеть каждый отдельный элемент в RecyclerView

item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="10dp">



<com.google.android.material.imageview.ShapeableImageView
android:id="@+id/image"
android:layout_width="110dp"
android:layout_height="110dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:shapeAppearanceOverlay="@style/imageViewRounded"
/>

<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/image"
app:layout_constraintTop_toTopOf="parent"
android:textSize="16sp"
android:layout_margin="10dp"
android:textStyle="bold"/>

<TextView
android:id="@+id/message"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintStart_toEndOf="@id/image"
app:layout_constraintTop_toBottomOf="@id/name"
android:layout_margin="10dp"
android:textSize="14sp"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Чтобы фото было круглым в styles.xml или themes.xml нужно добавить

<style name="imageViewRounded">
<item name="cornerFamily">rounded</item>
<item name="cornerSize">51%</item>
</style>

Сам адаптер, который и будет отвечать за вывод данных на экран

public class Adapter extends RecyclerView.Adapter<Adapter.ItemViewHolder> {
ArrayList<ItemData> itemData;

// передаем лист через конструктор
public Adapter(ArrayList<ItemData> itemData) {
this.itemData = itemData;
}

@NonNull
@Override
public ItemViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
View layoutInflater = LayoutInflater.from(parent.getContext())
.inflate(R.layout.item, parent, false);
return new ItemViewHolder(layoutInflater);
}

@Override
public void onBindViewHolder(@NonNull ItemViewHolder holder, int position) {
ItemData item = itemData.get(position);

// подставляем нужную картинку и имя и смс в каждый элемент списка
holder.image.setBackgroundResource(item.getImage());
holder.name.setText(item.getName());
holder.message.setText(item.getMessage());
}

@Override
public int getItemCount() {
return itemData.size();
}

class ItemViewHolder extends RecyclerView.ViewHolder {
TextView name, message;
ImageView image;

ItemViewHolder(View itemView) {
super(itemView);
name = itemView.findViewById(R.id.name);
message = itemView.findViewById(R.id.message);
image = itemView.findViewById(R.id.image);
}
}
}