自定義選擇框和選擇開關

爲了滿足越來越好看的界面效果，android內部的控件已經無法滿足大量程序員們的需求。那麼自定義控件應運而生，下面我們寫一個自定義的選擇框:

首先activity_down_selected.xml佈局文件:

<RelativeLayout 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"
    android:background="#22000000" >

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp" >

        <EditText
            android:id="@+id/et"
            android:layout_width="150dp"
            android:layout_height="40dp" />

        <ImageView
            android:id="@+id/iv"
            android:layout_centerVertical="true"
            android:layout_alignRight="@id/et"
            android:src="@android:drawable/ic_menu_add"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"/>
    </RelativeLayout>

</RelativeLayout>

接着呢就是咱們的代碼實現了DownSelectedActivity.java:

package com.xuhao.downselect;

import java.util.ArrayList;

import android.app.Activity;
import android.graphics.Color;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.BaseAdapter;
import android.widget.EditText;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.TextView;

public class DownSelectedActivity extends Activity implements OnClickListener {
	private EditText et;
	private ImageView iv;
	private ArrayList<String> lists = new ArrayList<String>();
	private int popwindowHeight = 300;
	private ListView listView;
	private MyBaseAdapter adapter;
	private PopupWindow popupWindow;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		initView();
		initListener();
		initData();

	}

	private void initView() {
		setContentView(R.layout.activity_down_selected);
		et = (EditText) findViewById(R.id.et);
		iv = (ImageView) findViewById(R.id.iv);

	}

	private void initListener() {
		iv.setOnClickListener(this);		
	}

	private void initData() {
		for (int i = 0; i < 15; i++) {
			lists.add(90000 + i + "");
		}
		initListView();
	}

	private void initListView() {
		listView = new ListView(this);
		listView.setBackgroundColor(Color.WHITE);
		listView.setVerticalScrollBarEnabled(false);// 隱藏listview的滾動條
		adapter = new MyBaseAdapter();
		listView.setAdapter(adapter);
		
		listView.setOnItemClickListener(new OnItemClickListener() {

			@Override
			public void onItemClick(AdapterView<?> parent, View view,
					int position, long id) {
				et.setText(lists.get(position));
				popupWindow.dismiss();
			}
		});
	}

	private void showNumberLists() {
		if (popupWindow == null) {
			popupWindow = new PopupWindow(listView, et.getWidth(),
					popwindowHeight);
		}

		popupWindow.setFocusable(true);
		popupWindow.setBackgroundDrawable(new BitmapDrawable());
		popupWindow.setOutsideTouchable(true);
		popupWindow.showAsDropDown(et, 0, 0);
	}

	@Override
	public void onClick(View v) {
		switch (v.getId()) {
		case R.id.iv:
			showNumberLists();
			break;
		}
	}

	class MyBaseAdapter extends BaseAdapter {

		@Override
		public int getCount() {
			return lists.size();
		}

		@Override
		public View getView(final int position, View convertView,
				ViewGroup parent) {
			final View view = View.inflate(DownSelectedActivity.this,
					R.layout.adapter_item, null);
			TextView tv = (TextView) view.findViewById(R.id.tv);
			ImageButton ivs = (ImageButton) view.findViewById(R.id.iv);
			tv.setText(lists.get(position));
			ivs.setOnClickListener(new OnClickListener() {

				@Override
				public void onClick(View v) {
					lists.remove(position);
					notifyDataSetChanged();

					int listviewHeight = lists.size() * view.getHeight();
					popupWindow.update(et.getWidth(),
							listviewHeight > popwindowHeight ? popwindowHeight
									: listviewHeight);

					if (lists.size() == 0) {
						popupWindow.dismiss();
						iv.setVisibility(View.GONE);
					}
				}
			});
			return view;
		}

		@Override
		public Object getItem(int position) {
			return lists.get(position);
		}

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

	}

}

那麼咱們還需要一個顯示下拉信息的佈局文件adapter_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="wrap_content"
    android:gravity="center_vertical"
    android:padding="5dp"
    android:descendantFocusability="blocksDescendants"
    android:orientation="horizontal" >
<!-- 如果listview中存在button，checedbox等可以獲得焦點的空間需要加上這一句 特麼才能點擊出效果  android:descendantFocusability="blocksDescendants"-->
    <TextView
        android:id="@+id/tv"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:paddingRight="10dp"
        android:drawableLeft="@android:drawable/ic_btn_speak_now"
        android:gravity="center_vertical"
        android:text="90000" />

    <ImageButton
        android:id="@+id/iv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@android:drawable/ic_delete" />

</LinearLayout>

最後效果就實現了:

點擊之後文字進入編輯框(哈哈，有點醜)
。

下面的是開關選擇，自己用ps做了個圖片大家不要介意：

首先還是佈局文件:

<RelativeLayout 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" >


    <com.xuhao.downselect.view.ToggledSelectedView
        android:id="@+id/tsv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" 
        android:layout_centerInParent="true">
    </com.xuhao.downselect.view.ToggledSelectedView>


</RelativeLayout>

表着急接着就是自定義的view:

package com.xuhao.downselect.view;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

/**
 * 自定義開關
 * 
 * @author json
 * 
 */
public class ToggledSelectedView extends View {
	private ToggleState toggleState = ToggleState.Open;// 開關狀態
	private Bitmap sildeBg;
	private Bitmap switchBg;
	private int currentX;
	private boolean silding = false;

	// 如果view想要在java代碼中動態創建，走這個方法
	public ToggledSelectedView(Context context) {
		super(context);
	}

	// 如果是在佈局中使用只需要重寫這個狗仔方法
	public ToggledSelectedView(Context context, AttributeSet attrs) {
		super(context, attrs);
	}

	public enum ToggleState {
		Open, Close;
	}

	/**
	 * 設置滑動背景
	 * 
	 * @param on
	 */
	public void setSildeBackgroundResource(int sildeBackground) {
		sildeBg = BitmapFactory.decodeResource(getResources(), sildeBackground);
	}

	/**
	 * 設置滑動塊背景
	 * 
	 * @param off
	 */
	public void setSwitchBackgroundResource(int switchBackground) {
		switchBg = BitmapFactory.decodeResource(getResources(),
				switchBackground);
	}

	/**
	 * 設置開關狀態
	 * 
	 * @param open
	 */
	public void setToggleState(ToggleState state) {
		toggleState = state;
	}

	/**
	 * 1.測量
	 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		setMeasuredDimension(sildeBg.getWidth(), sildeBg.getHeight());

	}

	/**
	 * 3.繪製
	 */
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		// 1.繪製背景圖片
		canvas.drawBitmap(sildeBg, 0, 0, null);
		// 2.繪製開關
		if (silding) {
			int left = currentX - switchBg.getWidth() / 2;
			if (left < 0)
				left = 0;
			if (left > sildeBg.getWidth() - switchBg.getWidth()) {
				left = sildeBg.getWidth() - switchBg.getWidth();
			}
			canvas.drawBitmap(switchBg, left, 0, null);
		} else {

			if (toggleState == ToggleState.Open) {
				canvas.drawBitmap(switchBg,
						sildeBg.getWidth() - switchBg.getWidth(), 0, null);
			} else {
				canvas.drawBitmap(switchBg, 0, 0, null);
			}

		}

	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		currentX = (int) event.getX();
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			silding = true;
			break;
		case MotionEvent.ACTION_MOVE:
			break;
		case MotionEvent.ACTION_UP:
			silding = false;
			int centerX = sildeBg.getWidth() / 2;
			if (currentX > centerX) {
				if (toggleState != ToggleState.Open) {
					toggleState = ToggleState.Open;
					if (buttonStateListener != null) {
						buttonStateListener
								.setOnToggleButtonChange(toggleState);
					}
				}

			} else {
				if (toggleState != ToggleState.Close) {
					toggleState = ToggleState.Close;
					if (buttonStateListener != null) {
						buttonStateListener
								.setOnToggleButtonChange(toggleState);
					}
				}

			}
			break;
		}
		invalidate();
		return true;
	}

	private OnToggleButtonStateListener buttonStateListener;

	public void setOnToggleButtonChangeListener(
			OnToggleButtonStateListener buttonStateListener) {
		this.buttonStateListener = buttonStateListener;
	};

	// 通過自定義接口把數據傳遞給調用者類似於觀察者模式
	public interface OnToggleButtonStateListener {
		void setOnToggleButtonChange(ToggleState state);
	}

}

接着就是代碼了：

package com.xuhao.downselect;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.widget.Toast;

import com.xuhao.downselect.view.ToggledSelectedView;
import com.xuhao.downselect.view.ToggledSelectedView.OnToggleButtonStateListener;
import com.xuhao.downselect.view.ToggledSelectedView.ToggleState;

public class MainActivity extends Activity {
	private ToggledSelectedView tsv;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		initView();
		initData();
	}

	private void initView() {
		setContentView(R.layout.activity_main);
		tsv = (ToggledSelectedView) findViewById(R.id.tsv);
	}

	private void initData() {
		tsv.setSildeBackgroundResource(R.drawable.on);
		tsv.setSwitchBackgroundResource(R.drawable.off);
		tsv.setToggleState(ToggleState.Open);
		tsv.setOnToggleButtonChangeListener(new OnToggleButtonStateListener() {

			@Override
			public void setOnToggleButtonChange(ToggleState state) {
				Toast.makeText(MainActivity.this,
						state == ToggleState.Open ? "開啓" : "關閉",
						Toast.LENGTH_SHORT).show();
				if(state == ToggleState.Open){
					MainActivity.this.startActivity(new Intent(MainActivity.this,DownSelectedActivity.class));
				}
			}
		});
	}

}

項目下載地址：https://github.com/xh2015/downselect-switch.git