简介:大三学生党一枚!主攻Android开发,对于Web和后端均有了解。
个人语录:取乎其上,得乎其中,取乎其中,得乎其下,以顶级态度写好一篇的博客。
在开发过程中,经常会用到Spinner
列表,比如说选择学院班级,选择省市等。如何实现联动的省市选择,本篇会给出答案。Spinner用法比较简单,但是想要用的好,还是需要对它熟悉才可以,下面一起来学习Spinner
。
Spinner的秘密
- 一.Spinner的基础知识
- 1.1 spinner的常用方法
- 1.2 图解方法作用
- 二.实战Spinner列表
- 2.1 在布局中使用数组资源
- 2.2 在代码中使用数组
- 2.3 两个小点
- 三.自定义Spinner列表
- 3.1 设计layout布局
- 3.2 实现Adapter
- 3.3 添加逻辑
- 四.总结
一.Spinner的基础知识
1.1 spinner的常用方法
Spinner的常用方法如下
//有的概念不好理解,通过图片来展示
spinner.setAdapter();//设置适配器
spinner.setDropDownHorizontalOffset(xx pixel);//用来设置下拉列表选择框的水平偏移距离
spinner.setDropDownVerticalOffset(xx pixel);//用来设置下拉列表选择框的垂直偏移距离
spinner.setDropDownWidth(xx pixel);//设置下拉列表选择框的宽度
spinner.setGravity();//设置当前选中项的定位的对齐方式
spinner.setOnItemClickListener();//设置item的点击事件
spinner.setPopupBackgroundDrawable(Drawable drawable);//设置下拉列表选择框的背景颜色
spinner.setPopupBackgroundResource(int id);
spinner.setPrompt(String str);//设置该spinner的提示信息
spinner.setSelection(int position)
1.2 图解方法作用
正常情况下(什么都不设置)Spinner如图:
setDropDownHorizontalOffset:不会超出最右边的边界
setDropDownVerticalOffset:可以设置负值,表示向上偏移
setDropDownWidth() :设置选择框的宽度
setPopupBackgroundDrawable:设置背景效果
spinner.setPrompt:设置提示信息,仅在dailog模式下有效,需设置style
<Spinner
android:id="@+id/spinner"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:prompt="@string/app_name"
style="@android:style/Widget.Spinner"
android:layout_gravity="center_horizontal">
</Spinner>
setSelection(int position):设置选中项
这样解释应该都可以知道每个方法的作用了!看这几张图,麻烦看官点个赞吧!
二.实战Spinner列表
使用原生的Spinner
来制作一个列表,有以下两种方法
2.1 在布局中使用数组资源
<Spinner
android:id="@+id/spinner"
android:layout_width="200dp"
android:entries="@array/subject"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal">
</Spinner>
<?xml version="1.0" encoding="utf-8"?>
<resources>
<array name="subject">
<item>计算机科学与技术</item>
<item>软件工程</item>
<item>信息科学与技术</item>
<item>网络工程</item>
<item>物联网</item>
</array>
</resources>
使用很简单,只需要设置一个onItemSelectedListener
效果如图:
2.2 在代码中使用数组
在代码中使用数组,需要通过setAdapter()
进行设置,最常用的适配器就是ArrayAdapter
,
具体用法:
String[] str = new String[]{"计算机科学与技术","软件工程","信息管理与科学","网络工程","物联网"};
ArrayAdapter<String> adapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item,str);
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
spinner.setAdapter(adapter);
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
switch (position){
case 0:
Toast.makeText(getApplicationContext(), "计算机科学与技术", Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(getApplicationContext(), "软件工程", Toast.LENGTH_SHORT).show();
break;
case 2:
Toast.makeText(getApplicationContext(), "信息管理与科学", Toast.LENGTH_SHORT).show();
break;
case 3:
Toast.makeText(getApplicationContext(), "网络工程", Toast.LENGTH_SHORT).show();
break;
case 4:
Toast.makeText(getApplicationContext(), "物联网", Toast.LENGTH_SHORT).show();
break;
}
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
2.3 两个小点
1.spinner.setOnItemClickListener
会报错,需要使用spinner.setOnItemSelectdListenter
2.如果之前选择了某一项,当前屏幕方向发生变化时,该项的事件会被重新触发一次。
三.自定义Spinner列表
下面进入重头戏,如何改造Spinner,打造炫酷的列表呢?
3.1 设计layout布局
创建ArrayAdapter时,传入了一个布局android.R.layout.simple_spinner_item
,可以看一下源码
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@android:id/text1"
style="?android:attr/spinnerItemStyle"
android:singleLine="true"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:ellipsize="marquee"
android:textAlignment="inherit"/>
这可以看出为什么使用ArrayAdapter
只能显示简单的文字,他只有一个TextView
控件
可见自定义Spinner可以分成以下几步:
1.自定义Layout
2.自定义Adapter
3.处理逻辑
下面做一个和微信顶部效果相同的列表
layout布局
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
android:layout_marginTop="5dp"
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="80dp">
<ImageView
android:id="@+id/wechat_image"
android:layout_marginLeft="16dp"
android:layout_gravity="center_vertical"
android:src="@drawable/add_friend"
android:layout_width="64dp"
android:layout_height="64dp">
</ImageView>
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:text="新的朋友"
android:id="@+id/wechat_text"
android:textSize="24sp"
android:textColor="#555555"
android:gravity="center_vertical"
android:layout_marginLeft="24dp"
android:layout_width="match_parent"
android:layout_height="79dp">
</TextView>
<View
android:background="#EEEEEE"
android:layout_width="match_parent"
android:layout_height="1dp">
</View>
</LinearLayout>
</LinearLayout>
3.2 实现Adapter
Adapter代码
@Override
public void initWidget() {
int[] photos = new int[]{R.drawable.add_friend,R.drawable.friends,R.drawable.ttag,R.drawable.pub};
String[] des = new String[]{"新的朋友","群聊","标签","公众号"};
MyAdapter myAdapter = new MyAdapter(photos,des,getApplicationContext());
spinner.setAdapter(myAdapter);
}
public class MyAdapter extends BaseAdapter implements SpinnerAdapter{
private int[] photos;
private String[] des;
private Context context;
public MyAdapter(int[] photos,String[] des,Context context){
this.photos=photos;
this.des=des;
this.context=context;
}
@Override
public int getCount() {
return photos.length;
}
@Override
public Object getItem(int position) {
return des[position];
}
@Override
public long getItemId(int position) {
return position;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
convertView = LayoutInflater.from(context).inflate(R.layout.wechat_item, null);
ImageView imageView = convertView.findViewById(R.id.wechat_image);
TextView textView = convertView.findViewById(R.id.wechat_text);
imageView.setImageResource(photos[position]);
textView.setText(des[position]);
return convertView;
}
}
3.3 添加逻辑
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
switch (position){
case 0:
Toast.makeText(getApplicationContext(), "新的朋友", Toast.LENGTH_SHORT).show();
break;
case 1:
Toast.makeText(getApplicationContext(), "群聊", Toast.LENGTH_SHORT).show();
break;
case 2:
Toast.makeText(getApplicationContext(), "标签", Toast.LENGTH_SHORT).show();
break;
case 3:
Toast.makeText(getApplicationContext(), "公众号", Toast.LENGTH_SHORT).show();
break;
}
}
效果图
虽然有差别,但还是有点像的,大佬们不要挑细节哈
四.总结
感谢阅读本篇博客,希望对您能有所帮助
先别走,我有一个资源学习群要推荐给你,它是白嫖党的乐园,小白的天堂!
别再犹豫,一起来学习!