实现页面切换(动画效果实现,不用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或者透明 ...
随机推荐
- js跨域post请求
function funPostBack(srvMethod){ /* var contentNR=$(document.getElementById("reportFrame") ...
- 贪吃蛇—C—基于easyx图形库(下):从画图程序到贪吃蛇【自带穿墙术】
上节我们用方向控制函数写了个小画图程序,它虽然简单好玩,但我们不应该止步于此.革命尚未成功,同志还需努力. 开始撸代码之前,我们先理清一下思路.和前面画图程序不同,贪吃蛇可以有很多节,可以用一个足够大 ...
- 位图 c++ 位图排序
什么是位图?来自http://www.cnblogs.com/dolphin0520/archive/2011/10/19/2217369.html 位图就是用一个bit来标记某个元素对应的值,键值就 ...
- linux常用命令(复制)
显示目录和文件的命令 Ls:用于查看所有文件夹的命令. Dir:用于显示指定文件夹和目录的命令 Tree: 以树状图列出目录内容 Du:显示目录或文件大小 修改目录,文件权限和属主及数组命令 ...
- Java中转发与重定向的区别
转发与重定向的区别 转发是服务器行为,重定向是客户端行为 1.转发在服务器端完成的:重定向是在客户端完成的2.转发的速度快:重定向速度慢3.转发的是同一次请求:重定向是两次不同请求4.转发不会 ...
- LAMP第四部分 mysql相关
1. 忘记root密码http://www.lishiming.net/thread-252-1-1.html 进入mysqlwhich mysql/usr/local/mysql/bin/mysql ...
- Spring MVC控制器方法参数类型
HttpServletRequest Spring会自动将 Servlet API 作为参数传过来 HttpServletResponse InputStream 相当于request.getInpu ...
- html获取当前地址的参数
//jsd代码 function UrlSearch(){ var name,value; var str1 = ""; var str=loc ...
- ZigBee学习三 UART通信
ZigBee学习三 UART通信 在使用串口时,只需掌握ZigBee协议栈提供的串口操作相关的三个函数即可. uint8 HalUARTOpen(uint8 port,halUARTCfg_t *co ...
- [SDOI2010] 所驼门王的宝藏 [建图+tarjan缩点+DAG dp]
题面传送门: 传送门 思路: 看完题建模,容易得出是求单向图最长路径的问题 那么把这张图缩强联通分量,再在DAG上面DP即可 然而 这道题的建图实际上才是真正的考点 如果对于每一个点都直接连边到它所有 ...