Pull to refresh

AndroidFoodRecipesGuideTutorial

Level of difficultyEasy
Reading time4 min
Views1.5K

Добро пожаловать в нашу кулинарную лабораторию: создаем простое Android-приложение для отображения списка блюд!

Представьте себе ситуацию: вы голодны, но не знаете, что приготовить. Как же удобно иметь под рукой приложение, которое не только покажет вам разнообразные блюда, но и расскажет о них больше! Давайте создадим такое приложение, используя немного кода, каплю юмора и множество передовых технологий Android.

Шаг 1: Модель блюда

Для начала давайте определимся, какую информацию мы будем хранить о каждом блюде. Создадим простую модель Dish, которая будет содержать изображение, название, краткое описание и полное описание блюда:

data class Dish(
    val imageResId: Int,
    val title: String,
    val description: String,
    val fullDescription: String
)

Шаг 2: XML макет элемента списка

Каждый элемент нашего списка блюд будет отображаться с помощью макета list_item_dish.xml. Мы будем использовать изображение, заголовок и краткое описание блюда:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/imageViewDish"
        android:layout_width="match_parent"
        android:layout_height="200dp"
        android:scaleType="centerCrop"
        android:src="@drawable/default_dish_image" />

    <TextView
        android:id="@+id/textViewTitle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:textStyle="bold"
        android:textSize="18sp"
        android:padding="8dp" />

    <TextView
        android:id="@+id/textViewDescription"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="8dp" />

</LinearLayout>

Шаг 3: RecyclerView и адаптер

Чтобы отображать список блюд, мы будем использовать RecyclerView и напишем адаптер DishAdapter. Этот адаптер будет заполнять элементы списка данными о блюдах:

class DishAdapter(private val dishes: List<Dish>, private val listener: OnDishClickListener) :
    RecyclerView.Adapter<DishAdapter.DishViewHolder>() {

    interface OnDishClickListener {
        fun onDishClick(position: Int)
    }

    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): DishViewHolder {
        val view = LayoutInflater.from(parent.context).inflate(R.layout.list_item_dish, parent, false)
        return DishViewHolder(view)
    }

    override fun onBindViewHolder(holder: DishViewHolder, position: Int) {
        val dish = dishes[position]
        holder.imageView.setImageResource(dish.imageResId)
        holder.textViewTitle.text = dish.title
        holder.textViewDescription.text = dish.description

        holder.itemView.setOnClickListener {
            listener.onDishClick(position)
        }
    }

    override fun getItemCount(): Int {
        return dishes.size
    }

    class DishViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
        val imageView: ImageView = itemView.findViewById(R.id.imageViewDish)
        val textViewTitle: TextView = itemView.findViewById(R.id.textViewTitle)
        val textViewDescription: TextView = itemView.findViewById(R.id.textViewDescription)
    }
}

Шаг 4: Фрагмент списка блюд

Теперь давайте создадим фрагмент DishListFragment, который будет отображать список блюд с использованием RecyclerView и адаптера:

class DishListFragment : Fragment(), DishAdapter.OnDishClickListener {

    private lateinit var binding: FragmentDishListBinding

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = FragmentDishListBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        val dishes = generateDummyDishes()

        val adapter = DishAdapter(dishes, this)
        binding.recyclerView.adapter = adapter
        binding.recyclerView.layoutManager = LinearLayoutManager(requireContext())
    }

    override fun onDishClick(position: Int) {
        val dish = generateDummyDishes()[position]
        val action = DishListFragmentDirections.actionDishListFragmentToDishDetailFragment(dish)
        findNavController().navigate(action)
    }

    private fun generateDummyDishes(): List<Dish> {
        return listOf(
            Dish(R.drawable.dish1, "Блюдо 1", "Описание блюда 1", "Полное описание блюда 1"),
            Dish(R.drawable.dish2, "Блюдо 2", "Описание блюда 2", "Полное описание блюда 2"),
            Dish(R.drawable.dish3, "Блюдо 3", "Описание блюда 3", "Полное описание блюда 3")
        )
    }
}

Шаг 4: Фрагмент который будет отображать подробную информацию о выбранном блюде:

class DishDetailFragment : Fragment() {

    private lateinit var binding: FragmentDishDetailBinding
    private lateinit var dish: Dish

    override fun onCreateView(
        inflater: LayoutInflater, container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View {
        binding = FragmentDishDetailBinding.inflate(inflater, container, false)
        return binding.root
    }

    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
        super.onViewCreated(view, savedInstanceState)

        arguments?.let {
            dish = DishDetailFragmentArgs.fromBundle(it).dish
        }

        binding.imageViewDish.setImageResource(dish.imageResId)
        binding.textViewTitle.text = dish.title
        binding.textViewDescription.text = dish.fullDescription
    }
}

Теперь у нас есть все компоненты для создания простого, но функционального приложения для отображения списка блюд на Android. Мы использовали язык программирования Kotlin, RecyclerView для отображения списка, фрагменты для организации экранов, а также привязку представлений (View Binding) для удобной работы с макетами.

Наше приложение позволяет пользователю просматривать список блюд, выбирать интересующее его блюдо и просматривать подробное описание этого блюда. Это всего лишь пример того, что можно создать, используя передовые технологии Android.

Мы надеемся, что этот проект вдохновит вас на создание своих собственных приложений и поможет вам освоить различные аспекты разработки под Android.

Спасибо за чтение, и удачи в вашем путешествии в мир мобильной разработки!

Tags:
Hubs:
Total votes 4: ↑1 and ↓30
Comments3

Articles