В этом уроке мы разберём создание настраиваемого выпадающего списка (Custom Spinner) в Android Studio.
Custom Spinner представляет собой настраиваемый выпадающий список, в котором разработчик может самостоятельно определить наличие, расположение различных элементов для каждого пункта списка.
Создайте новое приложение в Android Studio с пустым активити (Empty Activity), и начнём делать наш список.
Пусть наш список будет содержать автомобильные бренды, логотипы этих брендов и информацию о сайте производителя.
Создадим шаблон пункта выпадающего списка. Для этого перейдите к каталогу layout ресурсов проекта:
Нажмите на этом каталоге правой кнопкой мыши и в появившемся меню выберите New -> Layout resource file:
Назовите его spinner_item:
Отредактируйте созданный spinner_item.xml в соответствии со следующим текстом:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
|
<?xml version=«1.0» encoding=«utf-8»?>
<LinearLayout xmlns:android=«http://schemas.android.com/apk/res/android»
android:orientation=«vertical»
android:layout_width=«match_parent»
android:layout_height=«match_parent»>
<LinearLayout
android:orientation=«horizontal»
android:layout_width=«match_parent»
android:layout_height=«wrap_content»
android:layout_marginTop=«10dp»
android:layout_marginBottom=«10dp»>
<ImageView
android:id=«@+id/ivBrandLogo»
android:layout_gravity=«center_horizontal|center_vertical»
android:layout_width=«70dp»
android:layout_height=«50dp»
android:layout_marginLeft=«10dp»/>
<LinearLayout
android:orientation=«vertical»
android:layout_width=«match_parent»
android:layout_height=«wrap_content»>
<TextView
android:id=«@+id/tvBrandName»
android:layout_width=«match_parent»
android:layout_height=«wrap_content»
android:layout_gravity=«left|center_vertical»
android:textSize=«20sp»
android:textStyle=«bold»/>
<TextView
android:id=«@+id/tvBrandSite»
android:layout_width=«wrap_content»
android:layout_height=«wrap_content»
android:layout_gravity=«left|center_vertical»
android:textSize=«15sp»
android:textStyle=«italic»/>
</LinearLayout>
</LinearLayout>
</LinearLayout>
|
Теперь перейдите к файлу activity_main.xml, который расположен в том же каталоге layout, что и только что созданный spinner_item.xml и добавьте туда элемент Spinner. Должно получиться следующее:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
<?xml version=«1.0» encoding=«utf-8»?>
<android.support.constraint.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=«ru.lessons.customspinnerlesson.MainActivity»>
<Spinner
android:id=«@+id/spAutoBrands»
android:layout_width=«fill_parent»
android:layout_height=«wrap_content»></Spinner>
</android.support.constraint.ConstraintLayout>
|
После всего этого нам нужно создать класс, который будет содержать в себе информацию о каждом отдельно взятом бренде, т.е. наименование бренда, информацию о сайте и логотип.
Для этого перейдём к каталогу, в котором у нас расположен MainActivity и создадим в нём подкаталог, к котором разместим наш класс:
Нажмём на нём правой кнопкой мыши. В появившемся меню выберем New -> Package:
Назовите новый каталог AdditionalClasses.
Создание таких каталогов не является обязательным требованием, но разбивка различных классов по каталогам упрощает работу с проектом, когда используется большое количество классов различного назначения.
Нажмите на вновь созданный каталог AdditionalClasses правой кнопкой мыши и выберите New -> Java Class:
Назовите новый класс AutoBrandClass:
Отредактируйте его код в соответствии со следующим текстом:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
package ru.lessons.customspinnerlesson.AdditionalClasses;
public class AutoBrandClass
{
private String brandName; //Наименование бренда
private String officialSite; //Официальный сайт
private int brandLogo; //Логотип
public AutoBrandClass(String brandName, String officialSite, int brandLogo)
{
this.brandName = brandName;
this.brandLogo = brandLogo;
this.officialSite = officialSite;
}
public String getBrandName()
{
return brandName;
}
public int getBrandLogo()
{
return brandLogo;
}
public String getOfficialSite()
{
return officialSite;
}
}
|
В том же каталоге, где был создан каталог AdditionalClasses создайте ещё один каталог и назовите его Adapters. Должно получиться так:
Теперь создадим адаптер для выпадающего списка. Нажмите на каталоге Adapters правой кнопкой мыши и выберите New -> Java Class (Все действия аналогичны тем, которые мы делали при создании класса AutoBrandClass). Назовите этот класс AutoBrandsSpinnerAdapter. Отредактируйте его код в соответствии со следующим текстом:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
|
package ru.lessons.customspinnerlesson.Adapters;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;
import java.util.ArrayList;
import ru.lessons.customspinnerlesson.AdditionalClasses.AutoBrandClass;
import ru.lessons.customspinnerlesson.R;
public class AutoBrandsSpinnerAdapter extends BaseAdapter
{
private LayoutInflater layoutInflater;
private ArrayList<AutoBrandClass> autoBrandsList; //Массив экземпляров класса AutoBrandClass, которые содержат
//описание каждого отдельно взятого бренда
public AutoBrandsSpinnerAdapter(Context context, ArrayList<AutoBrandClass> autoBrandsList)
{
//Содержимое autoBrandsList создаётся в коде MainActivity
//и передаётся в конструктор адаптера при его создании
this.layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
this.autoBrandsList = autoBrandsList;
}
@Override
public int getCount()
{
return autoBrandsList.size(); //возвращает размер массива autoBrandsList
}
@Override
public Object getItem(int position)
{
return autoBrandsList.get(position); //возвращает элемент массива autoBrandsList
//по переданной в функцию позиции (индексу в массиве)
}
@Override
public long getItemId(int position)
{
return 0;
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
View view = layoutInflater.inflate(R.layout.spinner_item, parent, false);
//получает текущий элемент массива autoBrandsList
AutoBrandClass autoBrand = (AutoBrandClass) getItem(position);
//находим TextView, предназначенный для отображения наименования бренда
//и устанавливаем текст
TextView tvBrandName = (TextView) view.findViewById(R.id.tvBrandName);
tvBrandName.setText(autoBrand.getBrandName());
//находим TextView, предназначенный для отображения официального сайта
//и устанавливаем текст
TextView tvBrandSite = (TextView) view.findViewById(R.id.tvBrandSite);
tvBrandSite.setText(autoBrand.getOfficialSite());
//Находим ImageView, предназначенный для отображения логотипа
//и устанавливаем картинку логотипа
ImageView ivBrandLogo = (ImageView) view.findViewById(R.id.ivBrandLogo);
ivBrandLogo.setImageResource(autoBrand.getBrandLogo());
return view;
}
}
|
Теперь нам понадобятся три графических png файла, который будут содержать логотипы брендов — toyota.png, nissan.png и bmw.png. Их нужно просто скопировать в каталог drawable проекта:
Взять архив с логотипами можно здесь: LogoImg
Последним шагом необходимо перейти к MainActivity и отредактировать его в соответствии со следующим кодом:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
package ru.lessons.customspinnerlesson;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.Spinner;
import java.util.ArrayList;
import ru.lessons.customspinnerlesson.Adapters.AutoBrandsSpinnerAdapter;
import ru.lessons.customspinnerlesson.AdditionalClasses.AutoBrandClass;
public class MainActivity extends AppCompatActivity
{
@Override
protected void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//Этот массив будет содержать экземпляры класса, которые описывают содержимое каждого пункта выпадающего списка
//именно его мы и передадим в адаптер
ArrayList<AutoBrandClass> autoBrandsList = new ArrayList<>();
//Заполним массив данными
autoBrandsList.add(new AutoBrandClass(«Toyota», «https://www.toyota.com», R.drawable.toyota));
autoBrandsList.add(new AutoBrandClass(«Nissan», «http://www.nissan-global.com», R.drawable.nissan));
autoBrandsList.add(new AutoBrandClass(«BMW», «https://www.bmw.com», R.drawable.bmw));
//Выпадающий список
Spinner spAutoBrands = (Spinner) findViewById(R.id.spAutoBrands);
//Создадим адаптер
AutoBrandsSpinnerAdapter spinnerAdapter = new AutoBrandsSpinnerAdapter(this, autoBrandsList);
//Установим адаптер
spAutoBrands.setAdapter(spinnerAdapter);
}
}
|