Question

我使用交错网格布局管理器在我的应用程序中设置交错网格，我在“卡片视图”中使用了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>

cardview的宽度为220dp，高度为180 dp，图像视图width =“match_parent”和height =“wrap_content”，缩放类型为centerCrop，这适用于小尺寸图像。布局将是喜欢下面的屏幕截图，如果是大尺寸的图像。怎么解决这个问题？

视图如下所示，适用于小型设备

Answer 1

为大屏幕布局，普通屏幕布局和小屏幕布局等设置不同的列数。使用此代码以编程方式检查设备屏幕大小。

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 LayoutManager。

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

1-创建视图 -

正如我们所知，staggeredgrid不是一个直接视图，它是一个布局管理器，它以交错的网格形式布置儿童。我们使用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-适用于对交错网格视图进行充气 - 首先要以网格形式膨胀数据，我们需要一个代表该数据的布局。我们正在使用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>

我们设置了所有基本步骤，是时候完成我们的主要活动了。这是主要活动的完整代码 -

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

minchar

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

2 个答案: