android 钢琴界面实现

最近在作一个钢琴的东西，关于这个界面如何设计画了很长时间，主要是考虑到针对不一样的分辨率，若是只针对一种分辨率的话用绝对布局能够实现，实现的基本思想是每一个白色的键的位置是能够计算出来的，屏幕的宽度能够得到到，白键是将屏幕均匀的分红8份，因此每一个白键所处的位置是能够获得的，而因为黑键的实现采用的是重写ViewGroup的方法，先计算出每一个黑键的位置，而后再执行onLayout方法将黑键放在指定的位置。

布局以下：

<RelativeLayout
	    android:id="@+id/mClickLayout"
	    android:layout_width="fill_parent"
	    android:layout_height="fill_parent">
	    <LinearLayout
	        android:layout_width="fill_parent"
	        android:layout_height="fill_parent"
	        android:orientation="horizontal">
	        <ImageView 
	            android:id="@+id/mPanoClickWhiteOne"
			    android:layout_width="fill_parent"
			    android:layout_height="fill_parent"
			    android:layout_weight="1000"
			    android:tag="1"
			    />
	        <ImageView
	            android:id="@+id/mPanoClickWhiteTwo"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:layout_weight="1000"
	            android:tag="2"
	            />
	        <ImageView
	            android:id="@+id/mPanoClickWhiteThree"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:layout_weight="1000"
	            android:tag="3"
	            />
	        <ImageView
	            android:id="@+id/mPanoClickWhiteFour"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:layout_weight="1000"
	            android:tag="4"
	            />
	        <ImageView 
	            android:id="@+id/mPanoClickWhiteFive"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:layout_weight="1000"
	            android:tag="5"
	            />
	        <ImageView 
	            android:id="@+id/mPanoClickWhiteSix"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:layout_weight="1000"
	            android:tag="6"
	            />
	        <ImageView 
	            android:id="@+id/mPanoClickWhiteSeven"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:layout_weight="1000"
	            android:tag="7"
	            />
	        <ImageView
	            android:id="@+id/mPanoClickWhiteEight"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:layout_weight="1000"
	            android:tag="8"
	            />
	    </LinearLayout>
	    <com.example.crazypano.view.BlackLayout
	        android:layout_width="fill_parent"
	        android:layout_height="wrap_content">
	        <ImageView
	            android:id="@+id/mPanoClickBlackOne"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:tag="9"
	            />
	        <ImageView 
	            android:id="@+id/mPanoClickBlackTwo"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:tag="10"
	            />
	        <ImageView 
	            android:id="@+id/mPanoClickBlackThree"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:tag="11"
	            />
	        <ImageView
	            android:id="@+id/mPanoClickBlackFour"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:tag="12"
	            />
	        <ImageView 
	            android:id="@+id/mPanoClickBlackFive"
	            android:layout_width="fill_parent"
	            android:layout_height="fill_parent"
	            android:tag="13"
	            />
	    </com.example.crazypano.view.BlackLayout>
	</RelativeLayout>

LinearLayout内的控件为白键，一共有8个白键，每一个白键的权值是1000，因此每一个白键的位置是能够计算出来的，com.example.crazypanp.view.BlackLayout是重写的ViewGroup.主要用来排放黑键。

代码以下：

public class BlackLayout extends ViewGroup {
	private List<Integer> mLeftPositions;
	public BlackLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		mLeftPositions = new ArrayList<Integer>();
	}
	
	private void addPosition(int pScreenWidth, int pChildWidth){
		int pScreenUnit = pScreenWidth / 8;
		mLeftPositions.clear();
		mLeftPositions.add(pScreenUnit - 2 * pChildWidth / 3);
		mLeftPositions.add(2 * pScreenUnit - pChildWidth / 3);
		mLeftPositions.add(4 * pScreenUnit - 2 * pChildWidth / 3);
		mLeftPositions.add(5 * pScreenUnit - pChildWidth / 2);
		mLeftPositions.add(6 * pScreenUnit - pChildWidth / 3);
	}

	@Override
	protected void onLayout(boolean arg0, int l, int t, int r, int b) {
		// TODO Auto-generated method stub
		int childCount = this.getChildCount();
		int gap = 0;
		int space=0;
		if(this.getChildCount() >= 1){
			addPosition(this.getWidth(), this.getChildAt(0).getWidth());
		}
		for( int i = 0; i < this.getChildCount(); i++){
			View child = this.getChildAt(i);
			child.measure(r - l, b - t);
		}
		for (int i = 0; i < childCount; i++) {
			View child = this.getChildAt(i);
			child.setVisibility(View.VISIBLE);
			child.measure(r - l, b - t);
			int childWidth = child.getMeasuredWidth();
			int childHeight = child.getMeasuredHeight();
			child.layout(mLeftPositions.get(i), t, mLeftPositions.get(i) + childWidth, t + childHeight);
		}
	}
}

在onLayout函数中首先肯定每一个黑键的位置，而后再经过onLayout函数进行位置的摆放。