An Implementation Strategy of Computer-like Grid Layout on Android Tablet

Realization of Grid List on Flat Panel

On the tablet, many app s have lists similar to computers, which can be slid up and down. After that, each column has many categories. Each category takes up different space, which is somewhat complicated to implement. The following is directly shown in the figure above.

There is no dividing line in the middle. If there is a dividing line, it may be more complicated. And Android tablets have many sizes and need to be adapted, so they can't be written in fixed sizes.
After thinking about it for a long time, it's clear that it's easy to implement, just need ListView or RecycleView to slide up and down, then use linear layout in item, use weight to allocate space. Maybe you will say how to calculate the weight. It's complicated and difficult to calculate. In fact, it's not. Now let's talk about the use of weight.
Usually ui will give a label graph, if each unit width is labeled on the label graph, it will be easy to do, directly use the label width as a weight, so the system will automatically calculate the width, the weight may look very large, strange, but this is the simplest, isn't it?
If there is no annotation, then you drag a design to ps, measure the width of each, the same method, directly completed, and the adaptation is also completed, is it very easy? Following is an example layout:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="51dp"
    xmlns:tools="http://schemas.android.com/tools"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/tv_orderId"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="296"
        android:gravity="center"
        android:singleLine="true"
        tools:text="JRFR45"
        android:textColor="@color/grey_484848"
        android:textSize="14sp"
        android:maxLines="1"
        android:lines="1"/>

    <TextView
        android:id="@+id/tv_name"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="296"
        android:gravity="center"
        android:singleLine="true"
        tools:text="Liu Xiaozhong"
        android:textColor="@color/grey_484848"
        android:textSize="14sp"
        android:maxLines="1"
        android:lines="1"/>

    <TextView
        android:id="@+id/tv_tel"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="296"
        android:gravity="center"
        android:singleLine="true"
        tools:text="13800000000"
        android:textColor="@color/grey_484848"
        android:textSize="14sp"
        android:maxLines="1"
        android:lines="1"/>

    <TextView
        android:id="@+id/tv_price"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="296"
        android:gravity="center"
        android:singleLine="true"
        tools:text="1634"
        android:textColor="@color/grey_484848"
        android:textSize="14sp"
        android:maxLines="1"
        android:lines="1"/>

    <TextView
        android:id="@+id/tv_status"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="296"
        android:gravity="center"
        android:singleLine="true"
        tools:text="Not accepted"
        android:textColor="@color/guide_red"
        android:textSize="14sp"
        android:maxLines="1"
        android:lines="1"/>

    <TextView
        android:id="@+id/tv_time"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="300"
        android:gravity="center"
        android:singleLine="true"
        tools:text="2017 - 01 - 07 16:24:27"
        android:textColor="@color/grey_484848"
        android:textSize="14sp"
        android:maxLines="1"
        android:lines="1"/>

    <TextView
        android:id="@+id/tv_manager"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="268"
        android:gravity="center"
        android:singleLine="true"
        tools:text="1984"
        android:textColor="@color/grey_484848"
        android:textSize="14sp"
        android:maxLines="1"
        android:lines="1"/>
</LinearLayout>

The preview effect on as is as follows:

Come on.

Keywords: Android xml encoding

Added by TipPro on Fri, 14 Jun 2019 23:24:15 +0300