开发者社区> rustfisher> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Android - TabHost 与 Fragment 制作页面切换效果

简介: Android - TabHost 与 Fragment 制作页面切换效果 Android API 19 , API 23 三个标签页置于顶端 效果图: 在文件BoardTabHost.java中定义页面切换的效果;切换页面时,当前页面滑出,目标页面滑入。
+关注继续查看

Android - TabHost 与 Fragment 制作页面切换效果

Android API 19 , API 23

三个标签页置于顶端

效果图:
tab1.pngtab2_tab3.png
在文件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的 Fragment 讲解与简单历史页面切换效果实践】
目录 第一节 概述 第二节 样例效果 第三节 生命周期 第四节 实践效果 第一节 概述 首先,提个问题,啥是 Fragment ? Fragment 是一种可以嵌入在 Activity 当中的 UI 片段,它能让程序更加合理和充分地利用大屏幕空间,因在平板上应用的非常广泛。 到这里你可能会有些懵,啥玩意?下面的举个例子:想象我们正在开发一个做一个页面,其中使用 RecyclerView 展示了一组新闻的标题,当点击了其中一个标题时,就打开另一个界面显示新闻的详细内容。如果...
0 0
Android - FragmentTabHost 与 Fragment 制作页面切换效果
使用 FragmentTabHost 与 Fragment 制作页面切换效果 API 19 TabHost已经不建议使用了。用 FragmentTabHost 来代替TabHost。实际上 FragmentTabHost 继承自 TabHost 效果图: 主文件是FragmentTabHostDemo.
689 0
Android Studio进行APP设计开发之矢量图及XML文件转换
Android Studio进行APP设计开发之矢量图及XML文件转换
0 0
Android studio开发APP时设置更改启动时的主界面程序
Android studio开发APP时设置更改启动时的主界面程序
0 0
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
Android Studio开发APP启动程序时开屏简单动画效果快速有效解决方案
0 0
Android开发:使用Java对手机截图图片进行任意区域的颜色对比度处理操作
开发项目过程中,对于手机屏幕截图,需要对获取到的截图的任意部分进行区域颜色对比度的识别操作,由此判定任意指定区域是否满足某对比度基本标准,但是该功能在网上任何地方都没有找到过Java方面的代码,于是根据RGB转换测试的原理:即获取每个像素点的RGB,通过RGB对比度定义公式进行像素点的集合换取。
0 0
开发android项目的常用jar包
开发android项目的常用jar包
0 0
+关注
rustfisher
https://github.com/RustFisher https://rustfisher.github.io/about/
文章
问答
文章排行榜
最热
最新
相关电子书
更多
Android组件化实现
立即下载
蚂蚁聚宝Android秒级编译—— Freeline
立即下载
Android插件化:从入门到放弃
立即下载