实现页面切换（动画效果实现，不用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或者透明 ...

随机推荐

Leetcode 543.二叉树的直径
二叉树的直径给定一棵二叉树,你需要计算它的直径长度.一棵二叉树的直径长度是任意两个结点路径长度中的最大值.这条路径可能穿过根结点. 示例 :给定二叉树 1 / \ 2 3 / \ 4 5 返回 3, ...
【转】Unity 游戏存档 PlayerPrefs类的用法
http://www.cnblogs.com/qiaogaojian/p/5969855.html unity3d提供了一个用于本地持久化保存与读取的类——PlayerPrefs.工作原理非常简单,以 ...
【SPOJ694】Distinct Substrings （SA）
求不相同子串个数该问题等价于求所有后缀间不相同前缀的个数..也就是对于每个后缀suffix(sa[i]),将贡献出n-sa[i]+1个,但同时,要减去那些重复的,即为height[i],故答案 ...
shell的使用
删除 http://blog.csdn.net/u011579204/article/details/46709929 #! /bin/bash dir=/webserver/test/(等号之间不能 ...
序列操作（bzoj 1858）
Description lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成0 ...
Connect(bzoj 1948)
Description 给定一个R*C大小的迷宫,其中R,C均为奇数迷宫中坐标为两个奇数的点不能通过,称为障碍,迷宫中其他不能通过的点统称为墙壁坐标为两个偶数的点可以通过,称为房间,迷宫中其他可通 ...
访问外网 ML2 的配置
通过 router 可以实现位于不同 vlan 中的 instance 之间的通信. 接下来要探讨的问题是 instance 如何与外部网络通信. 这里的外部网络是指的租户网络以外的网络. 租户网络是 ...
about coroutine
co 有协作的意思,是让多个 routine 合作来完成某件或者某几件事情,它主要解决的问题就是合理安排一些耗时长的工作的执行时间,让其他的工作有机会得到执行.
css3动画、边框、投影知识
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
transform与position:fixed的那些恩怨
1. 前言在写这篇文章之前,我理解的fixed元素是这样的:(摘自CSS布局基础) 固定定位与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身.由于视图本身是固定的, ...

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

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

随机推荐

热门专题