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);}@Overrideprotected void onLayout(boolean arg0, int l, int t, int r, int b) {// TODO Auto-generated method stubint 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函數進行位置的擺放。