Cách tùy chỉnh Spinner trong Android


140

Tôi muốn thêm chiều cao tùy chỉnh vào danh sách thả xuống của a Spinner, giả sử 30dp và tôi muốn ẩn các ngăn của danh sách thả xuống Spinner.

Cho đến nay tôi đã cố gắng thực hiện theo phong cách sau Spinner:

<style name="spinner_style">
        <item name="android:paddingLeft">0dp</item>
        <item name="android:dropDownWidth">533dp</item>
        <item name="android:showDividers">none</item>
        <item name="android:dividerHeight">0dp</item>
        <item name="android:popupBackground">@drawable/new_bg</item>
        <item name="android:dropDownHeight">70dp</item>
        <item name="android:scrollbarAlwaysDrawVerticalTrack">true</item>
        <item name="android:dropDownSelector">@android:color/white</item>
 </style>

và mã của spinner của tôi là:

<Spinner
            android:id="@+id/pioedittxt5"
            android:layout_width="543dp"
            android:layout_height="63dp"
            android:layout_toRightOf="@+id/piotxt5"
            android:background="@drawable/spinner"
            style="@style/spinner_style"
            android:dropDownVerticalOffset="-53dp"
            android:spinnerMode="dropdown"
            android:drawSelectorOnTop="true"
            android:entries="@array/travelreasons"
            android:prompt="@string/prompt" />

Nhưng dường như không có gì là làm việc.



Không có phong cách được áp dụng? popupBackGround hoặc bất cứ điều gì khác? Lạ thật.
Chintan Soni

@Houcine: tôi đã thử những ví dụ đó .. tôi muốn điều chỉnh chiều cao của danh sách thả xuống
Shruti

@ shree202: không áp dụng kiểu nào
Shruti

1
@ComeIn, đó không phải là kiểu Android, mà là kiểu tùy chỉnh do anh tạo. Đó là lý do tại sao anh ta chỉ có "style ="
CyberClaw

Câu trả lời:


194

Tạo một bộ chuyển đổi tùy chỉnh với một bố cục tùy chỉnh cho spinner của bạn.

Spinner spinner = (Spinner) findViewById(R.id.pioedittxt5);
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(this,
        R.array.travelreasons, R.layout.simple_spinner_item);
adapter.setDropDownViewResource(R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);

R.layout.simple_spinner_item

<TextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1"
    style="@style/spinnerItemStyle"
    android:maxLines="1"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:ellipsize="marquee" />

R.layout.simple_spinner_dropdown_item

<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android" 
    android:id="@android:id/text1"
    style="@style/spinnerDropDownItemStyle"
    android:maxLines="1"
    android:layout_width="match_parent"
    android:layout_height="?android:attr/dropdownListPreferredItemHeight"
    android:ellipsize="marquee" />

Trong các kiểu thêm kích thước và chiều cao tùy chỉnh theo yêu cầu của bạn.

 <style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">

  </style>

  <style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">

  </style>

3
Hãy thử đổi <item name="android:height"> thành<item name="android:layout_height">
Tarun

1
thanx vì đã trả lời .. đã cố gắng nhưng không có hiệu quả ... làm việc trên / tắt trong 3-4 ngày qua .. Chỉ cần bị kích thích ngay bây giờ :(
7bluephoenix

5
@Tarun, Bạn không cần android:id="@+android:id/text1"trong tệp Simple_spinner_dropdown_item.xml?
batbrat

1
Trong R.layout.simple_spinner_dropdown_item, hãy thay đổi giá trị android: layout_height thành "? Attr / dropdownListPreferredItemHeight" hoặc bạn sẽ gặp lỗi: "Lỗi: Thuộc tính không công khai"
Loenix

9
Đối với khách truy cập trong tương lai cho câu trả lời này : không bao bọc TextView và CheckedTextview bên trong bố cục . Đăng nó trực tiếp trong tệp layout_file.xml của bạn. Tôi bị mắc kẹt ở đây trong vài giờ cho đến khi tôi tìm thấy những gì là sai lầm.
Francisco Romero

95

Bạn có thể tạo thiết kế spinner hoàn toàn tùy chỉnh như

Bước 1: Trong thư mục drawable, tạo tệp nền cho đường viền của công cụ quay vòng.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@android:color/transparent" />
<corners android:radius="5dp" />
<stroke
android:width="1dp"
   android:color="@android:color/darker_gray" />
</shape>

Bước2: để thiết kế bố cục của spinner, hãy sử dụng biểu tượng thả xuống này hoặc bất kỳ hình ảnh drop.png nào nhập mô tả hình ảnh ở đây

 <RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginRight="3dp"
    android:layout_weight=".28"
    android:background="@drawable/spinner_border"
    android:orientation="horizontal">

    <Spinner
        android:id="@+id/spinner2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:background="@android:color/transparent"
        android:gravity="center"
        android:layout_marginLeft="5dp"
        android:spinnerMode="dropdown" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_gravity="center"
        android:src="@mipmap/drop" />

</RelativeLayout>

Cuối cùng trông giống như hình ảnh bên dưới và nó có thể nhấp ở mọi nơi trong khu vực tròn và không cần phải viết nhấp vào Lister cho imageView.

nhập mô tả hình ảnh ở đây

Bước 3: Đối với thiết kế thả xuống, xóa dòng khỏi Danh sách thả xuống và thay đổi màu nền, Tạo bộ điều hợp tùy chỉnh như

Spinner spinner = (Spinner) findViewById(R.id.spinner1);
String[] years = {"1996","1997","1998","1998"};
ArrayAdapter<CharSequence> langAdapter = new ArrayAdapter<CharSequence>(getActivity(), R.layout.spinner_text, years );
langAdapter.setDropDownViewResource(R.layout.simple_spinner_dropdown);
mSpinner5.setAdapter(langAdapter);

Trong thư mục bố trí, hãy tạo R.layout.spinner văn bản

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layoutDirection="ltr"
android:id="@android:id/text1"
style="@style/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingLeft="2dp"
/>

Trong thư mục bố trí, tạo Simple_spinner_dropdown.xml

<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="@style/spinnerDropDownItemStyle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:paddingBottom="5dp"
android:paddingLeft="10dp"
android:paddingRight="10dp"
android:paddingTop="5dp"
android:singleLine="true" />

Trong các kiểu, bạn có thể thêm kích thước và chiều cao tùy chỉnh theo yêu cầu của bạn.

<style name="spinnerItemStyle" parent="android:Widget.TextView.SpinnerItem">
</style>

<style name="spinnerDropDownItemStyle" parent="android:TextAppearance.Widget.TextView.SpinnerItem">
</style>

Cuối cùng trông giống như

nhập mô tả hình ảnh ở đây

Theo yêu cầu, bạn có thể thay đổi màu nền và văn bản của màu thả xuống bằng cách thay đổi màu nền hoặc màu văn bản của Simple_spinner_dropdown.xml


trong đoạn mã đầu tiên bạn có nghĩa là android: height = "1dp" trong dòng 6?
Willi Mentzel

Do nhầm lẫn hai lần viết android: width = "1dp"
Binesh Kumar

2
Không có vấn đề gì, tôi chỉ không muốn tự chỉnh sửa nó vì tôi không chắc chắn, nếu bạn muốn chỉ định chiều cao bằng "1dp" hoặc nếu đó chỉ là một bản sao. câu trả lời tốt mặc dù. :)
Willi Mentzel

@BineshKumar Này, tôi có thể biết nơi bạn đã khai báo CheckedTextView không? Bởi vì khi tôi dán mã, nó cho tôi biết phần tử phải được khai báo trước
hyperfkcb

2
Man, bạn có thể đã sử dụng tên trong bố trí và rút thăm của bạn, tôi đã dành nửa giờ và vẫn không biết phải làm gì. Trừ đi cho câu trả lời xấu.
Anton Kizema

21

Giải pháp thanh lịch và linh hoạt nhất mà tôi đã tìm thấy cho đến nay là ở đây: http://android-er.blogspot.sg/2010/12/custom-arrayad CHƯƠNG-for-spinner-with.html

Về cơ bản, hãy làm theo các bước sau:

  1. Tạo tệp xml bố cục tùy chỉnh cho mục thả xuống của bạn, giả sử tôi sẽ gọi nó là spinner_item.xml
  2. Tạo lớp xem tùy chỉnh, cho Bộ điều hợp thả xuống của bạn. Trong lớp tùy chỉnh này, bạn cần ghi đè và đặt bố cục mục thả xuống tùy chỉnh của mình trong phương thức getView () và getDropdownView (). Mã của tôi là như sau:

    public class CustomArrayAdapter extends ArrayAdapter<String>{
    
    private List<String> objects;
    private Context context;
    
    public CustomArrayAdapter(Context context, int resourceId,
         List<String> objects) {
         super(context, resourceId, objects);
         this.objects = objects;
         this.context = context;
    }
    
    @Override
    public View getDropDownView(int position, View convertView,
        ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }
    
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
      return getCustomView(position, convertView, parent);
    }
    
    public View getCustomView(int position, View convertView, ViewGroup parent) {
    
    LayoutInflater inflater=(LayoutInflater) context.getSystemService(  Context.LAYOUT_INFLATER_SERVICE );
    View row=inflater.inflate(R.layout.spinner_item, parent, false);
    TextView label=(TextView)row.findViewById(R.id.spItem);
     label.setText(objects.get(position));
    
    if (position == 0) {//Special style for dropdown header
          label.setTextColor(context.getResources().getColor(R.color.text_hint_color));
    }
    
    return row;
    }
    
    }
  3. Trong hoạt động hoặc đoạn của bạn, hãy sử dụng bộ điều hợp tùy chỉnh cho chế độ xem spinner của bạn. Một cái gì đó như thế này:

    Spinner sp = (Spinner)findViewById(R.id.spMySpinner);
    ArrayAdapter<String> myAdapter = new CustomArrayAdapter(this, R.layout.spinner_item, options);
    sp.setAdapter(myAdapter);

trong đó các tùy chọn là danh sách chuỗi mục thả xuống.


Thủ thuật cho tôi là ghi đè getDropDownView, tôi đã ghi đè getView, nhưng không nhận ra tôi phải ghi đè phương thức đó.
estebanuri

7

Thử cái này

tôi đã phải đối mặt với rất nhiều vấn đề khi tôi đang thử giải pháp khác ...... Sau nhiều R & D bây giờ tôi đã có giải pháp

  1. tạo custom_spinner.xml trong thư mục bố cục và dán mã này

     <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/colorGray">
    <TextView
    android:id="@+id/tv_spinnervalue"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:textColor="@color/colorWhite"
    android:gravity="center"
    android:layout_alignParentLeft="true"
    android:textSize="@dimen/_18dp"
    android:layout_marginTop="@dimen/_3dp"/>
    <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:background="@drawable/men_icon"/>
    </RelativeLayout>
  2. trong hoạt động của bạn

    Spinner spinner =(Spinner)view.findViewById(R.id.sp_colorpalates);
    String[] years = {"1996","1997","1998","1998"};
    spinner.setAdapter(new SpinnerAdapter(this, R.layout.custom_spinner, years));
  3. tạo một lớp mới của bộ chuyển đổi

    public class SpinnerAdapter extends ArrayAdapter<String> {
    private String[] objects;
    
    public SpinnerAdapter(Context context, int textViewResourceId, String[] objects) {
        super(context, textViewResourceId, objects);
        this.objects=objects;
    }
    
    @Override
    public View getDropDownView(int position, View convertView, @NonNull ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }
    
    @NonNull
    @Override
    public View getView(int position, View convertView, @NonNull ViewGroup parent) {
        return getCustomView(position, convertView, parent);
    }
    
    private View getCustomView(final int position, View convertView, ViewGroup parent) {
        View row = LayoutInflater.from(parent.getContext()).inflate(R.layout.custom_spinner, parent, false);
        final TextView label=(TextView)row.findViewById(R.id.tv_spinnervalue);
        label.setText(objects[position]);
        return row;
    }
    }

Điều này đã cho tôi hình ảnh men_icon trên tất cả các mục sau khi nhấp vào spinner, đó không phải là thứ tôi đang tìm kiếm. Nếu bạn không muốn hình ảnh men_icon (hoặc các tùy chỉnh khác) xuất hiện trên tất cả các hàng sau khi nhấp vào công cụ quay vòng, thì hãy xóa ghi đè "getDropDownView".
Brettins

2

Điều này làm việc cho tôi:

ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),R.layout.simple_spinner_item,areas);
            Spinner areasSpinner = (Spinner) view.findViewById(R.id.area_spinner);
            areasSpinner.setAdapter(adapter);

và trong thư mục bố trí của tôi, tôi đã tạo simple_spinner_item:

<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
android:layout_width="match_parent"
// add custom fields here 
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceListItemSmall"
android:gravity="center_vertical"
android:paddingStart="?android:attr/listPreferredItemPaddingStart"
android:paddingEnd="?android:attr/listPreferredItemPaddingEnd"
android:minHeight="?android:attr/listPreferredItemHeightSmall"
android:paddingLeft="?android:attr/listPreferredItemPaddingLeft"
android:paddingRight="?android:attr/listPreferredItemPaddingRight" />

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.