天天看點

Andorid使用自定義View實作通訊錄,媒體檔案等等的ListView的字母索引

14年8月13日      附加:

*安卓4.3以後系統通訊錄表的sortkey字段儲存的是中文姓氏了,是以需要先将中文轉為拼音再排序。具體代碼實作有時間我再貼上了。

14年6月27日

最近把公司的網絡電話的接口弄出來自己寫了個網絡電話,在實作通訊錄時感覺界面做得比較滿意,于是就貼出來供大家分享。

如果你沒有耐心看代碼的話我就直接把源碼貼上來了,裡面的注釋不是太多,不過你有點基礎的話看懂很容易的。

下載下傳位址:http://download.csdn.net/download/u013201152/7560339

截圖:

Andorid使用自定義View實作通訊錄,媒體檔案等等的ListView的字母索引

好了,話多說,先将 字母索引自定義View的代碼先貼上來:

public class IndexBar extends View {
	//定義接口将索引改變時要執行的代碼交給使用者
	public interface OnIndexSelectedListener{
		public void indexChange(char index);
		public void indexSelected(char index);
	}
	//設定接口對象
	public void setOnIndexSelectedListener(OnIndexSelectedListener l){
		osi=l;
	}
	private OnIndexSelectedListener osi;
	//索引字母
	private char[] indexs = new char[] { '#', 'A', 'B', 'C', 'D', 'E',
			'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
			'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z' };
	//畫筆
	Paint paint=new Paint();
	public IndexBar(Context context, AttributeSet attrs) {
		super(context, attrs);
		setClickable(true);//允許觸發觸摸
	}
	
	int selected=-1;
	
	//每個索引字母所占的高度
	int sigleHeight;
	@Override
	protected void onDraw(Canvas canvas) {
		super.onDraw(canvas);
		int height = getHeight()-10;
		int width = getWidth();
		sigleHeight = height / indexs.length; 
		for (int i = 0; i < indexs.length; i++) {
			paint.setColor(Color.GRAY);
			paint.setTextSize(20);
			paint.setAntiAlias(true);
			// 繪畫的位置
			float xPos = width / 2 - paint.measureText(indexs[i]+"") / 2;
			float yPos = sigleHeight * i + sigleHeight;
			canvas.drawText(indexs[i]+"", xPos, yPos, paint);
			paint.reset();
		}
	}
	//目前選中的索引字母
	char currentIndex=' ';
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		float y=event.getY();
		//計算出目前滑動到的索引位置
		int i=(int) Math.ceil(y/sigleHeight);
		if(i<1){
			i=1;
		}else if(i>indexs.length){
			i=indexs.length;
		}
		char index=indexs[i-1];
		//當滑動到的索引改變的時候調用 indexChange
		if(currentIndex!=index){
			currentIndex=index;
			if(osi!=null){
				osi.indexChange(currentIndex);
			}
		}
		//當滑動觸摸結束調用indexSelected
		if(event.getAction()==MotionEvent.ACTION_UP){
			if(osi!=null){
				osi.indexSelected(index);
			}
			currentIndex=' ';
		}
		return super.onTouchEvent(event);
	}
}
           

然後是Layout界面布局檔案的代碼:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <ListView
        android:id="@+id/lv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_toLeftOf="@+id/ib"
        android:layout_marginLeft="5dp"
        android:scrollbars="none"
        android:layout_weight="1" >
    </ListView>
	<xj.main.IndexBar
	    android:id="@+id/ib"
	android:layout_height="match_parent"
	android:layout_alignParentRight="true"
	android:layout_width="20dp">
	</xj.main.IndexBar>
	<TextView 
	    android:id="@+id/tvShow"
	    android:layout_height="wrap_content"
	    android:layout_width="wrap_content"
	    android:background="@drawable/show_bg"
	    android:gravity="center"
	    android:textColor="#fff"
	    android:visibility="gone"
	    android:textSize="36sp"
	    android:text="A"
	    android:layout_centerInParent="true" />
</RelativeLayout>           

好了,現在預覽已經可以看到基本的樣子了,那麼我們現在編碼實作 獲得所有聯系人,然後将他們展示出來,并且響應我們自定義的IndexBar的觸摸改變索引。

首先是獲得系統聯系人的權限:

<uses-permission android:name="android.permission.READ_CONTACTS" />
    <uses-permission android:name="android.permission.READ_PHONE_STATE" />           

然後定義JavaBean儲存聯系人資料:

class Contacts {
	String name;
	String number;
	char sortKey;
	boolean isHead;

	@Override
	public String toString() {
		return "Contacts [name=" + name + ", number=" + number + "]";
	}
}           

我們需要定義這些字段:

String[] PHONES_PROJECTION = new String[] { Phone.DISPLAY_NAME,
			Phone.NUMBER, "sort_key" };
	IndexBar bar;
	ListView lv;

        List<Contacts> beans = new ArrayList<Contacts>();
	TextView tvShow;//這個是當使用者按下IndexBar時中間用來顯示出現的TextView           

這裡是獲得聯系人資料的代碼:

TelephonyManager tm = (TelephonyManager) this
				.getSystemService(TELEPHONY_SERVICE);
		String tel = tm.getLine1Number();
		ContentResolver resolver = getContentResolver();
		// 擷取手機聯系人
		Cursor c = resolver.query(Phone.CONTENT_URI, PHONES_PROJECTION, null,
				null, "sort_key COLLATE LOCALIZED asc");
		Contacts bean = null;
		char sortKey = ' ';
		while (c.moveToNext()) {
			bean = new Contacts();
			bean.name = c.getString(0);
			bean.number = c.getString(1).replace(" ", "");
			char ch = c.getString(2).toUpperCase().charAt(0);
			if (ch >= 65 && ch <= 90) {
				bean.sortKey = ch;
			} else {
				bean.sortKey = '#';
			}
			if (sortKey != bean.sortKey) {
				sortKey = bean.sortKey;
				bean.isHead = true;
			}
			beans.add(bean);
		}
		c.close();           

接着我們定義擴充卡:

class MyAdapter extends BaseAdapter {
		LayoutInflater inflater;
		{
			inflater = LayoutInflater.from(MainAct.this);
		}

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

		@Override
		public Object getItem(int i) {
			return beans.get(i);
		}

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

		TextView tvName, tvNumber;
		Button btnCall;

		@Override
		public View getView(int i, View v, ViewGroup vg) {
			v = inflater.inflate(R.layout.list_item, null);
			tvName = (TextView) v.findViewById(R.id.tvName);
			tvNumber = (TextView) v.findViewById(R.id.tvNumber);
			tvName.setText(beans.get(i).name);
			tvNumber.setText(beans.get(i).number);
			if (beans.get(i).isHead) {
				v.findViewById(R.id.llShowIndex).setVisibility(View.VISIBLE);
				((TextView) v.findViewById(R.id.tvIndex)).setText(""
						+ beans.get(i).sortKey);
			}
			return v;
		}

	}           

現在可以将Beans綁定到ListView上了:

tvShow = (TextView) findViewById(R.id.tvShow);
		lv = getListView();
		lv.setAdapter(new MyAdapter());
           

最後一步,IndexBar的change和selected時候我們要做的事,滾動目前ListView顯示的Item,以及改變lvShow上面的字母:

bar = (IndexBar) findViewById(R.id.ib);
		bar.setOnIndexSelectedListener(new OnIndexSelectedListener() {
			@Override
			public void indexSelected(char index) {
				tvShow.setVisibility(View.GONE);
			}

			@Override
			public void indexChange(char index) {
				tvShow.setVisibility(View.VISIBLE);
				tvShow.setText(index + "");
				for (int i = 0; i < beans.size(); i++) {
					if (beans.get(i).isHead && beans.get(i).sortKey == index) {
						lv.setSelection(i);
						return;
					}
				}
				for (int i = 0; i < beans.size(); i++) {
					if (beans.get(i).isHead && beans.get(i).sortKey > index) {
						lv.setSelection(i);
						return;
					}
				}
				lv.setSelection(beans.size() - 1);
			}
		});           

最後indexChange裡的倆個for循環是為了找到比對的索引(比如當按下v時聯系人沒有v開頭的就會繼續往下比對,或者往上)。

希望能幫到大家!

繼續閱讀