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. 第三章·MySQL版本区别及管理

    一.MySQL5.6与MySQL5.7安装的区别 1.cmake的时候加入了bostorg 2.初始化时 使用mysqld --initialize 替代mysql_install_db,其它参数没有 ...

  2. DataTable To List<T> DataTable Linq学习笔记

    LINQ 查询适用于实现的数据源 IEnumerable<T>接口或System.Query.IQueryable接口. DataTable类默认是没有实现以上接口的. 所以要在DataT ...

  3. TF启程

    我第一次开始接触到TensorFlow大概是去年五月份,大三下,如果一年多已过,我却还在写启程..这进度,实在汗颜.. 一个完整的tensorflow程序可以分为以下几部分: Inputs and P ...

  4. BZOJ 1001 平面图转对偶图

    原图的面转成点,原图的边依旧边,只是连接的是两个面. 对偶图的点数=原图的面数 对偶图的边数=原图的边数(如果原边只属于一个面,则它为环边) #include<bits/stdc++.h> ...

  5. 不能使用 float 和 double 来表示金额等精确的值

    不能使用 float 和 double 来表示金额等精确的值 关于面试,金额用什么数据类型? 不是 doube,更不是 float ,而是用 BigDecimal.对于金融项目,对于金额,误差是不能容 ...

  6. 实操 | 内存占用减少高达90%,还不用升级硬件?没错,这篇文章教你妙用Pandas轻松处理大规模数据

    注:Pandas(Python Data Analysis Library) 是基于 NumPy 的一种工具,该工具是为了解决数据分析任务而创建的.此外,Pandas 纳入了大量库和一些标准的数据模型 ...

  7. Java-收邮件

    import java.util.Properties; import javax.mail.Folder; import javax.mail.Message; import javax.mail. ...

  8. Acwing-169-数独2(搜索, 剪枝)

    链接: https://www.acwing.com/problem/content/171/ 题意: 请你将一个16x16的数独填写完整,使得每行.每列.每个4x4十六宫格内字母A~P均恰好出现一次 ...

  9. react-缓存

    目录结构: 用到缓存的地方: 缓存的方法 清楚缓存

  10. laravel 之 cookie 使用

    <?php namespace App\Http\Controllers\Admin; use Illuminate\Http\Request; use Illuminate\Http\Resp ...