源码地址 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