使用与随机播放按钮匹配的随机播放图像

Question

I am trying to layout 10 image buttons numbered 1-10 randomly on screen. I used an array list and Collections . Shuffle command to shuffle the background drawables .
But I cant seem to tie the button listeners to these random images.

// assigned arrays here
Button[] buttons = new Button[10];
Button[] buttonimages = new Button[10];
List<Button> list;
// Global Variables
int[] buttonarray =     {R.drawable.button1,R.drawable.button2,R.drawable.button3,R.drawable.button4,R.drawable.button5,R.drawable.button6,R.drawable.button7,R.drawable.button8,R.drawable.button9,R.drawable.button10};
int idarray[] = {R.id.number1,R.id.number2,R.id.number3,R.id.number4,R.id.number5,R.id.number6,R.id.number7,R.id.number8,R.id.number9,R.id.number10};

// then I add to arraylist and shuffle

public void randomnumbers2() {

    for (int z=0;z<10;z++) {
        buttons[z] = (Button)findViewById(idarray[z]);
    }
    for (int k=0;k<10;k++) {
        buttonimages[k] = (Button)findViewById(buttonarray[k]);
    }
    list = new ArrayList<Button>(10);
    for(int i = 0; i < 10; i++) list.add(buttons[i]);
    Collections.shuffle(list);

    for (int z=0;z<10;z++) {
        buttons[z] = (Button)findViewById(idarray[z]);
    }

    for (int j=0;j<10;j++){
        Button b1 = (Button) findViewById(idarray[j]);
        ((Button) list.set(j, buttons[j])).setBackgroundResource(buttonarray[j]);
    }
}       

But my buttons are defined like this: setup buttons

    button1 = (Button) findViewById(R.id.number1);
    button2 = (Button) findViewById(R.id.number2);
    button3 = (Button) findViewById(R.id.number3);
    button4 = (Button) findViewById(R.id.number4);
    button5 = (Button) findViewById(R.id.number5);
    button6 = (Button) findViewById(R.id.number6);
    button7 = (Button) findViewById(R.id.number7);
    button8 = (Button) findViewById(R.id.number8);
    button9 = (Button) findViewById(R.id.number9);
    button10 = (Button) findViewById(R.id.number10);

Problem is, when I click the first button. It has an image of number 5, in the 1st position, but its still associated with button #1. Basically I have 2 rows of 5 numbers mixed up. I want the button click to respond to button 5, not button1.

Answer 1

To get you started,

LinearLayout ll;
ArrayList<Button> buttons = new ArrayList<Button>();
@Override
public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);

    // create a layout
    ll = new LinearLayout(this);
    ll.setOrientation(LinearLayout.VERTICAL);

    for (int i = 0; i < 10; i++) {
        buttons.add(createButton(i));
    }
    Collections.shuffle(buttons);

    for (Button b : buttons) {
        ll.addView(b);
    }

    setContentView(ll);

}

private Button createButton(final int i) {
    Button b = new Button(this);
    b.setText(i + "");
    b.setOnClickListener(new OnClickListener() {
        @Override
        public void onClick(View v) {
            Toast.makeText(getApplicationContext(),
                    "Clicking button: " + i, Toast.LENGTH_SHORT).show();
        }

    });
    b.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
            LayoutParams.WRAP_CONTENT));
    return b;
}

Here, I am just trying to create buttons and set index as the display text. You can set your background resources to pictures or whatever you would like to. Hope this helps.

---

To have 2 rows of 5 buttons, you will need three linear layouts. Here we go for the code...

 LinearLayout ll;
    ArrayList<Button> buttons = new ArrayList<Button>();
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        // create main layout which will host two linear layouts vertically
        ll = new LinearLayout(this);
        ll.setOrientation(LinearLayout.VERTICAL);

        //create another two linear layouts which will host 5 buttons horizontally
        Linear linearLayout1 = new LinearLayout(this);
        Linear linearLayout2 = new LinearLayout(this);

        for (int i = 0; i < 10; i++) {
            buttons.add(createButton(i));
        }
        Collections.shuffle(buttons);

        //add first 5 buttons to first layout
        for (int i=0;i<5;i++) {
            linearLayout1.addView(buttons.get(i));
        }
        //add remaining 5 to second layout
        for (int i=5;i<10;i++){
            linearLayout2.addView(buttons.get(i));
        }
    //add two layouts to main layout
      ll.addView(linearLayout1);
      ll.addView(linearLayout2);


    //set main linear layout to be main layout of the actvitiy.
        setContentView(ll);

    }

    private Button createButton(final int i) {
        Button b = new Button(this);
        b.setText(i + "");
        b.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(getApplicationContext(),
                        "Clicking button: " + i, Toast.LENGTH_SHORT).show();
            }

        });
        b.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT,
                LayoutParams.WRAP_CONTENT));
        return b;
    }