在ActionBarActivity中自定义Android TabHost布局

时间:2014-01-03 20:20:30

标签: android

我想要做的就是更改文本的颜色和tabHost中的标签轮廓。我想要一个类似于我使用适配器来自定义微调器和列表视图的方法...

是的,我已经看过了: ActionBarActivity with TabHost 然而,那里的解决方案使用FragmentTabHost并没有真正解决问题。

这是我的TabHost:

<TabHost android:layout_width="fill_parent" android:layout_height="wrap_content"
    android:id="@+id/tabHost" android:layout_weight="1">

    <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical">
        <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:id="@+id/tab1" style="@style/details.tabContent">
                ...
            </LinearLayout>

            <LinearLayout android:id="@+id/tab2" style="@style/details.tabContent" >
                ...
            </LinearLayout>

            <LinearLayout android:id="@+id/tab3" style="@style/details.tabContent" >
                ...
            </LinearLayout>
        </FrameLayout>
    </LinearLayout>
</TabHost>

这是我的ActionBarActivity代码:

tabs=(TabHost)findViewById(R.id.tabHost);
/*tabs.getTabWidget().setDividerDrawable(R.drawable.tab_divider);*/
tabs.setup();
TabHost.TabSpec spec=tabs.newTabSpec("tag1");
spec.setContent(R.id.tab1);
spec.setIndicator("Information");
tabs.addTab(spec);
spec=tabs.newTabSpec("tag2");
spec.setContent(R.id.tab2);
spec.setIndicator("Reviews");
tabs.addTab(spec);
spec=tabs.newTabSpec("tag3");
spec.setContent(R.id.tab3);
spec.setIndicator("My Notes");
tabs.addTab(spec);
tabs.setCurrentTab(0);

更新代码 目前,createTabView仅在setupTab()

的第一个runthrough上被调用
private void loadGUI() {
     ...

        tabs=(TabHost)findViewById(R.id.tabHost);


        tabs.setup();
        /*
        TODO: find a way to save the ids for each tab so I can later fill in values in each tab's listview and/or textview.  
        I have 2 tab content resources, 1 that just has a textview, the other a listview with a textview for setEmpty
        int intTabContentDrugInfoID = setupTab("Info", R.layout.tab_content_standard);
        int intTabContentReviewsID = setupTab("Reviews", R.layout.tab_content_list);
        int intTabContentNotesID = setupTab("My Notes", R.layout.tab_content_list);*/

        setupTab((TextView)findViewById(R.id.txtTabTitle), "Info");
        setupTab((TextView)findViewById(R.id.txtTabTitle), "Reviews");
        setupTab((TextView)findViewById(R.id.txtTabTitle), "My Notes");

        tabs.setCurrentTab(0);

...
}

private void setupTab(final TextView view, final String tag) {
    final View newTab = createTabView(tabs.getContext(), tag);
    final Context tabsContext = tabs.getContext();

        TabHost.TabSpec setContent = tabs.newTabSpec(tag).setIndicator(newTab).setContent(new TabContentFactory() {
            public View createTabContent(String tag) {
                // Here tabs_content is created in a similar way than the tab layout itself,
                // with a layout file which is later inflated. All those ID's are from that file.
                final View ll_view = LayoutInflater.from(tabsContext).inflate(R.layout.tab_content_standard, null);
                final TextView view = (TextView) ll_view.findViewById(R.id.txtTabContent);
                return ll_view;
            }
        });
        tabs.addTab(setContent);
}

1 个答案:

答案 0 :(得分:2)

如果我没有理解你想要实现的目标,我认为这是我在我的一个应用程序中所做的。

基本上,我的布局结构与你的布局类似:

<TabHost
        android:id="@+android:id/tabhost"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
  <LinearLayout
        android:id="@+id/TabLinearLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    <HorizontalScrollView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:fillViewport="true"
        android:scrollbars="none">
      <TabWidget
        android:id="@+android:id/tabs"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"></TabWidget>
    </HorizontalScrollView>
    <FrameLayout
        android:id="@+android:id/tabcontent"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp" />
  </LinearLayout>
</TabHost>

我自定义我的标签布局是为了定义一个新的布局文件。在我的情况下,我想要一个ImageView并在同一行中,TextView带有标签的标题。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/tabsLayout"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="7dip" 
    android:gravity="center"
    android:orientation="horizontal"
    android:background="@drawable/tab_bg_selector">

    <ImageView
        android:id="@+id/tabsIcon"
        android:contentDescription="@string/desc_gen_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content">        
    </ImageView>        

    <TextView 
        android:id="@+id/tabsText"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="12sp"
        android:textColor="@drawable/tab_text_selector" />
</LinearLayout>

假设此文件名为 tab_bg.xml ,那么现在基本上所有你需要做的就是用这样的东西来膨胀一个标签:

// This would create the tab layout itself
private View createTabView(final Context context, final String text) {
  final View view = LayoutInflater.from(context).inflate(R.layout.tabs_bg, null);
  final TextView tv = (TextView) view.findViewById(R.id.tabsText);
  final ImageView iv = (ImageView) view.findViewById(R.id.tabsIcon);

  tv.setText(text);
  iv.setLayoutParams(new LinearLayout.LayoutParams(..., ...));

  return view;
}

// Each time you want to create a new tab, call this method, which will call the above one
private void setupTab(final TextView view, final String tag) {
  final TabHost th = (TabHost) findViewById(android.R.id.tabhost);

  final View tabview = createTabView(th.getContext(), tag);
  final TabSpec setContent = th.newTabSpec(tag).setIndicator(tabview).setContent(new TabContentFactory() {
    public View createTabContent(String tag) {
      // Here tabs_content is created in a similar way than the tab layout itself,
      // with a layout file which is later inflated. All those ID's are from that file.
      final View ll_view = LayoutInflater.from(context.inflate(R.layout.tabs_content, null);
      final TextView view = (TextView) ll_view.findViewById(R.id.tabsContent);

      view.setMovementMethod(new ScrollingMovementMethod());

      // Anything else you may need...  

      return ll_view;
    }
  });

  th.addTab(setContent);
}