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

时间：2024-10-16 08:05:08

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

源代码地址 http://download.****.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>

相关文章