近在做一个钢琴的东西,关于这个界面如何设计画了很长时间,主要是考虑到针对不同的分辨率,如果只针对一种分辨率的话用绝对布局可以实现,实现的基本思想是每个白色的键的位置是可以计算出来的,屏幕的宽度可以获得到,白键是将屏幕均匀的分成8份,所以每个白键所处的位置是可以得到的,而由于黑键的实现采用的是重写ViewGroup的方法,先计算出每个黑键的位置,然后再执行onLayout方法将黑键放在指定的位置。
布局如下:
[html]
android:id="@+id/mClickLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
android:id="@+id/mPanoClickWhiteOne"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="1"
/>
android:id="@+id/mPanoClickWhiteTwo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="2"
/>
android:id="@+id/mPanoClickWhiteThree"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="3"
/>
android:id="@+id/mPanoClickWhiteFour"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="4"
/>
android:id="@+id/mPanoClickWhiteFive"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="5"
/>
android:id="@+id/mPanoClickWhiteSix"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="6"
/>
android:id="@+id/mPanoClickWhiteSeven"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="7"
/>
android:id="@+id/mPanoClickWhiteEight"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="8"
/>
android:layout_width="fill_parent"
android:layout_height="wrap_content">
android:id="@+id/mPanoClickBlackOne"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="9"
/>
android:id="@+id/mPanoClickBlackTwo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="10"
/>
android:id="@+id/mPanoClickBlackThree"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="11"
/>
android:id="@+id/mPanoClickBlackFour"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="12"
/>
android:id="@+id/mPanoClickBlackFive"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="13"
/>
android:id="@+id/mClickLayout"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="horizontal">
android:id="@+id/mPanoClickWhiteOne"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="1"
/>
android:id="@+id/mPanoClickWhiteTwo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="2"
/>
android:id="@+id/mPanoClickWhiteThree"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="3"
/>
android:id="@+id/mPanoClickWhiteFour"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="4"
/>
android:id="@+id/mPanoClickWhiteFive"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="5"
/>
android:id="@+id/mPanoClickWhiteSix"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="6"
/>
android:id="@+id/mPanoClickWhiteSeven"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="7"
/>
android:id="@+id/mPanoClickWhiteEight"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_weight="1000"
android:tag="8"
/>
android:layout_width="fill_parent"
android:layout_height="wrap_content">
android:id="@+id/mPanoClickBlackOne"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="9"
/>
android:id="@+id/mPanoClickBlackTwo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="10"
/>
android:id="@+id/mPanoClickBlackThree"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="11"
/>
android:id="@+id/mPanoClickBlackFour"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="12"
/>
android:id="@+id/mPanoClickBlackFive"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:tag="13"
/>
LinearLayout内的控件为白键,一共有8个白键,每个白键的权值是1000,所以每个白键的位置是可以计算出来的,com.example.crazypanp.view.BlackLayout是重写的ViewGroup.主要用来排放黑键。
代码如下:
[java]
public class BlackLayout extends ViewGroup {
private List mLeftPositions;
public BlackLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mLeftPositions = new ArrayList();
}
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 mLeftPositions;
public BlackLayout(Context context, AttributeSet attrs) {
super(context, attrs);
mLeftPositions = new ArrayList();
}
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函数进行位置的摆放。