正文

Android中使用TabHost 与 Fragment 制作页面切换效果

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0710

这篇文章主要介绍了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 slower
public boardtabhost(context context) {
super(context);
}
public boardtabhost(context context, attributeset attr) {
super(context, attr);
}
@override
public void setcurrenttab(int index) {
// we need two animation here: first one is fading animation, 2nd one is coming animation
// translateanimation of fading fragment
if (index > currenttab) {// fly right to left and leave the screen
translateanimation 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 right
translateanimation 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 fragment
if (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.boardtabhost
android: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">
<linearlayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<tabwidget
android:id="@android:id/tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"/>
<framelayout
android:id="@android:id/tabcontent"
android:layout_width="match_parent"
android:layout_height="match_parent">
<fragment
android:id="@+id/fragment_tab1"
android:name="com.rust.tabhostdemo.tabfragment1"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<fragment
android:id="@+id/fragment_tab2"
android:name="com.rust.tabhostdemo.tabfragment2"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
<fragment
android: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;
@override
protected 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 制作页面切换效果的相关内容，希望对大家有所帮助！