Bài tập 03: Tạo danh sách đổ xuống

Đề bài

Tạo một ứng dụng Android để thực hiện mục tiêu sau:

Một danh sách đổ xuống (Spinner) cung cấp các lựa chọn về các loại xe năm 2010:

Honda Accord
Honda Civic
Toyota Corolla
Toyota Camry
Chevrolet Corvette
Ford Taurus
(Các lựa chọn khác)

Khi người sử dụng chọn một tên xe thì màn hình thứ hai sẽ hiển thị ảnh của chiếc xe đó, tải danh sách ảnh các xe ở đây. Ấn nút “Quay Lại” trên màn hình thứ hai cho phép người sử dụng quay về màn hình thứ nhất.

Hướng dẫn tham khảo

1. Màn hình chính

a. Giao diện

b. Code giao diện

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <Spinner
        android:id="@+id/cboLoaiXe"
        style="@android:style/Widget.Spinner"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="16dp"
        android:layout_marginTop="16dp"
        android:layout_marginEnd="16dp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:text="LỰA CHỌN CHIẾC XE BẠN YÊU THÍCH NĂM 2010"
        android:textSize="16sp"
        android:textStyle="bold"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

c. Code chức năng

package timoday.edu.vn.baitap3;

import androidx.appcompat.app.AppCompatActivity;

import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    //Khai báo mảng chứa các loại xe
    ArrayList<String> arrData =  new ArrayList<String>();
    //Khai báo đối tượng adapter làm nhiệm vụ đồng bộ dữ liệu giữa Array và Spinner
    ArrayAdapter<String> adapter;
    //Khai báo các đối tượng giao tiếp với giao diện
    Spinner cboLoaiXe;
    //OnItemSelectedListener sẽ chạy 2 lần: lúc khởi tạo Spinner và lúc người sử dụng chọn
    //Để tránh spinner gọi sự kiện hai lần, khai báo một cờ để đánh dấu
    boolean mSpinnerInitialized;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //Gắn giao diện với đối tượng cboLoaiXe
        cboLoaiXe =(Spinner)findViewById(R.id.cboLoaiXe);
        //Khởi tạo dữ liệu cho mảng
        arrData.add("Honda Accord");
        arrData.add("Honda Civic");
        arrData.add("Toyota Corolla");
        arrData.add("Toyota Camry");
        arrData.add("Chevrolet Corvette");
        arrData.add("Ford Taurus");
        arrData.add("(Các lựa chọn khác)");
        //Khởi tạo adapter
        adapter = new ArrayAdapter<String>(this,R.layout.support_simple_spinner_dropdown_item,arrData);
        adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        cboLoaiXe.setAdapter(adapter);
        //Viết code cho sự kiện chọn item trên Spinner
        cboLoaiXe.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> adapterView, View view, int i, long l) {
                if (!mSpinnerInitialized) {
                    mSpinnerInitialized = true;
                    return;
                }
                // Chọn item trên Spinner
                String item = adapterView.getItemAtPosition(i).toString();

                // Hiển thị thông báo chọn item trên Spinner
                Toast.makeText(getApplicationContext(), "Bạn đã chọn: " + item, Toast.LENGTH_LONG).show();
                //Code thực hiện gửi dữ liệu từ Main Activity sang Detail Activity
                Intent intent= new Intent(MainActivity.this,DetailActivity.class);
                intent.putExtra("data",String.valueOf(cboLoaiXe.getSelectedItem()));
                intent.putExtra("index",String.valueOf(i));
                startActivity(intent);
            }

            @Override
            public void onNothingSelected(AdapterView<?> adapterView) {
                return;
            }
        });
    }
}

2. Màn hình chi tiết

a. Giao diện

b. Code giao diện

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".DetailActivity">

    <TextView
        android:id="@+id/txtLoaiXe"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:textFontWeight="12"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/imgLoaiXe"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        app:layout_constrainedHeight="false"
        app:layout_constraintBottom_toTopOf="@+id/btnBack"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/txtLoaiXe"
        tools:srcCompat="@tools:sample/backgrounds/scenic" />

    <Button
        android:id="@+id/btnBack"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        android:layout_marginBottom="8dp"
        android:text="Quay lại"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

c. Code chức năng

package timoday.edu.vn.baitap3;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;

public class DetailActivity extends AppCompatActivity {
    //Khai báo các đối tượng để kết nối với giao diện
    TextView txtLoaiXe;
    ImageView imgLoaiXe;
    Button btnBack;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_detail);
        //Gắn các đối tượng khai báo với giao diện
        txtLoaiXe=(TextView) findViewById(R.id.txtLoaiXe);
        imgLoaiXe = (ImageView)findViewById(R.id.imgLoaiXe);
        btnBack = (Button)findViewById(R.id.btnBack);
        //Nhận dữ liệu từ Main Activity chuyển sang Detail Activity
        Bundle bundle=getIntent().getExtras();
        String data=bundle.get("data").toString();
        txtLoaiXe.setText(data);
        //Hiển thị ảnh đại diện tương ứng
        int index=Integer.parseInt(bundle.get("index").toString());
        switch (index)
        {
            case 0:
                imgLoaiXe.setImageResource(R.drawable.honda_accord);
                break;
            case 1:
                imgLoaiXe.setImageResource(R.drawable.honda_civic);
                break;
            case 2:
                imgLoaiXe.setImageResource(R.drawable.toyota_corolla);
                break;
            case 3:
                imgLoaiXe.setImageResource(R.drawable.toyota_camry);
                break;
            case 4:
                imgLoaiXe.setImageResource(R.drawable.chevrolet_corvette);
                break;
            case 5:
                imgLoaiXe.setImageResource(R.drawable.ford_taurus);
                break;
            default:
                imgLoaiXe.setImageResource(R.drawable.other);
                break;
        }
        //Code cho sự kiện click button Back
        btnBack.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                finish();
            }
        });
    }
}