android自定義picker組件，動畫從底部彈出文字選擇器

更新了一下，彈出的佈局改成PopupWindow，動態彈出picker。

想要實現底部出現的文字選擇器，andorid沒有現成的組件，本身封裝了一個。下面上代碼： 自定義組件picker：

import android.content.Context;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.BaseAdapter;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.ListView;
import android.widget.TextView;

import com.eccl.envimonitor.R;

/**
 * Created by zhangda on 2015/9/4.
 * 自定義組件：數據選擇器
 */
public class Picker{
    private Button doneBtn;
    private Button cancelBtn;
    private ListView picker_listview;
    private String[] mDatas = {};
    private Context mContext;
    private int selectedItemPosition = 0;
    private OnSelectDoneListener mListner;
    private Picker me;
    private LinearLayout picker;
    private PopupWindowFromBottom menuWindow;
    private View mParentView;

    /***
     * 構造方法
     * @param context
     * @param parentView 父view
     */
    public Picker(Context context, View parentView, String[] datas) {
        me = this;
        mContext = context;
        mParentView = parentView;
        picker = (LinearLayout)LayoutInflater.from(context).inflate(R.layout.picker_content, null);
        doneBtn = (Button)picker.findViewById(R.id.picker_done);
        cancelBtn = (Button)picker.findViewById(R.id.picker_cancel);
        picker_listview = (ListView)picker.findViewById(R.id.picker_listview);
        menuWindow = new PopupWindowFromBottom(context, picker);
        bindBtnsEvent();
        refreshData(datas);
    }

    private void bindBtnsEvent() {
        doneBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                mListner.onSelectDone(selectedItemPosition);
                menuWindow.dismiss();
            }
        });
        cancelBtn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                menuWindow.dismiss();
            }
        });
    }

    /***
     * 供外部調用
     * @param listener
     */
    public void setOnSelectDoneListener(OnSelectDoneListener listener){
        mListner = listener;
    }

    private void refreshData(String[] datas){
        mDatas = datas;
        final String[] dataForuse = mDatas;
        BaseAdapter pickerAdapter = new BaseAdapter() {
            @Override
            public int getCount() {
                return dataForuse.length;
            }

            @Override
            public Object getItem(int i) {
                return null;
            }

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

            @Override
            public View getView(int i, View convertView, ViewGroup viewGroup) {
                viewHolder viewHoder = null;
                if(convertView == null){
                    viewHoder = new viewHolder();
                    convertView = LayoutInflater.from(mContext).inflate(R.layout.item_picker_listview, null);
                    viewHoder.textView = (TextView)convertView.findViewById(R.id.company_name);
                    convertView.setTag(viewHoder);
                }else{
                    viewHoder = (viewHolder)convertView.getTag();
                }
                viewHoder.textView.setText(dataForuse[i]);
                viewHoder.textView.setTag(dataForuse[i]);
                if(i == selectedItemPosition){
                    viewHoder.textView.setTextColor(mContext.getResources().getColor(R.color.toolbarbg));
                }else{
                    viewHoder.textView.setTextColor(mContext.getResources().getColor(R.color.black));
                }
                return convertView;
            }
        };

        picker_listview.setAdapter(pickerAdapter);
        picker_listview.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> adapterView, View view, int i, long l) {
                selectedItemPosition = i;
            }
        });
    }

    private class viewHolder{
        private TextView textView;
    }

    public void show(){
        if(!menuWindow.isShowing()){
            refreshData(mDatas);
            menuWindow.showAtLocation(mParentView, Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0); //設置layout在PopupWindow中顯示的位置
        }
//        if (menuWindow.isShowing()) {
//            menuWindow.dismiss();
//        } else {
//            selectedItemPosition = 0;
//            refreshData(mDatas);
//            menuWindow.showAtLocation(mParentView, Gravity.BOTTOM | Gravity.CENTER_HORIZONTAL, 0, 0); //設置layout在PopupWindow中顯示的位置
//        }
    }

    /***
     *
     * 選擇完畢調用的監聽器
     * @author zhangda
     */
    public interface OnSelectDoneListener{
        void onSelectDone(int i);
    }
}

picker_content.xml文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="220dp"
    android:visibility="gone"
    android:layout_alignParentBottom="true"
    android:background="@color/bg">
    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="40dp">

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/picker_cancel"
            android:id="@+id/picker_cancel"
            android:layout_alignParentLeft="true"
            android:background="@color/touming"
            android:textColor="@color/toolbarbg" />

        <Button
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/picker_done"
            android:id="@+id/picker_done"
            android:layout_alignParentRight="true"
            android:background="@color/touming"
            android:textColor="@color/toolbarbg" />
    </RelativeLayout>

    <ListView
        android:layout_width="match_parent"
        android:layout_height="180dp"
        android:id="@+id/picker_listview"
        android:choiceMode="singleChoice"
        android:listSelector="#00000000" />
</LinearLayout>

item_picker_listview.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:paddingTop="10dp"
    android:paddingBottom="10dp">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceSmall"
        android:text="Medium Text"
        android:id="@+id/company_name" />
</LinearLayout>

自定義的popupWindow，PopupWindowFromBottom類：

import android.app.Activity;
import android.content.Context;  
import android.graphics.drawable.ColorDrawable;  
import android.view.LayoutInflater;  
import android.view.MotionEvent;  
import android.view.View;  
import android.view.View.OnClickListener;  
import android.view.View.OnTouchListener;  
import android.view.ViewGroup.LayoutParams;  
import android.widget.Button;  
import android.widget.PopupWindow;

import com.eccl.envimonitor.R;

public class PopupWindowFromBottom extends PopupWindow {
  
  
    public PopupWindowFromBottom(Context context, final View view) {
        super(context);  
        LayoutInflater inflater = (LayoutInflater) context  
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);  

        //設置按鈕監聽
        //設置SelectPicPopupWindow的View
        this.setContentView(view);
        //設置SelectPicPopupWindow彈出窗體的寬  
        this.setWidth(LayoutParams.FILL_PARENT);  
        //設置SelectPicPopupWindow彈出窗體的高  
        this.setHeight(LayoutParams.WRAP_CONTENT);  
        //設置SelectPicPopupWindow彈出窗體可點擊  
        this.setFocusable(true);  
        //設置SelectPicPopupWindow彈出窗體動畫效果  
        this.setAnimationStyle(R.style.PopupAnimation);
        //實例化一個ColorDrawable顏色爲半透明  
        ColorDrawable dw = new ColorDrawable(0xb0000000);  
        //設置SelectPicPopupWindow彈出窗體的背景  
        this.setBackgroundDrawable(dw);  
        //mMenuView添加OnTouchListener監聽判斷獲取觸屏位置若是在選擇框外面則銷燬彈出框  
        view.setOnTouchListener(new OnTouchListener() {
              
            public boolean onTouch(View v, MotionEvent event) {  
                  
                int height = view.findViewById(R.id.picker_cancel).getTop();
                int y=(int) event.getY();  
                if(event.getAction()==MotionEvent.ACTION_UP){  
                    if(y<height){  
                        dismiss();  
                    }  
                }                 
                return true;  
            }  
        });  
  
    }  
  
}

push_bottom_in.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 上下滑入式 -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

<translate
    android:duration="200"
    android:fromYDelta="100%p"
    android:toYDelta="0"
    />
<alpha
    android:fromAlpha="0.0"
    android:toAlpha="1.0"
    android:duration="200"
    />
</set>

push_bottom_out.xml

<?xml version="1.0" encoding="utf-8"?>
<!-- 上下滑入式 -->
<set xmlns:android="http://schemas.android.com/apk/res/android" >

    
    <translate
        android:duration="200"
        android:fromYDelta="0"
        android:toYDelta="50%p" />
 <alpha
	android:fromAlpha="1.0"
	android:toAlpha="0.0"
	android:duration="200"
	/>  
</set>

style.xml

<style name="PopupAnimation" parent="android:Animation">
        <item name="android:windowEnterAnimation">@anim/push_bottom_in</item>
        <item name="android:windowExitAnimation">@anim/push_bottom_out</item>
    </style>

以上是自定義的部分，那麼如何使用呢？也很簡單

在須要使用picker的activity裏面：

Picker picker_wuran_Picker;
search_wuran_button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                picker_wuran_Picker.show();
            }
        });

        final String []wuran_headers = {"企業名稱", "排口", "SO2(mg/Nm3)", "NOX(mg/Nm3)", "煙塵(mg/Nm3)", "煙氣流量(Nm3/h)"};
        picker_wuran_Picker = new Picker(WuRanActivity.this, feiqi_wuran_listView, wuran_headers);
        picker_wuran_Picker.setOnSelectDoneListener(new Picker.OnSelectDoneListener() {
            @Override
            public void onSelectDone(int i) {
                Toast.makeText(WuRanActivity.this, wuran_headers[i], Toast.LENGTH_SHORT).show();
            }
        });

有圖有真相：