最近项目有个功能需要用到滑动切换,并且导航条也要有动画,所以现在网上找了一些素材写了一个demo,素材不搭,感觉很影响整体效果,所以请无视素材。先看效果吧
布局内容
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity" >
<!-- 导航按钮 -->
<LinearLayout
android:id="@+id/ll_tabs"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:paddingTop="10dp"
android:paddingBottom="10dp"
android:orientation="horizontal" >
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="@+id/btn_one"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/desk1" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="@+id/btn_two"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/desk2" />
</LinearLayout>
<LinearLayout
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:orientation="horizontal" >
<Button
android:id="@+id/btn_three"
android:layout_width="80dp"
android:layout_height="80dp"
android:background="@drawable/desk3" />
</LinearLayout>
</LinearLayout>
<!-- 覆盖在导航按钮上的图片,表示选中项 -->
<ImageView
android:id="@+id/imgv_overtab"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_alignParentTop="true"
android:background="@drawable/circle1" />
<!-- ViewPager 主要是加载内容的 -->
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/ll_tabs" />
</RelativeLayout>
ViewPager+Fragmeng的实现
初始化控件
public class MainActivity extends FragmentActivity implements OnClickListener {
private Button buttonOne;
private Button buttonTwo;
private Button buttonThree;
private ViewPager mViewPager;
private List<Fragment> fragmentList;
private OneFragment oneFragment;
private TwoFragment twoFragment;
private ThreeFragment threeFragment;
private ImageView imageviewOvertab;
private int screenWidth;
private int currenttab = -1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
buttonOne = (Button) findViewById(R.id.btn_one);
buttonTwo = (Button) findViewById(R.id.btn_two);
buttonThree = (Button) findViewById(R.id.btn_three);
buttonOne.setOnClickListener(this);
buttonTwo.setOnClickListener(this);
buttonThree.setOnClickListener(this);
mViewPager = (ViewPager) findViewById(R.id.viewpager);
fragmentList = new ArrayList<Fragment>();
oneFragment = new OneFragment();
twoFragment = new TwoFragment();
threeFragment = new ThreeFragment();
fragmentList.add(oneFragment);
fragmentList.add(twoFragment);
fragmentList.add(threeFragment);
screenWidth = getResources().getDisplayMetrics().widthPixels;
buttonTwo.measure(0, 0);
imageviewOvertab = (ImageView) findViewById(R.id.imgv_overtab);
mViewPager.setAdapter(new MyFrageStatePagerAdapter(
getSupportFragmentManager()));
}
}
创建适配器
/**
* 定义自己的ViewPager适配器。 也可以使用FragmentPagerAdapter。关于这两者之间的区别,可以自己去搜一下。
*/
class MyFrageStatePagerAdapter extends FragmentStatePagerAdapter {
public MyFrageStatePagerAdapter(FragmentManager fm) {
super(fm);
}
@Override
public Fragment getItem(int position) {
return fragmentList.get(position);
}
@Override
public int getCount() {
return fragmentList.size();
}
/**
* 每次更新完成ViewPager的内容后,调用该接口,此处复写主要是为了让导航按钮上层的覆盖层能够动态的移动
*/
@Override
public void finishUpdate(ViewGroup container) {
super.finishUpdate(container);// 这句话要放在最前面,否则会报错
// 获取当前的视图是位于ViewGroup的第几个位置,用来更新对应的覆盖层所在的位置
int currentItem = mViewPager.getCurrentItem();
if (currentItem == currenttab) {
return;
}
imageMove(mViewPager.getCurrentItem());
currenttab = mViewPager.getCurrentItem();
}
}
移动覆盖层图片并初始化动画
/**
* 移动覆盖层图片 初始化动画
*
* @param moveToTab
* 目标Tab,也就是要移动到的导航选项按钮的位置 第一个导航按钮对应0,第二个对应1,以此类推
*/
private void imageMove(int moveToTab) {
switch (moveToTab) {
case 0:
initAnimator(buttonOne);
break;
case 1:
initAnimator(buttonTwo);
break;
case 2:
initAnimator(buttonThree);
break;
default:
break;
}
anim.start();
int startPosition = 0;
int movetoPosition = 0;
startPosition = (currenttab * (screenWidth / 3)) + (((screenWidth / 3) - dip2px(this,80)) / 2) - dip2px(this,10);
movetoPosition = moveToTab * (screenWidth / 3) + (((screenWidth / 3) - dip2px(this,80)) / 2) - dip2px(this,10);
// 平移动画
TranslateAnimation translateAnimation = new TranslateAnimation(
startPosition, movetoPosition, 0, 0);
translateAnimation.setFillAfter(true);
translateAnimation.setDuration(200);
imageviewOvertab.startAnimation(translateAnimation);
}
public static int dip2px(Context context,float dpValue) {
final float scale = context.getResources().getDisplayMetrics().density;
return (int) (dpValue * scale + 0.5f);
}
创建按钮监听
@Override
public void onClick(View v) {
switch (v.getId()) {
case R.id.btn_one:
changeView(0);
break;
case R.id.btn_two:
changeView(1);
break;
case R.id.btn_three:
changeView(2);
break;
default:
break;
}
}
// 手动设置ViewPager要显示的视图
private void changeView(int desTab) {
mViewPager.setCurrentItem(desTab, true);
}
动画定义
private AnimatorSet anim;
private void initAnimator(View view) {
ObjectAnimator anim1 = ObjectAnimator.ofFloat(view, "scaleX", 1f, 0.3f);
ObjectAnimator anim3 = ObjectAnimator.ofFloat(view, "scaleY", 1f, 0.3f);
ObjectAnimator anim2 = ObjectAnimator.ofFloat(view, "scaleX", 0.3f, 1f);
ObjectAnimator anim4 = ObjectAnimator.ofFloat(view, "scaleY", 0.3f, 1f);
ObjectAnimator anim11 = ObjectAnimator
.ofFloat(view, "scaleX", 1f, 0.8f);
ObjectAnimator anim33 = ObjectAnimator
.ofFloat(view, "scaleY", 1f, 0.8f);
ObjectAnimator anim22 = ObjectAnimator
.ofFloat(view, "scaleX", 0.8f, 1f);
ObjectAnimator anim44 = ObjectAnimator
.ofFloat(view, "scaleY", 0.8f, 1f);
anim = new AnimatorSet();
anim.play(anim1).with(anim3);
anim.play(anim2).with(anim4);
anim.play(anim2).after(anim1);
anim.play(anim11).with(anim33);
anim.play(anim22).with(anim44);
anim.play(anim22).after(anim11);
anim.play(anim11).after(anim2);
anim.setDuration(100);
}
Fragment的创建
剩下的就是一些Fragment类的创建了,大家自行创建吧。在此贴出来demo中的例子,在OneFragment.java中
package com.maxi.updatatest.fragment;
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;
import com.maxi.updatatest.R;
public class OneFragment extends Fragment{
private View carView;
@Override
public View onCreateView(LayoutInflater inflater,
@Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
// TODO Auto-generated method stub
carView = inflater.inflate(R.layout.fragment_one, container, false);
return carView;
}
}
fragment_one.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/holo_blue_bright"
android:orientation="vertical" >
</LinearLayout>
大家可以在Fragment中放入大家想要的一些界面。
由于代码很简单,每个功能块也都有标注,在此就不详述了。希望能对初学者有所帮助。
下载地址:demo