快捷導(dǎo)航

Android實(shí)現(xiàn)動(dòng)畫效果的自定義下拉菜單功能

更新時(shí)間：2021年02月23日 09:29:12 作者：snowyeti

這篇文章主要介紹了Android實(shí)現(xiàn)動(dòng)畫效果的自定義下拉菜單功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

我們?cè)谫?gòu)物APP里面設(shè)置收貨地址時(shí)，都會(huì)有讓我們選擇省份及城市的下拉菜單項(xiàng)。今天我將使用Android原生的 Spinner 控件來(lái)實(shí)現(xiàn)一個(gè)自定義的下拉菜單功能，并配上一個(gè)透明漸變動(dòng)畫效果。

要實(shí)現(xiàn)的功能及思路如下：

下拉菜單樣式是自定義的、非原生效果：需要使用 setDropDownViewResource 方法來(lái)設(shè)置下拉視圖的布局樣式。該方法需要傳入布局資源，該布局需要定義每個(gè) Item 的屬性，比如寬高和文字顏色等（為了使效果明顯，我將每個(gè) Item 的高度設(shè)置為 50 dp，文字設(shè)置為藍(lán)色）點(diǎn)擊這個(gè) Spinner 控件時(shí)，讓其運(yùn)行一段“從左到右、逐漸顯示”的漸變動(dòng)畫：我通過(guò) xml 的方式來(lái)定義這個(gè)動(dòng)畫，需要包含 translate（位移）和 alpha（透明度）兩個(gè)TAG，并設(shè)置相應(yīng)的屬性值下拉菜單的內(nèi)容列表要展示在 Spinner 里面，需要通過(guò)適配器 Adapter 跟 Spinner 進(jìn)行綁定：可以直接使用Android原生的 ArrayAdapter選擇任意一個(gè) Item 后，將其內(nèi)容展示在界面上，告知用戶選擇的內(nèi)容：需要實(shí)現(xiàn) Spinner 的 onItemSelected 監(jiān)聽回調(diào)

源碼如下：

1、主Activity（注意代碼中的注釋，不然你會(huì)遇到一些坑?。?/p>

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);

    // 設(shè)置數(shù)據(jù)的適配器
    mSpinner.setAdapter(mAdapter);

    mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() {
      @Override
      public void onItemSelected(AdapterView<?> parent, View view, int position, long id) {
        mTextView.setText("你選擇的是：" + countries[position]);

        // 一定要設(shè)置父視圖可見，否則 在選擇后，Spinner會(huì)消失
        parent.setVisibility(View.VISIBLE);
      }

      @Override
      public void onNothingSelected(AdapterView<?> parent) {
      }
    });

    // 通過(guò) xml 的形式來(lái)定義動(dòng)畫
    mAnimation = AnimationUtils.loadAnimation(this, R.anim.my_anim);
    mSpinner.setOnTouchListener(new Spinner.OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
        // 點(diǎn)擊 Spinner 后，運(yùn)行動(dòng)畫
        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、自定義動(dòng)畫 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、效果圖如下：