实现页面切换(动画效果实现,不用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或者透明 ...
随机推荐
- MongoDB快速入门学习笔记7 MongoDB的用户管理操作
1.修改启动MongoDB时要求用户验证加参数 --auth 即可.现在我们把MongoDB服务删除,再重新添加服务 mongod --dbpath "D:\work\MongoDB\dat ...
- Python3.0-3.6的版本变化
Table of Contents Python3.0 简单的变化 语法的变化 新语法 改动的语法 剩下的变化 Python3.1 Python3.2 Python3.3 Python3.4 Pyth ...
- Python爬虫作业
题目如下: 请分析作业页面(https://edu.cnblogs.com/campus/hbu/Python2018Fall/homework/2420), 爬取已提交作业信息,并生成已提 ...
- POJ2796 Feel Good -- 单调队列
Feel Good Time Limit: 3000MS Memory Limit: 65536K Total Submissions: 14489 Accepted: 4015 Case T ...
- [HNOI2008][bzoj1009] GT考试 [KMP+矩阵快速幂]
题面 传送门 思路 首先,如果$n$和$m$没有那么大的话,有一个非常显然的dp做法: 设$dp[i][j]$表示长度为i的字符串,最后j个可以匹配模板串前j位的情况数 那么显然,答案就是$\sum_ ...
- 3984: 玩具(toy)
3984: 玩具(toy) 题目描述 这个故事发生在很久以前,在 IcePrincess_1968 和 IcePrince_1968 都还在上幼儿园的时候. IcePrince_1968 最近迷上了一 ...
- 【12】vue-router 之路由重定向
看之前的项目,突然发现一个不算bug的bug,之前也是一直没有想到,现在发现之后越来越觉得有必要改掉, 项目用的是vue做的,自然切换用的就是路由,一级路由包括:首页.记录和个人中心,二级路由是在记录 ...
- Javascript的SEO优化技巧
原文发布时间为:2010-10-22 -- 来源于本人的百度文章 [由搬家工具导入] 1.外部崁入javascript在撰写一些比较复杂的网页特效,如下拉式选单等,会产生大量的javascript码, ...
- hdu 3549 Flow Problem 最大流 Dinic
题目链接 题意 裸的最大流. 学习参考 http://www.cnblogs.com/SYCstudio/p/7260613.html Code #include <bits/stdc++.h& ...
- vmware tools安装过程
每次通过vmware安装Ubuntu的时候,总是会多多少少出点问题.好容易披荆斩棘把镜像安好了,然而屏幕却只有小小一个,不能显示大屏,我就知道肯定是缺少了vmware tools.于是点击左上方菜单中 ...