在带有滚动视图的 Android 响应式设计屏幕中并使其响应？答案

【问题标题】：In Android Responsive Design screen with scroll view and make it responsive?在带有滚动视图的 Android 响应式设计屏幕中并使其响应？
【发布时间】：2018-12-15 06:14:16
【问题描述】：

Image 我是Android新手所以我不知道如何

设计这个屏幕显示在图像中使用

滚动视图并使其响应

请给我想法或例子

【问题讨论】：

点击此链接获取响应式 UI [stackoverflow.com/questions/41498646/…

标签： android xml

【解决方案1】：

我会根据您的要求为您提供基本解决方案，您可以更改图像图标、边距和布局高度和宽度等。

<?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"
    android:orientation="vertical">

    <ScrollView
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical">


            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginVertical="10dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="28dp"
                        android:layout_height="28dp"
                        android:padding="2dp"
                        android:gravity="center"
                        android:background="@drawable/circle"
                        android:text="1" />

                    <ImageView
                        android:id="@+id/img1"
                        android:layout_width="wrap_content"
                        android:layout_height="70dp"
                        android:layout_centerInParent="true"
                        android:background="@drawable/ic_fingerprint_black_24dp" />


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_centerHorizontal="true"
                        android:gravity="center"
                        android:layout_below="@+id/img1"
                        android:layout_marginTop="10dp"
                        android:text="hello" />

                </RelativeLayout>

                <View
                    android:layout_width="5dp"
                    android:layout_marginVertical="15dp"
                    android:background="@color/colorPrimary"
                    android:layout_height="80dp" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="28dp"
                        android:layout_height="28dp"
                        android:padding="2dp"
                        android:layout_marginLeft="5dp"
                        android:gravity="center"
                        android:background="@drawable/circle"
                        android:text="8" />

                    <ImageView
                        android:id="@+id/img2"
                        android:layout_width="wrap_content"
                        android:layout_height="70dp"
                        android:layout_centerInParent="true"
                        android:background="@drawable/ic_fingerprint_black_24dp" />


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/img2"
                        android:layout_centerHorizontal="true"
                        android:gravity="center"
                        android:layout_marginTop="10dp"
                        android:text="hello" />

                </RelativeLayout>

            </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <View
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:layout_marginVertical="10dp"
                android:background="@color/colorPrimary"
                android:layout_marginHorizontal="15dp"
                android:layout_height="5dp" />

            <View
                android:layout_width="match_parent"
                android:layout_weight="1"
                android:layout_marginHorizontal="15dp"
                android:layout_marginVertical="10dp"
                android:background="@color/colorPrimary"
                android:layout_height="5dp" />

        </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:layout_marginVertical="10dp"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="28dp"
                        android:layout_height="28dp"
                        android:padding="2dp"
                        android:gravity="center"
                        android:background="@drawable/circle"
                        android:text="1" />

                    <ImageView
                        android:id="@+id/img11"
                        android:layout_width="wrap_content"
                        android:layout_height="70dp"
                        android:layout_centerInParent="true"
                        android:background="@drawable/ic_fingerprint_black_24dp" />


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/img11"
                        android:layout_centerHorizontal="true"
                        android:gravity="center"
                        android:layout_marginTop="10dp"
                        android:text="hello" />

                </RelativeLayout>

                <View
                    android:layout_width="5dp"
                    android:layout_marginVertical="15dp"
                    android:background="@color/colorPrimary"
                    android:layout_height="80dp" />

                <RelativeLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="28dp"
                        android:layout_height="28dp"
                        android:padding="2dp"
                        android:layout_marginLeft="5dp"
                        android:gravity="center"
                        android:background="@drawable/circle"
                        android:text="8" />

                    <ImageView
                        android:id="@+id/img21"
                        android:layout_width="wrap_content"
                        android:layout_height="70dp"
                        android:layout_centerInParent="true"
                        android:background="@drawable/ic_fingerprint_black_24dp" />


                    <TextView
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:layout_below="@+id/img21"
                        android:layout_centerHorizontal="true"
                        android:gravity="center"
                        android:layout_marginTop="10dp"
                        android:text="hello" />

                </RelativeLayout>

            </LinearLayout>

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:orientation="horizontal">

                <View
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:layout_marginVertical="10dp"
                    android:background="@color/colorPrimary"
                    android:layout_marginHorizontal="15dp"
                    android:layout_height="5dp" />

                <View
                    android:layout_width="match_parent"
                    android:layout_weight="1"
                    android:layout_marginHorizontal="15dp"
                    android:layout_marginVertical="10dp"
                    android:background="@color/colorPrimary"
                    android:layout_height="5dp" />

            </LinearLayout>

        </LinearLayout>
    </ScrollView>
</LinearLayout>

【讨论】：

【解决方案2】：

API 30

对宽度、高度和边距使用计算值

ex - height = (getHeight(this) / 0.5) //50% 的设备高度

获取设备宽度和高度

    fun getWidth(context: Context): Int {
        val displayMetrics = DisplayMetrics()
        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            context.display?.getRealMetrics(displayMetrics)
            displayMetrics.widthPixels
        }else{
            this.windowManager.defaultDisplay.getMetrics(displayMetrics)
            displayMetrics.widthPixels
        }
    }

    fun getHeight(context: Context): Int {
        val displayMetrics = DisplayMetrics()
        return if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.R) {
            context.display?.getRealMetrics(displayMetrics)
            displayMetrics.heightPixels
        }else {
            val displayMetrics = DisplayMetrics()
            this.windowManager.defaultDisplay.getMetrics(displayMetrics)
            displayMetrics.heightPixels
        }
    }

MainActiviy onCreate() 方法

为视图动态设置值，因此它们将根据设备大小进行缩放

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)

        val view = findViewById<Button>(R.id.button).layoutParams as ViewGroup.MarginLayoutParams
        view.apply {
            width = (getWidth(this@MainActivity) * 0.5).toInt()
            height = (getHeight(this@MainActivity) * 0.5).toInt() //scroll view height should maupulate by it's children, for dynamic layouts
            setMargins(50, 50, 0, 50)
        }
    }

包含滚动视图的布局 XML 文件

<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/scroll"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#4CAF50"
    tools:context=".MainActivity">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:id="@+id/constraintLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#C81D1D">

        <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="300dp"
            android:text="Button"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</ScrollView>

设计

设备上的实际结果

如果要减去操作栏高度和状态栏高度得到实际可用的视图高度，使用下面的代码

height = (getHeight(this@MainActivity) * 0.5).toInt()  - getActionBarHeight() - getStatusBarHeight()

操作栏高度和状态栏高度

fun getStatusBarHeight(): Int {
        val resourceId = resources.getIdentifier("status_bar_height", "dimen", "android")
        if (resourceId > 0) {
            return resources.getDimensionPixelSize(resourceId)
        }
        return 0
    }

    fun getActionBarHeight() : Int {
        val tv = TypedValue()
        this.theme.resolveAttribute(android.R.attr.actionBarSize, tv, true)
        return resources.getDimensionPixelSize(tv.resourceId)
    }

结果

【讨论】：