实现页面切换(动画效果实现,不用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>
时间: 2024-11-13 09:03:34

实现页面切换(动画效果实现,不用ViewPager)的相关文章

赞!超炫的页面切换动画效果【附源码下载】

在下面的示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D Transforms)来创造一些立体动感的效果. 立即下载      在线演示 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. CSS 动画根据它们的实现的效果分为不同的组.为展示页面过渡效果,我们使用以下结构: <div id=&qu

太赞了!超炫的页面切换动画效果【附源码下载】

今天我们想与大家分享一组创意的页面切换熊效果集合.我们已经在示例中罗列了一组动画,可以被应用到页面切换过程中,创造出很有趣的导航效果.虽然有些效果都非常简单,只是简单的滑动动作,但另外的一些则是利用了视角(Perspective)和 3D 转换(3D Transforms)来创造一些立体动感的效果. 立即下载      在线演示 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. CSS 动画根据它们的实现的效果分为不同的组.为展示

超炫的 CSS3 页面切换动画效果

在线演示      源码下载

ViewPager切换动画效果修改

比如我们点击向右按钮,希望左边的view移动过来,有个平移效果,但是用系统默认的ViewPager切换的时候,会一闪而过.这是为什么呢? 因为viewpager外面其实有个scrollview,你可以使用反射的方法,设置他的scroll时间.代码如下. 主要代码: //第一步: LayoutInflater mInflater = (LayoutInflater) context .getSystemService(Context.LAYOUT_INFLATER_SERVICE); View v

activity切换动画和页面切换动画

Activity切换动画 要实现Activity切换动画需要靠overridePendingTransition来实现,里面有两个参数分别是进入Activity时的动画和离开Activity时的动画. 需要注意的是必须在StartActivity()或finish()之后立即调用 比如在MainActivity中有一个Button,点击Button后跳转到OtherActivity中代码如下: Intent intent = new Intent(this, OtherActivity.clas

android Activity切换动画效果

为Activity设置左右进出的效果,可以通过在Mainfest.xml文件中设置主题的方式来实现.还可以使用java代码. 一.设置样式 先看看实现动画的样式: <style name="AnimationRToL" mce_bogus="1" parent="@<span style="color:#ff0000;">android:style/Animation.Activity</span>&quo

简单实现图片间的切换动画 主要用到ViewPager

简单实现图片间的切换动画 主要用到ViewPagerViewPager是android扩展包v4包中的类,这个类可以让用户左右切换当前的view.ViewPager类需要一个PagerAdapter适配器类给它提供数据 PagerAdapter适配器,必须实现四个方法getCount.isViewFromObject.destroyItem.instantiateItem import android.os.Bundle;import android.support.v4.view.PagerA

界面切换动画效果

private ViewFlipper flipper; private float startX; private Animation in_lefttoright; private Animation outlefttoright; private Animation in_righttoleft; private Animation out_righttoleft; @Override public void onCreate(Bundle savedInstanceState) { su

(转)Android中的页面切换动画

这段时间一直在忙Android的项目,总算抽出点时间休息一下,准备把一些项目用到的Android经验分享一下. 在Android开发过程中,经常会碰到Activity之间的切换效果的问题,下面介绍一下如何实现左右滑动的切换效果,首先了解一下Activity切换的实现,从Android2.0开始在Activity增加了一个方法: public void overridePendingTransition (int enterAnim, int exitAnim) 其中: enterAnim 定义A

Angular 全局页面切换动画 me-pageloading

最近看了Codrops的一篇文章, 里面讲到了一个页面切换的效果, 详情点击此处. 看了这个效果感觉很赞, 觉得这个效果可以用在angular的页面切换中, 所以将这个效果移植到angular中, 做成一个angular module, 方便以后添加类似效果时, 直接使用. Github: https://github.com/jeremial/me-pageloading 做好的demo效果 配合 angular-ui-router使用, 效果http://isay.me/me-pageloa