如何在小屏幕上的列表项中修复“隐藏”布局(QVGA / HVGA)

时间:2013-11-10 11:30:20

标签: android android-layout

我有ListView这样定义的行(Eclipse Android SDK中的图形视图截图):

Eclipse IDE row

问题是,在这一行只在小屏幕上,最后一个布局元素(星号)是“隐藏”的。在较大的屏幕上,相同的布局XML看起来/按预期工作(并且在IDE中看到)。

这种意外的布局行为发生在设备和模拟器以及所有版本(API 8 - 19)上。

我注意到(原始)LinearLayout上的错误:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="72dp"
  android:background="@color/transparent" >

  <LinearLayout
    android:id="@+id/list_row_checkBox_container"
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:clickable="true"
    android:gravity="center" >

    <CheckBox
      android:id="@+id/list_row_checkBox"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="" />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/list_row_text"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="vertical" >

    <TextView
      android:id="@+id/list_row_txtTitle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:singleLine="true"
      android:text="Title"
      android:textSize="30sp" />

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

      <TextView
        android:id="@+id/list_row_txtExtra1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:text="First" />

      <TextView
        android:id="@+id/list_row_txtExtra2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:text="Second" />
    </LinearLayout>
  </LinearLayout>

  <LinearLayout
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:gravity="center" >

    <!-- android:background="@color/green" -->

    <ImageButton
      android:id="@+id/list_row_select_icon"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@android:color/transparent"
      android:clickable="true"
      android:src="@drawable/btn_star_holo_light_off" />
  </LinearLayout>

</LinearLayout>

结果:

Cropped LinearLayout on HVGA emulator

当我按下它时,可以看到星形按钮(就位):

Cropped LinearLayout on HVGA emulator, star pressed

之后,当然,我已经检查了适配器(标准ArrayAdapter带有视图持有者模式),但除了按钮上的OnTouchListener之外没有任何东西。接下来,我尝试更改行项目的根布局,首先更改为RelativeLayout

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="72dp"
  android:background="@color/transparent" >

  <LinearLayout
    android:id="@+id/list_row_checkBox_container"
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:clickable="true"
    android:gravity="center" >

    <CheckBox
      android:id="@+id/list_row_checkBox"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="" />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/list_row_text"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_alignParentTop="true"
    android:layout_marginRight="48dp"
    android:layout_toRightOf="@+id/list_row_checkBox_container"
    android:orientation="vertical" >

    <TextView
      android:id="@+id/list_row_txtTitle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:singleLine="true"
      android:text="Title"
      android:textSize="30sp" />

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

      <TextView
        android:id="@+id/list_row_txtExtra1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:text="First" />

      <TextView
        android:id="@+id/list_row_txtExtra2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:text="Second" />
    </LinearLayout>
  </LinearLayout>

  <LinearLayout
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_alignParentRight="true"
    android:layout_alignParentTop="true"
    android:gravity="center" >

    <ImageButton
      android:id="@+id/list_row_select_icon"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@android:color/transparent"
      android:clickable="true"
      android:src="@drawable/btn_star_holo_light_off" />
  </LinearLayout>

</RelativeLayout>

结果:

Cropped RelativeLayout on HVGA emulator

最后,我尝试了FrameLayout

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="72dp"
  android:background="@color/transparent" >

  <LinearLayout
    android:id="@+id/list_row_checkBox_container"
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_gravity="top|left"
    android:clickable="true"
    android:gravity="center" >

    <CheckBox
      android:id="@+id/list_row_checkBox"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:text="" />
  </LinearLayout>

  <LinearLayout
    android:id="@+id/list_row_text"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="top|left"
    android:layout_marginLeft="48dp"
    android:layout_marginRight="48dp"
    android:orientation="vertical" >

    <TextView
      android:id="@+id/list_row_txtTitle"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:singleLine="true"
      android:text="Title"
      android:textSize="30sp" />

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

      <TextView
        android:id="@+id/list_row_txtExtra1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:text="First" />

      <TextView
        android:id="@+id/list_row_txtExtra2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="12dp"
        android:text="Second" />
    </LinearLayout>
  </LinearLayout>

  <LinearLayout
    android:layout_width="48dp"
    android:layout_height="fill_parent"
    android:layout_gravity="top|right"
    android:gravity="center" >

    <ImageButton
      android:id="@+id/list_row_select_icon"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent"
      android:background="@android:color/transparent"
      android:clickable="true"
      android:src="@drawable/btn_star_holo_light_off" />
  </LinearLayout>

</FrameLayout>

结果:

Cropped FrameLayout on HVGA emulator

可以看出,没有任何帮助,我有点“困惑”。

想法如何解决这个问题,

2 个答案:

答案 0 :(得分:0)

首先检查在创建布局时选择了哪个设备它应该位于图形布局xml的顶部栏上。默认布局文件夹适用于屏幕为4-7英寸的设备。但是,基于设备DPI也会发生布局故障。因此,您必须创建多个布局文件夹以支持不同的布局及其横向文件夹。

您不必创建这么多布局。这是因为您必须为具有不同屏幕尺寸和dpi的不同设备创建不同的布局。这就是明星走出银幕的原因。

http://developer.android.com/guide/practices/screens_support.html

转到此链接并阅读。

答案 1 :(得分:0)

解决方案是将drawable-mdpi资源添加到btn_star_holo_light_off图像的项目中(只有drawable-xhdpi个)。