PopupWindow的使用

发表于 | 分类于
字数统计: 1.6k | 阅读时长 ≈ 7

自从开学以来，有一段时间没有更新博客了，所以这两天打算把一些东西重拾一下然后做一下总结。

PopupWindow

这是一个一旦使用就会喜欢上的一个控件，使用官方的话先来介绍一下这个东西，他是一个弹出窗口“该类可以用于显示任意视图的弹出窗口。弹出窗口是一个浮动容器，显示在当前活动顶部”，但是这个控件相对于dialog的好处是可以自定义其中的内容，没有标题，不是给其他布局添加蒙层效果，而且它默认不会响应返回键，最重要的是可以自定义他的位置，而且十分的灵活。
先给出：官方文档

首先需要创建

1
2
3
4
5
6
//参数列表有多种，可以传入自定义的contentView，设置宽高，是否可点击等
View contentView = LayoutInflater.from(MainActivity.this).inflate(R.layout.pop,null);
PopupWindwo popWnd = PopupWindow (context);
popWnd.setContentView(contentView);
popWnd.setWidth(ViewGroup.LayoutParams.WRAP_CONTENT);
popWnd.setHeight(ViewGroup.LayoutParams.WRAP_CONTENT)；

设置显示的方法

1
2
3
4
5
6
//显示窗口（相对于参照物控件，下方自定义位置，xy分贝表两轴的偏移量）
showAsDropDown(View anchor,int xoff,int yoff)
//显示在正下方
showAsDropDown(View anchor)
//相对于参照物的位置
showAtLocation(View parent, int gravity, int x, int )

常用的公用方法

1
2
3
4
5
6
.dismiss()//关闭弹窗
.setFocusable()//设置是否可以获取焦点
.setTouchable()//是否可以点击
.setContentView()//设置内容
....
还有一些获取宽高，更新视图的一些方法可以参照官方文档。

这两天发现一个比较好用的开源控件，设置起来更是十分方便。

结合RecyclerView的使用

由于项目需要在一个Recyclerview列表中实现一个类似qq聊天长按删除的一个效果，并且有一些总结。

1
2
3
4
5
//声明接口，接口方式耦合度低
    /**item上控件点击监听*/
    public interface ItemEditTextClickListener{
        void onWordListEdtClick(int position);
    }

适配器中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//声明接口
private ItemEditTextClickListener mEditTextClickListener;

//onbindViewHolder中绑定监听事件
 //询问线索情况气泡弹出的点击事件
        holder.wcEditText.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mEditTextClickListener.onWordListEdtClick(position);
            }
        });

//并在适配器中提供对外的调用
    /**点击Edt监听对外调用*/
    public void setEditTextClickListener(GameWord.ItemEditTextClickListener itemEditTextClickListener){
        mEditTextClickListener=itemEditTextClickListener;
    }

Activity中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
private CustomPopWindow mCustomPopWindow;//本次使用的开源框架

//onCreate()中
//设置Edt的监听
        adapter.setEditTextClickListener(this);

/**
     * 点击之后弹出popupwindow
     * */
    @Override
    public void onWordListEdtClick(int position) {
        Log.d("MakeGameActivity","On Edt click");
        View contentView = LayoutInflater.from(this).inflate(R.layout.pop_menu,null);
        //找到当前position对应的item
        View view=mlayoutManager.findViewByPosition(position);
        //构造popwindow
        mCustomPopWindow = new CustomPopWindow.PopupWindowBuilder(this)
                .setFocusable(true)
                .setView(contentView)
                .setOutsideTouchable(true)
                .create()
                .showAsDropDown(view,500,-580);
        //添加弹框的点击事件
        popupClick(contentView,position);
    }

/**气泡中的item点击事件*/
    private void popupClick(View contentView,final int position){

        final GameWord gameWord=gameWordList.get(position);
        //获取到EditText
        View layout=(View)recyclerView.getChildAt(position);
        final AutoCompleteTextView autoCompleteTextView=layout.findViewById(R.id.word_clue_edit_view);
        View.OnClickListener listener=new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                if (mCustomPopWindow!=null){
                    mCustomPopWindow.dissmiss();
                }
                String showContent="";
                switch (v.getId()){
                    case R.id.first_menu:
                        autoCompleteTextView.setText("1");
                        break;
                    case R.id.second_menu:
                        autoCompleteTextView.setText("2");
                        break;
                    case R.id.third_menu:
                        showContent="点击菜单三";
                        break;
                    case R.id.forth_menu:
                        showContent="点击菜单四";
                        break;
                        default:break;
                }              //Toast.makeText(MakeGameActivity.this,showContent,Toast.LENGTH_SHORT).show();
            }
        };
        //为四个litm绑定监听
        contentView.findViewById(R.id.first_menu).setOnClickListener(listener);
        contentView.findViewById(R.id.second_menu).setOnClickListener(listener);
        contentView.findViewById(R.id.third_menu).setOnClickListener(listener);
        contentView.findViewById(R.id.forth_menu).setOnClickListener(listener);
    }

最后是popupWindow的布局可以自定义设计。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
<?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:background="@color/colorFabIcon"
    android:orientation="vertical">

    <LinearLayout
        android:id="@+id/first_menu"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:padding="5dp"
            android:src="@drawable/clues" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="40dp"
            android:text="添加中文" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/second_menu"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:padding="5dp"
            android:src="@drawable/bd_ocr_light_off" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="40dp"
            android:text="添加英文" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/third_menu"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:padding="5dp"
            android:src="@drawable/xiansuo" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="40dp"
            android:text="手动输入" />
    </LinearLayout>
    <LinearLayout
        android:id="@+id/forth_menu"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:orientation="horizontal">
        <ImageView
            android:layout_width="35dp"
            android:layout_height="35dp"
            android:padding="5dp"
            android:src="@drawable/notebook" />
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="35dp"
            android:gravity="center"
            android:paddingLeft="20dp"
            android:paddingRight="40dp"
            android:text="取消" />
    </LinearLayout>
</LinearLayout>

此外还有一线需要总结一下，那就是在外部如何获根据position取到Recyclerview中item的子控件。思路大概就是，首先根据position获取对应的childview。之后通过对应的childView根据id获取到子控件。

1
2
3
//获取到EditText
        View layout=(View)recyclerView.getChildAt(position);
        final AutoCompleteTextView autoCompleteTextView=layout.findViewById(R.id.word_clue_edit_view);

尽量不要给EditText添加点击事件，因为EditText首先会获取到焦点，之后再点击才会触发点击事件。也就是在没有获取到焦点的时候双击才会触发点击事件。一些点击之间的冲突还有待在深入研究一下。还有在设计用户交互的时候尽量不要做一些超越一般用户认知的交互。点击事件尽量使用按钮的形式，不要使用一些其他乱七八糟的东西，比如文本，图片之类的。
还有进一步的用户体验，比如在输入完文本自用隐藏软键盘，当需要编辑的时候使用代码为用户自动弹出软键盘。

1
2
3
4
5
6
//强制关闭键盘
InputMethodManager imm = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.hideSoftInputFromWindow(activity.getCurrentFocus().getWindowToken(), 0);
//强制显示
InputMethodManager imm = (InputMethodManager) activity.getSystemService(Context.INPUT_METHOD_SERVICE);
        imm.showSoftInput(activity.getWindow().getDecorView(),InputMethodManager.SHOW_FORCED);

开学是比较忙，一些东西落下了，所以之后会继续坚持做总结。