【Android初級】如何實現一個有動畫效果的自定義下拉菜單

咱們在購物APP裏面設置收貨地址時，都會有讓咱們選擇省份及城市的下拉菜單項。今天我將使用Android原生的 Spinner 控件來實現一個自定義的下拉菜單功能，並配上一個透明漸變更畫效果。

要實現的功能及思路以下：

1. 下拉菜單樣式是自定義的、非原生效果：須要使用 setDropDownViewResource 方法來設置下拉視圖的佈局樣式。該方法須要傳入佈局資源，該佈局須要定義每一個 Item 的屬性，好比寬高和文字顏色等（爲了使效果明顯，我將每一個 Item 的高度設置爲 50 dp，文字設置爲藍色）
2. 點擊這個 Spinner 控件時，讓其運行一段「從左到右、逐漸顯示」的漸變更畫：我經過 xml 的方式來定義這個動畫，須要包含 translate（位移） 和 alpha（透明度） 兩個TAG，並設置相應的屬性值
3. 下拉菜單的內容列表要展現在 Spinner 裏面，須要經過適配器 Adapter 跟 Spinner 進行綁定：能夠直接使用Android原生的 ArrayAdapter
4. 選擇任意一個 Item 後，將其內容展現在界面上，告知用戶選擇的內容：須要實現 Spinner 的 onItemSelected 監聽回調

源碼以下：

一、主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;
            }
        });
    }
}

二、佈局文件 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>

三、自定義的下拉視圖樣式佈局文件 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>

四、自定義動畫 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>

五、效果圖以下：