这篇文章主要介绍了Android中使用TabHost 与 Fragment 制作页面切换效果的相关资料,需要的朋友可以参考下
正文
Android中使用TabHost 与 Fragment 制作页面切换效果
三个标签页置于顶端
效果图:
在文件boardtabhost.java中定义页面切换的效果;切换页面时,当前页面滑出,目标页面滑入。这是2个不同的动画设定动画时要区分对待
|
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
|
import android.content.context;import android.util.attributeset;import android.view.animation.animation;import android.view.animation.translateanimation;import android.widget.tabhost;public class boardtabhost extends tabhost {private int currenttab = 0;int duration = 1000;// ms; the bigger the slowerpublic boardtabhost(context context) {super(context);}public boardtabhost(context context, attributeset attr) {super(context, attr);}@overridepublic void setcurrenttab(int index) {// we need two animation here: first one is fading animation, 2nd one is coming animation// translateanimation of fading fragmentif (index > currenttab) {// fly right to left and leave the screentranslateanimation translateanimation = new translateanimation(animation.relative_to_self/* fromxtype */, 0f/* fromxvalue */,animation.relative_to_self/* toxtype */, -1.0f/* toxvalue */,animation.relative_to_self, 0f,animation.relative_to_self, 0f);translateanimation.setduration(duration);getcurrentview().startanimation(translateanimation);} else if (index < currenttab) {// fly left to righttranslateanimation translateanimation = new translateanimation(animation.relative_to_self, 0f,animation.relative_to_self, 1.0f,animation.relative_to_self, 0f,animation.relative_to_self, 0f);translateanimation.setduration(duration);getcurrentview().startanimation(translateanimation);}super.setcurrenttab(index);// the current tab is index now// translateanimation of adding fragmentif (index > currenttab) {translateanimation translateanimation = new translateanimation(animation.relative_to_parent, 1.0f,/* fly into screen */animation.relative_to_parent, 0f, /* screen location */animation.relative_to_parent, 0f,animation.relative_to_parent, 0f);translateanimation.setduration(duration);getcurrentview().startanimation(translateanimation);} else if (index < currenttab) {translateanimation translateanimation = new translateanimation(animation.relative_to_parent, -1.0f,animation.relative_to_parent, 0f,animation.relative_to_parent, 0f,animation.relative_to_parent, 0f);translateanimation.setduration(duration);getcurrentview().startanimation(translateanimation);}currenttab = index;}} |
对应的布局文件activity_board.xml
使用boardtabhost,装载一个竖直的linearlayout;上面是tabwidget,装载标签;后面是fragment的framelayout
可以看到这里有3个fragment,待会在activity中也设置3个标签
|
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
|
<?xml version="1.0" encoding="utf-8"?><com.rust.tabhostdemo.boardtabhostandroid:id="@android:id/tabhost"xmlns:android="http://schemas.android.com/apk/res/android"xmlns:tools="http://schemas.android.com/tools"android:layout_width="match_parent"android:layout_height="match_parent"tools:context="com.rust.tabhostdemo.boardactivity"><linearlayoutandroid:layout_width="match_parent"android:layout_height="match_parent"android:orientation="vertical"><tabwidgetandroid:id="@android:id/tabs"android:layout_width="match_parent"android:layout_height="wrap_content"/><framelayoutandroid:id="@android:id/tabcontent"android:layout_width="match_parent"android:layout_height="match_parent"><fragmentandroid:id="@+id/fragment_tab1"android:name="com.rust.tabhostdemo.tabfragment1"android:layout_width="match_parent"android:layout_height="match_parent"/><fragmentandroid:id="@+id/fragment_tab2"android:name="com.rust.tabhostdemo.tabfragment2"android:layout_width="match_parent"android:layout_height="match_parent"/><fragmentandroid:id="@+id/fragment_tab3"android:name="com.rust.tabhostdemo.tabfragment3"android:layout_width="match_parent"android:layout_height="match_parent"/></framelayout></linearlayout></com.rust.tabhostdemo.boardtabhost> |
值得一提的是,这里的id要用android指定的id;
比如@android:id/tabhost,@android:id/tabcontent,@android:id/tabs;否则系统找不到对应控件而报错
boardactivity.java中设置了3个标签页,并指定了标签对应的fragment
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
import android.support.v4.app.fragmentactivity;import android.os.bundle;public class boardactivity extends fragmentactivity {public static final string tab1 = "tab1";public static final string tab2 = "tab2";public static final string tab3 = "tab3";public static boardtabhost boardtabhost;@overrideprotected void oncreate(bundle savedinstancestate) {super.oncreate(savedinstancestate);setcontentview(r.layout.activity_board);boardtabhost = (boardtabhost) findviewbyid(android.r.id.tabhost);boardtabhost.setup();boardtabhost.addtab(boardtabhost.newtabspec(tab1).setindicator(getstring(r.string.tab1_name)).setcontent(r.id.fragment_tab1));boardtabhost.addtab(boardtabhost.newtabspec(tab2).setindicator(getstring(r.string.tab2_name)).setcontent(r.id.fragment_tab2));boardtabhost.addtab(boardtabhost.newtabspec(tab3).setindicator(getstring(r.string.tab3_name)).setcontent(r.id.fragment_tab3));boardtabhost.setcurrenttab(0);}} |
主要文件目录:
── layout
├── activity_board.xml
├── fragment_tab1.xml
├── fragment_tab2.xml
└── fragment_tab3.xml
── tabhostdemo
├── boardactivity.java
├── boardtabhost.java
├── tabfragment1.java
├── tabfragment2.java
└── tabfragment3.java
以上所述是小编给大家介绍的android中使用tabhost 与 fragment 制作页面切换效果的相关内容,希望对大家有所帮助!

发表评论