我們在購物APP里面設定識訓地址時，都會有讓我們選擇省份及城市的下拉選單項，今天我將使用Android原生的 Spinner 控制元件來實作一個自定義的下拉選單功能，并配上一個透明漸變影片效果，
要實作的功能及思路如下：
- 下拉選單樣式是自定義的、非原生效果：需要使用 setDropDownViewResource 方法來設定下拉視圖的布局樣式，該方法需要傳入布局資源，該布局需要定義每個 Item 的屬性，比如寬高和文字顏色等（為了使效果明顯，我將每個 Item 的高度設定為 50 dp，文字設定為藍色）
- 點擊這個 Spinner 控制元件時，讓其運行一段“從左到右、逐漸顯示”的漸變影片：我通過 xml 的方式來定義這個影片，需要包含 translate（位移） 和 alpha（透明度） 兩個TAG，并設定相應的屬性值
- 下拉選單的內容串列要展示在 Spinner 里面，需要通過配接器 Adapter 跟 Spinner 進行系結：可以直接使用Android原生的 ArrayAdapter
- 選擇任意一個 Item 后，將其內容展示在界面上，告知用戶選擇的內容：需要實作 Spinner 的 onItemSelected 監聽回呼
原始碼如下：
1、主Activity（注意代碼中的注釋，不然你會遇到一些坑！）
public class SpinnerDemo extends Activity {
private static final String[] countries = {"北京", "上海", "廣州", "深圳", "成都", "杭州"};
private TextView mTextView;
private Spinner mSpinner;
private ArrayAdapter<String> mAdapter;
private Animation mAnimation;
@Override
protected void onCreate(Bundle onSavedInstance) {
super.onCreate(onSavedInstance);
setContentView(R.layout.spinner_demo);
mTextView = findViewById(R.id.textView9);
mSpinner = findViewById(R.id.spinner);
mAdapter = new ArrayAdapter<>(this, android.R.layout.simple_spinner_item, countries);
// 自定義的下拉視圖布局樣式
mAdapter.setDropDownViewResource(R.layout.spinner_drop_down);
// 設定資料的配接器
mSpinner.setAdapter(mAdapter);
mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
@Override
public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
mTextView.setText("你選擇的是：" + countries[position]);
// 一定要設定父視圖可見，否則 在選擇后，Spinner會消失
parent.setVisibility(View.VISIBLE);
}
@Override
public void onNothingSelected(AdapterView<?> parent) {
}
});
// 通過 xml 的形式來定義影片
mAnimation = AnimationUtils.loadAnimation(this, R.anim.my_anim);
mSpinner.setOnTouchListener(new Spinner.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
// 點擊 Spinner 后，運行影片
v.startAnimation(mAnimation);
return false;
}
});
}
}
2、布局檔案 spinner_demo.xml 如下：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<TextView android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:id="@+id/textView9"/>
<Spinner android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/spinner"
android:layout_gravity="center"
android:layout_marginTop="15dp"/>
</LinearLayout>
3、自定義的下拉視圖樣式布局檔案 spinner_drop_down.xml 如下：
<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:textColor="@color/colorBlue"
android:singleLine="true"
style="?android:attr/spinnerDropDownItemStyle">
</TextView>
4、自定義影片 xml 檔案如下：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
android:fromXDelta="0"
android:toXDelta="50%p"
android:duration="2000"/>
<alpha
android:fromAlpha="0.0"
android:toAlpha="1.0"
android:duration="2000"/>
</set>
5、效果圖如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/261713.html
標籤：其他