源码地址 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" />
<?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>原文地址：http://blog.csdn.net/u013210620/article/details/46439929
