Viewpager+标签切换动画实例

最近开始整理以前做过的项目，把其中用到的一些知识点做了一个整理，会写成一个系列，最后汇成一般企业开发中所需的各种技术汇总。对自己来说可以在汇总过程中更好的理解这些知识点，融会贯通，还可以作为记录以后使用的时候方便查看，也希望公布到博客上能帮到需要这些东西的童鞋。

这里是一个Viewpager+页签切换动画的简单整合，Viewpager其实是有顶部的切换标签效果的，但易用性不怎么好，我们还是自己来定制吧！

先看一下布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<include layout="@layout/title_view"></include>
<View
android:layout_width="match_parent"
android:layout_height="@dimen/DIMEN_1PX"
android:background="#33000000"
/>
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/DIMEN_30PX"
android:paddingTop="@dimen/DIMEN_30PX"
>
<TextView
android:gravity="center"
android:id="@+id/tv_tag1"
android:layout_width="wrap_content"
android:layout_weight="1"
android:text="标签1"
android:layout_height="wrap_content" />
<TextView
android:gravity="center"
android:id="@+id/tv_tag2"
android:text="标签2"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content" />
<TextView
android:gravity="center"
android:id="@+id/tv_tag3"
android:text="标签3"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content" />
<TextView
android:gravity="center"
android:id="@+id/tv_tag4"
android:text="标签4"
android:layout_width="wrap_content"
android:layout_weight="1"
android:layout_height="wrap_content" />
</LinearLayout>

<View
android:layout_width="match_parent"
android:layout_height="@dimen/DIMEN_8PX"
android:background="#33000000"
android:id="@+id/view_cursor"
/>
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/viewpager_main"
></android.support.v4.view.ViewPager>
</LinearLayout>

这里include了一个title，自己的项目中不怎么使用系统的actionbar，一般都是自定义一个顶部视图title_view来实现。这里是title_view的代码：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent" android:layout_height="wrap_content">

<LinearLayout
android:id="@+id/ll_title_left"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="@dimen/DIMEN_20PX"
>

<ImageView
android:id="@+id/iv_title_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/tv_title_left"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="left"
android:gravity="center"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_title_center"
android:layout_centerInParent="true"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
>

<ImageView
android:id="@+id/iv_title_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/tv_title_center"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="center"
android:gravity="center"
android:textSize="@dimen/DIMEN_36PX"
android:textStyle="bold"
/>
</LinearLayout>
<LinearLayout
android:id="@+id/ll_title_right"
android:orientation="horizontal"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginRight="@dimen/DIMEN_20PX"
android:layout_alignParentRight="true"
>

<ImageView
android:id="@+id/iv_title_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
<TextView
android:id="@+id/tv_title_right"
android:layout_width="wrap_content"
android:layout_height="50dp"
android:text="right"
android:gravity="center"
/>
</LinearLayout>
</RelativeLayout>

主要的逻辑在MainActivity中实现，写之前理清思路：

1.初始化Viewpager要显示的视图列表

2.初始化用到的控件

3.计算屏幕尺寸计算得出指示光标宽度

4.初始化Viewpager以及adapter、滑动监听器

5.在滑动监听器中实现光标切换动画

6.将Viewpager的切换绑定到顶部标签的点击事件上

代码如下：

public class MainActivity extends Activity {

private int screenWidth;
private int screenHeight;
private View view_cursor;
private List<View> views;
private ViewPager viewpager_main;
private int origIndex = 0;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initData();
initView();
}

private void initView() {
int cursorWidth = screenWidth / 4;
view_cursor = findViewById(R.id.view_cursor);
LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) view_cursor.getLayoutParams();
params.width = cursorWidth;
view_cursor.setLayoutParams(params);

viewpager_main = (ViewPager) findViewById(R.id.viewpager_main);
viewpager_main.setAdapter(new MyViewpagerAdapter(views));
viewpager_main.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
int offset = screenWidth / 4;
translateAnimation = new TranslateAnimation(origIndex * offset, position * offset, 0, 0);
translateAnimation.setFillAfter(true);
translateAnimation.setInterpolator(new AccelerateInterpolator());
translateAnimation.setDuration(300);
view_cursor.startAnimation(translateAnimation);
origIndex = position;
}

@Override
public void onPageScrollStateChanged(int state) {

}
});

findViewById(R.id.tv_tag1).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewpager_main.setCurrentItem(0);
}
});
findViewById(R.id.tv_tag2).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewpager_main.setCurrentItem(1);
}
});
findViewById(R.id.tv_tag3).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewpager_main.setCurrentItem(2);
}
});
findViewById(R.id.tv_tag4).setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
viewpager_main.setCurrentItem(3);
}
});

((TextView)findViewById(R.id.tv_title_left)).setText("Back");
((TextView)findViewById(R.id.tv_title_right)).setText("Menu");
((TextView)findViewById(R.id.tv_title_center)).setText("Title");

}

private void initData() {
views = new ArrayList<View>();
View view1 = View.inflate(this, R.layout.view1,null);
View view2 = View.inflate(this,R.layout.view2,null);
View view3 = View.inflate(this,R.layout.view3,null);
View view4 = View.inflate(this,R.layout.view4,null);
views.add(view1);
views.add(view2);
views.add(view3);
views.add(view4);
Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics displayMetrics = new DisplayMetrics();
display.getMetrics(displayMetrics);
screenWidth = displayMetrics.widthPixels;
screenHeight = displayMetrics.heightPixels;
}

TranslateAnimation translateAnimation;
class MyViewpagerAdapter extends PagerAdapter{
private List<View> views;
public MyViewpagerAdapter(List<View> views) {
this.views = views;
}

@Override
public int getCount() {
return views.size();
}

@Override
public boolean isViewFromObject(View arg0, Object arg1) {
return arg0 == arg1;
}

@Override
public void destroyItem(View container, int position, Object object) {
((ViewPager) container).removeView(views.get(position));
}

@Override
public Object instantiateItem(View container, int position) {
((ViewPager) container).addView(views.get(position));
return views.get(position);
}

public View getItemAtPosition(int position) {
return views.get(position);
}
}
}

光标的动画效果是一个位移动画，和Viewpager的切换关联起来即可，整体来说还是很简单的，这样的页面结构还是可以匹配很多APP的页面需求的，下面是这个简单Demo的源码：
ViewPager切换动画

demo是Android Studio写的，如果您是Eclipse，代码不多粘贴一下也很省事。这个小功能算是一个常用的布局，ViewPager+Fragment+顶部切换动画，如果对您有所帮助，请点个赞吧～！