Android自定義元件之ListPopWindow

最近小編在學習IOS開發，感觸頗深，看到了iOS裡面封裝了好多元件，很多元件都是iOS自帶的，相信一般的小公司的産品經理都是按照iOS的互動來設計UI，而且還要求Android要和iOS統一風格，這讓Android開發人員很頭痛，iOS自帶元件很容易實作，而Android可能需要重寫控件去配合iOS的效果。其實這樣必然會導緻性能的小将，或有些許的卡頓。小編個人認為，按照各自系統的風格和規範進行設計才能把自己的優點發揮到最大化。

下面就引出了今天的主題，自定義元件ListPopWindow，iOS中，這個效果是自帶的。PopWindow可以說在項目裡用的比較多的了，可能有n處要用到PopWindow，那麼自定義一個PopWindow，到處來用更友善一些。

先看一下效果：

效果就是這樣，看一下實作，其實也沒多難，就是想開源出來供小夥伴們使用，如有不合理地方，希望大家多多指正。

1.自定義PopWindow

首先我們分析一下，這樣的效果肯定是一個PopWindow嵌套着listview，而上面的title、和下面的cancel是兩個文本框，實作起來也比較簡單。

然後我們在PopWindow中聲明兩個接口，用來回調cancel和item的點選事件

public interface  OnPopItemClickListener{
        void onPopItemClick(View view,int position);
    }

    public interface OnBottomTextviewClickListener{
        void onBottomClick();
    }

然後再設定一些PopWindow的一些屬性

parentView = LayoutInflater.from(context).inflate(R.layout.list_popwindow,null);
        setContentView(parentView);
        lv = (ListView) parentView.findViewById(R.id.lv_popwindow);
        //設定彈出窗體的高
        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        this.setHeight(ViewGroup.LayoutParams.MATCH_PARENT);
        //設定彈出窗體可點選
        this.setFocusable(true);
        //執行個體化一個ColorDrawable顔色為半透明
        ColorDrawable dw = new ColorDrawable(0xb0000000);
        //設定SelectPicPopupWindow彈出窗體的背景
        this.setBackgroundDrawable(dw);

看一下整體的代碼吧：

/**
 * Created by Hankkin on 16/1/25.
 */
public class ListPopWindow extends PopupWindow{

    private Context context;        //上下文
    private View parentView;        //父視圖
    private List<PopBean> dataList; //item資料源
    private OnPopItemClickListener listener;    //item點選接口
    private ListView lv;    //item清單視圖
    private View viewTop;   //title視圖   
    private String topText,bottomText;  //title文字，bottom文字
    private TextView tvTop,tvBottom;    //title文本，bottom文本
    private PopWindowAdapter adapter;   //擴充卡
    private OnBottomTextviewClickListener bottomListener;//底部點選接口


    public interface  OnPopItemClickListener{
        void onPopItemClick(View view,int position);
    }

    public interface OnBottomTextviewClickListener{
        void onBottomClick();
    }

    public ListPopWindow(Context context,OnPopItemClickListener listener,OnBottomTextviewClickListener bottomListener,
                         View parentView,List<PopBean> dataList,String bottomText,String topText){
        this.context = context;
        this.listener = listener;
        this.parentView = parentView;
        this.dataList = dataList;
        this.bottomListener = bottomListener;
        this.topText = topText;
        this.bottomText = bottomText;

        initViews();
    }


    private void initViews(){
        parentView = LayoutInflater.from(context).inflate(R.layout.list_popwindow,null);
        setContentView(parentView);
        lv = (ListView) parentView.findViewById(R.id.lv_popwindow);
        //設定彈出窗體的高
        this.setWidth(ViewGroup.LayoutParams.MATCH_PARENT);
        this.setHeight(ViewGroup.LayoutParams.MATCH_PARENT);
        //設定彈出窗體可點選
        this.setFocusable(true);
        //執行個體化一個ColorDrawable顔色為半透明
        ColorDrawable dw = new ColorDrawable(0xb0000000);
        //設定SelectPicPopupWindow彈出窗體的背景
        this.setBackgroundDrawable(dw);

        //view添加OnTouchListener監聽判斷擷取觸屏位置如果在布局外面則銷毀彈出框
        parentView.setOnTouchListener(new View.OnTouchListener() {
            public boolean onTouch(View v, MotionEvent event) {
                int height = parentView.findViewById(R.id.ll_bottom).getTop();
                int y = (int) event.getY();
                if (event.getAction() == MotionEvent.ACTION_UP) {
                    if (y > height) {
                        dismiss();
                    }
                }
                return true;
            }
        });

        update();
        viewTop = parentView.findViewById(R.id.view_line1);
        tvBottom = (TextView) parentView.findViewById(R.id.tv_popwindow_bottom);
        tvTop = (TextView) parentView.findViewById(R.id.tv_popwindow_first);
        adapter = new PopWindowAdapter(context,dataList,false);
        lv.setAdapter(adapter);

        if (!TextUtils.isEmpty(topText)){
            tvTop.setVisibility(View.VISIBLE);
            tvTop.setText(topText);
            viewTop.setVisibility(View.VISIBLE);
        }
        else {
            tvTop.setVisibility(View.GONE);
            viewTop.setVisibility(View.GONE);
        }

        if (!TextUtils.isEmpty(bottomText)){
            tvBottom.setVisibility(View.VISIBLE);
            tvBottom.setText(bottomText);
        }
        else {
            tvBottom.setVisibility(View.GONE);
        }

        lv.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                listener.onPopItemClick(view, i);
            }
        });

        tvBottom.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                bottomListener.onBottomClick();
            }
        });

    }

}

2.看一些item的bean

這裡我就聲明了title和圖檔的id

package com.hankkin.library;

/**
 * Created by Hankkin on 16/1/25.
 */
public class PopBean {
    private String title;
    private int icon_res;

    public String getTitle() {
        return title;
    }

    public void setTitle(String title) {
        this.title = title;
    }

    public int getIcon_res() {
        return icon_res;
    }

    public void setIcon_res(int icon_res) {
        this.icon_res = icon_res;
    }

    public PopBean(String title, int icon_res) {
        this.title = title;
        this.icon_res = icon_res;
    }
}

3.自定義adapter擴充卡

這裡面可能要注意的就是item的背景設定，有的是上半部分圓角、有的是下半部分圓角，特殊處理一下

@Override
    public View getView(int i, View view, ViewGroup viewGroup) {
        ViewHolder holder;
        if (view == null) {
            view = inflater.inflate(R.layout.listview_popwindow_item, null);
            holder = new ViewHolder();
            holder.tv_name = (TextView) view.findViewById(R.id.tv_title);
            holder.v_line = (View) view.findViewById(R.id.v_line);
            view.setTag(holder);
        } else {
            holder = (ViewHolder) view.getTag();
        }

        holder.tv_name.setText(dataList.get(i).getTitle());


        if (dataList.size() - 1 == i) {
            holder.v_line.setVisibility(View.INVISIBLE);
            holder.tv_name.setBackground(context.getResources().getDrawable(R.drawable.selector_bottom_half));
        } else {
            holder.v_line.setVisibility(View.VISIBLE);
            holder.tv_name.setBackground(context.getResources().getDrawable(R.drawable.list_gray_item));
        }
        return view;
    }

最後看一下調用

Activity需要實作item接口（OnPopItemClickListener）和底部按鈕接口（OnBottomTextviewClickListener）

public void show(View view){
        List<PopBean> pops = new ArrayList<>();
        for (int i=0;i<5;i++){
            PopBean pop = new PopBean("item"+i,0);
            pops.add(pop);
        }
        popWindow = new ListPopWindow(MainActivity.this,this,this,rl,pops,"cancel","title");
        popWindow.showAtLocation(rl, Gravity.CENTER| Gravity.BOTTOM,0,0);
    }

最後小編附上github源碼位址，小夥伴們可以直接用哦。

https://github.com/Hankkin/ListPopwidowDemo

Android自定義元件之ListPopWindow

1.自定義PopWindow

2.看一些item的bean

3.自定義adapter擴充卡

最後看一下調用

繼續閱讀

AppCode的使用

iOS FDMB添加新字段

為什麼不再使用 Android MVVM

方法數超了65535 無法安裝的解決方案

android調用系統相機拍攝擷取照片的兩種方法

Android調用系統拍照擷取圖檔問題

iOS開發之送出App前需要準備的材料

iOS APP送出上架最新流程

Android Studio中Make Project、Clean Project、Rebuild Project 的作用

新買的便攜式藍牙标簽列印機內建測試起因分析提供的SDK開始使用藍牙測試工具進行測試列印列印亂碼分析JAVA中Unicode轉ANCI工具連結

Android面試題——5.常見面試官提問Android面試題①

Android常用工具類簡介目錄

android常用工具類轉載自：http://www.trinea.cn/android/android-common-utils/Android常用工具類

EGORefreshTableHeaderView 解讀代碼解讀 ELTableViewController 的使用寫在最後

今日頭條iOS用戶端啟動速度優化技術調研實測資料

Android電視機（機頂盒）初次開發的一些經驗分享