Android真武剑之PopupWindow之三国杀

传送门 ☞ 轮子的专栏 ☞ 转载请注明 ☞ http://blog.youkuaiyun.com/leverage_1229

真武剑

        那二人还没走近，冲虚便见一只盘于中横放着一柄长剑，待二人走近时凝神看去，只见长剑剑鞘铜绿斑斓，以铜丝嵌着两个篆文：“真武”。冲虚忍不住“啊”的一声，武当派创派之祖张三丰先师所用佩剑名叫“真武剑”，向来是武当派镇山之宝，八十余年前，日月教几名高手长老夜袭武当山，将宝剑连同张三丰手书的一部《太极拳经》一并盗了去。当时一场恶斗，武当派死了三名一等一的好手，虽然也杀了日月教四名长老，但一经一剑却未能夺回。这是武当派的奇耻大辱，八十余年来，每一代掌门临终时留下遗训，必定是夺还此经此剑。

        今天我们学习如何实现Android平台“真武剑”PopupWindow来实现泡泡窗口，效果类似于弹出菜单项，但是其实现方式与选项菜单截然不同，下面给出该情景的案例：

1案例技术要点

(1)创建一个GridView，用于管理PopupWindow显示内容。
(2)创建一个SimpleAdapter，用于填充GridView显示的数据。
(3)为PopupWindow设置动画特效、背景、布局、焦点事件等。

2案例代码陈列

工程包目录

AndroidManifest.xml

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.android.popupwindow"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="15" />

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name" >
        <activity
            android:name=".PopupWindowActivity"
            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>

string.xml

<resources>
    <string name="app_name">泡泡窗口</string>
    <string name="button">打开PopupWindow</string>
</resources>

main.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"
    android:id="@+id/main" >

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:onClick="openPopupWindow"
        android:text="@string/button" />

</LinearLayout>

popupwindow.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"
    android:background="@drawable/background" >
    <!-- <TextView 
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="我是PopupWindow"/> -->
        
        <GridView
            android:id="@+id/gridView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" 
            android:numColumns="4"
            android:verticalSpacing="10dp"
            android:horizontalSpacing="10dp"/>
            
</LinearLayout>

grid_item.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"
    android:gravity="center" >
    <ImageView 
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>
    <TextView 
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:textSize="16sp"
        android:textColor="#000099"/>

</LinearLayout>

popwindow_background.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <gradient
        android:angle="270"
        android:endColor="#1DC9CD"
        android:startColor="#A2E0FB"/>
    <padding
        android:left="2dp"
        android:top="2dp"
        android:right="2dp"
        android:bottom="2dp" />
</shape>

enter.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate 
        android:fromYDelta="100%p"
        android:toYDelta="0"
        android:duration="500" />
    
    <alpha
        android:fromAlpha="0.5" 
        android:toAlpha="1.0"
        android:duration="300" />
</set>

exit.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
    android:shareInterpolator="false" >
    <translate 
        android:fromYDelta="0"
        android:toYDelta="100%p"
        android:duration="500" />
    
    <alpha
        android:fromAlpha="1.0" 
        android:toAlpha="0.5"
        android:duration="300" />
</set>

PopupWindowActivity.java

package com.android.popupwindow;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.GridView;
import android.widget.ListAdapter;
import android.widget.PopupWindow;
import android.widget.SimpleAdapter;

public class PopupWindowActivity extends Activity {
    private PopupWindow popupWindow;
    private View parent;
    
    // 设置GridView Item图片资源
    private int[] images = {
            R.drawable.i1,
            R.drawable.i2,
            R.drawable.i3,
            R.drawable.i4,
            R.drawable.i5,
            R.drawable.i6,
            R.drawable.i7,
            R.drawable.i8};
    
    // 设置GridView Item名称资源
    private String[] names = {
            "搜索",
            "文件",
            "下载",
            "全屏",
            "网址",
            "书签",
            "加入",
            "分享"
    };

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        // 构建PopupWindow内容视图
        View contentView = getLayoutInflater().inflate(R.layout.popupwindow, null);
        GridView gridView = (GridView) contentView.findViewById(R.id.gridView);
        gridView.setAdapter(getAdapter());
        gridView.setOnItemClickListener(new OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position,
                    long id) {
                if(popupWindow.isShowing()) {
                    popupWindow.dismiss();
                }
            }
        });
        
        // 初始化PopupWindow控件
        popupWindow = new PopupWindow(contentView, ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        // 允许PopupWindow获取焦点
        popupWindow.setFocusable(true);
        // 设置PopupWindow背景图
        popupWindow.setBackgroundDrawable(new BitmapDrawable());
        // 设置PopupWindow弹进弹出动画效果
        popupWindow.setAnimationStyle(R.style.animation);
        // 找到主界面布局文件
        parent = findViewById(R.id.main);
    }

    /**
     * 构建用于填充GridView数据条目的适配器
     * @return ListAdapter
     */
    private ListAdapter getAdapter() {
        List<HashMap<String, Object>> data = new ArrayList<HashMap<String, Object>>();
        for(int i=0; i < images.length; i++) {
            HashMap<String, Object> item = new HashMap<String, Object>();
            item.put("image", images[i]);
            item.put("name", names[i]);
            data.add(item);
        }
        SimpleAdapter adapter = new SimpleAdapter(this, data, R.layout.grid_item, 
                new String[]{"image", "name"}, new int[]{R.id.imageView, R.id.textView});
        return adapter;
    }

    /**
     * 设置在页面底端显示PopupWindow
     * @param v
     */
    public void openPopupWindow(View v) {
        popupWindow.showAtLocation(parent, Gravity.BOTTOM, 0, 0);
    }
}

3案例效果展示

4案例源码下载

点我下载源码