Computer >> บทช่วยสอนคอมพิวเตอร์ >  >> การเขียนโปรแกรม >> Android

วิธีทำ Spinner พร้อมข้อความเริ่มต้นใน Android

ภาพรวม

ตัวอย่างนี้สาธิตวิธีสร้าง Spinner (Dropdown) ที่มีข้อความแนะนำ (Placeholder) อยู่ตัวแรก เช่น "กรุณาเลือก..." ก่อนรายการจริง

ขั้นตอนที่ 1: สร้างโปรเจกต์ใหม่

สร้างโปรเจกต์ Android ใหม่ใน Android Studio

ขั้นตอนที่ 2: จัดทำ Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/linearLayout"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="ตัวอย่าง Spinner"
        android:layout_gravity="center"
        android:layout_marginTop="30dp"
        android:textSize="16sp"/>
    <Spinner
        android:id="@+id/spinner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dp"
        android:layout_gravity="center"/>
</LinearLayout>

ขั้นตอนที่ 3: เขียนโค้ด MainActivity.java

import android.support.v7.app.AppCompatActivity;
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;
import java.util.List;

public class MainActivity extends AppCompatActivity {
    Spinner spinner;

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        spinner = findViewById(R.id.spinner);
        
        List<String> footballPlayers = new ArrayList<>();
        footballPlayers.add(0, "เลือกนักเตะจากรายการ"); // Placeholder ตำแหน่งที่ 0
        footballPlayers.add("Cristian Ronaldo");
        footballPlayers.add("Lionel Messi");
        footballPlayers.add("Neymar Jr");
        footballPlayers.add("Isco");
        footballPlayers.add("Gareth Bale");
        footballPlayers.add("Luis Suarez");
        
        ArrayAdapter<String> arrayAdapter = new ArrayAdapter(this, 
            android.R.layout.simple_list_item_1, footballPlayers);
        arrayAdapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
        spinner.setAdapter(arrayAdapter);
        
        spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
            @Override
            public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
                if (position == 0) {
                    // ไม่ทำอะไร - เป็น placeholder
                    return;
                }
                String item = parent.getItemAtPosition(position).toString();
                Toast.makeText(parent.getContext(), "เลือก: " + item, Toast.LENGTH_SHORT).show();
            }
            
            @Override
            public void onNothingSelected(AdapterView<?> parent) { }
        });
    }
}

เทคนิค Placeholder ใน Spinner

  1. เพิ่มรายการ Placeholder ที่ index 0: list.add(0, "ข้อความแนะนำ")
  2. ใน onItemSelected ตรวจสอบ position == 0 แล้ว return ทันที
  3. สไตล์ Placeholder ให้แตกต่างได้ด้วย Custom Adapter

Custom Adapter สำหรับ Placeholder สไตล์พิเศษ

ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, 
    android.R.layout.simple_spinner_item, items) {
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        View view = super.getView(position, convertView, parent);
        TextView tv = (TextView) view;
        if (position == 0) {
            tv.setTextColor(Color.GRAY); // สีจางสำหรับ placeholder
        } else {
            tv.setTextColor(Color.BLACK);
        }
        return view;
    }
    
    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        View view = super.getDropDownView(position, convertView, parent);
        TextView tv = (TextView) view;
        if (position == 0) {
            tv.setTextColor(Color.GRAY);
            tv.setTypeface(null, Typeface.ITALIC);
        }
        return view;
    }
};

การทดสอบ

รันแอป Spinner จะแสดง "เลือกนักเตะจากรายการ" ตอนแรก กดเลือกจะแสดงรายการนักเตะ