android 鋼琴界面實現

近在做一個鋼琴的東西,關於這個界面如何設計畫瞭很長時間,主要是考慮到針對不同的分辨率,如果隻針對一種分辨率的話用絕對佈局可以實現,實現的基本思想是每個白色的鍵的位置是可以計算出來的,屏幕的寬度可以獲得到,白鍵是將屏幕均勻的分成8份,所以每個白鍵所處的位置是可以得到的,而由於黑鍵的實現采用的是重寫ViewGroup的方法,先計算出每個黑鍵的位置,然後再執行onLayout方法將黑鍵放在指定的位置。

佈局如下:

[html]
<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> 

 <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.主要用來排放黑鍵。

代碼如下:

[java]
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); 
        } 
    } 

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函數進行位置的擺放。

You May Also Like