Question

我需要设计如下的视图。

说明：

前两个观点是cardviews。最上面一个将包含一个图表下面是4个图块，底部有图像和文字

问题：

我能够得到这样的设计，但它不适合所有手机和屏幕类型。我该如何解决这个问题？

代码：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eaeaea"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context=".activity.MainActivity"
    tools:showIn="@layout/app_bar_main">

    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true">

        <LinearLayout android:id="@+id/reportView"
            android:layout_width="match_parent"
            android:layout_height="268dp"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"
            android:layout_marginTop="6dp"
            android:orientation="horizontal"
            android:weightSum="1.0">

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                card_view:cardElevation="3dp"
                card_view:cardUseCompatPadding="true">

                <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical"
                    android:weightSum="1.0">

                    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        android:orientation="vertical"
                        android:layout_weight="0.5"
                        android:layout_marginTop="5dp"
                        android:gravity="start">

                        <TextView
                            android:layout_width="match_parent"
                            android:layout_height="match_parent"
                            android:layout_gravity="start"
                            android:text="Inventory / Missing Report"
                            android:textSize="20dp"
                            android:textAlignment="center"
                            android:textColor="#4e28d8" />


                    </LinearLayout>

                    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                        android:layout_width="match_parent"
                        android:layout_height="202dp"
                        android:gravity="bottom"
                        android:orientation="vertical">

                        <com.github.mikephil.charting.charts.PieChart
                            android:id="@+id/chart"
                            android:layout_width="match_parent"
                            android:layout_height="177dp" />

                    </LinearLayout>
                </LinearLayout>
            </android.support.v7.widget.CardView>

        </LinearLayout>

        <android.support.v7.widget.CardView
            android:layout_width="match_parent"
            android:layout_height="280dp"
            android:orientation="horizontal"
            android:layout_marginLeft="6dp"
            android:layout_marginRight="6dp"
            android:layout_gravity="bottom"
            android:weightSum="1.0">

            <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical" >

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dip"
                    android:orientation="horizontal"
                    android:layout_weight="1" >

                    <LinearLayout
                        android:layout_height="match_parent"
                        android:layout_width="0dip"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:padding="16dp"
                        android:paddingTop="15dp"
                        android:id="@+id/shorcut_scan">
                        <ImageView
                            android:src="@drawable/ic_scan"
                            android:layout_width="70dp"
                            android:layout_height="70dp"
                            android:layout_gravity="center"
                            android:id="@+id/shorcut_scan_image"/>
                        <TextView
                            android:id="@+id/shorcut_scan_txt"
                            android:layout_height="wrap_content"
                            android:layout_width="wrap_content"
                            android:text="Scan"
                            android:layout_gravity="center"/>
                    </LinearLayout>

                    <LinearLayout
                        android:layout_height="match_parent"
                        android:layout_width="0dip"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:padding="16dp"
                        android:paddingTop="15dp"
                        android:id="@+id/shorcut_search">
                        <ImageView
                            android:src="@android:drawable/ic_menu_search"
                            android:layout_width="70dp"
                            android:layout_height="70dp"
                            android:layout_gravity="center"
                            android:id="@+id/shorcut_search_image"/>
                        <TextView
                            android:id="@+id/shorcut_search_txt"
                            android:layout_height="wrap_content"
                            android:layout_width="wrap_content"
                            android:text="Search"
                            android:layout_gravity="center"/>
                    </LinearLayout>

                </LinearLayout>

                <LinearLayout
                    android:layout_width="match_parent"
                    android:layout_height="0dip"
                    android:orientation="horizontal"
                    android:layout_weight="1" >

                    <LinearLayout
                        android:layout_height="match_parent"
                        android:layout_width="0dip"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:padding="16dp"
                        android:paddingTop="15dp"
                        android:id="@+id/shorcut_assign_tags">
                        <ImageView
                            android:src="@drawable/ic_assign_tag"
                            android:layout_width="70dp"
                            android:layout_height="70dp"
                            android:layout_gravity="center"
                            android:id="@+id/shorcut_assign_tags_image"/>
                        <TextView
                            android:id="@+id/shorcut_assign_tags_txt"
                            android:layout_height="wrap_content"
                            android:layout_width="wrap_content"
                            android:text="Assign"
                            android:layout_gravity="center"/>
                    </LinearLayout>


                    <LinearLayout
                        android:layout_height="match_parent"
                        android:layout_width="0dip"
                        android:layout_weight="1"
                        android:orientation="vertical"
                        android:padding="16dp"
                        android:paddingTop="15dp"
                        android:id="@+id/shorcut_edit_tags">
                        <ImageView
                            android:src="@drawable/ic_assign_tag"
                            android:layout_width="70dp"
                            android:layout_height="70dp"
                            android:layout_gravity="center"
                            android:id="@+id/shorcut_edit_tags_image"/>
                        <TextView
                            android:id="@+id/shorcut_edit_tags_txt"
                            android:layout_height="wrap_content"
                            android:layout_width="wrap_content"
                            android:text="Edit"
                            android:layout_gravity="center"/>
                    </LinearLayout>


                </LinearLayout>
            </LinearLayout>

        </android.support.v7.widget.CardView>
    </FrameLayout>
</RelativeLayout>

Answer 1

您应该使用约束布局。此布局可帮助您设计涵盖所有设备的布局。有了它，您可以构建响应式布局。

学习本教程

https://developer.android.com/training/constraint-layout/index.html

Answer 2

试试这个：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#eaeaea"
    app:layout_behavior="@string/appbar_scrolling_view_behavior">


    <FrameLayout
        android:id="@+id/content_frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent">


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

            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_marginBottom="20dp"
                android:layout_weight="50"
                android:paddingBottom="50dp"
                card_view:cardElevation="3dp"
                card_view:cardUseCompatPadding="true">

                <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <TextView
                        android:layout_width="match_parent"
                        android:layout_height="0dp"
                        android:layout_weight="1.2"
                        android:layout_gravity="start"
                        android:padding="5dp"
                        android:text="Inventory / Missing Report"
                        android:textAlignment="center"
                        android:textColor="#4e28d8"
                        android:textSize="20dp" />

                    <com.github.mikephil.charting.charts.PieChart
                        android:id="@+id/chart"
                        android:layout_width="match_parent"
                        android:layout_height="180dp" />



                </LinearLayout>
            </android.support.v7.widget.CardView>


            <android.support.v7.widget.CardView
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_gravity="bottom"
                android:layout_marginLeft="6dp"
                android:layout_marginRight="6dp"
                android:layout_weight="50"
                android:layout_marginBottom="20dp"
                android:orientation="horizontal"
                android:weightSum="1.0">

                <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
                    android:layout_width="match_parent"
                    android:layout_height="match_parent"
                    android:orientation="vertical">

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dip"
                        android:layout_weight="1"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:id="@+id/shorcut_scan"
                            android:layout_width="0dip"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:padding="16dp"
                            android:paddingTop="15dp">

                            <ImageView
                                android:id="@+id/shorcut_scan_image"
                                android:layout_width="70dp"
                                android:layout_height="70dp"
                                android:layout_gravity="center"
                                 />

                            <TextView
                                android:id="@+id/shorcut_scan_txt"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="Scan" />
                        </LinearLayout>

                        <LinearLayout
                            android:id="@+id/shorcut_search"
                            android:layout_width="0dip"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:padding="16dp"
                            android:paddingTop="15dp">

                            <ImageView
                                android:id="@+id/shorcut_search_image"
                                android:layout_width="70dp"
                                android:layout_height="70dp"
                                android:layout_gravity="center"
                                android:src="@android:drawable/ic_menu_search" />

                            <TextView
                                android:id="@+id/shorcut_search_txt"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="Search" />
                        </LinearLayout>

                    </LinearLayout>

                    <LinearLayout
                        android:layout_width="match_parent"
                        android:layout_height="0dip"
                        android:layout_weight="1"
                        android:orientation="horizontal">

                        <LinearLayout
                            android:id="@+id/shorcut_assign_tags"
                            android:layout_width="0dip"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:padding="16dp"
                            android:paddingTop="15dp">

                            <ImageView
                                android:id="@+id/shorcut_assign_tags_image"
                                android:layout_width="70dp"
                                android:layout_height="70dp"
                                android:layout_gravity="center"
                                />

                            <TextView
                                android:id="@+id/shorcut_assign_tags_txt"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="Assign" />
                        </LinearLayout>


                        <LinearLayout
                            android:id="@+id/shorcut_edit_tags"
                            android:layout_width="0dip"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:orientation="vertical"
                            android:padding="16dp"
                            android:paddingTop="15dp">

                            <ImageView
                                android:id="@+id/shorcut_edit_tags_image"
                                android:layout_width="70dp"
                                android:layout_height="70dp"
                                android:layout_gravity="center"
                                 />

                            <TextView
                                android:id="@+id/shorcut_edit_tags_txt"
                                android:layout_width="wrap_content"
                                android:layout_height="wrap_content"
                                android:layout_gravity="center"
                                android:text="Edit" />
                        </LinearLayout>


                    </LinearLayout>
                </LinearLayout>

            </android.support.v7.widget.CardView>



        </LinearLayout>



    </FrameLayout>

</RelativeLayout>

您需要使用线性布局并为卡布局分配权重 50-50。

在所有移动屏幕尺寸

2 个答案: