如何创建钢琴布局布局、钢琴

2023-09-04 10:33:11 作者：欢迎骚扰

 朋友你好我工作的钢琴应用程序，我面临的布局创造了一些问题，我想创建类似下面的布局

 ，但我能够创建仅此

现在我想添加所有的黑色按钮，但问题是，我不能够添加上面的按钮来看我怎么能做到这一点，我目前的布局code下面请建议我，我怎么能现在做到这一点我能够点击所有的按钮，一旦我添加所有的按钮，然后每个按钮应该点击。

 ＆LT; XML版本=1.0编码=UTF-8＆GT？;
＆LT; RelativeLayout的的xmlns：机器人=http://schemas.android.com/apk/res/android
    机器人：layout_width =match_parent
    机器人：layout_height =match_parent
    机器人：背景=@色/白
    机器人：方向=横向＆GT;

    ＆LT;的LinearLayout
        机器人：ID =@ + ID / relativeLayout2
        机器人：layout_width =FILL_PARENT
        机器人：layout_height =match_parent
        机器人：背景=@色/白
        机器人：weightSum =1.5＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / BW 1
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / BW2
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / BW3
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / BW4
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / BW5
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw6
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / BW7
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw8
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw9
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / BW10
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw11
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw12
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw13
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw14
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;

        ＆LT; ImageView的
            机器人：ID =@ + ID / bw15
            机器人：layout_width =0dip
            机器人：layout_height =match_parent
            机器人：layout_weight =1
            机器人：背景=@可绘制/ blacknew/＆GT;
    ＆LT; / LinearLayout中＆GT;

＆LT; / RelativeLayout的＆GT;

解决方案

我会建议借鉴自己的这些白色和黑键。使用视图类，覆盖draw（）方法，并去了。当然，你可以尝试使用RelativeLayout的，但以后你就会有更多的问题与（如多点触摸和滑动检测）。

 类钢琴扩展视图{
    公共钢琴（上下文的背景下）{
        超（上下文）;
        // TODO自动生成构造函数存根
    }

    位图whiteKey，blackKey;
    涂料粉刷=新的油漆（）;

    公共无效画（油画画布）{
        如果（whiteKey == NULL）{
            whiteKey = BitmapFactory.de codeResource（getResources（），R.drawable.whiteKey）;
        }
        如果（blackKey == NULL）{
            blackKey = BitmapFactory.de codeResource（getResources（），R.drawable.blackKey）;
        }

        INT键= 10;

        //画出白键
        的for（int i = 0; I＆LT;按键;我++）{
            canvas.drawBitmap（whiteKey，I * whiteKey.getWidth（），0，油漆）;
        }
        //画出黑键
        的for（int i = 0; I＆LT;按键;我++）{
            如果（ⅰ= 3及！＆安培;！I = 7）{
                canvas.drawBitmap（blackKey，I * blackKey.getWidth（）+ blackKey.getWidth（）* 0.5F，0，油漆）;
            }
        }
    }
};

Hello friends i am working on piano app and i am facing some problem in layout creation i want to create layout like below

but i am able to create only this

now i want to add all the black buttons but problem is that i am not able to add view above that buttons how can i do this, my current layout code is below please suggest me how can i achieve this now i am able to click all the buttons once i add all the buttons then each button should be clickable.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/white"
    android:orientation="horizontal" >

    <LinearLayout
        android:id="@+id/relativeLayout2"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:background="@color/white"
        android:weightSum="1.5" >

        <ImageView
            android:id="@+id/bw1"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw2"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw3"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw4"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw5"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw6"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw7"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw8"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw9"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw10"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw11"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw12"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw13"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw14"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />

        <ImageView
            android:id="@+id/bw15"
            android:layout_width="0dip"
            android:layout_height="match_parent"
            android:layout_weight=".1"
            android:background="@drawable/blacknew" />
    </LinearLayout>

</RelativeLayout>

解决方案

I would suggest drawing these white and black keys on your own. Use the View class, override draw() method and go for it. Of course you can try to use RelativeLayout, but later you'll have more problems with that (like multiple touches and slides detection).

class Piano extends View {
    public Piano(Context context) {
        super(context);
        // TODO Auto-generated constructor stub
    }

    Bitmap whiteKey, blackKey;
    Paint paint = new Paint();

    public void draw(Canvas canvas) {
        if (whiteKey == null) {
            whiteKey = BitmapFactory.decodeResource(getResources(), R.drawable.whiteKey);
        }
        if (blackKey == null) {
            blackKey = BitmapFactory.decodeResource(getResources(), R.drawable.blackKey);
        }

        int keys = 10;

        // draw white keys
        for (int i = 0; i < keys; i++) {
            canvas.drawBitmap(whiteKey, i * whiteKey.getWidth(), 0, paint);
        }
        // draw black keys
        for (int i = 0; i < keys; i++) {
            if (i != 3 && i != 7) {
                canvas.drawBitmap(blackKey, i * blackKey.getWidth()+blackKey.getWidth()*0.5f, 0, paint);
            }
        }
    }
};

上一篇：SqlCommand的/的SQLConnection VS的OleDbCommand /的OleDbConnectionSQLConnection、SqlCommand、VS、OleDbConnect

下一篇：如何了解我的客户端IP与.NET？我的、客户端、NET、IP

相关推荐

精彩图集

精彩推荐

图片推荐