【android開發記錄片】android下實現圓角列表佈局控件

引子

今天閒來做了一個類似iphone的圓角列表，先看效果。

圖片中綠色線條的是列表頭文字，紅色的是列表落款文字。此兩處都可以顯示/隱藏及動態改變值。對於列表頭還可以設置文字的位置（靠左，靠右，居中）。點擊圖片中的地區一行，轉到下面省份選擇：

關於列表行

列表中的一行默認的定義爲：

    左邊的標題（title）

    右邊的內容（value）

    還有靠右的箭頭

其中標題是一定會顯示的，而“內容”如果爲null，則不會顯示，箭頭是一個顯示與否的boolean。則 CornerCell定義如下：

public class CornerCell {
	
	private String title;
	private String value;
	private boolean isArrow;
	private View view;
	
	public CornerCell(String title){
		this(title, null, false);
	}
	
	public CornerCell(String title, boolean isArrow){
		this(title, null, isArrow);
	}
	
	public CornerCell(String title, String value, boolean isArrow){
		this.title = title;
		this.value = value;
		this.isArrow = isArrow;
	}
	
	//getter and setter
	
	@Override
	public String toString() {
		return String.format(
				"[CornerCell: title=%1$s, value=%2$s, isArrow=%3$s]", 
				title, 
				value, 
				isArrow
				);
	}
}

圓角列表容器

CornerRowLayout 繼承於 LinearLayout，並實現了OnClickListener接口。

其構造方法如下：

public CornerRowLayout(Context context, AttributeSet attrs) {
	super(context, attrs);
	
	this.isShowValue = true;
	
	contentLy = new LinearLayout(context, attrs);
	contentLy.setBackgroundResource(R.drawable.shape_corner_list_background);
	contentLy.setOrientation(LinearLayout.VERTICAL);
	
	LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
	headerTX = new TextView(getContext());
	headerTX.setLayoutParams(lp);
	
	footerTX = new TextView(getContext());
	footerTX.setLayoutParams(lp);
	footerTX.setGravity(Gravity.RIGHT);
	footerTX.setTextSize(13);
	
	//設置爲垂直佈局
	this.setOrientation(LinearLayout.VERTICAL);
	this.addView(headerTX);
	this.addView(contentLy);
	this.addView(footerTX);
}

設置列表內容

/**
 * 設置這個表格的數據，會直接重新渲染整個表格
 *	@param cells
 */
public void setCellList(List<CornerCell> cells){
	contentLy.removeAllViews();
	
	for(int i=0;i<cells.size();i++){
		CornerCell cell = cells.get(i);
		
		//如果 CornerCell 已經有自定義的視圖，就用自定義的視圖
		View cellView = cell.getView() == null ?
				View.inflate(getContext(), R.layout.nerve_corner_cell, null)
				:
				cell.getView();
		
		if(cellView == null)
			continue;
		
		System.out.println(cell);
		
		/*
		 * 對頭，中，尾進行分組
		 */
		if(i == 0)
			cellView.setBackgroundResource(R.drawable.shape_corner_list_top);
		else{
			//設置頂部的margin爲1，就會出現一條細線
			LayoutParams lp = new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT);
			lp.setMargins(0, 1, 0, 0);
			cellView.setLayoutParams(lp);
			
			if(i == cells.size() - 1)
				cellView.setBackgroundResource(R.drawable.shape_corner_list_bottom);
			else
				cellView.setBackgroundResource(R.drawable.shape_corner_list_middle);
		}
			
		
		//設置可以點擊，不然按住時不會有效果
		//cellView.setClickable(true);
		//cellView.setPadding(5, 8, 5, 8);
		
		((TextView)cellView.findViewById(R.id.cell_title)).setText(cell.getTitle());
		if(isShowValue)
			((TextView)cellView.findViewById(R.id.cell_value)).setText(cell.getValue());
		
		cellView.findViewById(R.id.cell_arrow)
			.setVisibility(cell.isArrow() ? View.VISIBLE : View.GONE);
		
		cellView.setOnClickListener(this);
		cellView.setTag(i);
		//將這個view添加到本地容器
		contentLy.addView(cellView);
	}
	
	resetAll();
}

如何使用

1.先將相關的java類導入項目，還有相關的layout，drawable，style文件

2.在想加入圓角列表的頁面加入以下內容：

<org.nerve.ui.corner.CornerRowLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
   	    android:id="@+id/myCornerLayout"
   	    android:layout_width="fill_parent"
		android:layout_height="fill_parent" 
		android:padding="5dp"
		android:background="#DCDDDB"
		>
</org.nerve.ui.corner.CornerRowLayout>

這個根據實際情況而定，如果列表內容太多，需要嵌套在一個SrollView內。

3.在Activity中：

cornerL = (CornerRowLayout)findViewById(R.id.myCornerLayout);

List<CornerCell> cells = new ArrayList<CornerCell>();
cells.add(new CornerCell("姓名", "集成顯卡", true));
cells.add(new CornerCell("年齡", "18歲", true));
cells.add(new CornerCell("地區", "廣西壯族自治區", true));

cornerL.setCellList(cells);
cornerL.setOnRowClickListener(this);

cornerL.setHeader("以下信息我們會絕對保密");
cornerL.setFooter("2013-5-24");

效果就出來了。

4.Activity實現OnRowClickListenrr接口：

@Override
public void onRowClick(View v, int index) {
	if(index == 2){
		Intent intent = new Intent(ConrnerActivity.this, SelectProvinceActitivy.class);
		startActivityForResult(intent, PROVINCE);
	}
}

源代碼下載：http://download.csdn.net/detail/ssrc0604hx/5442505

感謝閱讀