实现页面切换（动画效果实现，不用ViewPager）

源代码地址 http://download.csdn.net/detail/u013210620/8791687

先看主页面布局activity_main

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:background="#d1d1d1"

    android:orientation="vertical" >

    <RelativeLayout

        android:id="@+id/list_layout_visible"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_alignParentLeft="true"

        android:layout_marginLeft="0dp" >

    </RelativeLayout>

    <!-- tab三选项 -->

    <LinearLayout

        android:id="@+id/mainTab"

        android:layout_width="match_parent"

        android:layout_height="50dp"

        android:layout_alignParentBottom="true"

        android:background="@drawable/bottom_bg"

        android:orientation="horizontal" >

        <ImageView

            android:id="@+id/iv_tab_communication"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/bottom_sms_p" />

        <ImageView

            android:id="@+id/iv_tab_contacts"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/bottom_contacts_p" />

        <ImageView

            android:id="@+id/iv_tab_dail"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/bottom_dial_p" />

        <ImageView

            android:id="@+id/iv_tab_temp"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_weight="1"

            android:background="@drawable/bottom_dial_p"

            android:visibility="gone" />

    </LinearLayout>

</RelativeLayout>

再看代码块（有凝视）

package com.example.commonpager;

import android.animation.Animator;

import android.animation.AnimatorListenerAdapter;

import android.animation.AnimatorSet;

import android.animation.ObjectAnimator;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

import android.util.DisplayMetrics;

import android.view.LayoutInflater;

import android.view.View;

import android.view.WindowManager;

import android.view.View.OnClickListener;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.RelativeLayout;

public class MainActivity extends Activity implements OnClickListener {

	/** 内容区域 */

	private RelativeLayout list_layout_visible;

	/** Tab4键 */

	private LinearLayout mainTab;

	private ImageView iv_tab_communication, iv_tab_contacts, iv_tab_dail,iv_tab_temp;

	/** 当前的Tab键 */

	private ImageView middleTab;

	/**页面载入器*/

	private LayoutInflater mLayoutInflater;

	/**初始化布局view*/

	private View mBaseLayoutView;

	private boolean isStartAnimation = true;

	@Override

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		initView();

	}

	private void initView() {

		mLayoutInflater = LayoutInflater.from(this);

		mBaseLayoutView = mLayoutInflater.inflate(R.layout.activity_main, null);

		// 获取

		list_layout_visible = (RelativeLayout) mBaseLayoutView

				.findViewById(R.id.list_layout_visible);

		mainTab = (LinearLayout) mBaseLayoutView.findViewById(R.id.mainTab);

		iv_tab_communication = (ImageView) mBaseLayoutView

				.findViewById(R.id.iv_tab_communication);

		iv_tab_contacts = (ImageView) mBaseLayoutView

				.findViewById(R.id.iv_tab_contacts);

		iv_tab_dail = (ImageView) mBaseLayoutView

				.findViewById(R.id.iv_tab_dail);

		iv_tab_temp = (ImageView) mBaseLayoutView

				.findViewById(R.id.iv_tab_temp);

		/**动态载入布局文件*/

		mLayoutInflater.inflate(R.layout.content_contacts, list_layout_visible);

		//展现页面

		setContentView(mBaseLayoutView);

		//设置监听事件

		iv_tab_communication.setOnClickListener(this);

		iv_tab_contacts.setOnClickListener(this);

		iv_tab_dail.setOnClickListener(this);

		//初始化当前按键是contact按键

		middleTab = iv_tab_contacts;

	}

	@Override

	public void onClick(View v) {

		switch (v.getId()) {

		/***思路同iv_tab_contacts*/

		case R.id.iv_tab_communication:

			if (middleTab == iv_tab_communication) {

				return;

			}

			list_layout_visible.removeAllViews();

			mLayoutInflater.inflate(R.layout.content_msg, list_layout_visible);

			startAnimation(iv_tab_communication);

			break;

		case R.id.iv_tab_contacts:

			//初始化点击通讯录按键，不做处理事件，直接返回

			if (middleTab == iv_tab_contacts) {

				return;

			}

			//假设载入过之前的消息或者拨号界面。先removeall界面，然后在载入通讯录界面

			list_layout_visible.removeAllViews();

			mLayoutInflater.inflate(R.layout.content_contacts,

					list_layout_visible);

			//载入通讯录界面时候。启动动画效果

			startAnimation(iv_tab_contacts);

			break;

			/***思路同iv_tab_contacts*/

		case R.id.iv_tab_dail:

			if (middleTab == iv_tab_dail) {

				return;

			}

			list_layout_visible.removeAllViews();

			mLayoutInflater.inflate(R.layout.content_dail, list_layout_visible);

			startAnimation(iv_tab_dail);

			break;

		default:

			break;

		}

	}

	private void startAnimation(final ImageView clickTab) {

		ImageView otherTab = null;

		float otherTab_start, otherTab_end;

		float tempTab_start, tempTab_end;

		// 消息不在中间，没点击信息

		if (iv_tab_communication != clickTab

				&& iv_tab_communication != middleTab) {

			otherTab = iv_tab_communication;

		}

		if (iv_tab_contacts != clickTab && iv_tab_contacts != middleTab) {

			otherTab = iv_tab_contacts;

		}

		if (iv_tab_dail != clickTab && iv_tab_dail != middleTab) {

			otherTab = iv_tab_dail;

		}

		setbottomView();

		iv_tab_temp.setBackground(null);

		iv_tab_temp.setBackground(otherTab.getBackground());

		if (otherTab.getX() > middleTab.getX()) {

			otherTab_start = clickTab.getX()

					- (otherTab.getX() - middleTab.getX());

			otherTab_end = clickTab.getX();

			tempTab_start = otherTab.getX();

			tempTab_end = otherTab.getX()

					+ (otherTab.getX() - middleTab.getX());

		} else {

			otherTab_start = clickTab.getX()

					+ (clickTab.getX() - middleTab.getX());

			otherTab_end = clickTab.getX();

			tempTab_start = otherTab.getX();

			tempTab_end = otherTab.getX()

					- (clickTab.getX() - middleTab.getX());

		}

		AnimatorSet set = new AnimatorSet();

		set.playTogether(ObjectAnimator.ofFloat(clickTab, "x", clickTab.getX(),

				middleTab.getX()), ObjectAnimator.ofFloat(middleTab, "x",

				middleTab.getX(), otherTab.getX()), ObjectAnimator.ofFloat(

				iv_tab_temp, "x", tempTab_start, tempTab_end), ObjectAnimator

				.ofFloat(otherTab, "x", otherTab_start, otherTab_end));

		set.addListener(new AnimatorListenerAdapter() {

			@Override

			public void onAnimationEnd(Animator anim) {

			}

			@Override

			public void onAnimationStart(Animator anim) {

				middleTab = clickTab;

			}

		});

		set.setDuration(1 * 600).start();

	}

	private void setbottomView() {

		DisplayMetrics metrics = new DisplayMetrics();

		getWindowManager().getDefaultDisplay().getMetrics(metrics);

		int width = metrics.widthPixels;// 屏幕的宽dp

		LinearLayout.LayoutParams para;

		para = (LinearLayout.LayoutParams) iv_tab_communication

				.getLayoutParams();

		para.width = width / 3;

		para.weight = 0;

		iv_tab_communication.setLayoutParams(para);

		para = (LinearLayout.LayoutParams) iv_tab_contacts.getLayoutParams();

		para.width = width / 3;

		para.weight = 0;

		iv_tab_contacts.setLayoutParams(para);

		para = (LinearLayout.LayoutParams) iv_tab_dail.getLayoutParams();

		para.width = width / 3;

		para.weight = 0;

		iv_tab_dail.setLayoutParams(para);

		para = (LinearLayout.LayoutParams) iv_tab_temp.getLayoutParams();

		para.width = width / 3;

		para.weight = 0;

		iv_tab_temp.setVisibility(View.VISIBLE);

	}

}

然后是3个Tab键相应的測试页面

content_contacts.xml

<?

xml version="1.0" encoding="utf-8"?>

<TextView xmlns:android="http://schemas.android.com/apk/res/android"

    android:id="@+id/tv_tip_no_record"

    android:layout_width="wrap_content"

    android:layout_height="wrap_content"

    android:layout_gravity="center"

    android:layout_marginTop="14dp"

    android:shadowDx="0"

    android:shadowDy="2"

    android:shadowRadius="2"

    android:text="contact!!!"

    android:textColor="#888"

    android:textSize="20dp"

    android:typeface="sans" />

content_msg.xml

<?xml version="1.0" encoding="utf-8"?

>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <TextView

        android:id="@+id/tv_tip_no_record"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:layout_marginTop="14dp"

        android:shadowDx="0"

        android:shadowDy="2"

        android:shadowRadius="2"

        android:text="msg!!!"

        android:textColor="#888"

        android:textSize="20dp"

        android:typeface="sans" />

</RelativeLayout>

content_dail.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" >

    <TextView

        android:id="@+id/tv_tip_no_record"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:layout_marginTop="14dp"

        android:shadowDx="0"

        android:shadowDy="2"

        android:shadowRadius="2"

        android:text="msg!!!"

        android:textColor="#888"

        android:textSize="20dp"

        android:typeface="sans" />

</RelativeLayout>

实现页面切换（动画效果实现，不用ViewPager）的更多相关文章

react实现页面切换动画效果
一.前情概要注:(我使用的路由是react-router4) 如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升: but the 问题是 ...
Windows Phone使用sliverlight toolkit实现页面切换动画效果
使用应用时,好多app在页面切换的时候都有一个动画效果,感觉很炫,也大大增加了用户体验,怎么实现呢? 界面的切换,可以用Windows Phone Toolkit中的TransitionService ...
超炫的 CSS3 页面切换动画效果
在线演示源码下载
基于vue2.0打造移动商城页面实践 vue实现商城购物车功能基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
基于vue2.0打造移动商城页面实践地址:https://www.jianshu.com/p/2129bc4d40e9 vue实现商城购物车功能地址:http://www.jb51.net/art ...
(原)android中的动画(三)之动画监听&页面切换动画
1.动画也可以设置监听事件,例如在动画结束时需要执行某操作把要执行的代码写在onAnimationEnd()回调方法中即可: anim.setAnimationListener(new Animat ...
iOS页面切换动画实现方式。
iOS页面切换动画实现方式. 1.使用UIView animateWithDuration:animations:completion方法 Java代码 [UIView animateWithDura ...
Activity 切换动画和页面切换动画
public class MainActivity extends Activity { private ViewFlipper viewFlipper; private float startX; ...
Angular 全局页面切换动画 me-pageloading
最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做 ...
简单实现图片间的切换动画主要用到ViewPager
简单实现图片间的切换动画主要用到ViewPagerViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view.ViewPager类需要一个PagerAdapter适 ...
QtQuick多页面切换、多页面切换动画、多个qml文件数据交互
一.QtQuick多页面切换方法 (1)“隐藏法” 前一个视图visible设为false或者透明度opacity设为0,相当于“隐藏”了,实际还存在: 要显示的视图visible设为true或者透明 ...

随机推荐

【转】C# client 与java netty 服务端的简单通信，客户端采用Unity
http://blog.csdn.net/wilsonke/article/details/24721057 近日根据官方提供的通信例子自己写了一个关于Unity(C#)和后台通信的类,拿出来和大家分 ...
EasyUi DataGrid 获取选中行的checkbox
EasyUi DataGrid 获取选中行的checkbox var checked = $(":checkbox[name=ID]:checked"); console.log( ...
SPOJ COT2 - Count on a tree II（LCA+离散化+树上莫队）
COT2 - Count on a tree II #tree You are given a tree with N nodes. The tree nodes are numbered from ...
JavaScript 笔记(1) -- 基础 & 函数 & 循环 & ...
目录(代码编写): 显示数据语法变量 & 变量类型对象函数事件字符串运算符条件语句循环语句 Break 和 Continue 使用 JS 近两年,现整理下一些基本: HTML ...
【转】手摸手，带你用vue撸后台系列三(实战篇)
前言在前面两篇文章中已经把基础工作环境构建完成,也已经把后台核心的登录和权限完成了,现在手摸手,一起进入实操. Element 去年十月份开始用vue做管理后台的时候毫不犹豫的就选择了Elemen, ...
tableView镶嵌加入CollectionView实现方法
创建一个继承UICollectionView的类QHCollectionView在QHCollectionView.h中添加接口方法 @interface QHCollectionView : UIC ...
洛谷 [P3377] 左偏树(可并堆)
可并堆,就是可以合并的堆注意并查集不能路径压缩,不然删除根节点时会出错 #include <iostream> #include <cstring> #include < ...
《Linux命令行与shell脚本编程大全第3版》Linux命令行---1
以下为阅读<Linux命令行与shell脚本编程大全第3版>的读书笔记,为了方便记录,特地与书的内容保持同步,特意做成一节一次随笔,特记录如下: <Linux命令行与shell脚本 ...
python 查看帮助和变量的强制转换
查看帮助 dir() 函数查看对象都有哪些属性和方法用法:把要查询的对象写入()括号中即可 print(dir([])) (查看列表的方法) 执行: C:\Python27\python.exe ...
c语言命令行参数
int main(int argc, char * argv[]) { ..... } argc: 代表启动程序时,命令行参数的个数.C和C++语言规定,可执行程序程序本身的文件名,也算是一个命令行参 ...

实现页面切换（动画效果实现，不用ViewPager）

实现页面切换（动画效果实现，不用ViewPager）的更多相关文章

随机推荐

热门专题