Android 支持在所有移动屏幕尺寸上设计双卡视图和瓷砖网格
我需要设计一个如下所示的视图 说明: 最上面的两个视图是CardView。顶部将包含一个图表 下面是4个底部有图像和文本的平铺 问题: 我可以得到这样的设计,但它不适合所有手机和屏幕类型。我怎样才能解决这个问题 代码:Android 支持在所有移动屏幕尺寸上设计双卡视图和瓷砖网格,android,android-layout,android-cardview,Android,Android Layout,Android Cardview,我需要设计一个如下所示的视图 说明: 最上面的两个视图是CardView。顶部将包含一个图表 下面是4个底部有图像和文本的平铺 问题: 我可以得到这样的设计,但它不适合所有手机和屏幕类型。我怎样才能解决这个问题 代码: <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="h
<?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>
您应该使用约束布局。此布局可帮助您设计覆盖所有设备的布局。有了它,您可以构建响应性布局 以本教程为例
您应该使用约束布局。此布局可帮助您设计覆盖所有设备的布局。有了它,您可以构建响应性布局 以本教程为例 试试这个:
<?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>
您需要使用线性布局并为这两种卡片布局分配权重
对半
试试这个:
<?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>
您需要使用线性布局并为这两种卡片布局分配权重
对半
@PamungkasJayuda乐于助人:)@PamungkasJayuda乐于助人:)