Multiple columns cardview to fill landsacpe screen size

问题

I have this challenge: in my portrait mode I used a cardview to contain image and texts in an array, and they took two columns which is fine by me. But, the same arrangement happens in a landscaped android phone, this creates space between and after the image. How do I make the columns in landscape three(3)? Here is the code for portrait layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:layout_columnSpan="2"
    android:layout_column="2">

    <android.support.v7.widget.CardView
        android:layout_width="165dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginLeft="5dp"
        android:layout_marginRight="5dp"
        android:layout_marginTop="9dp"
        android:clickable="true"
        android:foreground="?android:attr/selectableItemBackground"
        card_view:cardBackgroundColor="@color/bright_foreground_material_dark"
        card_view:cardCornerRadius="3dp"
        card_view:cardElevation="0.01dp">

        <RelativeLayout
            android:id="@+id/top_layout"
            android:layout_width="165dp"
            android:layout_height="160dp">

            <ImageView
                android:id="@+id/img_thumbnail"
                android:layout_width="wrap_content"
                android:layout_height="150dp"
                android:layout_above="@+id/tv_species"
                android:scaleType="fitXY" />

            <TextView
                android:id="@+id/tv_species"
                android:layout_width="fill_parent"
                android:layout_height="40dp"
                android:layout_alignParentBottom="true"
                android:layout_alignParentLeft="true"
                android:layout_alignParentStart="true"
                android:layout_gravity="bottom"
                android:background="@color/custom_two"
                android:gravity="center_vertical"
                android:paddingLeft="5dp"
                android:paddingRight="2dp"
                android:text="Test"
                android:textColor="#fff"
                android:textSize="20dp" />

        </RelativeLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

回答1:

Here are two solutions for your problems:

Is to use a TableLayout and its TableRow.
Is to use a RecyclerView and a GridLayoutManager which is the optimal way in my opinion.

And in both you'll have to detect the orientation change in order to change your view columns.

1.The TableLayout way

Well you'll add a TableLayout as your top view and then add your elements in TableRow to make them in the same row ;for example,

<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:card_view="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent">
  //One row with two columns
<TableRow
    android:gravity="center">
  //Each view is a column
  <android.support.v7.widget.CardView .../>
  </android.support.v7.widget.CardView .../>
</TableRow>

//One row with three columns
<TableRow
    android:gravity="center">
  //Each view is a column
  <android.support.v7.widget.CardView .../>
  </android.support.v7.widget.CardView .../>
  </android.support.v7.widget.CardView .../>
</TableRow>

This will give you a TableLayout with two CardViews in a row, and if you want more columns to be added in the same row you just have to add them to the same TableRow tag.

So in your code you can add your standard 2 items per row then when you detect the orientation change you increase the number of columns to 3 like this:

    int numberOfColumns = 2;
    //Check your orientation either in your OnCreate or after it 
    if(this.context.getResources().getConfiguration().orientation ==
      this.context.getResources().getConfiguration()
      .ORIENTATION_LANDSCAPE)
    numberOfColumns = 3;
    //Lets say that items is an array of your items which is 
    the Image and text
    int itemsAdded = 0;
    TableRow tableRow = null;
    for (ItemView itemView : items) {
      //if the number of items added is multiple of number of columns
      //it will add a new row view to the table row
      if(itemsAdded % numberOfColumns == 0){
         tableRow = new TableRow(getApplicationContext)
           //Add your tableRow settings here
           //Layout params
         tableView.addView(tableRow);
       }
       tableRow.addView(itemView);
       itemsAdded++;
    }

You can check another example for the TableLayout here

2.The RecyclerView with GridLayoutManager [Recommended]

You'll have to do the following:

Add this dependency in your build.gradle file compile 'com.android.support:recyclerview-v7:23.0.1'
Add a RecyclerView in your layout like this <android.support.v7.widget.RecyclerView android:id="@+id/myGridRecyclerView" android:layout_width="match_parent" android:layout_height="match_parent"/>
Make an RecyclerViewAdapter and create and bind your views

The you can do this to change the number of columns:

int numberOfColumns = 2;
//Check your orientation in your OnCreate  
if(this.context.getResources().getConfiguration().orientation ==
                    this.context.getResources().getConfiguration()
                    .ORIENTATION_LANDSCAPE)
numberOfColumns = 3;
this.recyclerView.setLayoutManager(new GridLayoutManager
        (this.context,
        numberOfColumns,
        GridLayoutManager.VERTICAL, false));

You can follow this tutorial if you choose to follow this path. Using a RecyclerView will benefit you in the future if you wan to add more views to your layout, its easy and dynamic.

In both cases you'll need to check your orientation and you can detect it in your onCreate() method.

Hope this helps

来源：https://stackoverflow.com/questions/33521604/multiple-columns-cardview-to-fill-landsacpe-screen-size

标签

android

android-cardview