多列卡片视图可填充横向屏幕尺寸 [英] Multiple columns cardview to fill landsacpe screen size

问题描述

我面临这个挑战:在人像模式下，我使用cardview在一个数组中包含图像和文本，它们占据了两列，这对我来说很好.但是，同样的安排也发生在风景优美的android手机中，这在图片之间和图片之后都留出了空间.如何制作风景三(3)中的列? 这是纵向布局的代码:

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>

推荐答案

以下是针对您的问题的两种解决方案:

Here are two solutions for your problems:

1. 是使用TableLayout及其TableRow.
2. 使用RecyclerView和GridLayoutManager是我认为的最佳方法.

1. Is to use a TableLayout and its TableRow.
2. 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.

好吧，您将添加一个TableLayout作为您的顶视图，然后将您的元素添加到TableRow中，以使它们位于同一行中；例如，

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>

这将在行中为您提供一个TableLayout，其中 2 CardViews，并且如果您希望在同一行中添加更多列，则只需将它们添加到相同的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.

因此，您可以在代码中每行添加标准2个项目，然后在检测到方向变化时将列数增加为3，如下所示:

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

您可以查看TableLayout的另一个示例

You can check another example for the TableLayout here

您必须执行以下操作:

1. 在您的 build.gradle 文件中添加此依赖项 compile 'com.android.support:recyclerview-v7:23.0.1'
2. 像这样在您的布局中添加RecyclerView <android.support.v7.widget.RecyclerView android:id="@+id/myGridRecyclerView" android:layout_width="match_parent" android:layout_height="match_parent"/>
3. 制作一个RecyclerViewAdapter并创建并绑定您的视图

4. 您可以执行以下操作以更改列数:

1. Add this dependency in your build.gradle file compile 'com.android.support:recyclerview-v7:23.0.1'
2. 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"/>
3. Make an RecyclerViewAdapter and create and bind your views

4. 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));

如果您选择遵循以下路径，则可以按照本教程进行操作.如果您想在版面中添加更多视图，那么使用RecyclerView将使您受益，这既简单又动态.

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.

在两种情况下，您都需要检查方向，并可以通过onCreate()方法检测到它.

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

希望这会有所帮助

这篇关于多列卡片视图可填充横向屏幕尺寸的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！