1. 程式人生 > >PopupWindow簡單實用小例子之彈出內容顯示框(一)

PopupWindow簡單實用小例子之彈出內容顯示框(一)

我們要做的功能是點選按鈕彈出一個內容框之後點選彈出的對話方塊的內容將內容顯示在輸入框中先來看下效果圖

利用PopupWindow實現彈出的內容框,PopupWindow構造可以理解為ListView+TextView,ListView是整個顯示內容的框架,而我們要顯示的內容是用TextView展示的,展示的是一條一條的記錄,是每一條item。

所以我們的步驟是:

1、在values資料夾下建立要顯示的內容檔案array.xml

 

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string-array 
name="event_item"> <item>第一條記錄</item> <item>第二條記錄</item> <item>第三條記錄</item> </string-array> </resources>

2、在layout資料夾下建立裝載內容顯示的檔案list_popupwindow.xml,也就是一個ListView

 

 

<?xml version="1.0" encoding="utf-8"?>
<ListView 
xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/pop_list" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="center" android:background="@color/colorGreen"> </ListView>

3、在layout資料夾下建立event_item_list.xml,也就是TextView

 

 

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:gravity="center"
    android:background="@drawable/selector_pop_text"
    >
</TextView>

selector_pop_text是當點選每一條TextView對於觸發的不同的手勢動作有不同的背景顯示,例如當手指點選但不擡起也就是摁住它,它會顯示什麼背景所以第4步為:

 

4、該檔案在res資料夾下新建一個drawable-nodpi資料夾在drawable-nodpi資料夾中建立selector_pop_text.xml

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@color/light_blue" android:state_pressed="false" android:state    _selected="true" />
    <item android:drawable="@color/poptextselect" android:state_pressed="true" />
    <item android:drawable="@color/poptext" android:state_pressed="false" android:state_se    lected="false" />
</selector>

以上是PopupWindow需要的基本佈局。

 

接下來我們在activity_main.xml中寫我們的基本佈局,因為我們要做的功能是點選按鈕彈出一個內容框之後點選彈出的對話方塊的內容將內容顯示在輸入框中,所以我們需要輸入框EditText和一個按鈕Button,所以

6、在activity_main.xml重寫佈局如下

 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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"
    tools:context="com.android.by.mypopupwindow.MainActivity"
    android:orientation="vertical"
    >
    <LinearLayout
        android:id="@+id/root"
        android:layout_marginTop="55px"
        android:layout_width="match_parent"
        android:layout_height="81dp"
        android:orientation="horizontal"
        android:background="@drawable/editext_shape">

        <EditText
            android:id="@+id/editext1"
            android:layout_width="290dp"
            android:layout_height="70dp"
            android:background="@null"
            android:layout_marginLeft="17dp"
            android:cursorVisible="true"
            />

        <Button
            android:id="@+id/button1"
            android:layout_width="50dp"
            android:layout_height="50dp"
            android:background="@drawable/selector_add"
            android:layout_marginRight="0dp"
            android:layout_gravity="center"
            android:layout_marginTop="2dp"
            />

    </LinearLayout>

</LinearLayout>

其中editext_shape.xml是我們自己寫的輸入框背景將它放在drawable-nodpi資料夾下

 

 

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" >
    <solid android:color="#00000000" />
    <corners android:radius="8dp" />
    <stroke android:width="1dp" android:color="#ff9800" />
</shape>

selector_add.xml是Button不同狀態下的不同顯示,內容框彈出按鈕變暗,內容框消失按鈕變亮,它同樣在drawable-nodpi資料夾下

 

 

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/add_disable" android:state_enabled="false"></item>
    <item android:drawable="@drawable/add_press" android:state_pressed="true"></item>
    <item android:drawable="@drawable/add_press" android:state_pressed="false"></item>
</selector>

7、開始寫功能的邏輯實現,程式碼如下

 

package com.android.by.mypopupwindow;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.EditText;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.RelativeLayout;
import android.widget.TextView;

public class MainActivity extends Activity {

    private LinearLayout root;
    private PopupWindow popUpWindow;
    private ListView listView;
    private EditText edittext1;
    private Button button1;
    private String contentData;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        root = (LinearLayout) findViewById(R.id.root);
        edittext1 = (EditText) findViewById(R.id.editext1);
        button1 = (Button) findViewById(R.id.button1);
        button1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                showPopupWindow();
                button1.setEnabled(false);
            }
        });
    }

    private void showPopupWindow()
    {
        View popUpWindowView = getLayoutInflater().
                inflate(R.layout.list_popupwindow, null);//引入layout中的佈局檔案
        listView = (ListView) popUpWindowView.findViewById(R.id.pop_list);
        listView.setAdapter(new EventAdapter());
        popUpWindow = new PopupWindow(popUpWindowView, RelativeLayout.LayoutParams.
                WRAP_CONTENT,RelativeLayout.LayoutParams.WRAP_CONTENT,true);
        popUpWindow.setWidth(630);
        popUpWindow.setTouchable(true);
        popUpWindow.setBackgroundDrawable(new ColorDrawable(Color.TRANSPARENT));
        popUpWindow.setOutsideTouchable(true);
        popUpWindow.showAtLocation(root, Gravity.NO_GRAVITY, 50, 405);
        popUpWindow.setOnDismissListener(new PopupWindow.OnDismissListener() {
            @Override
            public void onDismiss() {
                button1.setEnabled(true);//按鈕變亮
            }
        });
    }
    private void closePopupWindow()
    {
        if (popUpWindow.isShowing())
        {
            popUpWindow.dismiss();
        }
    }
/*
    我們通過繼承BaseAdapter使得每一個顯示的TextView有相應的處理事件,
    對於此部分讀者可以自行百度ListViewAdapter並結合http://www.2cto.com/kf/201505/398415.html
    這篇內容自行理解
*/

    class EventAdapter extends BaseAdapter{

        private String[] array;

        public EventAdapter()
        {
            array = getResources().getStringArray(R.array.event_item);
        }
        @Override
        public int getCount() {
            return array.length;
        }

        @Override
        public Object getItem(int position) {
            return array[position];
        }

        @Override
        public long getItemId(int position) {
            return position;
        }

        @Override
        public View getView(final int position, View convertView, ViewGroup parent) {
            ViewHolder holder;
            if (convertView != null) {
                holder = (ViewHolder) convertView.getTag();
            } else {
                convertView = LayoutInflater.from(MainActivity.this).
                        inflate(R.layout.event_item_list, parent, false);
                holder = new ViewHolder(convertView);
                convertView.setTag(holder);
            }
            contentData = array[position];
            holder.view.setText(contentData);
            holder.view.setTextSize(20);
            convertView.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    if (position == 0) {
                        edittext1.setText(array[position]);
                    } else if (position == 1) {
                        edittext1.setText(array[position]);
                    } else if (position == 2) {
                        edittext1.setText(array[position]);
                    }

                    edittext1.setCursorVisible(true);
                    edittext1.setSelection(edittext1.getText().length());//使輸入框焦點在文字後
                    closePopupWindow();
                }
            });
            return convertView;
        }
        class ViewHolder {
            TextView view;
            public ViewHolder(View view) {
                this.view = (TextView) view;
            }
        }
    }


}