Question

我正在为基于ImageButtons的钢琴键盘构建XML布局。问题总结如下：

我知道已发布其他类似问题，例如this one。但是，我的方法不同意依赖Java来绘制布局，因为我认为，只要有可能，设计问题应该仅依赖于XML。还有人为钢琴布局提供模板，但我更喜欢自己做一个。

也就是说，重点是：是否有可能使上面显示的ImageButtons“重叠”，以使黑键适合他们应有的，而不依赖于Java逻辑来实现它？如果没有，有没有办法自定义ImageButton对象的形状不同于矩形？

这是XML源代码，总结如下：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">

    <!-- first white key -->
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:id="@+id/ck"
        android:src="@drawable/wk_c" />

    <!-- the BLACK key -->
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:id="@+id/bk1"
        android:src="@drawable/bk" />

    <!-- next white key -->
    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:id="@+id/dk"
        android:src="@drawable/wk_d"
        android:adjustViewBounds="false" />

    <!-- ... and so on for the other keys -->
</LinearLayout>

Answer 1

也许有些事情如下：

<强>抽拉/ white.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <View
        android:layout_width="30dp"
        android:layout_height="160dp"
        android:background="@drawable/white"
        android:id="@+id/white1"/>
    <View
        android:layout_width="30dp"
        android:layout_height="160dp"
        android:background="@drawable/white"
        android:id="@+id/white2"
        android:layout_toRightOf="@+id/white1"/>
    <View
        android:layout_width="30dp"
        android:layout_height="160dp"
        android:background="@drawable/white"
        android:id="@+id/white3"
        android:layout_toRightOf="@+id/white2"/>
    <View
        android:layout_width="30dp"
        android:layout_height="160dp"
        android:background="@drawable/white"
        android:id="@+id/white4"
        android:layout_toRightOf="@+id/white3"/>
    <View
        android:layout_width="30dp"
        android:layout_height="160dp"
        android:background="@drawable/white"
        android:id="@+id/white5"
        android:layout_toRightOf="@+id/white4"/>
    <View
        android:layout_width="30dp"
        android:layout_height="160dp"
        android:background="@drawable/white"
        android:id="@+id/white6"
        android:layout_toRightOf="@+id/white5"/>
    <View
        android:layout_width="30dp"
        android:layout_height="160dp"
        android:background="@drawable/white"
        android:id="@+id/white7"
        android:layout_toRightOf="@+id/white6"/>
    <View
        android:layout_width="16dp"
        android:layout_height="100dp"
        android:layout_marginLeft="-10dp"
        android:layout_marginRight="-6dp"
        android:background="#000"
        android:id="@+id/black1"
        android:layout_toRightOf="@+id/white1"/>
    <View
        android:layout_width="16dp"
        android:layout_height="100dp"
        android:layout_marginLeft="-6dp"
        android:layout_marginRight="-10dp"
        android:background="#000"
        android:id="@+id/black2"
        android:layout_toRightOf="@+id/white2"/>
    <View
        android:layout_width="16dp"
        android:layout_height="100dp"
        android:layout_marginLeft="-10dp"
        android:layout_marginRight="-6dp"
        android:background="#000"
        android:id="@+id/black3"
        android:layout_toRightOf="@+id/white4"/>
    <View
        android:layout_width="16dp"
        android:layout_height="100dp"
        android:layout_marginLeft="-8dp"
        android:layout_marginRight="-8dp"
        android:background="#000"
        android:id="@+id/black4"
        android:layout_toRightOf="@+id/white5"/>
    <View
        android:layout_width="16dp"
        android:layout_height="100dp"
        android:layout_marginLeft="-6dp"
        android:layout_marginRight="-10dp"
        android:background="#000"
        android:id="@+id/black5"
        android:layout_toRightOf="@+id/white6"/>
</RelativeLayout>

View

piano

如果您愿意，请将ImageButton替换为<a href="secondHtml.html">Link</a>。

Answer 2

是否可以使上面显示的ImageButtons＆＃34;重叠＆＃34;是为了使黑键适合他们应该的，而不依赖于Java逻辑来实现它？

欢迎您使用RelativeLayout。与LinearLayout不同，RelativeLayout支持Z轴排序。后来RelativeLayout的儿童在Z轴上比在早期儿童中更高。所以，你有：

<RelativeLayout>
  <ImageButton /> <!-- white key -->
  <ImageButton /> <!-- white key -->
  <ImageButton /> <!-- white key -->
  <ImageButton /> <!-- white key -->
  <ImageButton /> <!-- white key -->
  <!-- for however many white keys you have -->

  <ImageButton /> <!-- black key -->
  <ImageButton /> <!-- black key -->
  <ImageButton /> <!-- black key -->
  <!-- for however many black keys you have -->
</RelativeLayout>

如果没有，有没有办法自定义ImageButton对象的形状不同于矩形？

您的图片不必是矩形 - 只需使用透明像素。但是，触摸目标将是矩形的。 IIRC，有非矩形按钮的第三方库。

是否可以重叠ImageButtons？

2 个答案: