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框架的搭建实现的更多相关文章

  1. 【Android 界面效果27】利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  2. Android 利用ViewPager、Fragment、PagerTabStrip实现多页面滑动效果

    本文主要介绍如何利用ViewPager.Fragment.PagerTabStrip实现多页面滑动效果.即google play首页.新浪微博消息(at.评论.私信.广播)页面的效果.ViewPage ...

  3. iOS之UI--主流框架的搭建--仿制QQ的UI框架

    使用XCode搭建多个控制器界面,一般在实际开发中建议超过四个控制器界面使用纯代码. 下面的实例其实已经超过了四个,总结详细步骤的目的,主要是更熟悉XCode的StoryBoard使用细节. 先直接上 ...

  4. 【干货】利用MVC5+EF6搭建博客系统(四)(上)前后台页面布局页面实现,介绍使用的UI框架以及JS组件

    一.博客系统进度回顾以及页面设计 1.1页面设计说明 紧接前面基础基本完成了框架搭建,现在开始设计页面,前台页面设计我是模仿我博客园的风格来设计的,后台是常规的左右布局风格. 1.2前台页面风格 主页 ...

  5. ViewPager之Fragment页面切换

    一.概述 ViewPager是android-support-v4中提供的类,它是一个容器类,常用于页面之间的切换. 继上篇文章<ViewPager之引导页>之后,本文主要介绍ViewPa ...

  6. 前端UI框架和JS类库

    一.前端框架库: 1.Zepto.js 地址:http://www.css88.com/doc/zeptojs/ 描述:Zepto是一个轻量级的针对现代高级浏览器的JavaScript库, 它与jqu ...

  7. Unity3D 搭建优雅的UI框架

    为什么要使用UI框架?直接使用NGUI或UGUI一拖一拉直接搭载出界面不就行了? 我相信很多小白,包括我在刚学习Unity3D UI的时候都这样想过. 我的第一款款Unity2D游戏<山地赛车& ...

  8. Android酷炫实用的开源框架(UI框架)

    Android酷炫实用的开源框架(UI框架) 前言 忙碌的工作终于可以停息一段时间了,最近突然有一个想法,就是自己写一个app,所以找了一些合适开源控件,这样更加省时,再此分享给大家,希望能对大家有帮 ...

  9. Android酷炫实用的开源框架——UI框架(转)

    转载别人整理好的文章,列出了很多炫酷的UI开源设计 原文地址:http://www.androidchina.net/1992.html 1.Side-Menu.Android分类侧滑菜单,Yalan ...

随机推荐

  1. Linux awk命令 --三剑客老大

    Linux awk命令 --三剑客老大 基本用法: awk  [参数]  ['找谁{干啥}']  文件 参数: -F 分隔符 -v 创建或修改awk变量 OFS 输出分割符 awk显示每一列的时候分隔 ...

  2. shell常用分隔符及管道的用法

    1.命令1;命令2;命令3;.... 代码顺序执行 2.&&连接两条命令:命令1&&命令2&&命令3... 短路执行 3.||连接两条命令:命令1||命 ...

  3. Linux使用storcli工具查看服务器硬盘和raid组信息

    1.简介 MegaCli 是LSI公司官方提供的SCSI卡管理工具,由于LSI被收购变成了现在的Broadcom,所以现在想下载MegaCli, 需要去Broadcom官网查找Legacy产品支持,搜 ...

  4. Linux下python3的安装以及redis的使用

    python3的安装 上传Python-3.5.2.tar.xz软件到 /server/tools 中 解压 :tar xf   Python-3.5.2.tar.xz 编译安装cd Python-3 ...

  5. IE8"HTML Parsing Error:Unable to modify the parent container element before the child element is closed"错误

    一.IE8报下面错误,解决办法:网页错误详细信息消息: HTML Parsing Error: Unable to modify the parent container element before ...

  6. P3806 离线多次询问 树上距离为K的点对是否存在 点分治

    询问树上距离为k的点对是否存在 直接n^2暴力处理点对 桶排记录 可以过 #include<cstdio> #include<cstring> #include<algo ...

  7. maven的配置和eclipse maven插件安装

    1.下载maven:http://maven.apache.org/download.cgi 2. 配置环境变量: 3. 修改maven文件夹下bin/conf/settings.xml:maven仓 ...

  8. LeetCode 01 两数之和

    链接:https://leetcode-cn.com/problems/two-sum 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们 ...

  9. pycharm中报错:ImportError: No module named 'skimage'

    pycharm中直接setting是没办法成功的,会提示is requied C++ bool.....先进入那个页面安装好需要的tools,这个安装比较慢:http://landinghub.vis ...

  10. [Git] How to revert one file changes from one commit

    Many times we might changed one file which we don't intent to do... but it was too late, until we fo ...