【背景】
之前折腾:
和:
【已解决】android中在Tab页面中动态创建多个Group
期间就遇到这个问题了:
虽然在Android中,可以动态生成TAB和在TAB内部新建多个group了。
但是group中的内容,显示位置异常,没有显示在TAB页面中,即TAB标签下面,而是从屏幕的左上角显示,覆盖了TAB的内容。
目前的代码是:
(1)xml的布局:
/res/layout/activity_main.xml
是:
<?xml version="1.0" encoding="utf-8"?>
<!--
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" />
-->
<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost"
xmlns:android="http://schemas.android.com/apk/res/android">
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"/>
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabcontent">
<!--
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/eachTab"
android:orientation="vertical"
android:paddingTop="60px">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab1"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab1"
android:id="@+id/txt1"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab2"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab 2"
android:id="@+id/txt2"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab3"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab 3"
android:id="@+id/txt3"/>
</LinearLayout>
-->
</FrameLayout>
</TabHost>
Java代码:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
//TabHost tabHost2 = getTabHost();
final TabHost tabHost = (TabHost)findViewById(R.id.tabHost);
tabHost.setup();
//final Context tabContext = tabHost.getContext();
final Context tabContext = MainActivity.this;
TabSpec spec1=tabHost.newTabSpec("Tab1");
//spec1.setContent(R.id.tab1);
spec1.setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {
// TextView txtView = new TextView(tabContext);
// txtView.setText("Tab Text in createTabContent");
// return txtView;\
// LinearLayout tab1AllGroup = new LinearLayout(tabContext);
// tab1AllGroup.setLayoutParams(
// new LayoutParams(
// LayoutParams.FILL_PARENT,
// LayoutParams.WRAP_CONTENT));
// tab1AllGroup.setOrientation(LinearLayout.VERTICAL);
FrameLayout tab1AllGroup = (FrameLayout) findViewById(android.R.id.tabcontent);
//LinearLayout panel = (LinearLayout) findViewById(R.id.eachTab);
LinearLayout tab1Group1 = new LinearLayout(tabContext);
tab1Group1.setLayoutParams(
new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tab1Group1.setOrientation(LinearLayout.VERTICAL);
tab1Group1.setBackgroundResource(R.drawable.group_background);
TextView tab1Group1Text1 = new TextView(tabContext);
tab1Group1Text1.setText("This is newly created tab: Tab 1 Group 1 Text 1");
//tab1Group1Text1.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 60));
tab1Group1.addView(tab1Group1Text1);
TextView tab1Group1Text2 = new TextView(tabContext);
tab1Group1Text2.setText("This is newly created tab: Tab 1 Group 1 Text 2");
//tab1Group1Text2.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
tab1Group1.addView(tab1Group1Text2);
LinearLayout tab1Group2 = new LinearLayout(tabContext);
tab1Group2.setLayoutParams(
new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tab1Group2.setOrientation(LinearLayout.VERTICAL);
tab1Group2.setBackgroundResource(R.drawable.group_background);
// login button
final Button btnLogin = new Button(tabContext);
btnLogin.setText("Login");
btnLogin.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
btnLogin.setGravity(Gravity.CENTER);
btnLogin.setOnClickListener(
new View.OnClickListener() {
public void onClick(View view) {
Log.d("pocketmagic.net", "_createForm click but");
}
});
tab1Group2.addView(btnLogin);
LinearLayout tab1Group3 = new LinearLayout(tabContext);
tab1Group3.setLayoutParams(
new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tab1Group3.setOrientation(LinearLayout.VERTICAL);
TextView tab1Group2Text1 = new TextView(tabContext);
tab1Group2Text1.setText("This is newly created tab: Tab 1 Group 2 Text 1");
tab1Group2Text1.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 60));
tab1Group3.addView(tab1Group2Text1);
tab1AllGroup.addView(tab1Group1);
tab1AllGroup.addView(tab1Group2);
tab1AllGroup.addView(tab1Group3);
return tab1AllGroup;
}
});
spec1.setIndicator("Tab 1");
TabSpec spec2=tabHost.newTabSpec("Tab2");
spec2.setIndicator("Tab 2");
spec2.setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {
// return(new AnalogClock(tabContext));
LinearLayout panel = new LinearLayout(tabContext);
panel.setLayoutParams(
new LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
panel.setOrientation(LinearLayout.VERTICAL);
//LinearLayout panel = (LinearLayout) findViewById(R.id.eachTab);
TextView tab2Text1 = new TextView(tabContext);
tab2Text1.setText("This is newly created tab: Tab 2 Text 1");
tab2Text1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
panel.addView(tab2Text1);
return panel;
}
});
spec2.setIndicator("Tab 2");
tabHost.addTab(spec1);
tabHost.addTab(spec2);
}效果是:
和:
【解决过程】
1.感觉像是:
由于parent设置不正确,所以导致显示的内容。
尝试去看看,能否把parent改为tab。
2.去掉原先引用的FrameLayout,换成新建的LinearLayout:
//FrameLayout tab1AllGroup = (FrameLayout) findViewById(android.R.id.tabcontent); LinearLayout tab1AllGroup = new LinearLayout(tabContext); tab1AllGroup.setLayoutParams( new LayoutParams( LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT)); tab1AllGroup.setOrientation(LinearLayout.VERTICAL);
结果效果变为:
都不重叠了,但是还是不是在TAB1页面中显示的:
3.然后参考:
Android dynamic TAB Control « PocketMagic
去把xml中的配置改为:
<?xml version="1.0" encoding="utf-8"?>
<!--
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" />
-->
<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost"
xmlns:android="http://schemas.android.com/apk/res/android">
<TabWidget
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabs"/>
<!-- android:layout_height="wrap_content" -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@android:id/tabcontent">
<!--
android:layout_width="fill_parent"
android:layout_height="fill_parent"
-->
<!--
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/eachTab"
android:orientation="vertical"
android:paddingTop="60px">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab1"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab1"
android:id="@+id/txt1"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab2"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab 2"
android:id="@+id/txt2"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab3"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab 3"
android:id="@+id/txt3"/>
</LinearLayout>
-->
</FrameLayout>
</TabHost>效果如下:
和:
4.期间去尝试解决一个错误log的问题:
5.然后调试期间,又遇到一个错误:
6.然后上述问题解决后,至少暂时可以正常继续动态去新建TabHost和addTab了,目前的效果如下:
7.继续去尝试。
参考:
android : using Tab view with dynamic fragment – Stack Overflow
好像说是要把TabHost换成FragmentTabHost,所以去试试:
(同时也加上:LinearLayout)
<?xml version="1.0" encoding="utf-8"?>
<!--
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/container"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
tools:ignore="MergeRootFrame" />
-->
<!-- <TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost"
xmlns:android="http://schemas.android.com/apk/res/android">
-->
<android.support.v4.app.FragmentTabHost
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:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabs"/>
<!-- android:layout_height="wrap_content" -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@android:id/tabcontent">
<!--
android:layout_width="fill_parent"
android:layout_height="fill_parent"
-->
<!--
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/eachTab"
android:orientation="vertical"
android:paddingTop="60px">
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/tab1"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab1"
android:id="@+id/txt1"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab2"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab 2"
android:id="@+id/txt2"/>
</LinearLayout>
<LinearLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tab3"
android:orientation="vertical"
android:paddingTop="60px">
<TextView
android:layout_width="fill_parent"
android:layout_height="100px"
android:text="This is tab 3"
android:id="@+id/txt3"/>
</LinearLayout>
-->
</FrameLayout>
<!-- </TabHost> -->
</LinearLayout>
</android.support.v4.app.FragmentTabHost >然后试试效果:
结果没效果,因为我代码中现在是动态创建的TabHost。。。
8.所以去尝试改代码:
先去加上那个LinearLayout试试:
好像代码中加过了,所以就再加了。
再去试试把TabHost换成FragmentTabHost试试:
//TabHost tabHost = new TabHost(getBaseContext(), null); FragmentTabHost tabHost = new FragmentTabHost(getBaseContext(), null);
结果是
tabHost.setup();
已经废弃,所以注释掉:
//tabHost.setup();
但是后面的:
tabHost.addTab(ts1);
又挂掉了。。。
9.找到官网的:
FragmentTabHost | Android Developers
看到一些示例代码。
想要去参考,但是找不到
R.id.realtabcontent
参考:
android – What is the R.id.realtabcontent in FragmentTabHost example? – Stack Overflow
但是还不懂。
再参考:
android – simple tab using fragmentactivity instead of tabactivity – Stack Overflow
看到有个例子:
<TabHost
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="wrap_content"
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>
</TabHost>看了:
Android Tabs with Fragments – Android Magic
也还是很晕。
10.算了,还是自己随便试试代码中的各种配置所对应的效果吧。
还是不行。
11.参考:
Android常用控件之FragmentTabHost的使用 – DMT专栏 – 博客频道 – CSDN.NET
感觉这里:
Android学习笔记:TabHost 和 FragmentTabHost – Asion Tang – 博客园
解释的比较清楚。
12.最后无意间折腾出一个效果,反正目前是可以正常显示了。
最新的,去除了冗余,精简后的代码如下:
(1)/res/layout/activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<TabHost android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/tabHost"
xmlns:android="http://schemas.android.com/apk/res/android">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >
<TabWidget
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@android:id/tabs"/>
<!-- android:layout_height="fill_parent" -->
<FrameLayout
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@android:id/tabcontent">
</FrameLayout>
</LinearLayout>
</TabHost>(2)/res/drawable/group_background.xml
<?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" > <solid android:color="#00FF00" /> <stroke android:width="3dip" android:color="#993333"/> </shape>
(3)MainActivity.java
import android.app.FragmentActivity;
import android.os.Bundle;
import android.content.Context;
import android.util.Log;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.widget.AnalogClock;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TabHost;
import android.widget.TabHost.TabSpec;
import android.widget.TextView;
public class MainActivity extends FragmentActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
final TabHost tabHost = (TabHost)findViewById(R.id.tabHost);
tabHost.setup();
final Context tabContext = MainActivity.this;
TabSpec ts1 = tabHost.newTabSpec("Tab1");
ts1.setIndicator("Tab 1");
ts1.setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {
LinearLayout tab1AllGroup = new LinearLayout(tabContext);
tab1AllGroup.setLayoutParams(
new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tab1AllGroup.setOrientation(LinearLayout.VERTICAL);
LinearLayout tab1Group1 = new LinearLayout(tabContext);
tab1Group1.setLayoutParams(
new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tab1Group1.setOrientation(LinearLayout.VERTICAL);
tab1Group1.setBackgroundResource(R.drawable.group_background);
TextView tab1Group1Text1 = new TextView(tabContext);
tab1Group1Text1.setText("This is newly created tab: Tab 1 Group 1 Text 1");
tab1Group1.addView(tab1Group1Text1);
TextView tab1Group1Text2 = new TextView(tabContext);
tab1Group1Text2.setText("This is newly created tab: Tab 1 Group 1 Text 2");
tab1Group1.addView(tab1Group1Text2);
LinearLayout tab1Group2 = new LinearLayout(tabContext);
tab1Group2.setLayoutParams(
new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tab1Group2.setOrientation(LinearLayout.VERTICAL);
tab1Group2.setBackgroundResource(R.drawable.group_background);
final Button btnLogin = new Button(tabContext);
btnLogin.setText("Login");
btnLogin.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT));
btnLogin.setGravity(Gravity.CENTER);
btnLogin.setOnClickListener(
new View.OnClickListener() {
public void onClick(View view) {
Log.d("pocketmagic.net", "_createForm click but");
}
});
tab1Group2.addView(btnLogin);
LinearLayout tab1Group3 = new LinearLayout(tabContext);
tab1Group3.setLayoutParams(
new LayoutParams(
LayoutParams.MATCH_PARENT,
LayoutParams.WRAP_CONTENT));
tab1Group3.setOrientation(LinearLayout.VERTICAL);
TextView tab1Group2Text1 = new TextView(tabContext);
tab1Group2Text1.setText("This is newly created tab: Tab 1 Group 3 Text 1");
tab1Group2Text1.setLayoutParams(new LayoutParams(LayoutParams.MATCH_PARENT, 60));
tab1Group3.addView(tab1Group2Text1);
tab1AllGroup.addView(tab1Group1);
tab1AllGroup.addView(tab1Group2);
tab1AllGroup.addView(tab1Group3);
return tab1AllGroup;
}
});
tabHost.addTab(ts1);
TabSpec spec2=tabHost.newTabSpec("Tab2");
spec2.setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {
LinearLayout panel = new LinearLayout(tabContext);
panel.setLayoutParams(
new LayoutParams(
LayoutParams.FILL_PARENT,
LayoutParams.WRAP_CONTENT));
panel.setOrientation(LinearLayout.VERTICAL);
TextView tab2Text1 = new TextView(tabContext);
tab2Text1.setText("This is newly created tab: Tab 2 Text 1");
tab2Text1.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.WRAP_CONTENT));
panel.addView(tab2Text1);
return panel;
}
});
spec2.setIndicator("Tab 2");
tabHost.addTab(spec2);
TabSpec spec3=tabHost.newTabSpec("Tab3");
spec3.setContent(new TabHost.TabContentFactory() {
public View createTabContent(String tag) {
return(new AnalogClock(tabContext));
}
});
spec3.setIndicator("Tab 3");
tabHost.addTab(spec3);
}
//.........
}
(4)最终显示效果:
Tab1:
添加了3个Group;
Group的1和2,是通过加了边框来以示区分的;
Tab2:
只是用于测试的普通字符串
Tab3:
加了个Clock:
【总结】
经历千辛万苦,一堆的折腾,在快要放弃之前,最后终于无意间解决了此处的TabHost下面的内容的显示位置的问题。
好像主要就是对于xml的中的TabHost下面加了一层的LinearLayout,从而解决显示位置错乱的问题。
而解决掉位置错乱的话,接下来就是顺理成章的正常实现:
- 动态创建Tab:代码中可以正常去addTab了;
- 动态在Tab下面创建不同的Group(虽然效果很挫,但是功能上是实现了);
- 动态在Group中创建对应的View:包括不用的TextView或者其他的View;
转载请注明:在路上 » 【已解决】Android中的TabHost中的TAB中的FrameLayout中的View显示位置异常出现重叠且覆盖了TAB标签