Android Studio開發之UI開發之橫屏豎屏不同顯示效果 -- 基礎版

序言：

不同的android設備，不同的顯示風格。比如說手機屬於豎屏設備，平板則屬於橫屏設備。如此UI設計的時候，需要考慮這個問題。於是乎，我就寫了這篇入門級的示例。以備忘！

正文：

針對橫屏豎屏分別設計不同的顯示效果。其實就是新建layout-land目錄，裏面存放橫屏UI設計；新建layout-port目錄，裏面存放豎屏UI設計。以新建layout-port爲例：

1、選中app這個目錄，鼠標右擊 --》 New --》Android Resource File

2、

 

3、橫屏UI設計，activity_main.xml源碼示例：

<?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="match_parent">

    <TextView
        android:text="Land"
        android:id="@+id/tv_show"
        android:layout_gravity="center_horizontal"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        />

    <Button
        android:text="Test"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:id="@+id/btn_test"
        android:onClick="OnClick"
        android:layout_height="wrap_content"/>

    <Button
        android:text="Demo"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:id="@+id/btn_demo"
        android:onClick="OnClick"
        android:layout_height="wrap_content"/>

    <Button
        android:text="Jimmy"
        android:layout_width="0dp"
        android:layout_weight="1"
        android:id="@+id/btn_jimmy"
        android:onClick="OnClick"
        android:layout_height="wrap_content"/>

</LinearLayout>

4、豎屏UI設計，activity_main.xml源碼示例：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:text="Land"
        android:id="@+id/tv_show"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        />

    <Button
        android:text="Test"
        android:id="@+id/btn_test"
        android:onClick="OnClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="Demo"
        android:id="@+id/btn_demo"
        android:onClick="OnClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

    <Button
        android:text="Jimmy"
        android:id="@+id/btn_jimmy"
        android:onClick="OnClick"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"/>

</LinearLayout>

5、MainActivity.java示例源碼：

package com.example.demo003_qualifiers;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;
import android.view.View;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    private TextView tv_show = null;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        tv_show = findViewById(R.id.tv_show);
    }

    public void OnClick(View view)
    {
        switch (view.getId())
        {
            case R.id.btn_demo:
                ShowMsg("button demo click.");
                break;
            case R.id.btn_jimmy:
                ShowMsg("Jimmy click.");
                break;
            case R.id.btn_test:
                ShowMsg("Test button has been clicked!");
                break;
        }
    }

    private void ShowMsg(String str)
    {
        tv_show.setText(str);
    }
}

備註：

 

運行效果：

----  The End.