Добавить представление между двумя строками Gridview

Question

У меня есть GridView с 3 элементами в строке, и когда я нажимаю на элемент, под строкой появляется новое представление. Это немного похоже на приложение для папки на iOS. Я не нашел ответа на SO или в Google. Может быть, вы можете дать мне несколько намеков.

Answer 1

Вы можете сделать это легко с GridLayout, но не с GridView.

Чтобы узнать доступную ширину сетки перед тем, как разместить предметы и установить количество столбцов, установите либо ViewTreeObserver.OnGlobalLayoutListener (который может затем разместить ваши предметы), либо расширьте GridLayout и переопределите onMeasure (int widthMeasureSpec, int heightMeasureSpec).

Вставьте строку после каждой строки содержимого и установите ее видимость на Visibility.GONE и ее номер columnSpec на количество столбцов вашего GridLayout. Когда пользователь ударяет элемент, вы можете получить его информацию, заполнить представление под ним и развернуть или изменить его видимость.

Наконец, для индикатора я бы просто добавил его как дочерний элемент скрытой строки, и когда пользователь закроет элемент, вычислите горизонтальный центр указанного элемента и точно разместите центр этого представления по оси X до этого координаты (поля для этого были бы в порядке).

Обратите внимание, что для очень больших списков элементов это не рекомендуется, так как вам нужно будет создавать экземпляр каждого элемента для немедленного отображения, независимо от того, все ли они подходят на экране или нет. В отличие от GridView, GridLayout не является ребенком AbsListView.

Answer 2

Хотя очевидно, что нет родной компонент выполнить то, что вы хотите сделать здесь, есть несколько способов, чтобы получить эффект, который вы хотите, комбинируя и другие методы.

Один из способов, о котором я могу думать, - создать свой собственный адаптер и добавить функциональность, чтобы вставить еще 3 элемента под строку, щелкнутую с каким-то переименованием, чтобы вы могли отличить ее от обычного вида, конечно же, в getView метод адаптера, вам нужно будет сделать валидацию, чтобы узнать, какое представление надуть и вернуть, после обновления представления эти 3 элемента будут вставлены под щелчком элемента, и, конечно, вы можете избавиться от них, изменив список адаптером отображается. (Этот подход требует довольно хороших знаний о пользовательских адаптерах, я сделал что-то вроде этого и является чистым и хорошим подходом).

Другой подход к этой проблеме, который не так хорош, как первый, однако, абсолютно выполнит трюк, создав «Шаблон» Эффекта, который вы хотите получить (например, тот, который вы видите на картинке), сохраните этот шаблон как часть активности поверх вашего вида сетки невидимым, как только кто-то нажат на элемент, заполните шаблон соответствующим информации, которую вы хотите показать, сделайте сетку невидимой и принесите «шаблон», видимый на верхней части сетки, с информацией, которую вы хотите показать правильно заполненной, пользователь не заметит изменения, и когда вы захотите вернуться к представлению сетки, просто удалите этот «шаблонный» вид, и он будет действовать имея сетку так, как она была первоначально.

Надеюсь, это поможет.

С уважением!

Answer 3

Я использую TableLayout.addView для добавления ImageView, ему может понадобиться другая переменная removeView, в настоящее время я просто удаляю ее и добавляю еще одну кнопку при нажатии кнопки.

изменить ImageView по своей позиции, которую вы можете основывать на том, чтобы изменить цвет фона, так что пользователь будет предположить, что это связано с одним клике

ImageView imag; 
boolean imageOn = false; 

@Override 
protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    setContentView(R.layout.activity_main); 
    imag = new ImageView(this); 
    final TableLayout table = (TableLayout) findViewById(R.id.tableLayoutCategoryButtons); 
    int buttonsInRow = 3; 
    String[] itemNames = getResources().getStringArray(R.array.categories_array); 

    int numRows=(itemNames.length/buttonsInRow); 
    if (itemNames.length%buttonsInRow!=0) 
     numRows++; 

    Button[] buttons = new Button[itemNames.length]; 
    LinearLayout[] tablerowLayout = new LinearLayout[numRows]; 
    tablerowLayout[0] = new LinearLayout(table.getContext()); 
    int rowcount=0; 
    for (int i=0; i<itemNames.length; i++){ 
     buttons[i]= new Button(table.getContext(), null, android.R.attr.buttonStyleSmall); 
     buttons[i].setText(itemNames[i]); 
     buttons[i].setId(i); 
     buttons[i].setTextColor(Color.BLACK); 
     buttons[i].setVisibility(View.VISIBLE); 
     buttons[i].setOnClickListener(new OnClickListener(){ 

      @Override 
      public void onClick(View v) { 
       if(imageOn){ 
        table.removeView(imag); 
        imageOn = false; 
       } 
       int index = v.getId()/buttonsInRow+1; 
       if(v.getId()%buttonsInRow==1) 
        imag.setImageResource(R.drawable.reta); 
       else if(v.getId()%buttonsInRow==2) 
        imag.setImageResource(R.drawable.reta2); 
       else 
        imag.setImageResource(R.drawable.reta3); 

       imageOn = true; 
       table.addView(imag, index); 

      }}); 

     LinearLayout.LayoutParams buttonLayoutParams = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT); 
     tablerowLayout[rowcount].addView(buttons[i], buttonLayoutParams); 

     if (((i+1)%buttonsInRow==0)&&(i!=0)){ 

      table.addView(tablerowLayout[rowcount++]); 
      if(rowcount<numRows) 
       tablerowLayout[rowcount] = new LinearLayout(table.getContext()); 
     } 
    } 
    if(rowcount<numRows) 
     table.addView(tablerowLayout[rowcount]);