Vraag Hoe beeld in tabelrij te tonen op basis van grootte


Heb 2x2 raster (Dynamisch gebruik TableLayout) moeten daarop een afbeelding tonen. nu gebaseerd op beeldgrootte, betekent-- als afbeelding past voor 1 cel betekent 1 cel, anders betekent groot 2 cellen of 4 cellen op basis van grootte (ik weet hoeveel cellen het zal innemen)

Grid

ik kan het beeld in 1 cel weergeven, maar het probleem is als het beeld 2 cellen (1ste kolom) nodig heeft, hoe kan het beeld in 2 cellen worden weergegeven (zonder het raster te verstoren)


12
2017-12-21 06:53


oorsprong


antwoorden:


Zonder het raster te verstoren, is de tijdelijke oplossing die ik zie om dynamisch in te stellen bovenop van uw TableLayout. Dan kun je dit archiveren:

enter image description hereenter image description here

Ik heb de code van het testproject geüpload hier;

Je initialiseert overlappingImage en als je eenmaal een afbeelding in je cel wilt plaatsen - je voegt het gewoon toe aan de lay-out en stelt hoogte- en breedteparameters in op basis van het aantal cellen dat je wilt vullen.

TableLayout genereert dynamisch de lay-out van de cel 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>

De Activityde lay-out:

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

En de activiteitscode om knopklikken te verwerken & tabel te genereren:

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);
    }
}

Ik hoop dat het helpt.


10
2018-01-06 10:10



Maak als volgt afzonderlijke lay-outbestanden voor rijen die één cel en twee cellen nodig hebben:

one_cell_table_row.xml (Let op de android:layout_span="2" voor de 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 (De TextView geplaatst als tijdelijke aanduiding voor de tweede cel) (nr layout_span hier nodig zoals in de bovenstaande lay-out)

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

Notitie: De ID voor de ImageView wordt in beide opmaak hetzelfde gehouden voor de onderstaande Java-code om correct te werken.

Het bovenstaande is ervan uitgaande dat uw raster 2x2 is. Als uw rastergrootte anders is, maakt u meer opmaak voor elk type rij dat u wilt en voegt u extra voorwaarden toe in de onderstaande java-code.

Het toevoegen van de TableRow met de juiste lay-out opgeblazen:

Bepaal vervolgens op programmatisch welke lay-out moet worden opgeblazen. Blaas de vereiste lay-out voor de tabelrij op en voeg deze toe aan uw tabellayout:

De volgende code gaat ervan uit dat je een fragnemt gebruikt. Als u rechtstreeks in een activiteit werkt, vervangt u de code om overeenkomstig voor Activiteit te werken.

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();

Nogmaals, het bovenstaande was ervan uitgaande dat uw TableLayout een 2x2 raster heeft. Als u een andere wilt gebruiken, werkt u de lay-outbestanden voor TableRows die we hierboven hebben gemaakt, dienovereenkomstig bij of stelt u ze dynamisch in met uw Java-code.


1
2018-01-06 10:42



U kunt de afbeeldingsgrootte en de schermgrootte tijdens runtime berekenen. Op basis van de berekeningen kunt u de tabeleigenschappen tijdens runtime instellen. Als de afbeelding bijvoorbeeld twee kolommen moet innemen, stelt u de span-eigenschap in die rij programmatisch in.

Ik zou willen voorstellen voor uw vereiste dat u kunt overwegen de lay-out in de code zelf te maken, in plaats van het gebruik van xml.

U kunt ook een kijkje nemen in de Recycler-weergave. Het heeft meer krachtige manieren om de lay-out van de kinderen te beheersen. Bekijk deze video-Mastering Recycler View -Het probeert hetzelfde te doen wat je zoekt.


1
2018-01-12 19:55