问题
I am using staggered grid layout manager to set staggered grid in my app,I have used Imageview inside "card view".The staggered effect is working properly ,but some cases when image size is too large,then the layout will be like this
[![enter image description here][1]][1]
my xml file
<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>
The width of the cardview is 220dp and height is 180 dp ,and image views width = "match_parent " and height = "wrap_content" also the scale type is centerCrop,This is working properly for small sized images.The layout will be like below screen shot,in case of large sized images.How to solve this problem??
The View is like below, on small sized devices
回答1:
Set different number of columns for large screen ' layout's ,normal screen layout's ,and small screen layout's etc.Check the device screen size programmatically by using this code .
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";
}
回答2:
Below are some basic steps to create a staggered grid in Oodles Technologies-
Create a view.
Set StaggeredGridLayout LayoutManager.
Adapter to inflate the staggeredgrid views.
1- Create a view-
As we know staggeredgrid is not a direct view it is a layoutmanager that lays out children in a staggered grid formation. We use RecyclerView as a view for staggerd grid.
Here is our recyclerview in layout-
<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- Set StaggeredGridLayout LayoutManager- Our view is ready, let's use Layoutmanager to create grids on the view.
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- Adapter to inflate the staggeredgrid views- To inflate the data in form of grid first we need a layout which will represent that data.We are using CardView for this and the layout is-
<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>
We setup our all the basic steps, it's time to complete our main activity. here is the complete code of 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;
}
}
minchar
来源：https://stackoverflow.com/questions/31988315/how-to-set-staggered-grid-layout-in-different-screen-dimensions