Android简单有效Viewpager+Fragment实现滑动标签页

目录
一、简介
二、实战
三、总结

正文

一、简介
记录使用ViewPager+Fragment实现滑动标签页。这样的例子网上一堆，但是都写得比较啰嗦，我重新整理一下，简单、有效。一眼就能看到实例Demo，希望对你有帮助。

二、实战
1、xml文件

<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"
    >

    <LinearLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="48dp"
        android:gravity="center"
        android:orientation="horizontal"
        >

        <TextView
            android:id="@+id/tab1"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab1"
            />

        <TextView
            android:id="@+id/tab2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab2"
            />

        <TextView
            android:id="@+id/tab3"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:gravity="center"
            android:text="tab3"/>
    </LinearLayout>

    <ImageView
        android:id="@+id/img"
        android:layout_width="80dp"
        android:layout_height="4dp"
        android:layout_below="@id/tabs"
        android:background="@color/green_me"
        />

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/img"/>

</RelativeLayout>

2、activity代码：

package bluesky.example.com.mvpdemo;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;


public class ViewPagerTabDemoActivity extends FragmentActivity {
    private ImageView mImageView;//指示游标图片
    private int currIndex;//当前页
    private int offset;//移动偏移量
    private ViewPager mPager;
    private LinearLayout mTopMenuLayout;//顶部的tab页面布局

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_view_pager_tab_demo);
        initText();
        initImage();
        initPager();
    }

    private void initPager() {
        mPager = (ViewPager) findViewById(R.id.pager);
        mPager.setAdapter(new myPagerAdapter(getSupportFragmentManager()));
        mPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {

            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {
                Animation animation = new TranslateAnimation(currIndex * offset, position * offset, 0, 0);//平移动画
                currIndex = position;
                animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态
                animation.setDuration(200);//动画持续时间0.2秒
                mImageView.startAnimation(animation);//是用ImageView来显示动画的
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });
    }

    private void initText() {
        TextView tab1 = (TextView) findViewById(R.id.tab1);
        TextView tab2 = (TextView) findViewById(R.id.tab2);
        TextView tab3 = (TextView) findViewById(R.id.tab3);

        tab1.setOnClickListener(new txListener(0));
        tab2.setOnClickListener(new txListener(1));
        tab3.setOnClickListener(new txListener(2));

    }

    public class txListener implements View.OnClickListener {
        private int index = 0;

        public txListener(int i) {
            index = i;
        }

        @Override
        public void onClick(View v) {
            // TODO Auto-generated method stub
            mPager.setCurrentItem(index);
        }
    }

    private void initImage() {
        mImageView = (ImageView) findViewById(R.id.img);
        mTopMenuLayout = (LinearLayout) findViewById(R.id.tabs);

        DisplayMetrics displayMetrics = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(displayMetrics);
        //屏幕宽度
        int screenWidth = displayMetrics.widthPixels;
        RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(screenWidth / 3, 6);
        params.setMargins(0, mTopMenuLayout.getLayoutParams().height, 0, 0);
        mImageView.setLayoutParams(params);

        offset = (screenWidth / 3);//计算偏移量
    }

    class myPagerAdapter extends FragmentPagerAdapter {
        Fragment fragment1;

        public myPagerAdapter(FragmentManager fm) {
            super(fm);
        }

        @Override
        public Fragment getItem(int position) {
            switch (position) {
                case 0:
                    fragment1 = new Fragment1("tab1");
                    return fragment1;
                case 1:
                    fragment1 = new Fragment1("tab2");
                    return fragment1;
                case 2:
                    fragment1 = new Fragment1("tab3");
                    return fragment1;
                default:
                    return null;
            }
        }

        @Override
        public int getCount() {

            return 3;
        }

        @Override
        public CharSequence getPageTitle(int position) {
            return "";
        }

    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.menu_view_pager_tab_demo, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();

        //noinspection SimplifiableIfStatement
        if (id == R.id.action_settings) {
            return true;
        }

        return super.onOptionsItemSelected(item);
    }
}

3、Fragment代码：

package bluesky.example.com.mvpdemo;

import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

/**
 * Created by Bluesky on 2015/9/8.
 */
public class Fragment1 extends Fragment {

    private String mTitleStr;

    public Fragment1(String mTitleStr) {
        this.mTitleStr = mTitleStr;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        TextView textView = new TextView(getActivity());
        textView.setText(mTitleStr);
        textView.setGravity(Gravity.CENTER);
        return textView;
    }
}

三、总结
注意游标图片的宽度为三个Tab的平分屏幕的宽度。同理，游标图片移动的偏移量也是图片的宽度。设置游标图片的平移动画：

 Animation animation = new TranslateAnimation(currIndex * offset, position * offset, 0, 0);//平移动画
                currIndex = position;
                animation.setFillAfter(true);//动画终止时停留在最后一帧，不然会回到没有执行前的状态
                animation.setDuration(200);//动画持续时间0.2秒
                mImageView.startAnimation(animation);//是用ImageView来显示动画的

个人信息
- 微信：huangrx1988
- 博客：http://blog.csdn.net/hrx3627
- github：https://github.com/hrx3627
- Android交流QQ群 ：367818514
- QQ：1084986314