Android-Implementation of custom drop-down menu and android drop-down menu

Source: Internet
Author: User

Android-Implementation of custom drop-down menu and android drop-down menu

Reprinted please indicate the source: http://blog.csdn.net/l1028386804/article/details/48101651

Android-developed shoes generally encounter such a situation that the original pull-down control Spinner in Android is too monotonous and simple to meet our actual development needs, in this case, we need to customize the drop-down menu to implement the corresponding functions. How can we implement the custom drop-down menu? Next I will come to implement this function with you.

I. Principles

The content displayed in this drop-down menu is mainly implemented by ListView. A text box is placed on the interface, and a downward arrow icon is placed on the right of the text box, indicating that you can click the drop-down menu. Then create an item. xml layout file. The layout file displays the entries of the ListView. An Image in the table indicates the Avatar and a string of numbers indicates the QQ number (for example, the QQ number is displayed temporarily ), the deletion button. All data is encapsulated in ListView. Then, we will display the ListView in the form of PopupWindow under the text box.

When the ListView is not displayed, click the drop-down icon on the right of the text box to display the ListView

When the ListView is displayed, click the drop-down icon on the right of the text box to hide the PopupWindow.

When you click the delete icon next to each entry in the ListView, the corresponding entry will disappear from the listView.

II. Implementation 1. MainActivity

The program is very simple. I wrote all the java code in MainActivity. Let's take a look at this class.

1) attribute Field

For the meaning of each field, see the code comments.

The Code is as follows:

// Interface control private ImageButton spinner; private EditText et_name; // construct the private List used by the QQ number <String> names = new ArrayList <String> (); // layout loader private LayoutInflater mInflater; // custom adapter private MyAdapter mAdapter; // PopupWindowprivate PopupWindow pop; // whether PopupWindow is displayed. private boolean isPopShow = false is not displayed by default;

2) custom Adapter

Similarly, to better display data in the ListView, we still use the custom Adapter

The Code is as follows:

/*** Custom Adapter ** @ author liuyazhuang **/private class MyAdapter extends BaseAdapter {@ Overridepublic int getCount () {// TODO Auto-generated method stubreturn names. size () ;}@ Overridepublic Object getItem (int position) {// TODO Auto-generated method stubreturn names. get (position) ;}@ Overridepublic long getItemId (int position) {// TODO Auto-generated method stubreturn position ;}@ Overridepublic View getView (final int position, View convertView, viewGroup parent) {View view = mInflater. inflate (R. layout. item, null); final TextView TV _name = (TextView) view. findViewById (R. id. TV _name); TV _name.setText (names. get (position); ImageButton delete = (ImageButton) view. findViewById (R. id. delete); // set the delete event of the button listening event. setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubnames. remove (position); isPopShow = true; mAdapter. notifyDataSetChanged () ;}}); // sets the event TV _name.setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubet_name.setText (names. get (position); pop. dismiss () ;}}); return view ;}}

3) onCreate Method

The main function of this method is to initialize the interface layout, assign values to attribute fields, construct the data to be displayed in ListView, and set click events for corresponding buttons, controls the display and hiding of PopupWindow.

The specific implementation code is as follows:

@ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); // construct the qq account for (int I = 10000; I <10030; I ++) {names. add (String. valueOf (I);} spinner = (ImageButton) findViewById (R. id. spinner); et_name = (EditText) findViewById (R. id. et_name); mInflater = LayoutInflater. from (MainActivity. this); mAdapter = new MyAdapter (); spinner. setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubif (pop = null) {ListView = new listView (MainActivity. this); listView. setCacheColorHint (0x00000000); listView. setAdapter (mAdapter); pop = new PopupWindow (listView, et_name.getWidth (), LayoutParams. WRAP_CONTENT, true); pop. setBackgroundDrawable (new ColorDrawable (0x00000000); isPopShow = true;} if (isPopShow) {pop. showAsDropDown (et_name, 0, 0); isPopShow = false;} else {pop. dismiss (); isPopShow = true ;}}});}

4) The complete code is as follows:

Package com. lyz. spiner. activity; import java. util. arrayList; import java. util. list; import android. OS. bundle; import android. app. activity; import android. graphics. drawable. colorDrawable; import android. view. layoutInflater; import android. view. menu; import android. view. view; import android. view. viewGroup; import android. view. viewGroup. layoutParams; import android. widget. baseAdapter; import android. widget. editText; import android. widget. imageButton; import android. widget. listView; import android. widget. popupWindow; import android. widget. textView;/*** main program entry * @ author liuyazhuang **/public class MainActivity extends Activity {// interface control private ImageButton spinner; private EditText et_name; // construct the private List used by the QQ account <String> names = new ArrayList <String> (); // The layout loader private LayoutInflater mInflater; // custom adapter private MyAdapter mAdapter; // PopupWindowprivate PopupWindow pop; // whether PopupWindow is displayed. private boolean isPopShow = false is not displayed by default; @ Overrideprotected void onCreate (Bundle savedInstanceState) {super. onCreate (savedInstanceState); setContentView (R. layout. activity_main); // construct the qq account for (int I = 10000; I <10030; I ++) {names. add (String. valueOf (I);} spinner = (ImageButton) findViewById (R. id. spinner); et_name = (EditText) findViewById (R. id. et_name); mInflater = LayoutInflater. from (MainActivity. this); mAdapter = new MyAdapter (); spinner. setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubif (pop = null) {ListView = new listView (MainActivity. this); listView. setCacheColorHint (0x00000000); listView. setAdapter (mAdapter); pop = new PopupWindow (listView, et_name.getWidth (), LayoutParams. WRAP_CONTENT, true); pop. setBackgroundDrawable (new ColorDrawable (0x00000000); isPopShow = true;} if (isPopShow) {pop. showAsDropDown (et_name, 0, 0); isPopShow = false;} else {pop. dismiss (); isPopShow = true ;}});}/*** custom Adapter * @ author liuyazhuang **/private class MyAdapter extends BaseAdapter {@ Overridepublic int getCount () {// TODO Auto-generated method stubreturn names. size () ;}@ Overridepublic Object getItem (int position) {// TODO Auto-generated method stubreturn names. get (position) ;}@ Overridepublic long getItemId (int position) {// TODO Auto-generated method stubreturn position ;}@ Overridepublic View getView (final int position, View convertView, viewGroup parent) {View view = mInflater. inflate (R. layout. item, null); final TextView TV _name = (TextView) view. findViewById (R. id. TV _name); TV _name.setText (names. get (position); ImageButton delete = (ImageButton) view. findViewById (R. id. delete); // set the delete event of the button listening event. setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubnames. remove (position); isPopShow = true; mAdapter. notifyDataSetChanged () ;}}); // sets the event TV _name.setOnClickListener (new View. onClickListener () {@ Overridepublic void onClick (View v) {// TODO Auto-generated method stubet_name.setText (names. get (position); pop. dismiss () ;}}); return view ;}@ Overridepublic boolean onCreateOptionsMenu (Menu menu) {// Inflate the menu; this adds items to the action bar if it is present. getMenuInflater (). inflate (R. menu. main, menu); return true ;}}

2. activity_main.xml

The specific implementation code is as follows:

<RelativeLayout xmlns: android = "http://schemas.android.com/apk/res/android" xmlns: tools = "http://schemas.android.com/tools" android: layout_width = "match_parent" android: layout_height = "match_parent" android: background = "@ android: color/black "> <EditText android: id =" @ + id/et_name "android: layout_width =" 200dip "android: layout_height =" wrap_content "android: layout_centerHorizontal = "true" android: hint = "enter an account"/> <ImageButton android: id = "@ + id/spinner" android: layout_width = "wrap_content" android: layout_height = "wrap_content" android: background = "@ drawable/button" android: layout_alignTop = "@ id/et_name" android: layout_alignRight = "@ id/et_name" android: layout_alignBottom = "@ id/et_name"/> </RelativeLayout>

3. item. xml

The specific implementation code is as follows:

<?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="horizontal"     android:gravity="center_vertical">    <ImageView         android:id="@+id/header"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/user"/>        <TextView         android:id="@+id/tv_name"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="1"/>        <ImageButton         android:id="@+id/delete"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:background="@drawable/delete"/></LinearLayout>

4. AndroidManifest. xml

Finally, the AndroidManifest. xml code is pasted.

<?xml version="1.0" encoding="utf-8"?><manifest xmlns:android="http://schemas.android.com/apk/res/android"    package="com.lyz.spiner.activity"    android:versionCode="1"    android:versionName="1.0" >    <uses-sdk        android:minSdkVersion="8"        android:targetSdkVersion="18" />    <application        android:allowBackup="true"        android:icon="@drawable/ic_launcher"        android:label="@string/app_name"        android:theme="@style/AppTheme" >        <activity            android:name="com.lyz.spiner.activity.MainActivity"            android:label="@string/app_name" >            <intent-filter>                <action android:name="android.intent.action.MAIN" />                <category android:name="android.intent.category.LAUNCHER" />            </intent-filter>        </activity>    </application></manifest>

Iii. Running Effect


4. Tips

You can go to the links

In this example, for the purpose of writing some text directly in the layout file and related classes, you need to write these words in the real project. in xml files, reference these resources externally. Remember, this is the most basic development knowledge and specification for an Android programmer. I am writing these resources in the class and layout files for convenience.

Copyright Disclaimer: This article is an original article by the blogger and cannot be reproduced without the permission of the blogger.

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.