2017-03-15 112 views
-3

我正在尝试创建一个如下所示的音板: https://gyazo.com/466fa8248aafe3232036b5586c070d30 实现此目标的最佳方法是什么? 目前我使用此代码尝试它:如何实现此布局?

<?xml version="1.0" encoding="utf-8"?> 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    xmlns:app="http://schemas.android.com/apk/res-auto" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:orientation="vertical" 
    android:layout_marginTop="50dp"> 


    <ScrollView 
     android:layout_width="match_parent" 
     android:layout_height="match_parent"> 

     <GridLayout 
      android:layout_width="match_parent" 
      android:layout_height="match_parent"> 

      <Button 
       android:text="Kohle song" 
       android:id="@+id/ojeangelasong" 
       android:layout_width="0dp" 
       android:layout_height="100dp" 
       android:onClick="kohlesong" 
       android:layout_columnWeight="300" 
       android:layout_rowWeight="1" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:layout_marginTop="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton"/> 

      <Button 
       android:text="Zum \nVideo" 
       android:id="@+id/Button1" 
       android:layout_width="wrap_content" 
       android:layout_height="100dp" 
       android:layout_columnWeight="1" 
       android:onClick="kohlesongLink" 
       android:layout_rowWeight="1" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:layout_marginTop="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton" /> 
      <Button 
       android:text="Zum \nVideo" 
       android:id="@+id/Button2" 
       android:layout_width="wrap_content" 
       android:layout_height="100dp" 
       android:layout_columnWeight="1" 
       android:onClick="shooterkingLink" 
       android:layout_rowWeight="1" 
       android:layout_row="1" 
       android:layout_column="1" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton" 
       android:layout_marginTop="10dp"/> 

      <Button 
       android:text="Roboter song" 
       android:id="@+id/neulandBtn" 
       android:onClick="roboter" 
       android:layout_width="0dp" 
       android:layout_height="100dp" 
       android:layout_columnWeight="300" 
       android:layout_rowWeight="1" 
       android:layout_row="2" 
       android:layout_column="0" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton" 
       android:layout_marginTop="10dp"/> 

      <Button 
       android:text="Zum \nVideo" 
       android:id="@+id/Button5" 
       android:layout_width="wrap_content" 
       android:layout_height="100dp" 
       android:onClick="roboterLink" 
       android:layout_columnWeight="1" 
       android:layout_rowWeight="1" 
       android:layout_row="2" 
       android:layout_column="1" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton" 
       android:layout_marginTop="10dp"/> 
      <Button 
       android:text="Zum \nVideo" 
       android:id="@+id/Button6" 
       android:layout_width="wrap_content" 
       android:layout_height="100dp" 
       android:onClick="remixLink" 
       android:layout_columnWeight="1" 
       android:layout_rowWeight="1" 
       android:layout_row="3" 
       android:layout_column="1" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton" 
       android:layout_marginTop="10dp"/> 

      <Button 
       android:text="Gronkh Remix" 
       android:id="@+id/zusammenschnittBtn" 
       android:onClick="remix" 
       android:layout_width="0dp" 
       android:layout_height="100dp" 
       android:layout_columnWeight="1" 
       android:layout_rowWeight="1" 
       android:layout_row="3" 
       android:layout_column="0" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton" 
       android:layout_marginTop="10dp"/> 


      <Button 
       android:text="Remix vorschlagen" 
       android:layout_width="0dp" 
       android:layout_height="100dp" 
       android:id="@+id/soundvorschlagen" 
       android:layout_columnWeight="1" 
       android:layout_columnSpan="2" 
       android:layout_rowWeight="1" 
       android:layout_marginBottom="70dp" 
       android:onClick="soundvorschlagen" 
       android:layout_row="4" 
       android:layout_column="0" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/soundvorschlagen" 
       android:layout_marginTop="10dp" 
       /> 

      <Button 
       android:text="Shooterking" 
       android:id="@+id/autotuneremix" 
       android:onClick="shooterking" 
       android:layout_width="0dp" 
       android:layout_height="100dp" 
       android:layout_columnWeight="1" 
       android:layout_rowWeight="1" 
       android:layout_row="1" 
       android:layout_column="0" 
       android:layout_marginLeft="10dp" 
       android:layout_marginRight="10dp" 
       android:textColor="#ffffff" 
       android:textSize="20dp" 
       android:background="@drawable/mybutton" 
       android:layout_marginTop="10dp"/> 
     </GridLayout> 

    </ScrollView> 
</RelativeLayout> 

但我认为这是不那么专业。

+0

将布局是动态或静态? (网格内的数据会改变吗?) – Pythogen

回答

1

试试这个:

<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
    android:orientation="vertical" 
    android:layout_width="match_parent" 
    android:layout_height="match_parent" 
    android:weightSum="100"> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     android:layout_weight="20" 
     android:weightSum="100"> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="75" 
      android:text="Button"/> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="25" 
      android:text="Button"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     android:layout_weight="20" 
     android:weightSum="100"> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="75" 
      android:text="Button"/> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="25" 
      android:text="Button"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     android:layout_weight="20" 
     android:weightSum="100"> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="75" 
      android:text="Button"/> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="25" 
      android:text="Button"/> 
    </LinearLayout> 
    <LinearLayout 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:orientation="horizontal" 
     android:layout_weight="20" 
     android:weightSum="100"> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="75" 
      android:text="Button"/> 
     <Button 
      android:layout_width="0dp" 
      android:layout_height="match_parent" 
      android:layout_weight="25" 
      android:text="Button"/> 
    </LinearLayout> 
    <Button 
     android:layout_width="match_parent" 
     android:layout_height="0dp" 
     android:layout_weight="20" 
     android:text="Button"/> 

</LinearLayout> 

enter image description here

0

我认为你应该将RelativeLayout更改为LinearLayout,然后将其插入到5x水平布局中。每个参数“layout_weight”设置为3.然后,顶部的四个插入2x Button并将每个属性设置为“match_parent”。然后按钮的属性将“layout_weight”设置为10左侧,右侧设置约15,这样看起来就像你想要的一样。在最底层的按钮集“match_parent”的属性中。 在课程结束时,根据您自己的判断设置其他属性。 我认为这会有所帮助。

1

更小但更复杂的方法是在你的主XML文件上的LinearLayout使用,并创建一个包含两个按钮另一个XML。然后使用Inflate through databinding通过膨胀第二个xml来显示相应的按钮。将attatchToParent传递给true以将它们一个显示在另一个之上。

然后在第一个xml中显示LinearLayout下方的最后一个按钮。

1

**试试这个代码**

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
android:layout_width="match_parent" 
android:layout_height="match_parent" 
android:orientation="vertical"> 


<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="4" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_marginTop="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

</LinearLayout> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="4" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_marginTop="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

</LinearLayout> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="4" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_marginTop="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

</LinearLayout> 
<LinearLayout 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:orientation="horizontal"> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="4" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

    <Button 
     android:layout_margin="5dp" 
     android:layout_marginTop="5dp" 
     android:layout_width="0dp" 
     android:layout_weight="1" 
     android:layout_height="wrap_content" 
     android:text="song 1"/> 

</LinearLayout> 

<Button 
    android:layout_margin="5dp" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content" 
    android:text="hello"/> 

我希望这对你的工作