ViewPager 手滑切换界面 跟 动画相结合

                             ViewPager 相当于 一个容器 里面有很多 碎片 或者  视图 ， 今天 给大家带来的是android.support.v4.view.ViewPager 这个，好吧 我承认我这个人不适合写文章，根本没什么词量，哈哈 这个可能是因为我写的东西太少了 没什么积累。好了，言归正传效果图先奉.

步骤

1  布局

<?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:orientation="vertical" >

// 这个是标题栏的布局
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >


        <TextView
            android:id="@+id/text1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="碎片1" />


        <TextView
            android:id="@+id/text2"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="碎片2" />


        <TextView
            android:id="@+id/text3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center_horizontal"
            android:text="碎片3" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal" >


        <TextView
            android:id="@+id/line"
            android:layout_width="wrap_content"
            android:layout_height="2dp"
            android:background="#EE4000" />
    </LinearLayout>

//这个是ViewPager 布局
    <android.support.v4.view.ViewPager
        android:id="@+id/viewpagers"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />


</LinearLayout>

2  设置适配器

package viewpager;


import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;


public class AdaterFragment extends FragmentPagerAdapter {
private Fragment[] fragments = {new Fragment1(),new Fragment2(),new Fragment3()};//这里是3个碎片


public AdaterFragment(FragmentManager fm) {
super(fm);
// TODO Auto-generated constructor stub
}


@Override
public Fragment getItem(int arg0) {
// TODO Auto-generated method stub
return fragments[arg0];//ViewPager里面的列表项
}


@Override
public int getCount() {
// TODO Auto-generated method stub
return fragments.length;//一共多少个碎片
}


}

3  创建FragmentActivity

package viewpager;


import android.graphics.Color;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.DisplayMetrics;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.animation.AccelerateDecelerateInterpolator;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;
import android.widget.TextView;


import com.xcl.viewpager.R;


public class ViewPagerActivity extends FragmentActivity {
private TextView[] texts = new TextView[3];
private AdaterFragment adater;
private ViewPager viewpager;
private TextView line;
private int linewidth;
private int width = 0;


@Override
protected void onCreate(Bundle savedInstanceState) {
// TODO Auto-generated method stub
super.onCreate(savedInstanceState);
setContentView(R.layout.viewpager_main);
ID();
Adater();
LineWidth();
setViewpager();
ViewPagerOnclick onclick = new ViewPagerOnclick();
for (int i = 0; i < texts.length; i++) {
texts[i].setOnClickListener(onclick);
}


}


/**
* 找到ID
*/
public void ID() {
texts[0] = (TextView) findViewById(R.id.text1);
texts[1] = (TextView) findViewById(R.id.text2);
texts[2] = (TextView) findViewById(R.id.text3);
line = (TextView) findViewById(R.id.line);
viewpager = (ViewPager) findViewById(R.id.viewpagers);
}


/**
* 设置适配器
*/
public void Adater() {
adater = new AdaterFragment(getSupportFragmentManager());
viewpager.setAdapter(adater);
}


/**
* 获得手机屏幕宽度
* 
* @return
*/
public int getWidths() {
DisplayMetrics dis = new DisplayMetrics();
getWindow().getWindowManager().getDefaultDisplay().getMetrics(dis);
return dis.widthPixels;
}


/**
* 线条的长度
*/
public int LineWidth() {
LinearLayout.LayoutParams linewidth = (LayoutParams) line
.getLayoutParams();
linewidth.width = getWidths() / texts.length;
line.setLayoutParams(linewidth);
Log.i("线条长度", line.getWidth() + "");
return line.getWidth();
}


/**
* 手滑动事件
*/
public void setViewpager() {
viewpager.setOnPageChangeListener(new OnPageChangeListener() {


@Override
public void onPageSelected(int arg0) {
// 手指抬起来调用
textColor(arg0);
Animation(arg0);
}


@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
// 屏幕一直运行的时候调用


}


@Override
public void onPageScrollStateChanged(int arg0) {
// 一开始创建的时候就一直调用


}
});
}


/**
* 哪个界面被选中，那个字体就改变，相对应
* 
* @param arg0
*/
public void textColor(int arg0) {
for (int i = 0; i < texts.length; i++) {
texts[i].setTextColor(Color.BLACK);
}
texts[arg0].setTextColor(Color.parseColor("#EE4000"));
}


/**
* 根据屏幕滑动而产生的位移动画
* 
* @param arg0
*/
public void Animation(int arg0) {
linewidth = arg0 * LineWidth();
TranslateAnimation tran = new TranslateAnimation(width, linewidth, 0, 0);
tran.setDuration(200);
tran.setFillAfter(true);
tran.setInterpolator(new AccelerateDecelerateInterpolator());
line.setAnimation(tran);
width = linewidth;
}


/**
* 
* 单击事件
* 
*/
class ViewPagerOnclick implements OnClickListener {


@Override
public void onClick(View arg0) {
// TODO Auto-generated method stub
switch (arg0.getId()) {
case R.id.text1:
viewpager.setCurrentItem(0);
break;
case R.id.text2:
viewpager.setCurrentItem(1);
break;
case R.id.text3:
viewpager.setCurrentItem(2);
break;
default:
break;
}
}


}
}

一个小型的界面就完成了，项目中或许会用到，当然手机里面的APP 引导页 也是 用ViewPager 来写的