Android webview 下拉菜单不适用于 Android 4.x 设备

Question

我的一个WebView 在 Android 4.x 设备上遇到问题。

Android 应用有一个 Tabhost，其中包含 Fragments。其中一个片段包含一个 webview。显示的页面有一个这样的下拉菜单：

<select id="mySelect" name="mySelect">
    <option value="1">Testname 1</option>
    <option value="2">Testname 2</option>
    <option value="3">Testname 3</option>
</select>

现在，当我使用装有 Android 4.1.1 的 Galaxy S3（或我可以使用的任何其他 Android 设备）打开我的应用程序时，我可以选择“Testname 1”，然后选择“Testname 2”等等。

在 Galaxy Nexus（在运行 Android 4.1.1、4.1.2 和 4.2 的不同设备上得到确认）上，当我尝试选择 UI 刚刚阻止的内容时。在我切换到另一个选项卡并突然返回 webview 选项卡后，UI 最终更改为先前选择的项目。

知道是什么原因造成的，或者我可以如何为 Galaxy Nexus 解决这个问题？

重要更新： 我可以追踪到Tabhost。当webview 在tabhost 中时它不起作用，当它不在时它起作用。这可能与this issue 有关。

Answer 1

实际上，与仅使用 TabHost 相比，您可以使用 ActionBar 做更多的事情。包括标签。 link 将允许您在旧版本 minSdk = 4 中实现 ActionBar。与我合作过的大多数用户体验开发人员都认为选项卡有点过时，尽管它确实为用户提供了熟悉的 UI，但我是谁逆风吹？ ActionBar 为 UI 提供了非常特定于 Android 的外观和干净的感觉。 link 是关于 Google 在该会议上推荐的 UI 模式的文档。 link 是讨论会议 UI 模式的 YouTube 视频。遵循这些建议可以更好地审查您的应用程序和更复杂的 UI 外观。我不确定您的需求是什么，但是如果您要做某事，不妨做对吗？如果您需要更多帮助，请告诉我。我可以为您提供有关使用 ActionBar 的示例。 ActionBar link 可以给你一些更好的理由，我可以告诉你为什么它是 UI 的好选择。

您是否正确实施了片段？ link 是有关使用它们的文档。如果您使用动态片段而不是在布局中实现的固定片段，我在跨应用程序编写时发现的一个技巧是调用 .clearBackStack();当我遇到有趣的问题时，它似乎可以解决很多问题。

Answer 2

在 ICS 中的 TabHost？你在使用兼容包吗？如果您基本上在 3.1+ 中工作，则正确的设计是使用 ActionBar 来实现选项卡。

Answer 3

尝试在您的 XML 布局中使用这个自定义类而不是普通的 TabHost：

package com.example.test;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.TabHost;

public class TabHostFix extends TabHost
{
    public TabHostFix(Context context)
    {
        super(context);
    }

    public TabHostFix(Context context, AttributeSet attrs)
    {
        super(context, attrs);
    }

    @Override
    public void onTouchModeChanged(boolean isInTouchMode)
    {
        //do not call through to base class, do nothing
        //this is a fix for tabhost stealing focus from textboxes
    }
}

在您的 XML 布局中引用自定义类，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<com.example.test.TabHostFix xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:orientation="horizontal"
            android:layout_width="match_parent"
            android:layout_height="48dp"
            android:layout_weight="0"/>
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_weight="0" />
        <FrameLayout
            android:id="@+android:id/realtabcontent"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    </LinearLayout>
</com.example.test.TabHostFix>

编辑： 作为替代解决方案，您可以使用支持库中的 ViewPager 和模拟选项卡的自定义 View Pager 指示器完全替换 TabHost。我以前从未尝试过，但我读到有很好的免费 3rd 方视图寻呼机指示器 here。

Answer 4

选择后，列表项数据可能会发生变化，但我们看不到变化。为此，我们需要显式刷新选择组件。希望这可以解决问题。

$("select#HeightUnit option[value='cm']").attr("selected", "selected"); $('select').selectmenu('refresh');

Answer 5

> i think u must add the API version on your activity cause some UI cannot compatible on >android API 8. so check the API SDK like this.

>@TargetApi(Build.VERSION_CODES.GINGERBREAD)
>if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.GINGERBREAD)
>{
>// condisition
>}