Как показать изображение в строке таблицы на основе размера

У вас есть сетка 2×2 (Dynamic using TableLayout ), чтобы показать изображение. Теперь на основе размера изображения, означает: если изображение, подходящее для 1 ячейки, означает 1 ячейку, иначе большие средства – 2 ячейки или 4 ячейки на основе размера (я знаю, сколько клеток он займет)

сетка

Я могу показать изображение в 1 ячейке, но проблема в том, что если изображение нуждается в 2-х ячейках (1-й столбец), как можно показать изображение в 2 ячейке (без нарушения сетки)

Solutions Collecting From Web of "Как показать изображение в строке таблицы на основе размера"

Не нарушая сетку, обходной путь, который я вижу, – это динамически установить изображение поверх вашего TableLayout . Затем вы можете архивировать это:

Введите описание изображения здесь Введите описание изображения здесь

Здесь я загрузил код тестового проекта;

Вы инициализируете overlappingImage и как только вам нужно установить изображение в свою ячейку – вы просто добавляете его в макет и устанавливаете параметры высоты и ширины на основе количества ячеек, которые вы хотите заполнить.

TableLayout генерирует динамически, макет ячейки xml:

 <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="wrap_content" android:layout_width="wrap_content"> <View android:layout_margin="4dp" android:background="#aacc00" android:layout_height="40dp" android:layout_width="40dp"/> </FrameLayout> 

Макет мероприятия:

 <?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:id="@+id/container" android:padding="16dp" android:orientation="vertical" app:layout_behavior="@string/appbar_scrolling_view_behavior"> <TableLayout android:id="@+id/tableLayout" android:layout_width="match_parent" android:layout_height="280dp"/> <LinearLayout android:id="@+id/buttonsLinearLayout" android:layout_below="@+id/tableLayout" android:layout_marginTop="16dp" android:orientation="horizontal" android:layout_width="match_parent" android:layout_height="wrap_content"> <Button android:text="1x1" android:id="@+id/button11" android:onClick="onClick11" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:text="4x1" android:id="@+id/button21" android:onClick="onClick41" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:text="2x3 at (2;2)" android:id="@+id/button12" android:onClick="onClick32" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <Button android:text="2x2" android:id="@+id/button22" android:onClick="onClick22" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout> </RelativeLayout> 

И код действия для обработки щелчков кнопки и генерирует таблицу:

 public class MainActivity extends AppCompatActivity { RelativeLayout container; int cellWidth = 0, cellHeight = 0; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); TableLayout tableLayout = (TableLayout) findViewById(R.id.tableLayout); tableLayout.setStretchAllColumns(true); for (int i = 0; i < 4; i++) { TableRow tableRow = new TableRow(this); for (int j = 0; j < 10; j++) { LayoutInflater layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); View cell = layoutInflater.inflate(R.layout.table_cell, null, false); if (cellHeight == 0 ) { cell.measure(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED); cellWidth = cell.getMeasuredWidth(); cellHeight = cell.getMeasuredHeight(); } tableRow.addView(cell); } tableLayout.addView(tableRow); } container = (RelativeLayout)findViewById(R.id.container); overlappingImage = new ImageView(this); overlappingImage.setScaleType(ImageView.ScaleType.FIT_XY); } ImageView overlappingImage; private void restoreTableLayout() { container.removeView(overlappingImage); } public void onClick11(View view) { restoreTableLayout(); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth, cellHeight); overlappingImage.setLayoutParams(params); overlappingImage.setImageResource(R.drawable.horizontal_cat); container.addView(overlappingImage); } public void onClick41(View view) { restoreTableLayout(); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth*4, cellHeight); overlappingImage.setLayoutParams(params); overlappingImage.setImageResource(R.drawable.horizontal_cat); container.addView(overlappingImage); } public void onClick32(View view) { restoreTableLayout(); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth*3, cellHeight*2); params.setMargins(cellWidth*2, cellHeight*2, 0 ,0); overlappingImage.setLayoutParams(params); overlappingImage.setImageResource(R.drawable.vertical_cat); container.addView(overlappingImage); } public void onClick22(View view) { restoreTableLayout(); RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(cellWidth*2, cellHeight*2); overlappingImage.setLayoutParams(params); overlappingImage.setImageResource(R.drawable.horizontal_cat); container.addView(overlappingImage); } } 

Я надеюсь, что это помогает.

Создайте отдельные файлы макета для строк, для которых потребуется одна ячейка и две ячейки следующим образом:

One_cell_table_row.xml (обратите внимание на android:layout_span="2" для ImageView

 <?xml version="1.0" encoding="utf-8"?> <TableRow android:background="@drawable/bg_gray" android:layout_marginTop="5dp" xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:id="@+id/imgMyImage" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" android:layout_span="2" /> </TableRow> 

Two_cell_table_row.xml ( TextView помещен как заполнитель для второй ячейки) (здесь нет layout_span как в приведенном выше макете)

 <?xml version="1.0" encoding="utf-8"?> <TableRow xmlns:android="http://schemas.android.com/apk/res/android"> <ImageView android:id="@+id/imgMyImage" android:layout_width="match_parent" android:layout_height="wrap_content" android:padding="10dp" /> <TextView android:layout_width="0dp" android:layout_height="wrap_content" android:padding="5dp" android:layout_weight="1" android:text="..." android:textColor="#767575" android:id="@+id/txtJustAPlaceholder" android:textSize="14dp" /> </TableRow> 

Примечание . Идентификатор для ImageView должен быть одинаковым для обоих макетов, чтобы код java ниже работал правильно.

Вышеизложенное предполагает, что ваша сетка равна 2×2. Если размер вашей сетки разный, создайте больше макета для каждого типа строки, который вы хотите, и добавьте дополнительные условия в java-код ниже.

Добавление TableRow с правильной раскладкой:

Затем программно определите, какой макет нужно раздувать. Наполните требуемый макет для строки таблицы и добавьте его в макет таблицы:

Следующий код предполагает, что вы используете fragnemt. Если вы делаете прямо в действии, замените код на работу для Activity соответственно.

 TableLayout table = (TableLayout) getView().findViewById(R.id.youtTableLayout); if(<your image size needs two cells>) { TableRow row = (TableRow) LayoutInflater.from(getActivity().getApplicationContext()) .inflate(R.layout.two_cell_table_row, null); } else if(<your image size needs one cell) { TableRow row = (TableRow) LayoutInflater.from(getActivity().getApplicationContext()) .inflate(R.layout.one_cell_table_row, null); } ... ... // add more conditions and respective layouts as you need. ... ... ImageView myImgView = (ImageView) row.findViewById(R.id.txtCrdSectionHeader); // set the image for your image view here. table.addView(row); table.requestLayout(); 

Опять же, вышесказанное предполагало, что ваш TableLayout имеет сетку 2×2. Если вы планируете использовать другой, обновите файлы макета для TableRows, которые мы создали выше, соответственно или динамически настроим их с помощью Java-кода.

Вы можете рассчитать размер изображения и размер экрана во время выполнения. Основываясь на расчетах, вы можете установить свойства таблицы во время выполнения. Например, если изображение будет принимать два столбца, программным образом установите свойство span в этой строке.

Я бы предложил для вашего требования вы можете подумать о создании макета в самом коде, вместо того, чтобы использовать любой xml.

Вы также можете взглянуть на представление Recycler. Он имеет более мощные способы управления макетами детей. Посмотрите на это видео. Освоение Recycler View – оно пытается сделать то же самое, что и вы ищете.