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

三个标签页置于顶端

效果图:

在文件BoardTabHost.java中定义页面切换的效果;切换页面时,当前页面滑出,目标页面滑入。这是2个不同的动画设定动画时要区分对待

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个标签

<?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

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 制作页面切换效果的相关内容,希望对大家有所帮助!

时间: 2024-08-31 16:12:33

Android中使用TabHost 与 Fragment 制作页面切换效果的相关文章

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

三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义页面切换的效果:切换页面时,当前页面滑出,目标页面滑入.这是2个不同的动画设定动画时要区分对待 import android.content.Context; import android.util.AttributeSet; import android.view.animation.Animation; import android.view.animation.TranslateAnimation; import

Android中使用CircleImageView和Cardview制作圆形头像的方法_Android

圆形头像在我们的日常使用的app中很常见,因为圆形的头像比较美观. 使用圆形图片的方法可能有我们直接将图片裁剪成圆形再在app中使用,还有就是使用自定义View对我们设置的任何图片自动裁剪成圆形. 效果图: 这里使用github上CircleImageView github:https://github.com/hdodenhof/CircleImageView CardView顾名思义卡片式的View,CardView继承的是FrameLayout,所以摆放内部控件的时候需要注意一下 可以设置

Android开发中ViewPager实现多页面切换效果_Android

ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入"Android-support-v4.jar" 首先必须知道:要使用ViewPager,必须要使用PagerAdapter为其提供数据,也就必须实现下面四个方法: 1, getCount():ViewPager需要显示的页面个数 2,isViewFromObject(View view, Object object):view 是某个位置的页面,Object是

Android中使用CircleImageView和Cardview制作圆形头像的方法

圆形头像在我们的日常使用的app中很常见,因为圆形的头像比较美观. 使用圆形图片的方法可能有我们直接将图片裁剪成圆形再在app中使用,还有就是使用自定义View对我们设置的任何图片自动裁剪成圆形. 效果图: 这里使用github上CircleImageView github:https://github.com/hdodenhof/CircleImageView CardView顾名思义卡片式的View,CardView继承的是FrameLayout,所以摆放内部控件的时候需要注意一下 可以设置

Android 中为什么要用Fragment.setArguments(Bundle bundle)来传递参数

Fragment在Android3.0开始提供,并且在兼容包中也提供了Fragment特性的支持.Fragment的推出让我们编写和管理用户界面更快捷更方便了. 但当我们实例化自定义Fragment时,为什么官方推荐Fragment.setArguments(Bundle bundle)这种方式来传递参数,而不推荐通过构造方法直接来传递参数呢?为了弄清这个问题,我们可以做一个测试,分别测试下这两种方式的不同 首先,我们来测试下通过构造方法传递参数的情况 public class FramentT

Android开发中ViewPager实现多页面切换效果

ViewPager用于实现多页面的切换效果,该类存在于Google的兼容包里面,所以在引用时记得在BuilldPath中加入"Android-support-v4.jar" 首先必须知道:要使用ViewPager,必须要使用PagerAdapter为其提供数据,也就必须实现下面四个方法: 1, getCount():ViewPager需要显示的页面个数 2,isViewFromObject(View view, Object object):view 是某个位置的页面,Object是

android 中如何去掉listView自带的回弹效果

问题描述 android 中如何去掉listView自带的回弹效果 android 中做listView的下拉刷新和上拉加载更多!魅族,还有其它的产商的手机下啦与自带的回弹 效果怎么去掉,下啦涮新怪怪的 解决方案 listview有属性可以设置的:listView.setOverScrollMode(View.OVER_SCROLL_NEVER); 解决方案二: 在xml中,listView的一个属性 android:overScrollMode="never" 在代码中 mListV

iOS开发中常用的各种动画、页面切面效果_IOS

今天主要用到的动画类是CALayer下的CATransition至于各种动画类中如何继承的在这也不做赘述,网上的资料是一抓一大把.好废话少说切入今天的正题. 一.封装动画方法 1.用CATransition实现动画的封装方法如下,每句代码是何意思,请看注释之. #pragma CATransition动画实现 - (void) transitionWithType:(NSString *) type WithSubtype:(NSString *) subtype ForView : (UIVi

Android中ListView + CheckBox实现单选、多选效果

还是先来看看是不是你想要的效果: 不废话,直接上代码,很简单,代码里都有注释 1 单选 public class SingleActivity extends AppCompatActivity { private ListView listView; private ArrayList<String> groups; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInsta