How does the GridView adapt to different screens?

How does the GridView adapt to different screens?

Like ListView, GridView is one of the commonly used controls in projects. This article describes how to adapt GridView to screens of different sizes. First, let's take a look at one of the following:

For each behavior of four items, the spacing between the top and bottom is about 2 DP, and the image in each item is scaled or enlarged to adapt to the screen (always square) according to different screen sizes ), most of us may set columnWidth to a fixed value such as 70dp when using the GridView, and then numColumns is automatically adapted. This can also be done, but it will affect the user experience, so how can we achieve such an effect?

If you have already read this article, Please bypass it. What do you think of your shoes that will not achieve this? How can we ensure that each row has four items and automatically adapts to the screen size? Let's analyze it step by step: first, it's not easy to ensure that four items are in each row. Can we just put numColumns = "4? Then, how can we determine the width and height of each item? In fact, it is also very simple. To determine the width and height of an item based on the screen size, do you have to know the screen width first?

WindowManager windowManager = getWindowManager();            Display display = windowManager.getDefaultDisplay();            wh=display.getWidth();

The wh is the screen width, but note that the pixel px is obtained, then, we use a simple mathematical algorithm to calculate the width of each item on the screen. The four items in each row are known, the width of each row is wh, and the distance between each item is 2, what is the width of each item?

Solution: the width of each item = (wh-(5*2)/4;

That is, after the row width and spacing are divided by the number of items in each row, will the width of each item be obtained? Then, the height and width are equal.

But another problem is that we usually use dp instead of px when defining in xml. How can this problem be solved? Then, can we convert dp to px?

public static int Dp2Px(Context context, float dp) {     final float scale = context.getResources().getDisplayMetrics().density;     return (int) (dp * scale + 0.5f); }

This method is to convert dp to px. first look at the GridView in xml:

        <GridView            android:layout_width="fill_parent"            android:layout_height="wrap_content"            android:fadingEdge="none"            android:gravity="center_horizontal"            android:horizontalSpacing="2dp"            android:listSelector="@null"            android:numColumns="4"            android:scrollbars="none"            android:stretchMode="columnWidth"            android:verticalSpacing="2dp" >        </GridView>

NumColumns = "4", verticalSpacing and horizontalSpacing are both 2dp. Therefore, when calculating the width of an item, we need to calculate it as follows: (wh-(5 * Dp2Px (context, 2)/4; convert 2dp to the pixel value, and set marginLeft = "2dp" and marginRight = "2dp" for the distance between the GridView and the screen.

Then, we dynamically set the width and height of each item in the getView method of the adapter (Note: Do not set the fixed width and height of the layout file of the item, all are fill_parent ):

AbsListView. LayoutParams param = new AbsListView. LayoutParams (width, height); convertView. setLayoutParams (param );

Return convertView.

Demo can refer to the next article: ScrollView nested GridView for damping rebound effect

In Android, how does one automatically adapt to the number of adapters in each row of the GridView?

Android: numColumns is used to set the number of columns. You can set the number of columns to display by yourself. Of course, you can also set the number of columns dynamically based on the screen size and image size! If you do not set this parameter, gallery automatically adjusts the number of columns! I have not tried it!
 
What display attributes should be considered for different Android screen adapters?

In simple terms, there are long and wide, internal and external margins, font size, and the placement position of controls, set controls (such as the number of displayed content in each row in the gridview.