利用Viewpager和Fragment实现UI框架的搭建实现
package com.loaderman.uiframedemo; import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.view.Display;
import android.view.View;
import android.view.WindowManager;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.TextView; public class MainActivity extends AppCompatActivity { private ViewPager mTabPager;
private ImageView mTabImg;// 动画图片
private TextView mTab1, mTab2, mTab3, mTab4;
private int zero = 0;// 动画图片偏移量
private int currIndex = 0;// 当前页卡编号
private int one;//单个水平动画位移
private int two;
private int three; @Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
getWindow().setSoftInputMode(WindowManager.LayoutParams.SOFT_INPUT_STATE_ALWAYS_HIDDEN);
setContentView(R.layout.activity_main);
mTabPager = (ViewPager) findViewById(R.id.tabpager);
mTabPager.addOnPageChangeListener(new MyOnPageChangeListener());
mTab1 = (TextView) findViewById(R.id.tv_weixin);
mTab2 = (TextView) findViewById(R.id.tv_address);
mTab3 = (TextView) findViewById(R.id.tv_friends);
mTab4 = (TextView) findViewById(R.id.tv_settings);
mTabImg = (ImageView) findViewById(R.id.img_tab_now);
mTab1.setOnClickListener(new MyOnClickListener(0));
mTab2.setOnClickListener(new MyOnClickListener(1));
mTab3.setOnClickListener(new MyOnClickListener(2));
mTab4.setOnClickListener(new MyOnClickListener(3));
Display currDisplay = getWindowManager().getDefaultDisplay();//获取屏幕当前分辨率
int displayWidth = currDisplay.getWidth();
// int displayHeight = currDisplay.getHeight();
one = displayWidth / 4; //设置水平动画平移大小
two = one * 2;
three = one * 3;
mTabPager.setAdapter(new MyAdapter(getSupportFragmentManager()));
}
/**
* 1、ViewPager展示的是一个又一个普通的View对象,使用PagerAdapter
* 2、ViewPager展示的是一个又一个Fragment所包装的View对象,使用FragmentPagerAdapter
*/
class MyAdapter extends FragmentPagerAdapter {
private String[] mTabNames;
public MyAdapter(FragmentManager fm) {
super(fm);
mTabNames = new String[]{"weixin", "adreess", "friend", "settring",};
}
@Override
public Fragment getItem(int position) {
return FragmentFactory.getFragment(position);
}
@Override
public int getCount() {
return mTabNames.length;
} }
/**
* 头标点击监听
*/
public class MyOnClickListener implements View.OnClickListener {
private int index = 0; public MyOnClickListener(int i) {
index = i;
}
@Override
public void onClick(View v) {
mTabPager.setCurrentItem(index);
}
};
/* 页卡切换监听
*/
public class MyOnPageChangeListener implements ViewPager.OnPageChangeListener {
@Override
public void onPageSelected(int arg0) {
Animation animation = null;
switch (arg0) {
case 0:
if (currIndex == 1) {
animation = new TranslateAnimation(one, 0, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, 0, 0, 0);
} else if (currIndex == 3) {
animation = new TranslateAnimation(three, 0, 0, 0);
}
break;
case 1:
if (currIndex == 0) {
animation = new TranslateAnimation(zero, one, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, one, 0, 0);
} else if (currIndex == 3) {
animation = new TranslateAnimation(three, one, 0, 0);
}
break;
case 2:
if (currIndex == 0) {
animation = new TranslateAnimation(zero, two, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, two, 0, 0);
} else if (currIndex == 3) {
animation = new TranslateAnimation(three, two, 0, 0);
}
break;
case 3:
if (currIndex == 0) {
animation = new TranslateAnimation(zero, three, 0, 0);
} else if (currIndex == 1) {
animation = new TranslateAnimation(one, three, 0, 0);
} else if (currIndex == 2) {
animation = new TranslateAnimation(two, three, 0, 0);
}
break;
}
currIndex = arg0;
animation.setFillAfter(true);// True:图片停在动画结束位置
animation.setDuration(150);
mTabImg.startAnimation(animation);
} @Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
} @Override
public void onPageScrollStateChanged(int arg0) {
}
}
}
package com.loaderman.uiframedemo; import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup; public abstract class BaseFragment extends Fragment {
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
return initView();
}
public abstract View initView() ;
}
package com.loaderman.uiframedemo; import android.support.v4.app.Fragment;
import java.util.HashMap; public class FragmentFactory {
private static HashMap<Integer, Fragment> savedFragment = new HashMap<Integer, Fragment>();
public static Fragment getFragment(int position) {
Fragment fragment = savedFragment.get(position);
if (fragment == null) {
switch (position) {
case 0:
fragment = new WenxinFragment();
break;
case 1:
fragment = new AddressFragment();
break;
case 2:
fragment = new FriendFragment();
break;
case 3:
fragment = new SettingFragment();
break;
}
savedFragment.put(position, fragment);
}
return fragment;
}
}
WenxinFragment,AddressFeament,FriendFragment,SettingFragment的实现类似如下:
package com.loaderman.uiframedemo; import android.view.View;
import android.widget.TextView; public class SettingFragment extends BaseFragment {
@Override
public View initView() {
TextView tv = new TextView(getContext());
tv.setText("设置");
return tv;
}
}
效果图:

利用Viewpager和Fragment实现UI框架的搭建实现的更多相关文章
- 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
- Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果
本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...
- iOS之UI--主流框架的搭建--仿制QQ的UI框架
使用XCode搭建多个控制器界面,一般在实际开发中建议超过四个控制器界面使用纯代码. 下面的实例其实已经超过了四个,总结详细步骤的目的,主要是更熟悉XCode的StoryBoard使用细节. 先直接上 ...
- 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件
一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...
- ViewPager之Fragment页面切换
一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...
- 前端UI框架和JS类库
一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...
- Unity3D 搭建优雅的UI框架
为什么要使用UI框架?直接使用NGUI或UGUI一拖一拉直接搭载出界面不就行了? 我相信很多小白,包括我在刚学习Unity3D UI的时候都这样想过. 我的第一款款Unity2D游戏<山地赛车& ...
- Android酷炫实用的开源框架(UI框架)
Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...
- Android酷炫实用的开源框架——UI框架(转)
转载别人整理好的文章,列出了很多炫酷的UI开源设计 原文地址:http://www.androidchina.net/1992.html 1.Side-Menu.Android分类侧滑菜单,Yalan ...
随机推荐
- IPC之msg.c源码解读
// SPDX-License-Identifier: GPL-2.0 /* * linux/ipc/msg.c * Copyright (C) 1992 Krishna Balasubramania ...
- linux 重定向类型 超级块 i节点
超级块:定义文件系统的元数据(总大小.块大小.空闲.......):在格式化的时候确定 查看超级块信息:tune2fs -l 目录 i节点:定义文件的元数据(名称.大小.存放位置.权限.修改时间 ...
- angular打印功能实现方式
目前主流的前端打印方式有两种:一种是使用浏览器打印功能直接打印页面,另一种是调用本地控件实现.浏览器打印功能单一,不适用于复杂的业务表单,而打印控件可以设计打印模板,实现复杂表单的打印,十分适合复杂的 ...
- QTP(14)
练习1.Flight4a 要求: a.录制Flight4a登录+退出业务流程 b.使用自定义检查结合Exist属性验证登录是否成功 c.为用户名实现参数化 用户名 Jack 正确 Rose 正确 12 ...
- R树-javascript代码实现过程分析(插入操作)
R Tree 第一步,创建R树类. 构建一个RTree生成器.用以创建tree对象. 例子:var tree = new RTree(12) var RTree = function(width){ ...
- App支付宝登录授权
一.在支付宝开放平台申请App应用,并且配置后台信息 https://openhome.alipay.com/platform/appManage.htm#/apps 填写自己的申请信息 添加应用功能 ...
- [Algorithm] Convert a number from decimal to binary
125, how to conver to binary number? function DecimalToDinary (n) { let temp = n; let list = []; if ...
- Composer 安装方法
在windows下安装的方法 方法一:使用安装程序 这是将 Composer 安装在你机器上的最简单的方法. 下载并且运行 Composer-Setup.exe,它将安装最新版本的 Composer ...
- POI2012 BEZ-Minimalist Security | noi.ac #537 Graph
题目链接:戳我 首先注意这张图有可能不连通!! 然后我们考虑对于每一个联通块,首先任意确定一个点,给它设最终值为x,然后进行搜索.(因为对于一个联通块而言,我们知道一个点的最终值,那么整个联通块上面点 ...
- BeetleX之快速构建Web多房间聊天室
其实构建一个Web多房间聊天室也并不是什么困难的技术,借助于websocket就可以轻松实现多用户在线实时通讯交互:在这里主要介绍一下在BeetleX和BeetleXjs的支持下如何让这个功能实现的更 ...