天天看点

Tab页面手势滑动切换以及动画效果

Tab页面手势滑动切换以及动画效果
Tab页面手势滑动切换以及动画效果
Tab页面手势滑动切换以及动画效果

3张页卡之间的切换。带动画效果。

工程结构。

Tab页面手势滑动切换以及动画效果

主要应用到android-support-v4.jar这个jar包。

布局文件。

1、main.xml中的代码

[html]

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    xmlns:umadsdk="http://schemas.android.com/apk/res/com.LoveBus" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" 

    android:orientation="vertical" > 

    <LinearLayout 

        android:id="@+id/linearLayout1" 

        android:layout_width="fill_parent" 

        android:layout_height="100.0dip" 

        android:background="#FFFFFF" > 

        <TextView 

            android:id="@+id/text1" 

            android:layout_width="fill_parent" 

            android:layout_height="fill_parent" 

            android:layout_weight="1.0" 

            android:gravity="center" 

            android:text="页卡1" 

            android:textColor="#000000" 

            android:textSize="22.0dip" /> 

        <TextView 

            android:id="@+id/text2" 

            android:layout_width="fill_parent" 

            android:layout_height="fill_parent" 

            android:layout_weight="1.0" 

            android:gravity="center" 

            android:text="页卡2" 

            android:textColor="#000000" 

            android:textSize="22.0dip" /> 

        <TextView 

            android:id="@+id/text3" 

            android:layout_width="fill_parent" 

            android:layout_height="fill_parent" 

            android:layout_weight="1.0" 

            android:gravity="center" 

            android:text="页卡3" 

            android:textColor="#000000" 

            android:textSize="22.0dip" /> 

    </LinearLayout> 

    <ImageView 

        android:id="@+id/cursor" 

        android:layout_width="fill_parent" 

        android:layout_height="wrap_content" 

        android:scaleType="matrix" 

        android:src="@drawable/a" /> 

    <android.support.v4.view.ViewPager 

        android:id="@+id/vPager" 

        android:layout_width="wrap_content" 

        android:layout_height="wrap_content" 

        android:layout_gravity="center" 

        android:layout_weight="1.0" 

        android:background="#000000" 

        android:flipInterval="30" 

        android:persistentDrawingCache="animation" /> 

</LinearLayout> 

2、lay1.xml

[html] 

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" 

    android:background="#158684" 

    android:orientation="vertical" > 

</LinearLayout> 

3、lay2.xml

[html]

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" 

    android:background="#FF8684" 

    android:orientation="vertical" > 

</LinearLayout> 

4、lay3.xml

[html] 

<?xml version="1.0" encoding="utf-8"?> 

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 

    android:layout_width="fill_parent" 

    android:layout_height="fill_parent" 

    android:background="#1586FF" 

    android:orientation="vertical" > 

</LinearLayout> 

主要代码。

[java] 

public class MainActivity extends Activity { 

    // ViewPager是google SDk中自带的一个附加包的一个类,可以用来实现屏幕间的切换。 

    // android-support-v4.jar 

    private ViewPager mPager;// 页卡内容 

    private List<View> listViews; // Tab页面列表 

    private ImageView cursor;// 动画图片 

    private TextView t1, t2, t3;// 页卡头标 

    private int offset = 0;// 动画图片偏移量 

    private int currIndex = 0;// 当前页卡编号 

    private int bmpW;// 动画图片宽度 

    @Override 

    public void onCreate(Bundle savedInstanceState) { 

        super.onCreate(savedInstanceState); 

        setContentView(R.layout.main); 

        InitImageView(); 

        InitTextView(); 

        InitViewPager(); 

    } 

    private void InitTextView() { 

        t1 = (TextView) findViewById(R.id.text1); 

        t2 = (TextView) findViewById(R.id.text2); 

        t3 = (TextView) findViewById(R.id.text3); 

        t1.setOnClickListener(new MyOnClickListener(0)); 

        t2.setOnClickListener(new MyOnClickListener(1)); 

        t3.setOnClickListener(new MyOnClickListener(2)); 

    } 

    private void InitViewPager() { 

        mPager = (ViewPager) findViewById(R.id.vPager); 

        listViews = new ArrayList<View>(); 

        LayoutInflater mInflater = getLayoutInflater(); 

        listViews.add(mInflater.inflate(R.layout.lay1, null)); 

        listViews.add(mInflater.inflate(R.layout.lay2, null)); 

        listViews.add(mInflater.inflate(R.layout.lay3, null)); 

        mPager.setAdapter(new MyPagerAdapter(listViews)); 

        mPager.setCurrentItem(0); 

        mPager.setOnPageChangeListener(new MyOnPageChangeListener()); 

    } 

    private void InitImageView() { 

        cursor = (ImageView) findViewById(R.id.cursor); 

        bmpW = BitmapFactory.decodeResource(getResources(), R.drawable.a) 

                .getWidth();// 获取图片宽度 

        DisplayMetrics dm = new DisplayMetrics(); 

        getWindowManager().getDefaultDisplay().getMetrics(dm); 

        int screenW = dm.widthPixels;// 获取分辨率宽度 

        offset = (screenW / 3 - bmpW) / 2;// 计算偏移量 

        Matrix matrix = new Matrix(); 

        matrix.postTranslate(offset, 0); 

        cursor.setImageMatrix(matrix);// 设置动画初始位置 

    } 

    public class MyPagerAdapter extends PagerAdapter { 

        public List<View> mListViews; 

        public MyPagerAdapter(List<View> mListViews) { 

            this.mListViews = mListViews; 

        } 

        @Override 

        public void destroyItem(View arg0, int arg1, Object arg2) { 

            ((ViewPager) arg0).removeView(mListViews.get(arg1)); 

        } 

        @Override 

        public void finishUpdate(View arg0) { 

        } 

        @Override 

        public int getCount() { 

            return mListViews.size(); 

        } 

        @Override 

        public Object instantiateItem(View arg0, int arg1) { 

            ((ViewPager) arg0).addView(mListViews.get(arg1), 0); 

            return mListViews.get(arg1); 

        } 

        @Override 

        public boolean isViewFromObject(View arg0, Object arg1) { 

            return arg0 == (arg1); 

        } 

        @Override 

        public void restoreState(Parcelable arg0, ClassLoader arg1) { 

        } 

        @Override 

        public Parcelable saveState() { 

            return null; 

        } 

        @Override 

        public void startUpdate(View arg0) { 

        } 

    } 

    public class MyOnClickListener implements View.OnClickListener { 

        private int index = 0; 

        public MyOnClickListener(int i) { 

            index = i; 

        } 

        @Override 

        public void onClick(View v) { 

            mPager.setCurrentItem(index); 

        } 

    }; 

    public class MyOnPageChangeListener implements OnPageChangeListener { 

        int one = offset * 2 + bmpW;// 页卡1 -> 页卡2 偏移量 

        int two = one * 2;// 页卡1 -> 页卡3 偏移量 

        @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); 

                } 

                break; 

            case 1: 

                if (currIndex == 0) { 

                    animation = new TranslateAnimation(offset, one, 0, 0); 

                } else if (currIndex == 2) { 

                    animation = new TranslateAnimation(two, one, 0, 0); 

                } 

                break; 

            case 2: 

                if (currIndex == 0) { 

                    animation = new TranslateAnimation(offset, two, 0, 0); 

                } else if (currIndex == 1) { 

                    animation = new TranslateAnimation(one, two, 0, 0); 

                } 

                break; 

            } 

            currIndex = arg0; 

            animation.setFillAfter(true);// True:图片停在动画结束位置 

            animation.setDuration(300); 

            cursor.startAnimation(animation); 

        } 

        @Override 

        public void onPageScrolled(int arg0, float arg1, int arg2) { 

        } 

        @Override 

        public void onPageScrollStateChanged(int arg0) { 

        } 

    }