如何實現此佈局？

-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>

但我認爲這是不那麼專業。

來源

2017-03-15 DaFaack

將佈局是動態或靜態？（網格內的數據會改變嗎？） – Pythogen

試試這個：

<?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>

來源

2017-03-15 22:12:48

我認爲你應該將RelativeLayout更改爲LinearLayout，然後將其插入到5x水平佈局中。每個參數「layout_weight」設置爲3.然後，頂部的四個插入2x Button並將每個屬性設置爲「match_parent」。然後按鈕的屬性將「layout_weight」設置爲10左側，右側設置約15，這樣看起來就像你想要的一樣。在最底層的按鈕集「match_parent」的屬性中。在課程結束時，根據您自己的判斷設置其他屬性。我認爲這會有所幫助。

來源

2017-03-15 22:09:13 BIW

更小但更復雜的方法是在你的主XML文件上的LinearLayout使用，並創建一個包含兩個按鈕另一個XML。然後使用Inflate through databinding通過膨脹第二個xml來顯示相應的按鈕。將attatchToParent傳遞給true以將它們一個顯示在另一個之上。

然後在第一個xml中顯示LinearLayout下方的最後一個按鈕。

來源

2017-03-15 23:22:26

**試試這個代碼**

<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"/>

我希望這對你的工作

來源

2017-03-16 06:17:56

如何實現此佈局？

回答

相關問題