如何在Android中以5行4列的格式排列20个按钮?

时间:2016-01-24 13:46:27

标签: android android-layout

我的情况是这样的

我有一张背景图片,上面写着20个字符

我在20个字符的每个字符上放置了一个隐形按钮,这样当用户点击该字符时,他实际上会点击该按钮并开始播放该字符的音频。

但这是主要问题----如果我将模拟器或移动设备更改为横向模式或选择平板电脑或选择其他模拟器(如Nexus 4,Nexus 5进行测试),按钮将从其位置移动(意思是他们不再是确切的角色。)

我希望这些按钮只保留在图像的那一部分

我可以使用Grid Layout但我不知道如何使用它。我还在学习android



<?xml version="1.0" encoding="utf-8"?>
<ScrollView
    android:id="@+id/sv2"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:android="http://schemas.android.com/apk/res/android">
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:id="@+id/rl2"
    android:background="@drawable/f1"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <Button
        android:layout_width="91dp"
        android:layout_height="91dp"
        android:background="@null"
        android:onClick="playAlif"
        android:layout_marginTop="278dp"
        android:layout_marginRight="23dp"
        android:layout_marginEnd="23dp"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentEnd="true"
        android:id="@+id/button" />

    <Button
        android:layout_width="80dp"
        android:layout_height="99dp"
        android:onClick="playBaa"
        android:background="@null"
        android:id="@+id/button2"
        android:layout_alignBottom="@+id/button"
        android:layout_toLeftOf="@+id/imageButton3"
        android:layout_toStartOf="@+id/imageButton3" />

    <Button
        android:layout_width="85dp"
        android:layout_height="100dp"
        android:onClick="playTaa"
        android:background="@null"
        android:layout_alignBottom="@+id/button2"
        android:layout_toLeftOf="@+id/button2"
        android:id="@+id/button3" />


    <Button
        android:layout_width="85dp"
        android:layout_height="100dp"
        android:onClick="playThaa"
        android:background="@null"
        android:layout_alignBottom="@+id/button3"
        android:layout_toLeftOf="@+id/button3"
        android:layout_alignTop="@+id/button2"
        android:id="@+id/button5" />


    <Button
        android:layout_width="80dp"
        android:layout_height="99dp"
        android:layout_marginTop="80dp"
        android:onClick="playJeem"
        android:background="@null"
        android:layout_alignTop="@+id/button"
        android:layout_toRightOf="@+id/button3"
        android:layout_toEndOf="@+id/button3"
        android:id="@+id/button4" />

    <Button
        android:layout_width="80dp"
        android:layout_height="99dp"
        android:onClick="playHaa"
        android:background="@null"
        android:layout_alignTop="@+id/button4"
        android:layout_toLeftOf="@+id/button2"
        android:layout_toStartOf="@+id/button2"
        android:id="@+id/button6" />


    <Button
        android:layout_width="80dp"
        android:layout_height="93dp"
        android:onClick="playKhaa"
        android:background="@null"
        android:layout_alignBottom="@+id/button6"
        android:layout_toLeftOf="@+id/button3"
        android:layout_toStartOf="@+id/button3"
        android:id="@+id/button8" />


    <Button
        android:layout_width="89dp"
        android:layout_height="89dp"
        android:layout_below="@+id/button4"
        android:background="@null"
        android:onClick="playDaal"
        android:layout_toRightOf="@+id/button4"
        android:layout_toEndOf="@+id/button4"
        android:id="@+id/button7" />

    <Button
        android:layout_width="84dp"
        android:layout_height="90dp"
        android:layout_below="@+id/button4"
        android:onClick="playDhaal"
        android:layout_toLeftOf="@+id/button7"
        android:layout_toStartOf="@+id/button7"
        android:background="@null"
        android:id="@+id/button10" />

    <Button
        android:layout_width="84dp"
        android:layout_height="90dp"
        android:background="@null"
        android:onClick="playRaa"
        android:id="@+id/button9"
        android:layout_above="@+id/button11"
        android:layout_toLeftOf="@+id/button4"
        android:layout_toStartOf="@+id/button4" />


    <Button
        android:layout_width="85dp"
        android:layout_height="96dp"
        android:onClick="playZaa"
        android:id="@+id/button12"
        android:background="@null"
        android:layout_alignBaseline="@+id/button9"
        android:layout_alignBottom="@+id/button9"
        android:layout_toLeftOf="@+id/button9"
        android:layout_toStartOf="@+id/button9" />


    <Button
        android:layout_width="89dp"
        android:layout_height="89dp"
        android:background="@null"
        android:onClick="playSeen"
        android:id="@+id/button11"
        android:layout_below="@+id/button7"
        android:layout_toRightOf="@+id/button10"
        android:layout_toEndOf="@+id/button10" />


    <Button
        android:layout_width="89dp"
        android:layout_height="95dp"
        android:onClick="playSheen"
        android:background="@null"
        android:layout_alignBottom="@+id/button11"
        android:layout_alignLeft="@+id/button10"
        android:layout_alignStart="@+id/button10"
        android:id="@+id/button13" />


    <Button
        android:layout_width="85dp"
        android:onClick="playSaad"
        android:layout_height="95dp"
        android:background="@null"
        android:layout_alignBaseline="@+id/button13"
        android:layout_alignBottom="@+id/button13"
        android:layout_toLeftOf="@+id/button4"
        android:layout_toStartOf="@+id/button4"
        android:id="@+id/button16" />


    <Button
        android:layout_width="85dp"
        android:onClick="playDhaad"
        android:layout_height="95dp"
        android:background="@null"
        android:layout_alignBaseline="@+id/button11"
        android:layout_alignBottom="@+id/button11"
        android:layout_alignLeft="@+id/button12"
        android:layout_alignStart="@+id/button12"
        android:id="@+id/button14" />



    <Button
        android:layout_width="89dp"
        android:layout_height="90dp"
        android:background="@null"
        android:onClick="playTaaa"
        android:id="@+id/button15"
        android:layout_below="@+id/button11"
        android:layout_alignRight="@+id/button"
        android:layout_alignEnd="@+id/button" />


    <Button
        android:layout_width="85dp"
        android:layout_height="90dp"
        android:onClick="playZhaa"
        android:background="@null"
        android:layout_below="@+id/button11"
        android:layout_alignLeft="@+id/button13"
        android:layout_alignStart="@+id/button13"
        android:id="@+id/button18" />

    <Button
        android:layout_width="82dp"
        android:layout_height="95dp"
        android:layout_alignBaseline="@+id/button18"
        android:onClick="playAeen"
        android:background="@null"
        android:layout_alignBottom="@+id/button18"
        android:layout_toLeftOf="@+id/button13"
        android:layout_toStartOf="@+id/button13"
        android:id="@+id/button17" />

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:onClick="playGhaeen"
        android:layout_alignRight="@+id/button14"
        android:layout_alignEnd="@+id/button14"
        android:layout_alignLeft="@+id/button5"
        android:layout_alignStart="@+id/button5"
        android:layout_alignBottom="@+id/button17"
        android:layout_below="@+id/button16" />

    <Button
        android:layout_width="320dp"
        android:layout_height="50dp"
        android:onClick="playDua"
        android:background="@null"
        android:layout_above="@+id/button3"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="38dp"
        android:id="@+id/button38" />

    <Button
        android:layout_width="250dp"
        android:layout_height="wrap_content"
        android:background="@null"
        android:onClick="playBismillah"
        android:layout_above="@+id/button38"
        android:layout_centerHorizontal="true" />

    <Button
        android:layout_width="128dp"
        android:layout_height="wrap_content"
        android:background="@null"
        android:layout_above="@+id/button3"
        android:onClick="playDua"
        android:layout_centerHorizontal="true"
        android:id="@+id/button70" />


    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/n"
        android:layout_above="@+id/button5"
        android:onClick="next"
        android:layout_alignLeft="@+id/button8"
        android:layout_alignStart="@+id/button8"
        android:id="@+id/imageButton" />

    <ImageButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/b"
        android:onClick="back"
        android:layout_alignBottom="@+id/button70"
        android:layout_alignRight="@+id/button38"
        android:layout_alignEnd="@+id/button38"
        android:layout_alignTop="@+id/imageButton"
        android:id="@+id/imageButton3" />


</RelativeLayout>
</ScrollView>
&#13;
&#13;
&#13;

&#13;
&#13;
package com.example.furqanhussain.nooraniqaida;

import android.app.Activity;
import android.content.Intent;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.support.v4.view.GestureDetectorCompat;
import android.view.View;

/**
 * Created by Furqan Hussain on 23-Jan-16.
 */
public class SecondActivity extends Activity {

    MediaPlayer mp;


    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.page1);

    }
    public void playAlif(View v){

        mp= MediaPlayer.create(this, R.raw.alif);
        mp.start();
    }

    public void playBaa(View v){
        mp=MediaPlayer.create(this,R.raw.baa);
        mp.start();
    }

    public void playTaa(View v){
        mp=MediaPlayer.create(this,R.raw.taa);
        mp.start();
    }

    public void playThaa(View v){
        mp=MediaPlayer.create(this,R.raw.thaa);
        mp.start();
    }

    public void playJeem(View v){
        mp=MediaPlayer.create(this,R.raw.jeem);
        mp.start();
    }

    public void playHaa(View v){
        mp=MediaPlayer.create(this,R.raw.haa);
        mp.start();
    }

    public void playKhaa(View v){
        mp=MediaPlayer.create(this,R.raw.khaa);
        mp.start();
    }

    public void playDaal(View v){
        mp=MediaPlayer.create(this,R.raw.daal);
        mp.start();
    }

    public void playDhaal(View v){
        mp=MediaPlayer.create(this,R.raw.dhaal);
        mp.start();
    }

    public void playRaa(View v){
        mp=MediaPlayer.create(this,R.raw.raa);
        mp.start();
    }

    public void playZaa(View v){
        mp=MediaPlayer.create(this,R.raw.zaa);
        mp.start();
    }

    public void playSeen(View v){
        mp=MediaPlayer.create(this,R.raw.seen);
        mp.start();
    }

    public void playSheen(View v){
        mp=MediaPlayer.create(this,R.raw.sheen);
        mp.start();
    }

    public void playSaad(View v){
        mp=MediaPlayer.create(this,R.raw.saad);
        mp.start();

    }

    public void playDhaad(View v){
        mp=MediaPlayer.create(this,R.raw.dhaad);
        mp.start();
    }

    public void playTaaa(View v){
        mp=MediaPlayer.create(this,R.raw.taaa);
        mp.start();
    }

    public void playZhaa(View v){
        mp=MediaPlayer.create(this,R.raw.zhaa);
        mp.start();
    }

    public void playAeen(View v){
        mp=MediaPlayer.create(this,R.raw.aeen);
        mp.start();
    }

    public void playGhaeen(View v){
        mp=MediaPlayer.create(this,R.raw.ghaeen);
        mp.start();
    }

    public void playBismillah(View v){
        mp=MediaPlayer.create(this,R.raw.bismillah);
        mp.start();

    }

    public void playDua(View v){
        mp=MediaPlayer.create(this,R.raw.dua);
        mp.start();
    }

    public void back(View v){
        Intent i = new Intent(this,MainActivity.class);
        startActivity(i);
    }

    public void next(View v){
        Intent i =new Intent(this,ThirdActivity.class);
        startActivity(i);

    }


}
&#13;
&#13;
&#13;

2 个答案:

答案 0 :(得分:0)

您需要为纵向和横向模式创建单独的视图,当您旋转手机时,您的按钮应该在同一个位置,类似这样,但这仅适用于横向模式:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:ads="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/sunce_duga"
    android:orientation="horizontal" >

     <LinearLayout        
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_marginTop="40dp"
        android:orientation="horizontal"
        android:weightSum="5" >

        <ImageView
            android:clickable="true"
            android:id="@+id/A"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pressed"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/B"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pb"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/V"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pv"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/G"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pg"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/D"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pd"
            android:contentDescription="@null" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true"
        android:layout_marginBottom="70dp"
        android:orientation="horizontal"
        android:weightSum="5" >

        <ImageView
            android:id="@+id/DJ"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pdj"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/E"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pe"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/ZH"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pzh"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/Z"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pz"
            android:contentDescription="@null" />

        <ImageView
            android:id="@+id/I"
            android:layout_width="0dp"
            android:layout_height="100dp"
            android:layout_weight="1"
            android:background="@drawable/pi"
            android:contentDescription="@null" />
    </LinearLayout>
</RelativeLayout>

此外,您的MediaPlayer需要发布,您需要

mp.setOnCompletionListener(new OnCompletionListener() {

@Override
public void onCompletion(MediaPlayer mmp) {

mmp.release();
}
});

在OnClickListener()方法中。 在Web上查找教程并了解布局。当你遇到困难但我们需要做的实际工作时,我们会帮助你。

答案 1 :(得分:-1)

使用嵌套for循环填充Gridlayout。

for(int rows = 0; rows < 5; rows++){
    for(int columns = 0; columns < 4; columns++){
        Button myButton = new Button();
        myButton.setText(row * column);
        myGridLayout.add(myButton);
    }
}