[转]Android(安卓)UI学习 - Tab的学习和使用
16lz
2021-01-25
转自:http://www.cnblogs.com/lm3515/archive/2011/3/16.html
public void setDefaultTab (String tag)这两个函数很易懂,就是设置默认的Tab public void setDefaultTab (int index)通过tab名——tag或者index(从0开始) protected void onRestoreInstanceState (Bundle state)这两个函数的介绍可以 protected void onSaveInstanceState (Bundle outState)参考 Activity的生命周期
TabHost
那么我们要用到的Tab载体是TabHost,需要从TabActivity.getTabHost获取。 现在看看TabHost类,它有3个内嵌类:1个类TabHost.TabSpec,2个接口TabHost.TabContentFactory和TabHost.OnTabChangeListener。后面会介绍这些类和接口。 TabHost类的一些函数: public void addTab (TabHost.TabSpec tabSpec)添加tab,参数TabHost.TabSpec通过下面的函数返回得到 public TabHost.TabSpec newTabSpec (String tag)创建TabHost.TabSpec public void clearAllTabs ()remove所有的Tabs public int getCurrentTab () public String getCurrentTabTag () public View getCurrentTabView () public View getCurrentView () public FrameLayout getTabContentView ()返回Tab content的FrameLayout public TabWidget getTabWidget () public void setCurrentTab (int index) 设置当前的Tab by index public void setCurrentTabByTag (String tag)设置当前的Tab by tag public void setOnTabChangedListener (TabHost.OnTabChangeListener l)设置TabChanged事件的响应处理 public void setup ()这个函数后面介绍TabHost.TabSpec
从上面的函数可以知道如何添加tab了,要注意,这里的Tag(标签),不是Tab按钮上的文字。 而要设置tab的label和content,需要设置TabHost.TabSpec类。引用SDK里面的话——“A tab has a tab indicator, content, and a tag that is used to keep track of it.”,TabHost.TabSpec就是管理这3个东西: public String getTag () public TabHost.TabSpec setContent public TabHost.TabSpec setIndicator 我理解这里的 Indicator就是Tab上的label,它可以 设置label: setIndicator (CharSequence label) 或者同时 设置label和icon: setIndicator (CharSequence label, Drawable icon) 或者直接 指定某个view: setIndicator (View view) 对于 Content,就是Tab里面的内容,可以 设置View的id: setContent(int viewId) 或者 TabHost.TabContentFactory的createTabContent(String tag)来处理: setContent(TabHost.TabContentFactory contentFactory) 或者用 new Intent来引入其他Activity的内容: setContent(Intent intent) 现在来看官方的Views/Tabs/Content By Id例子: 代码 ?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | public class Tabs1 extends TabActivity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); TabHost tabHost = getTabHost(); LayoutInflater.from( this ).inflate(R.layout.tabs1, tabHost.getTabContentView(), true ); tabHost.addTab(tabHost.newTabSpec( "tab1" ) .setIndicator( "tab1" ) .setContent(R.id.view1)); tabHost.addTab(tabHost.newTabSpec( "tab3" ) .setIndicator( "tab2" ) .setContent(R.id.view2)); tabHost.addTab(tabHost.newTabSpec( "tab3" ) .setIndicator( "tab3" ) .setContent(R.id.view3)); } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <FrameLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:layout_width= "fill_parent" android:layout_height= "fill_parent" > <TextView android:id= "@+id/view1" android:background= "@drawable/blue" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:text= "@string/tabs_1_tab_1" /> <TextView android:id= "@+id/view2" android:background= "@drawable/red" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:text= "@string/tabs_1_tab_2" /> <TextView android:id= "@+id/view3" android:background= "@drawable/green" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:text= "@string/tabs_1_tab_3" /> </FrameLayout> <! -- strings.xml <string name= "tabs_1_tab_1" >tab1</string> <string name= "tabs_1_tab_2" >tab2</string> <string name= "tabs_1_tab_3" >tab3</string> --> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | public class Tabs2 extends TabActivity implements TabHost.TabContentFactory { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); final TabHost tabHost = getTabHost(); tabHost.addTab(tabHost.newTabSpec( "tab1" ) .setIndicator( "tab1" , getResources().getDrawable(R.drawable.star_big_on)) .setContent( this )); tabHost.addTab(tabHost.newTabSpec( "tab2" ) .setIndicator( "tab2" ) .setContent( this )); tabHost.addTab(tabHost.newTabSpec( "tab3" ) .setIndicator( "tab3" ) .setContent( this )); } public View createTabContent(String tag) { final TextView tv = new TextView( this ); tv.setText( "Content for tab with tag " + tag); return tv; } } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | public class Tabs3 extends TabActivity { @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); final TabHost tabHost = getTabHost(); tabHost.addTab(tabHost.newTabSpec( "tab1" ) .setIndicator( "list" ) .setContent( new Intent( this , List1. class ))); tabHost.addTab(tabHost.newTabSpec( "tab2" ) .setIndicator( "photo list" ) .setContent( new Intent( this , List8. class ))); // This tab sets the intent flag so that it is recreated each time // the tab is clicked. tabHost.addTab(tabHost.newTabSpec( "tab3" ) .setIndicator( "destroy" ) .setContent( new Intent( this , Controls2. class ) .addFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP))); } } |
TabHost.OnTabChangeListener
TabHost.OnTabChangeListener接口只有一个抽象方法onTabChanged(String tagString),明显地,在 onTabChanged(String tagString)方法里面swtich..case..来判断tagString分别处理就行了。TabHost.setup()
在此贴出SDK doc里面的相关解释: public void setup () Since: API Level 1Call setup() before adding tabs if loading TabHost using findViewById(). However,You do not need to call setup() after getTabHost() in TabActivity. Example:
mTabHost = (TabHost)findViewById(R.id.tabhost);
mTabHost.setup();
mTabHost.addTab(TAB_TAG_1, " Hello, world! " , " Tab 1 " );
// 我的理解是,如果要用到findViewById来获取TabHost,然后add tabs的话,需要在addTab前call setup(); public void setup (LocalActivityManager activityGroup) Since: API Level 1
If you are using setContent(android.content.Intent), this must be called since the activityGroup is needed to launch the local activity. This is done for you if you extend TabActivity.
Parameters
activityGroup Used to launch activities for tab content.
posted @ 2011-03-16 10:55 子非あ鱼 阅读(671) 评论(0) 编辑 标签/TabActivity 深度研究
何谓标签 印象最深刻的应该是这个
现在 我们将通过一系列的扩展来研究之
写道 1. 自定义TabActivity 使得标签处于屏幕下方2. 各个标签所用布局 既可在 *.xml 中定义 也可在 *.java 中定义
3. 更改标签布局
1. 标签页 在 屏幕下方
写道 一个典型的标签Activity 是由2 部分构成的 且其id都有规定 即:* TabWidget 用于展示标签页 id=tabs
* FrameLayout 用于展示隶属于各个标签的具体布局 id=tabcontent
* 基本布局如下:
xml代码
? <?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:gravity= "bottom" android:layout_width= "fill_parent" android:layout_height= "fill_parent" > <FrameLayout android:id= "@android:id/tabcontent" android:layout_width= "fill_parent" android:layout_height= "200dip" > <RelativeLayout android:id= "@+id/view1" android:orientation= "vertical" android:layout_width= "fill_parent" android:layout_height= "fill_parent" > <TextView android:id= "@+id/text" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:text= "Hello to Johnny.Griffin!" android:layout_centerInParent= "true" android:textStyle= "bold|italic" /> <ImageView android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:src= "@drawable/robot" android:layout_toLeftOf= "@id/text" /> </RelativeLayout> <TextView android:id= "@+id/view2" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:text= "创新源于模仿!" /> <TextView android:id= "@+id/view3" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:text= "欢迎进入 droid 世界!" /> <ImageView android:id= "@+id/view4" android:layout_width= "fill_parent" android:layout_height= "fill_parent" android:src= "@drawable/robot" /> </FrameLayout> <TabWidget android:id= "@android:id/tabs" android:layout_width= "fill_parent" android:layout_height= "wrap_content" /> </LinearLayout> </TabHost> |
* 得到TabHost tHost 仅在TabActivity中有效
Java代码- tHost=this.getTabHost();
* 创建4个标签 并指定所使用的布局
Java代码
? public static final String Tab1 = "Tab1" ; public static final String Tab2 = "Tab2" ; public static final String Tab3 = "Tab3" ; public static final String Tab4 = "Tab4" ; public static final String Tab5 = "Tab5" ; tHost.addTab(tHost.newTabSpec(Tab1).setIndicator( "Tab 1" , getResources().getDrawable(R.drawable.icon)).setContent(R.id.view1)); tHost.addTab(tHost.newTabSpec(Tab2).setIndicator( "Tab 2" , getResources().getDrawable(R.drawable.beijing_small)).setContent(R.id.view2)); tHost.addTab(tHost.newTabSpec(Tab3).setIndicator( "Tab 3" ).setContent(R.id.view3)); tHost.addTab(tHost.newTabSpec(Tab4).setIndicator( "Tab 4" ).setContent(R.id.view4)); |
* 设定监听器 用于监听 标签间切换事件
?1 2 3 4 5 6 7 | tHost.setOnTabChangedListener( new OnTabChangeListener(){ @Override public void onTabChanged(String tabId) { // TODO Auto-generated method stub } }); |
* emulator 运行情况:
2. 在 *.java 中定义标签所需布局
Java代码
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 | public class CustomLayout implements TabHost.TabContentFactory { Activity activity; LayoutInflater inflaterHelper; LinearLayout layout; public CustomLayout (Activity a) { activity = a; inflaterHelper = a.getLayoutInflater(); } /** {@inheritDoc} */ //tag 标记各个标签 public View createTabContent(String tag) { return addCustomView(tag); } public View addCustomView(String id){ layout = new LinearLayout(activity); layout.setOrientation(LinearLayout.VERTICAL); if (id.equals(Tab1)){ ImageView iv = new ImageView(activity); iv.setImageResource(R.drawable.beijing_big); layout.addView(iv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT)); } else if (id.equals(Tab2)){ EditText edit = new EditText(activity); layout.addView(edit, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT)); Button btn = new Button(activity); btn.setText( "OK" ); btn.setWidth( 100 ); layout.addView(btn, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT)); RadioGroup rGroup = new RadioGroup(activity); rGroup.setOrientation(LinearLayout.HORIZONTAL); RadioButton radio1 = new RadioButton(activity); radio1.setText( "Radio A" ); rGroup.addView(radio1); RadioButton radio2 = new RadioButton(activity); radio2.setText( "Radio B" ); rGroup.addView(radio2); layout.addView(rGroup, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT)); } else if (id.equals(Tab3)){ LinearLayout.LayoutParams param3 = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.FILL_PARENT); layout.addView(inflaterHelper.inflate(R.layout.hello, null ),param3); } else if (id.equals(Tab4)){ TextView tv = new TextView(activity); tv.setText( "HelloTags!" ); tv.setGravity(Gravity.CENTER); layout.addView(tv); } return layout; } } |
* 如何使用:
Java代码- CustomLayoutct=newCustomLayout(this);
- tHost.addTab(tHost.newTabSpec(Tab4).setIndicator("Tab4").setContent(ct));
* emulator 运行结果:
3. 改变标签布局
写道 可能很多人对TabActivity 不满意 原因之一:其很不美观 而不美观的根源就是:标签的问题 其图像和文字相互覆盖 导致的那么 我们可以自己扩展么? 当然 写道 TabWidget 理解:
1. TabWidget 为 horizontal 的 LinearLayout
2. 且 其包含的标签又是一个RelativeLayout
3. 每个标签RelativeLayout 里面包含2个View: TextView ImageView
因此 我们甚至可以推算出其布局为:
xml代码
? <?xml version= "1.0" encoding= "utf-8" ?> <LinearLayout xmlns:android= "http://schemas.android.com/apk/res/android" android:orientation= "horizontal" android:layout_width= "fill_parent" android:layout_height= "fill_parent" > <RelativeLayout android:orientation= "vertical" android:layout_width= "fill_parent" android:layout_height= "wrap_content" > <ImageView /> <TextView /> </RelativeLayout> <RelativeLayout android:orientation= "vertical" android:layout_width= "fill_parent" android:layout_height= "wrap_content" > <ImageView /> <TextView /> </RelativeLayout> <RelativeLayout android:orientation= "vertical" android:layout_width= "fill_parent" android:layout_height= "wrap_content" > <ImageView /> <TextView /> </RelativeLayout> <RelativeLayout android:orientation= "vertical" android:layout_width= "fill_parent" android:layout_height= "wrap_content" > <ImageView /> <TextView /> </RelativeLayout> </LinearLayout> |
* 去掉系统默认的布局 即 在 setIndicator() 中置空 修改如下:
Java代码- tHost.addTab(tHost.newTabSpec(Tab1).setIndicator("").setContent(ct));
* 自己定义布局 并 指定显示的内容
Java代码
?1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | public View composeLayout(String s, int i){ LinearLayout layout = new LinearLayout( this ); layout.setOrientation(LinearLayout.VERTICAL); TextView tv = new TextView( this ); tv.setGravity(Gravity.CENTER); tv.setSingleLine( true ); tv.setText(s); layout.addView(tv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)); ImageView iv = new ImageView( this ); iv.setImageResource(i); layout.addView(iv, new LinearLayout.LayoutParams(LinearLayout.LayoutParams.FILL_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT)); return layout; } |
* 得到 TabWidget 实例 tw
Java代码- LinearLayoutll=(LinearLayout)tHost.getChildAt(0);
- tw=(TabWidget)ll.getChildAt(1);
* 得到 TabWidget 内的具体某个Layout 并使用上面的布局 composeLayout()
Java代码- publicvoidupdateWidgetView(inti,Stringtext,intimage){
- RelativeLayoutrl=(RelativeLayout)tw.getChildAt(i);
- rl.addView(composeLayout(text,image));
- }
* emulator 运行截图 // 前面 3个是使用新布局 最后一个是使用TabActivity 默认的布局 哪个好看 大家自己选择之
更多相关文章
- 安全新手入坑——HTML标签
- 没有一行代码,「2020 新冠肺炎记忆」这个项目却登上了 GitHub 中
- Android(安卓)用Animation-list实现逐帧动画
- Android界面设计的一点体会
- Android(安卓)反编译apk
- Android(安卓)在代码中动态设置字体颜色需要注意的问题
- android studio 多渠道打包
- Android以太网固定ip
- Android中实现ListView横向滑动