如何在不同的屏幕尺寸下设置交错网格布局。？

Question

我正在使用交错网格布局管理器在我的应用程序中设置交错网格，我在 "card view" 中使用了 Imageview。交错效果正常工作，但有些情况下图像尺寸太大，然后布局将是这样的

[![在此处输入图片描述][1]][1]

我的xml文件

<android.support.v7.widget.CardView
xmlns:card_view="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/card_view"
android:layout_width="220dp"
android:layout_height="180dp"
card_view:cardUseCompatPadding="true"
card_view:cardCornerRadius="8dp"
android:layout_marginBottom="16dp">

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/country_photo"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:contentDescription="@string/action_settings"
        android:src="@drawable/three"

        android:scaleType="centerCrop" />

    <ImageView
        android:id="@+id/outside_imageview"
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:layout_marginBottom="8dp"
        android:layout_marginRight="8dp"

        android:src="@drawable/varified"
        android:layout_alignBottom="@id/country_photo"

        android:layout_alignRight="@id/country_photo"
        android:scaleType="fitEnd" />
</RelativeLayout>

卡片视图的宽度为 220dp，高度为 180dp，图像视图宽度 = "match_parent " 和高度 = "wrap_content" 比例类型为 centerCrop，这适用于小尺寸images.The 布局会像下面的截图，大尺寸的情况下 images.How 解决这个问题？？

在小型设备上的视图如下所示

Answer 1

使用此代码以编程方式为大屏幕布局、普通屏幕布局和小屏幕布局设置不同的列数etc.Check设备屏幕尺寸。

public void checkScreenSize()
{

int screenSize = getResources().getConfiguration().screenLayout &
        Configuration.SCREENLAYOUT_SIZE_MASK;
String toastMsg;
switch (screenSize) {
        case Configuration.SCREENLAYOUT_SIZE_XLARGE:
            toastMsg = "XLarge screen";

            //set action

            break;
        case Configuration.SCREENLAYOUT_SIZE_UNDEFINED:
            toastMsg = "XLarge screen";
              //set action
             break;
        case Configuration.SCREENLAYOUT_SIZE_LARGE:
            toastMsg = "Large screen";
             //set action
            break;

        case Configuration.SCREENLAYOUT_SIZE_NORMAL:
            toastMsg = "Normal screen";
             //set action
            break;
        case Configuration.SCREENLAYOUT_SIZE_SMALL:
             //set action
            toastMsg = "Small screen";
            break;
        default:
            toastMsg = "Screen size is neither large, normal or small";



}

Answer 2

以下是在 Oodles Technologies 中创建交错网格的一些基本步骤-

创建视图。

设置 StaggeredGridLayout 布局管理器。

用于扩充交错网格视图的适配器。

1-创建视图-

正如我们所知，交错网格不是一个直接视图，它是一个布局管理器，它以交错网格形式布置子项。我们使用 RecyclerView 作为交错网格的视图。

这是我们布局中的recyclerview-

<relativelayout android:layout_height="match_parent" android:layout_width="match_parent" android:paddingtop="@dimen/activity_vertical_margin" tools:context="com.deepanshu.staggered_gridlayout.MainActivity" xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools">

    <android.support.v7.widget.recyclerview android:id="@+id/favPlaces" android:layout_height="match_parent" android:layout_width="match_parent">
</android.support.v7.widget.recyclerview></relativelayout>

2-设置StaggeredGridLayout LayoutManager- 我们的视图已准备就绪，让我们使用 Layoutmanager 在视图上创建网格。

RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
       StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
       layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
       favPlaces.setLayoutManager(layoutManager);
       favPlaces.setHasFixedSize(true);

3- 用于膨胀交错网格视图的适配器- 要以网格形式填充数据，我们首先需要一个布局，它表示 data.We 正在为此使用 CardView，并且布局是 -

    <android.support.v7.widget.cardview android:layout_height="wrap_content" android:layout_width="match_parent" app:cardcornerradius="4dp" app:cardusecompatpadding="true">
        <linearlayout android:background="@color/colorPrimary" android:layout_height="match_parent" android:layout_width="match_parent" android:orientation="vertical">

          <imageview android:adjustviewbounds="true" android:id="@+id/placePic" android:layout_height="match_parent" android:layout_width="match_parent" android:scaletype="fitXY">

           <textview android:gravity="center" android:id="@+id/placeName" android:layout_height="wrap_content" android:layout_width="match_parent" android:textsize="16sp">


    </textview></imageview></linearlayout>
</android.support.v7.widget.cardview>

</linearlayout>
 Now we have our layout to inflate the data. Let's bind the data on view with the help of adapter-

public class StaggeredAdapter extends
RecyclerView.Adapter
<staggeredadapter.viewholder>{

    private ArrayList<placedetails> placeList;
    // Provide a reference to the views for each data item
    public static class ViewHolder extends RecyclerView.ViewHolder {

        public TextView placeName;
        public ImageView placePic;

        public ViewHolder(View itemView) {
            super(itemView);
            placeName = (TextView) itemView.findViewById(R.id.placeName);
            placePic = (ImageView) itemView.findViewById(R.id.placePic);
        }
    }

    public StaggeredAdapter(ArrayList<placedetails> placeList){
        this.placeList = placeList;
    }


    // Create new views (invoked by the layout manager)
    @Override
    public StaggeredAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.staggered_layout, parent, false);
        // set the view's size, margins, paddings and layout parameters
        return new ViewHolder(v);
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {

        holder.placeName.setText(placeList.get(position).getName());
        holder.placePic.setImageResource(placeList.get(position).getImageUrl());


    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return placeList.size();
    }
}
</staggeredadapter.viewholder>

我们设置了所有基本步骤，是时候完成我们的主要步骤了 activity。这是 main activity-

的完整代码

public class MainActivity extends AppCompatActivity {

    int placeImage[]= {R.drawable.agattia_airport_lakshadweep,R.drawable.nainital,R.drawable.goa,
            R.drawable.lotus_temple,R.drawable.valley_of_flowers,R.drawable.ranikhet,R.drawable.dehradun,R.drawable.nainital1};

    String placeName[]= {"Lakshadweep, India","Nainital, India","Goa, India","Lotus-Temple, India","Valley-Of-Flowers, India","Ranikhet, India",
    "Dehradun, India","Nainital, India"};

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        RecyclerView favPlaces = (RecyclerView) findViewById(R.id.favPlaces);
        StaggeredGridLayoutManager layoutManager = new StaggeredGridLayoutManager(2,StaggeredGridLayoutManager.VERTICAL);
        layoutManager.setGapStrategy(StaggeredGridLayoutManager.GAP_HANDLING_NONE);
        favPlaces.setLayoutManager(layoutManager);
        favPlaces.setHasFixedSize(true);
        ArrayList<PlaceDetails> placeList = getPlaces();

        StaggeredAdapter staggeredAdapter = new StaggeredAdapter(placeList);
        favPlaces.setAdapter(staggeredAdapter);
    }

    private ArrayList<PlaceDetails> getPlaces() {
        ArrayList<PlaceDetails> details = new ArrayList<>();
        for (int index=0; index<placeImage.length;index++){
            details.add(new PlaceDetails(placeImage[index],placeName[index]));
        }
        return details;
    }
}

明查尔

如何在不同的屏幕尺寸下设置交错网格布局。？

How to set Staggered grid layout in different screen dimensions.?

android

android-layout

android-gridview

android-cardview

android-gridlayout