DialogX tablet adaptation guide and “Write a letter to the Future” landscape adaptation scheme review

The introduction

First about Android App how to tablet adaptation, promote reading article: 【Android tablet adaptation 】 mobile phone/tablet two-in-one application one-stop adaptation guide @ Nit

The points to note are written here:

1. How do I make my Activity not restart automatically when switching between horizontal and vertical screens

Add the following configuration to the Activity node in androidmanifest.xml:

<activity
    ...
    android:configChanges="screenSize|smallestScreenSize|screenLayout|orientation" />
Copy the code

2. How to determine whether it is flat and landscape screen

To determine whether the screen is landscape, use the following methods:

public static boolean isTablet() {
    return (getInstance().getResources().getConfiguration().screenLayout & Configuration.SCREENLAYOUT_SIZE_MASK) >= Configuration.SCREENLAYOUT_SIZE_LARGE;
}
Copy the code

You can use the following methods to determine whether the screen is landscape:

private static boolean isLandscape(Activity activity) { if (activity ! = null) { return activity.getResources().getConfiguration().orientation == Configuration.ORIENTATION_LANDSCAPE; } return false; }Copy the code

How does writing a letter to the future fit in landscape

Based on the UI

For most of the interface, we evaluated, based on the development costs to consider there is no specific way for the tablet to redesign the UI, but adaptation scheme adopted the “compatible”, and the specific logic is that when vertical screen ensure all UI can dynamically to match the window size, rather than “geometric scaling scheme for display, that is, according to the following logic, Center UI in landscape:

For the content layout, we rewrote the outer ViewGroup of the content layout to support setting the maxWidth maximum width:

/**
 * @author: Kongzue
 * @github: https://github.com/kongzue/
 * @homepage: http://kongzue.com/
 * @mail: [email protected]
 * @createTime: 2019/9/24 17:34
 */
public class HorizontalScreenAdapterRelativeLayout extends RelativeLayout {
    
    private int maxWidth;
    private int maxHeight;
    
    public HorizontalScreenAdapterRelativeLayout(Context context) {
        super(context);
    }
    
    public HorizontalScreenAdapterRelativeLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
    }
    
    public HorizontalScreenAdapterRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }
    
    private void init(Context context, AttributeSet attrs) {
        maxWidth = Math.min(getDisplayWidth(),getDisplayHeight());
    }
    
    public HorizontalScreenAdapterRelativeLayout setMaxHeight(int maxHeight) {
        this.maxHeight = maxHeight;
        return this;
    }
    
    public HorizontalScreenAdapterRelativeLayout setMaxWidth(int maxWidth) {
        if (maxWidth > 0) this.maxWidth = maxWidth;
        return this;
    }
    
    private int preWidth = -1;
    
    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int heightMode = MeasureSpec.getMode(heightMeasureSpec);
        int widthMode = MeasureSpec.getMode(widthMeasureSpec);
        
        int heightSize = MeasureSpec.getSize(heightMeasureSpec);
        int widthSize = MeasureSpec.getSize(widthMeasureSpec);
        
        if (preWidth == -1 && widthSize != 0) {
            preWidth = widthSize;
        }
        if (maxHeight > 0) {
            heightSize = Math.min(heightSize, maxHeight);
        }
        if (maxWidth > 0) {
            widthSize = Math.min(widthSize, maxWidth);
        }
        
        int maxHeightMeasureSpec = MeasureSpec.makeMeasureSpec(heightSize, heightMode);
        int maxWidthMeasureSpec = MeasureSpec.makeMeasureSpec(widthSize, widthMode);
        super.onMeasure(maxWidthMeasureSpec, maxHeightMeasureSpec);
    }
    
    public int dip2px(float dpValue) {
        final float scale = getResources().getDisplayMetrics().density;
        return (int) (dpValue * scale + 0.5f);
    }
    
    public int getDisplayWidth() {
        Display disp =  ((Activity)getContext()).getWindowManager().getDefaultDisplay();
        Point outP = new Point();
        disp.getSize(outP);
        return outP.x;
    }
    
    public int getDisplayHeight() {
        Display disp = ((Activity)getContext()).getWindowManager().getDefaultDisplay();
        Point outP = new Point();
        disp.getSize(outP);
        return outP.y;
    }
}
Copy the code

By default, this layout automatically limits the width of the other maximum edge based on the minimum screen width, or you can modify the code to customize it.

Dialog UI

In addition, the adaptation of the dialog box is also very important. To write a letter to the future is developed on the UI of the dialog box based on DialogX, and DialogX is equipped with maxWidth limited function, which can be directly used:

int maxWidth = Math.min(getDisplayWidth(), getDisplayHeight());
DialogX.dialogMaxWidth = maxWidth;
Copy the code

conclusion

Above, thanks again for the help and technical support given by xiaomi MIUI team in Pad adaptation. The “Write a Letter to the Future” development team will continue to strive to provide better user experience. I wish you and I a promising future!