实现页面切换(动画效果实现,不用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或者透明 ...
随机推荐
- Jmeter-深入理解cookie,session,token
1.很久很久以前,Web 基本上就是文档的浏览而已, 既然是浏览,作为服务器, 不需要记录谁在某一段时间里都浏览了什么文档,每次请求都是一个新的HTTP协议, 就是请求加响应, 尤其是我不用记住是谁 ...
- TopK-微博今日热门话题
大纲 TopK on single node TopK on multiple nodes Realtime topK with low QPS Realtime topK with high QPS ...
- 配置kubectl客户端通过token方式访问kube-apiserver
使用的变量 本文档用到的变量定义如下: $ export MASTER_IP=XX.XX.XX.XX # 替换为 kubernetes master VIP $ export KUBE_APISERV ...
- [oldboy-django][2深入django]学生管理(Form)--查看(分页)
1 需求: 查看所有学生的信息,(分页功能) 2 前端:bootstrap美化前端 <!DOCTYPE html> <html lang="en"> < ...
- PHP算法面试题目
1.使用PHP描述冒泡排序和快速排序算法,对象可以是一个数组 //冒泡排序(数组排序) functionbubble_sort($array){ $count = count($array ...
- Python爬虫教程-21-xpath
本篇简单介绍 xpath 在python爬虫方面的使用,想要具体学习 xpath 可以到 w3school 查看 xpath 文档 Python爬虫教程-21-xpath 什么是 XPath? XPa ...
- shell for 循环实践
for循环语法结构如下 [root@backup tmp]# .sh #!/bin/bash ` do echo $i done [root@backup tmp]# .sh 3 批量修改文件名 [r ...
- python常用内建函数
1.input 读取控制台的输入,输出的是字符串 2.enumerate 遍历数组的时候,能够将index 和item同时返回,返回的每一项包含index,item 3.isinstance(obje ...
- javaScript 笔记(4) -- 弹窗 & 计时事件 & cookie
弹窗 可以在 JavaScript 中创建三种消息框:警告框.确认框.提示框. 警告框:经常用于确保用户可以得到某些信息. 当警告框出现后,用户需要点击确定按钮才能继续进行操作. 语法: window ...
- 微信小程序底部弹框动画
在写小程序的时候,一般会碰到底部弹出动画,就像下面这样的效果 直接进入正题 https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.ht ...