如何将控件添加到 Android 中的选项卡布局？

How to add controls to a Tab Layout in Android?

提问by chobo2

I am following this tutorial https://developer.android.com/guide/tutorials/views/hello-tabwidget.htmland have completed it. Now I would actually like to add you know some controls to these tabs like textboxes(text edit).

我正在关注本教程https://developer.android.com/guide/tutorials/views/hello-tabwidget.html并已完成。现在我实际上想向这些选项卡添加一些控件，例如文本框（文本编辑）。

How do I do this? I go to my mail.xml using eclipse as my ide and go to layout view and I now get a NullPointerException so I can't even drag stuff onto the layout anymore.

我该怎么做呢？我使用 eclipse 作为我的 ide 转到我的 mail.xml 并转到布局视图，现在我得到一个 NullPointerException，所以我什至不能再将内容拖到布局上。

Edit

编辑

This is what I have

这就是我所拥有的

<?xml version="1.0" encoding="utf-8"?>
<TabHost xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@android:id/tabhost"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent">
        <TabWidget
            android:id="@android:id/tabs"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content" />
        <FrameLayout
            android:id="@android:id/tabcontent"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent">
            <LinearLayout
                android:orientation="vertical"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent">            
                <TextView 
                android:id="@+id/textview1"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" 
                android:text="this is a tab" />
                <EditText android:text="" android:id="@+id/EditText01" android:layout_width="wrap_content" android:layout_height="wrap_content" android:password="true"></EditText>

            </LinearLayout>

            <TextView 
                android:id="@+id/textview2"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" 
                android:text="this is another tab" />
            <TextView 
                android:id="@+id/textview3"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent" 
                android:text="this is a third tab" />
        </FrameLayout>
    </LinearLayout>
</TabHost>

回答by Steve Haley

Tabs are a bit funny to get working initially since there's a lot of code overhead, but once you've worked your way through that they aren't too bad. To get tabs to work, let's start by improving your XML file and then we can make sure your code to actually load them is correct.

开始工作时选项卡有点有趣，因为有很多代码开销，但是一旦你按照自己的方式工作，它们就不会太糟糕。为了让选项卡工作，让我们从改进您的 XML 文件开始，然后我们可以确保您实际加载它们的代码是正确的。

First off, your XML file. Instead of including everything directly in your main.xml, you should use the includefeature. As the name would suggest, this lets you work on a separate xml file and then include it in your main with one line. This makes the main.xml file much easier to read. So we'd modify your file above to make it look like this:

首先，您的 XML 文件。您应该使用该include功能，而不是直接在 main.xml 中包含所有内容。顾名思义，这使您可以处理一个单独的 xml 文件，然后将其包含在主文件中的一行中。这使得 main.xml 文件更易于阅读。所以我们会修改你上面的文件，使它看起来像这样：

//No need to change anything above this
<FrameLayout
    android:id="@android:id/tabcontent"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <include layout="@layout/tab1"/>
    <include layout="@layout/tab2"/>
    //and however many other tabs you want to include

</FrameLayout>

You then need to create tab1.xml, tab2.xml and so forth. These are normal xml files in that they start with a ViewGroup (i.e. LinearLayout, RelativeLayout) which contains any number of other widgets. These widgets can be things like EditTexts, buttons, custom views, whatever you want. The only rule is that the parent ViewGroup (the one at the top) must have a unique ID in it, in the manner of android:id="@+id/someUniqueName". You will use that to refer to that specific layout/tab in your code. So for example, this would be:

然后您需要创建 tab1.xml、tab2.xml 等等。这些是普通的 xml 文件，因为它们以包含任意数量的其他小部件的 ViewGroup（即 LinearLayout、RelativeLayout）开始。这些小部件可以是像 EditTexts、按钮、自定义视图之类的东西，任何你想要的东西。唯一的规则是父 ViewGroup（顶部的那个）必须有一个唯一的 ID，以android:id="@+id/someUniqueName". 您将使用它来引用代码中的特定布局/选项卡。例如，这将是：

tab1.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" 
    android:id="@+id/tab1Layout"
    android:orientation="vertical">

    <TextView ... />
    <EditText ... />
</LinearLayout>

With that done, we can look at your code. I assume you've probably already got this, but just in case here's what you want:

完成后，我们可以查看您的代码。我假设你可能已经有了这个，但以防万一这是你想要的：

public class YourProject extends TabActivity {

    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        Resources res = getResources();
        TabHost tabHost = getTabHost();

        tabHost.addTab(tabHost.newTabSpec("tab1").setIndicator("Tab1 title",
                res.getDrawable(R.drawable.logo1)).setContent(R.id.tab1Layout));

        (...)

        //You can also fill tabs with a separate activity like so:
        Intent intent = new Intent(this, YourClass.class);
        tabHost.addTab(tabHost.newTabSpec("tab2").setIndicator("Another title",
                res.getDrawable(R.drawable.logo2)).setContent(intent));

        tabHost.setCurrentTab(0);
    }
}

As shown above you can set the content of one of the tabs to be a separate activity. In that case, the activity is defined just as any other one with its own Class, layout, etc. Usually you shouldn't do this and instead just use a different View (with setContent(R.id.tabXLayout), but sometimes it's needed. For example if you want one of your tabs to have a list, then you need to start an activity in there that extends ListView, and include all the boilerplate code for ListViews.

如上所示，您可以将其中一个选项卡的内容设置为单独的活动。在这种情况下，活动被定义为具有自己的类、布局等的任何其他活动。通常你不应该这样做，而只是使用不同的视图（带有setContent(R.id.tabXLayout)，但有时需要它。例如，如果你想要一个您的选项卡中有一个列表，然后您需要在那里启动一个扩展 ListView 的活动，并包含 ListViews 的所有样板代码。

I hope that helps!

我希望这有帮助！

回答by Jim Blackler

The layout view in Eclipse can be a bit flaky, particularly with complex layouts. A bit of trial and error might find the View node it is choking on.

Eclipse 中的布局视图可能有点不稳定，尤其是对于复杂的布局。一些试验和错误可能会发现它正在阻塞的 View 节点。

As regards developing the tab-based layout further, you have two options, the 'quick' way or the 'right' way. First is to adapt the existing layout xml by replacing one of the TextViews with a LinearLayout (or some other layout) which contains the content you want.

关于进一步开发基于选项卡的布局，您有两种选择，“快速”方式或“正确”方式。首先是通过使用包含所需内容的 LinearLayout（或其他一些布局）替换 TextViews 之一来调整现有布局 xml。

http://google.com/codesearch/p?hl=en#HQNWZ1u2Pig/trunk/HelloLayoutAndroid/res/layout/tab_widget.xml

http://google.com/codesearch/p?hl=en#HQNWZ1u2Pig/trunk/HelloLayoutAndroid/res/layout/tab_widget.xml

However Tabs are generally used where there is complex content. For scalability it may be better to locate the TabHost in the layout, call newTabSpec() and then use setContent() to supply an Intent that identifies an internal Activity, which supplies its own Layout.

然而，标签通常用于内容复杂的地方。为了可扩展性，最好在布局中定位 TabHost，调用 newTabSpec()，然后使用 setContent() 提供标识内部活动的 Intent，该 Intent 提供自己的布局。

回答by EsmaeelQash

the include often makes problems while parsing XML, I tried it and got :cannot resolve @layout/mylayout.. my code was correct 100%, but it's common problem spicialy if you need Id for the layout and other attributes. samply:I solve it by the disign mode, when you drop tabhost to your layout, place it wherever you want, it creates 3 Linear layouts (tab1,tab2,tab3)... on XML editor, in each tab (leanearlayout) insert your markup of the control you need to use as content of the tab. and in java file do the next:

包含在解析 XML 时经常会出现问题，我尝试了它并得到 :cannot resolve @layout/mylayout.. 我的代码是 100% 正确的，但是如果您需要布局和其他属性的 Id，这是一个常见的问题。 示例：我通过设计模式解决了这个问题，当你将 tabhost 放到你的布局中时，把它放在你想要的任何地方，它会在 XML 编辑器上创建 3 个线性布局（tab1、tab2、tab3）......在每个选项卡（leanearlayout）中插入您需要用作选项卡内容的控件标记。并在 java 文件中执行以下操作：

  TabHost tabHost = (TabHost)findViewById(R.id.tabHost);
    tabHost.setup();
    TabHost.TabSpec tab1 = tabHost.newTabSpec("smil1");
    TabHost.TabSpec tab2 = tabHost.newTabSpec("smil2");
    TabHost.TabSpec tab3 = tabHost.newTabSpec("smil3");
    tab1.setIndicator("#1");//the name will apear on the first tab
    tab1.setContent(R.id.smiles1); // the Id of the control you put in the first LeanerLayout

    tab2.setIndicator("#2"); // the same as abouv but for the second tab
    tab2.setContent(R.id.smiles2);
    tab3.setIndicator("#3"); // the thierd tab
    tab3.setContent(R.id.smiles3);
    // add the tabs
    tabHost.addTab(tab1);
    tabHost.addTab(tab2);
    tabHost.addTab(tab3);

this is the way solving your problem if include makes problem in parsing your XML.

如果包含在解析 XML 时出现问题，这就是解决您的问题的方法。

回答by Jeff Axelrod

The NullPointerExceptionin the layout editor is a known bugin the Android Development Tools.

在NullPointerException布局编辑器是一个已知的bug在Android开发工具。