When we set the delivery address in the shopping APP, there will be a drop-down menu item that lets us choose the province and city. Today I’ll use Android’s native Spinner control to implement a custom drop-down menu with a transparent gradient animation.

The functions and ideas to be realized are as follows:

  1. Drop-down menu styles are custom, non-native: you need to use the setDropDownViewResource method to set the layout style of the drop-down view. This method requires passing in a layout resource that defines the attributes of each Item, such as width, height, text color, etc. (for obvious effect, I set the height of each Item to 50 dp and the text to blue)
  2. When you click on the Spinner control, make it run a “left to right, gradually display” gradient animation: I define this animation using XML, including the translate and alpha tags, and setting the corresponding property values
  3. To display a drop-down list of contents inside a Spinner, you need to bind it to an Adapter Adapter: you can use the Android native ArrayAdapter directly
  4. After selecting any Item, display its contents on the interface to inform the user of the selection: Spinner’s onItemSelected listening callback needs to be implemented

The source code is as follows:

1. Main Activity (Pay attention to the comments in the code, or you’ll run into some pits!)

Public Class SpinnerDemo extends Activity {private static Final String[] Countries = {" 中 国 ", "中 国 "," 中 国 ", "中 国 ", "Hangzhou"}; 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); / / custom dropdown view layout style mAdapter. SetDropDownViewResource (R.l ayout. Spinner_drop_down); // Set the data adapter mSpinner. SetAdapter (mAdapter); mSpinner.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener() { @Override public void onItemSelected(AdapterView<? > parent, View View, int position, long id) {mtextView.settext (" + countries[position]); // Make sure the parent View is VISIBLE, otherwise the Spinner will disappear after you select parent. SetVisibility (view.visible); } @Override public void onNothingSelected(AdapterView<? > parent) { } }); / / by the form of XML to define the animation mAnimation = AnimationUtils. LoadAnimation (this, state Richard armitage nim. My_anim); mSpinner.setOnTouchListener(new Spinner.OnTouchListener() { @Override public boolean onTouch(View v, MotionEvent event) {// After clicking Spinner, start v.startAnimation(mAnimation); return false; }}); }}Copy the code

2. The layout file spinner_demo.xml is as follows:

<? The 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>Copy the code

3. Customize the dropdown view style layout file spinner_drop_down.xml as follows:

<? The 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>Copy the code

4. Customize the animation XML file as follows:

<? The 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>Copy the code

5. The effect picture is as follows: