Android自定义View-自定义Spinner
 
在使用系统Spinner时，往往总不能跟自己主题进行颜色搭配。这里介绍一下对Spinner的样式的修改，主要是对外观和颜色的修改。
 
效果图：
 
 
Spinner背景图片：
 
1. 
 
2. 
 
效果图中选用的是2作为的背景。
 
Activity中布局：在布局中定义一个Spinner控件
 
 <Spinner
        android:id="@+id/sp_Exception"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/spinner_bg"
        android:layout_gravity="center_horizontal"
        android:gravity="center"
        android:layout_marginTop="5dp"
        android:layout_marginBottom="5dp"
        android:paddingRight="15dp"
        android:paddingLeft="15dp" />
 
spinner_layout布局：这里必须是CheckedTextView。
 
<?xml version="1.0" encoding="utf-8"?>
<CheckedTextView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_horizontal"
    android:padding="5dp"
    android:textColor="@color/stategridcolor"
    android:textSize="18sp"
    tools:text="全部" />
 
spinner_item布局：下拉列表布局，这里只展示一个textView。
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white"
    android:padding="15dp" >

    <TextView
        android:id="@+id/spinner_item_label"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@color/stategridcolor"
        android:text="全部"
        android:textSize="18sp" />

</RelativeLayout>
 
Activity中代码使用：
 
...
... 省略部分代码
...

list = new ArrayList<String>();
list.add("全部	" + allCount);
list.add("采集异常	" + caiJiCount);
list.add("计量异常	" + jiLiangCount);
list.add("配电异常	" + peiDianCount);
list.add("窃电异常	" + qieDianCount);

ArrayAdapter<String> adapter = new ArrayAdapter<String>(getActivity(),R.layout.spinner_layout, list) {
    @Override
    public View getDropDownView(int position, View convertView, ViewGroup parent) {
        View view = LayoutInflater.from(getActivity()).inflate(R.layout.spinner_item, parent, false);
	TextView label = (TextView) view.findViewById(R.id.spinner_item_label);
	label.setText(list.get(position));
	return view;
    }
};
// 设置下拉列表的样式
adapter.setDropDownViewResource(R.layout.item_spinner_daibanorder_down);
sp_Exception.setAdapter(adapter);
sp_Exception.setSelection(0);// 默认显示第一个item
 
 
 
 

 
spinner就是下拉选择组件，系统自带的spinner使用起来非常方便，首先定义一个array(strings.xml)，如下：
 
一年级
 
二年级
 
三年级
 
四年级
 
五年级
 
六年级
 
代码如下：
 
Spinner spinner = (Spinner) findViewById(R.id.spinner);
 
ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.grade, android.R.layout.simple_spinner_item);
 
spinner.setAdapter(adapter);
 
这样就实现了一个简单的spinner，显示如下：
 

 
image
 
但这并不是我想要的样式和效果，下面我们就一点点的来改造它。
 
(1)改变初始布局
 
即弹窗前的样式，先自定义一个布局，如下：
 
spinner_layout.xml
 

 
android:layout_width="wrap_content"
 
android:layout_height="wrap_content"
 
xmlns:tools="http://schemas.android.com/tools"
 
android:textColor="#6d6d6d"
 
android:textSize="15sp"
 
android:drawableRight="@drawable/arrow"
 
android:drawablePadding="5dp"
 
tools:text="一年级">
 
然后替换createFromResource中的即可，如下：
 
ArrayAdapter adapter = ArrayAdapter.createFromResource(this, R.array.grade, R.layout.spinner_layout);
 
这样还不够，因为还有一个带箭头的背景，将背景设置为透明即可，如下：
 
spinner.setBackgroundColor(0x0);
 
这样初始布局的展示就与spinner_layout一样了。
 
(2)改变列表item布局
 
经过上面的修改后，发现弹窗中列表item的布局也变成了spinner_layout，查看ArrayAdapter的构造函数可知有mResource和mDropDownResource两个变量，其中mResource就是初始布局，而mDropDownResource则是列表item的布局。
 
而createFromResource函数中，mResource和mDropDownResource赋值相同。但是ArrayAdapter还有一个setDropDownViewResource函数。
 
首先定义一个布局，如下：
 
spinner_layout.xml
 

 
android:layout_width="match_parent"
 
android:layout_height="wrap_content"
 
xmlns:tools="http://schemas.android.com/tools"
 
android:textColor="#6d6d6d"
 
android:textSize="15sp"
 
android:padding="8dp"
 
android:gravity="center_horizontal"
 
tools:text="一年级">
 
然后使用setDropDownViewResource函数即可，如下：
 
adapter.setDropDownViewResource(R.layout.spinner_item);
 
(3)改变弹窗背景及位置
 
在开始的动画中可以看到弹窗会遮挡住，我们想让弹窗处于下方，同时弹窗是圆角带箭头的。
 
这就需要使用spinner的两个函数setPopupBackgroundResource和setDropDownVerticalOffset。
 
但是注意这两个函数都需要在android4.1版本及以上，鉴于目前4.1以下版本已经很少了，所以我们只考虑4.1以上即可，代码如下：
 
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
 
spinner.setPopupBackgroundResource(R.drawable.bg_spinner);
 
spinner.setDropDownVerticalOffset(dip2px(20));
 
}
 
(4)添加选中效果
 
经过上面的处理，我们已经得到想要的样式。但是还差一点，弹窗列表中缺少选中的样式。比如说我当前选择“二年级”，在弹窗中，对应的item字体应该加深加粗。在spinner源码中搜寻了一遍，发现并没有对应的函数和解决方法，那么我们自己动手吧。
 
其实spinner是使用adapter来加载列表的，而我们使用createFromResource函数会自动创建了adapter，我们可以自定义一个adapter，如下：
 
public class SpinnerAdapter extends ArrayAdapter {
 
private int selectedPostion;
 
public void setSelectedPostion(int selectedPostion) {
 
this.selectedPostion = selectedPostion;
 
}
 
public SpinnerAdapter(@NonNull Context context, int resource, @NonNull T[] objects) {
 
super(context, resource, objects);
 
}
 
@Override
 
public View getDropDownView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
 
View view = super.getDropDownView(position, convertView, parent);
 
TextView textView = (TextView)view;
 
if(selectedPostion == position){
 
textView.setTextColor(0xff373741);
 
textView.getPaint().setFakeBoldText(true);
 
}
 
else{
 
textView.setTextColor(0xff6d6d6d);
 
textView.getPaint().setFakeBoldText(false);
 
}
 
return view;
 
}
 
public static @NonNull SpinnerAdapter createFromResource(@NonNull Context context,
 
@ArrayRes int textArrayResId, @LayoutRes int textViewResId) {
 
final CharSequence[] strings = context.getResources().getTextArray(textArrayResId);
 
return new SpinnerAdapter<>(context, textViewResId, strings);
 
}
 
}
 
注意ArrayAdapter中的getDropDownView函数是获取弹窗item使用的view的，而不是getView函数。
 
同时我们要重新写一个createFromResource函数。
 
将之前使用的adapter替换成自定义这个，同时为spinner设置监听即可，更改后的完整代码如下：
 
Spinner spinner = (Spinner) findViewById(R.id.spinner);
 
adapter = SpinnerAdapter.createFromResource(this, R.array.grade, R.layout.spinner_layout);
 
adapter.setDropDownViewResource(R.layout.spinner_item);
 
spinner.setBackgroundColor(0x0);
 
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN) {
 
spinner.setPopupBackgroundResource(R.drawable.bg_spinner);
 
spinner.setDropDownVerticalOffset(dip2px(20));
 
}
 
spinner.setAdapter(adapter);
 
spinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
 
@Override
 
public void onItemSelected(AdapterView> parent, View view, int position, long id) {
 
adapter.setSelectedPostion(position);
 
}
 
@Override
 
public void onNothingSelected(AdapterView> parent) {
 
}
 
});
 
效果如下：
 

 
image
 
通过我们自己定义adapter可以实现更多复杂的效果和样式，有时间我们再来探讨。

 
最近在做的项目中有很多下拉框，为了实现方便就用了Android 自带的Spinner,但是自带的Spinner的样式又不符合要求，就学习了一下自定义Spinner。下面是整个步骤：
 
1.准备好图片
 
2.style中定义
 
@drawable/spinner
 
5dip
 
3.调用
 

 
android:id="@+id/field_item_spinner_content"
 
style="@style/spinner_style"
 
android:layout_width="fill_parent"
 
android:layout_height="wrap_content"/>
 
4.在layout中定义simple_spinner_item.xml
 

 
android:id="@android:id/text1"
 
android:paddingLeft="5dip"
 
android:paddingRight="5dip"
 
android:gravity="center_vertical"
 
android:textColor="#808080"
 
android:singleLine="true"
 
android:layout_width="fill_parent"
 
android:layout_height="wrap_content" />
 
5.java代码
 
ArrayAdapter adapter = new ArrayAdapter(mContext,R.layout.simple_spinner_item);
 
String level[] = getResources().getStringArray(R.array.affair_level);//资源文件
 
for (int i = 0; i < level.length; i++) {
 
adapter.add(level[i]);
 
}
 
adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item);
 
spinner.setAdapter(adapter);
 
效果图：
 

 
转载时请注明出处及相应链接，本文永久地址：https://blog.yayuanzi.com/13379.html
 

 

 
微信打赏
 

 
支付宝打赏
 
感谢您对作者Lena的打赏，我们会更加努力！    如果您想成为作者，请点我

 
在Android中Spinner就是下拉菜单，它相当于HTML中的标签。
 
Android中提供的Spinner Widget下拉菜单已经非常好用了，样式也适用，不过我们还是可以通过定义xml的方式来改变下拉菜单的样式。
 
在layout目录下新建一个xml文件，名字随便(我这里叫myspinner.xml)。在这个文件里面可以定义下拉菜单的样式
 
我们这里采用TextView来实现
 

 
xmlns:android="http://schemas.android.com/apk/res/android"
 
android:id="@+id/text1"
 
android:layout_width="wrap_content"
 
android:layout_height="24sp"
 
android:singleLine="true"
 
style="?android:attr/spinnerDropDownItemStyle" />
 
在Activity中我们可以这样调用
 
private static final String[] countriesStr={"","","",""}
 
mySpinner = (Spinner) findViewById(R.id.mySpinner);
 
ArrayAdapter adapter = new ArrayAdapter(this, android.R.layout.simple_spinner_item, countriesStr);
 
adapter.setDropDownViewResource(R.layout.myspinner_dropdown);
 
mySpinner.setAdapter(adapter);
 
利用自定义的xml我们就可以很灵活的来改变下拉菜单的样式。
 
另外andorid也提供了两种基本的样式
 
android.R.layout.simple_spinner_item:TextView的下拉菜单
 
android.R.layout.simple_spinner_dropdown_item:右边带有radio的下拉菜单
 
============
 
方法2：
 
自定义下拉菜单 -------- Spinner
 
import java.util.ArrayList;
 
import java.util.List;
 
import android.app.Activity;
 
import android.os.Bundle;
 
import android.view.MotionEvent;
 
import android.view.View;
 
import android.view.animation.Animation;
 
import android.view.animation.AnimationUtils;
 
import android.widget.AdapterView;
 
import android.widget.ArrayAdapter;
 
import android.widget.Button;
 
import android.widget.EditText;
 
import android.widget.Spinner;
 
import android.widget.TextView;
 
import android.widget.Toast;
 
public class SpinnerDrop extends Activity {
 
/** Called when the activity is first created. */
 
private List cityList;
 
private Spinner sp;
 
private int pos;
 
//private Animation animation;
 
@Override
 
public void onCreate(Bundle savedInstanceState) {
 
super.onCreate(savedInstanceState);
 
setContentView(R.layout.main);
 
cityList= new ArrayList();//初始化一个city的String arraylist
 
countryList.add("长沙");
 
countryList.add("北京");
 
countryList.add("邵阳");
 
pos=0;//标记选择的位置
 
sp = (Spinner)findViewById(R.id.Spinner01);
 
ArrayAdapter adapter = new ArrayAdapter(this,android.R.layout.simple_spinner_item,cityList);
 
sp.setAdapter(adapter);//通过setAdapter()来读取ArrayAdapter里的数据
 
sp.setOnItemSelectedListener(new Spinner.OnItemSelectedListener(){//下拉列表的选择事件
 
public void onItemSelected(AdapterView> parent, View view,
 
int position, long id) {
 
pos = position;//标记选择的位置
 
TextView tv = (TextView)findViewById(R.id.xs);
 
tv.setText("selected:"+cityList.get(position).toString());//显示选择的内容
 
parent.setVisibility(View.VISIBLE);设置下拉列表的显示状态
 
}
 
public void onNothingSelected(AdapterView> parent) {
 
// TODO Auto-generated method stub
 
}
 
});
 
Button add = (Button)findViewById(R.id.add);//添加一个下拉项
 
add.setOnClickListener(new Button.OnClickListener(){
 
public void onClick(View v) {
 
// TODO Auto-generated method stub
 
EditText et = (EditText)findViewById(R.id.EditText01);
 
String newstr = et.getText().toString();
 
cityList.add(newstr);
 
ArrayAdapter adapter = new ArrayAdapter(SpinnerDrop.this,android.R.layout.simple_spinner_item,cityList);
 
sp.setAdapter(adapter);//添加数据后重新设置ArrayAdapter并加载进去
 
et.setText("");
 
Toast.makeText(SpinnerDrop.this, "添加成功", Toast.LENGTH_LONG).show();//浮框提示添加成功
 
}
 
});
 
Button del = (Button)findViewById(R.id.del);//删除下拉项
 
del.setOnClickListener(new Button.OnClickListener(){
 
public void onClick(View v) {
 
cityList.remove(pos);
 
ArrayAdapter adapter = new ArrayAdapter(SpinnerDrop.this,android.R.layout.simple_spinner_item,cityList);
 
sp.setAdapter(adapter);
 
Toast.makeText(SpinnerDrop.this, "删除成功", Toast.LENGTH_LONG).show();
 
}
 
});
 
}
 
}