UI___tab view 的实现
16lz
2021-12-04
一.通过xml文件实现
1.创建一个tab iew,所需的xml文件
</TabHost>
android:layout_marginTop="-5dp"
红色部分是为了让接下来加一排button的时候两个layout之间看上去没有黑边框。
2.创建一个tab iew,所需的activity代码
3.给某个tab 标签下面加一个排横着的button
<RadioGroup>----- <RadioGroup>
红色部分为加的button。
4.如何让tab标签切换的时候始终显示的是sub tab的home page
(当sub tab下有子页面跳转(多级跳转)的时候)
举例:tabhost中共有3个sub tab(A, B, C)
程序启动后点击 tab 标签 A 进入 A 界面
A中点击某个button的时候会changeContent 到 a1 界面,
如果这个时候点击tab 标签 B,就会跳转到 B 界面,
然后再点击 tab 标签 A的时候 显示的就不是 A 界面 而是 a1 界面,
因为 在标签间切换的时候 不会重新调activity的oncreate 而是 调的onresume,
如果 在A界面的时候changecontent,下一次回来,还会停留在上次的content界面上。
为了解决这个问题就需要重写 onresume 函数,然后重新设置一下UI,根据自己的具体需要重新设置content就是了
initUI();
红色部分initUI是自己写的函数哈。
5. 实现当某个sub tab 中有多级跳转(子页面跳转)的时候
按返回键有返回到上一级的效果而不是关闭程序
按返回键,程序关闭是activity的默认设置,为了解决这个文集需要从写onBackPressed() 函数。
为了表示层级关系我给每个page 指定了一个int变量。
然后给当前这个sub tab 添加 mSubPage int 变量
当changecontent的时候把当前page的int 的值置赋给这个mSubPage就是了
然后在onBackPressed函数中判断 mSubPage 的值 再决定跳转到他的上一级页面。
下面是部分代码
initView();是自定义的函数,会根据mSubPage 的值初始化不同的页面。
6. 避免tabHost中横竖屏切换的时候会自动重启activity,会自动调用onpase ondestory onstart onreume 等函数影响ui显示的逻辑的问题。
其实很简单,只需要在 mainifest.xml的tabhost的main activity标签中添加一个属性就可以了
android:configChanges="orientation|keyboardHidden这样就不会自动去重启了。
7.设置自定义的tab标签样式。。
自定义tab标签的layout
tab_wiget.xml
在代码中添加sub tab
tspec1.setIndicator(tabWidget1);指定自定义的layout
8.如何让tabhost在设备切换到横屏的时候改变tabhost 的layout,
比如让标签竖直排列在屏幕右边。
a.在res 下新建一个 layout-land文件夹
b.重写tabhost 的 xml 布局文件
注意把原来portrait中的relativeLayout 换成了LinearLayout
并且 加上了属性android:orientation="horizontal"
c.在建立tabhost 的主activity的oncreate函数中添加如下代码,修改tabwiget的排列为竖直的排列,这个只能在代码中修改,在xml中设置Orientation属性是不顶用的。
d.在layou-land的文件夹下,调整sub page的layout,注意文件名一定要跟layout中的文件名相同,这样在横置手机的时候才会自动调用layout-land下的布局。
9.如何控制某些sub page下可以横竖切换,有些sub page下不可以横竖切换。
可以根据不同的情况,在onResume() 跟 onPause() 函数中分别调用下面两行代码
//恢复横竖切换
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
//设置为竖屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
//同理设置为横屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
10.给tab 标签设置监听
举例:tabhost中共有3个sub tab(A, B, C)
程序启动后点击 tab 标签 A 进入 A 界面
A中点击某个button的时候会changeContent 到 a1 界面,
如果这个时候点击tab 标签 A,android默认的是不会发生变化的,仍然停留在a1界面
假如我们想点击tab 标签 A后让他回到上一级,就得给tab 标签设置监听
LocalActivityManager可以在ActivityGroup里面访问子Activity的View 并操作它去改变UI
1.创建一个tab iew,所需的xml文件
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:fadingEdge="none" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RelativeLayout android:id="@+id/LinearLayout01" android:drawingCacheQuality="high" android:layout_height="fill_parent" android:layout_width="fill_parent"> <FrameLayout android:id="@android:id/tabcontent" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_alignParentTop="false" android:layout_below="@android:id/tabs" android:layout_marginTop="-5dp"> </FrameLayout> <TabWidget android:id="@android:id/tabs" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:tabStripEnabled="false" /> </RelativeLayout>
</TabHost>
android:layout_marginTop="-5dp"
红色部分是为了让接下来加一排button的时候两个layout之间看上去没有黑边框。
2.创建一个tab iew,所需的activity代码
final TabHost tabs = (TabHost) this.findViewById(android.R.id.tabhost); final TabSpec tspec1 = tabs.newTabSpec("Journal [3]"); //设置tab的lable,跟icon tspec1.setIndicator("Journal [3]", getResources().getDrawable(R.drawable.navi_journal)); tspec1.setContent(new Intent(this, SubPageJournal.class)); tabs.addTab(tspec1); final TabSpec tspec2 = tabs.newTabSpec("Appointments"); tspec2.setIndicator("Appointments", getResources().getDrawable(R.drawable.navi_appointment)); tspec2.setContent(new Intent(this, SubPageAppointment.class)); tabs.addTab(tspec2); final TabSpec tspec3 = tabs.newTabSpec("My Lab"); tspec3.setIndicator("My Lab", getResources().getDrawable(R.drawable.navi_lab)); tspec3.setContent(new Intent(this, SubPageLab.class)); tabs.addTab(tspec3); final TabSpec tspec4 = tabs.newTabSpec("Medications"); tspec4.setIndicator("Medications", getResources().getDrawable(R.drawable.navi_medication)); tspec4.setContent(new Intent(this, SubPageMedications.class)); tabs.addTab(tspec4); //设置背景颜色 tabs.getTabWidget().getChildAt(0).setBackgroundColor(0xffDE2852); tabs.getTabWidget().getChildAt(1).setBackgroundColor(0xff007DC6); tabs.getTabWidget().getChildAt(2).setBackgroundColor(0xffFF9631); tabs.getTabWidget().getChildAt(3).setBackgroundColor(0xff94CB31); tabs.setBackgroundColor(0xffDE2852);
3.给某个tab 标签下面加一个排横着的button
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" android:background="#FFFFFF"> <RadioGroup android:id="@+id/RadioGroup01" android:background="#DE2852" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:paddingTop="5dp"> <RadioButton android:text="My Care" android:id="@+id/myCare" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#ff000000" android:background="@drawable/buttonbackground" android:button="@drawable/no_image" android:layout_weight="1" android:gravity="center_horizontal" android:layout_marginLeft="5dp" android:layout_marginRight="5dp"></RadioButton> <RadioButton android:text="Vital" android:id="@+id/vital" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#ff000000" android:background="@drawable/buttonbackground" android:button="@drawable/no_image" android:layout_weight="1" android:gravity="center_horizontal" android:layout_marginLeft="5dp" android:layout_marginRight="5dp"></RadioButton> <RadioButton android:text="Givers" android:id="@+id/givers" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#ff000000" android:background="@drawable/buttonbackground" android:button="@drawable/no_image" android:layout_weight="1" android:gravity="center_horizontal" android:layout_marginLeft="5dp" android:layout_marginRight="5dp"></RadioButton> <RadioButton android:text="History" android:id="@+id/history" android:layout_width="fill_parent" android:layout_height="wrap_content" android:textColor="#ff000000" android:background="@drawable/buttonbackground" android:button="@drawable/no_image" android:layout_weight="1" android:gravity="center_horizontal" android:layout_marginLeft="5dp" android:layout_marginRight="5dp"></RadioButton> </RadioGroup> <ListView android:id="@+id/content_list" android:layout_height="fill_parent" android:layout_width="fill_parent" android:cacheColorHint="#00000000" android:dividerHeight="0dp" android:divider="@null"> </ListView></LinearLayout>
<RadioGroup>----- <RadioGroup>
红色部分为加的button。
4.如何让tab标签切换的时候始终显示的是sub tab的home page
(当sub tab下有子页面跳转(多级跳转)的时候)
举例:tabhost中共有3个sub tab(A, B, C)
程序启动后点击 tab 标签 A 进入 A 界面
A中点击某个button的时候会changeContent 到 a1 界面,
如果这个时候点击tab 标签 B,就会跳转到 B 界面,
然后再点击 tab 标签 A的时候 显示的就不是 A 界面 而是 a1 界面,
因为 在标签间切换的时候 不会重新调activity的oncreate 而是 调的onresume,
如果 在A界面的时候changecontent,下一次回来,还会停留在上次的content界面上。
为了解决这个问题就需要重写 onresume 函数,然后重新设置一下UI,根据自己的具体需要重新设置content就是了
@Override protected void onResume() { //setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT); initUI(); //System.out.println("SubpageAppointment.onResume"); super.onResume(); }
initUI();
红色部分initUI是自己写的函数哈。
5. 实现当某个sub tab 中有多级跳转(子页面跳转)的时候
按返回键有返回到上一级的效果而不是关闭程序
按返回键,程序关闭是activity的默认设置,为了解决这个文集需要从写onBackPressed() 函数。
为了表示层级关系我给每个page 指定了一个int变量。
然后给当前这个sub tab 添加 mSubPage int 变量
当changecontent的时候把当前page的int 的值置赋给这个mSubPage就是了
然后在onBackPressed函数中判断 mSubPage 的值 再决定跳转到他的上一级页面。
下面是部分代码
/** The PAG e_ chem. */ private final int PAGE_CHEM = 1; /** The PAG e_ ray. */ private final int PAGE_RAY = 2; /** The PAG e_ pathology. */ private final int PAGE_PATHOLOGY = 3; /** The PAG e_ mico. */ private final int PAGE_MICO = 4; /** The PAG e_ iagedetail. */ private final int PAGE_IAGEDETAIL = 5; private final int PAGE_CHEMEDTAIL = 6; private final int PAGE_PATHOLOGYDETAIL = 7; /** The m sub page. */ private int mSubPage; 。。。。。。 @Override public void onBackPressed() { if (mSubPage == PAGE_IAGEDETAIL) { mSubPage = PAGE_RAY; initView(); } else if (mSubPage == PAGE_CHEMEDTAIL) { mSubPage = PAGE_CHEM; initView(); } else if (mSubPage == PAGE_PATHOLOGYDETAIL) { mSubPage = PAGE_PATHOLOGY; initView(); } else { super.onBackPressed(); } }
initView();是自定义的函数,会根据mSubPage 的值初始化不同的页面。
6. 避免tabHost中横竖屏切换的时候会自动重启activity,会自动调用onpase ondestory onstart onreume 等函数影响ui显示的逻辑的问题。
其实很简单,只需要在 mainifest.xml的tabhost的main activity标签中添加一个属性就可以了
android:configChanges="orientation|keyboardHidden这样就不会自动去重启了。
7.设置自定义的tab标签样式。。
自定义tab标签的layout
tab_wiget.xml
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/image_tab" android:layout_height="60dp" android:layout_width="60dp" android:background="@drawable/navi_home" android:layout_centerHorizontal="true"> </ImageView> <TextView android:id="@+id/title_tab" android:layout_width="fill_parent" android:textSize="12dp" android:text="ddffd" android:textColor="#ffFFFFFF" android:textStyle="bold" android:gravity="center_horizontal" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:layout_below="@+id/image_tab" android:layout_marginTop="-10dp" /></RelativeLayout>
在代码中添加sub tab
final TabHost tabs = (TabHost) this.findViewById(android.R.id.tabhost); final TabSpec tspec1 = tabs.newTabSpec("Journal [1]"); RelativeLayout tabWidget1 = (RelativeLayout) LayoutInflater.from(this) .inflate(R.layout.tab_widget, null); ImageView imageTab1 = (ImageView) tabWidget1 .findViewById(R.id.image_tab); TextView titleTab1 = (TextView) tabWidget1.findViewById(R.id.title_tab); imageTab1.setImageResource(R.drawable.redactivities); titleTab1.setText("Journal [1]"); tspec1.setIndicator(tabWidget1); tspec1.setContent(new Intent(this, SubPageJournal.class)); tabs.addTab(tspec1);
tspec1.setIndicator(tabWidget1);指定自定义的layout
8.如何让tabhost在设备切换到横屏的时候改变tabhost 的layout,
比如让标签竖直排列在屏幕右边。
a.在res 下新建一个 layout-land文件夹
b.重写tabhost 的 xml 布局文件
<TabHost xmlns:android="http://schemas.android.com/apk/res/android" android:id="@android:id/tabhost" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <LinearLayout android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="fill_parent"> <FrameLayout android:id="@android:id/tabcontent" android:layout_height="fill_parent" android:layout_width="fill_parent" android:background="#ffffffff" android:layout_weight="1"/> <TabWidget android:id="@android:id/tabs" android:tabStripEnabled="false" android:layout_height="fill_parent" android:layout_width="wrap_content" android:background="#ffDE2852" android:layout_weight="0"/> </LinearLayout></TabHost>
注意把原来portrait中的relativeLayout 换成了LinearLayout
并且 加上了属性android:orientation="horizontal"
c.在建立tabhost 的主activity的oncreate函数中添加如下代码,修改tabwiget的排列为竖直的排列,这个只能在代码中修改,在xml中设置Orientation属性是不顶用的。
Configuration cfg = getResources().getConfiguration(); boolean hor = cfg.orientation == Configuration.ORIENTATION_LANDSCAPE; if (hor) { TabWidget tw = tabs.getTabWidget(); tw.setOrientation(LinearLayout.VERTICAL); }
d.在layou-land的文件夹下,调整sub page的layout,注意文件名一定要跟layout中的文件名相同,这样在横置手机的时候才会自动调用layout-land下的布局。
9.如何控制某些sub page下可以横竖切换,有些sub page下不可以横竖切换。
可以根据不同的情况,在onResume() 跟 onPause() 函数中分别调用下面两行代码
//恢复横竖切换
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_SENSOR);
//设置为竖屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
//同理设置为横屏
setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
10.给tab 标签设置监听
举例:tabhost中共有3个sub tab(A, B, C)
程序启动后点击 tab 标签 A 进入 A 界面
A中点击某个button的时候会changeContent 到 a1 界面,
如果这个时候点击tab 标签 A,android默认的是不会发生变化的,仍然停留在a1界面
假如我们想点击tab 标签 A后让他回到上一级,就得给tab 标签设置监听
TabHost tabs; 。。。。。。。。 //0 是tab 标签的id tabs.getTabWidget().getChildAt(0).setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { if (0 != tabs.getCurrentTab()) {//Journal [1]是之前add tab 的时候的标签 tabs.setCurrentTabByTag("Journal [1]"); } else { LocalActivityManager manager = getLocalActivityManager();//SubPageJournal 这个是在add tad 的时候setContent的 activity SubPageJournal subpage = (SubPageJournal) manager .getActivity("Journal [1]");//backMainPage()是自己写的函数,用来changeContent,类似于上面提到的initUI() subpage.backMainPage(); } } });
LocalActivityManager可以在ActivityGroup里面访问子Activity的View 并操作它去改变UI
更多相关文章
- Android里merge和include标签的使用
- Android(安卓)layout布局属性、标签属性总结大全
- Android(安卓)Choreographer 初始化
- AndroidAndroid程序提示和消息button响应事件
- Android应用程序进程启动过程(后篇)
- 【Android】EditText标签调用键盘
- android TabHost导航切换实现方式
- android常用函数参数补充
- Android应用程序进程启动过程(后篇)