自己写的一个带indicator的viewpager

实习一周了，在公司项目中看到用到带indicator的viewpager，用的是textview和viewpager，在每个text添加一个2dp的textview作为指示器，选中哪个textview就把他下面的知识器的textview设置为可见，其他的隐藏。以前我用过第三方开源的ViewPagerIndicator。我感觉那个指示器应该要做个移动的动画吧，不然视觉效果会不太好，于是周末回来就自己写个试试。由于是初学者，很多东西不太懂，只顾完成功能，在网上查了查资料就开始动手了。

activity_main.xml布局文件

<span style="font-size:14px;"><LinearLayout 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"
              android:orientation="vertical"
              android:background="#000000"
              tools:context=".MainActivity">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#0000ff"
        android:gravity="center"
        android:paddingBottom="5dp"
        android:paddingTop="5dp"
        android:text="大标题"
        android:textColor="#ffffff"
        android:textSize="20dp"/>

    <LinearLayout
        android:id="@+id/ll"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
    android:orientation="horizontal">
    </LinearLayout>
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
<TextView
    android:id="@+id/tv_strip"
    android:layout_width="60dp"
    android:background="#ffffff"
    android:layout_height="3dp"/>
    </LinearLayout>

    <android.support.v4.view.ViewPager
        android:id="@+id/vp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        >
    </android.support.v4.view.ViewPager>
</LinearLayout></span>

MainActivity.java

<span style="font-size:14px;">package com.sy.myindicator;

import android.graphics.Color;
import android.graphics.drawable.ColorDrawable;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.util.DisplayMetrics;
import android.view.Gravity;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.LinearLayout;
import android.widget.TextView;

import java.util.ArrayList;


public class MainActivity extends FragmentActivity {

    private TextView mStrip;
    private ViewPager mViewpager;
    private LinearLayout mLl;
    private ArrayList<TextView> textlist;
    private int count = 3;
    private ArrayList<Fragment> mFlist;
    private int cid = 0;
    private int mWidth;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
        createTextView(count);
        initData(textlist);
        initEvent();

    }


    private void initEvent() {
        mViewpager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int i, float v, int i1) {


            }

            @Override
            public void onPageSelected(int i) {
                TextView tv = (TextView) findViewById(i);
                tv.setTextSize(20);
                tv.setClickable(false);
                TextView tv_old = (TextView) findViewById(cid);
                tv_old.setTextSize(16);
                tv_old.setClickable(true);
                cid = i;

                //set animation
                int step = 0;
                int start = 0;
                step = step + (mWidth / count) * i;

                Animation ani = new TranslateAnimation(start, step, 0, 0);
                ani.setDuration(200);
                ani.setFillAfter(true);
                mStrip.startAnimation(ani);
                start = start+step;
                if(start==mWidth){
                    start=0;
                }
                final int finalStart = start;
                ani.setAnimationListener(new Animation.AnimationListener() {
                    @Override
                    public void onAnimationStart(Animation animation) {

                    }

                    @Override
                    public void onAnimationEnd(Animation animation) {
                        mStrip.clearAnimation();
                        mStrip.setX(finalStart);
                    }

                    @Override
                    public void onAnimationRepeat(Animation animation) {

                    }
                });

            }

            @Override
            public void onPageScrollStateChanged(int i) {

            }
        });

    }

    private void createTextView(int count) {
        for (int i = 0; i < count; i++) {
            final TextView tv = new TextView(this);
            tv.setText("标题" + i);
            tv.setTextSize(16);
            tv.setTextColor(Color.WHITE);
            tv.setId(i);
            tv.setLayoutParams(new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1));
            tv.setBackground(new ColorDrawable(Color.BLACK));
            tv.setGravity(Gravity.CENTER);
            tv.setPadding(0, 5, 0, 5);
            final int finalI = i;
            tv.setOnClickListener(new View.OnClickListener() {
                @Override
                public void onClick(View v) {
                    tv.setTextSize(20);
                    tv.setClickable(false);
                    TextView t = (TextView) findViewById(cid);
                    t.setTextSize(16);
                    t.setClickable(true);
                    mViewpager.setCurrentItem(finalI);
                    cid = tv.getId();
                }
            });
            textlist.add(tv);
        }

    }


    private void initData(ArrayList<TextView> textlist) {
        for (TextView text : textlist) {
            mLl.addView(text);
        }
        DisplayMetrics metric = new DisplayMetrics();
        getWindowManager().getDefaultDisplay().getMetrics(metric);
        mWidth = metric.widthPixels;
        mStrip.setLayoutParams(new LinearLayout.LayoutParams(mWidth / count, 2, 0));

        VPFragment1 f1 = new VPFragment1();
        VPFragment2 f2 = new VPFragment2();
        VPFragment3 f3 = new VPFragment3();
        mFlist = new ArrayList<Fragment>();
        mFlist.add(f1);
        mFlist.add(f2);
        mFlist.add(f3);

        MyFragmentPagerAdapter adapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), mFlist);

        mViewpager.setAdapter(adapter);
        TextView t = (TextView) findViewById(cid);
        t.setTextSize(20);
        t.setClickable(false);

    }

    private void initView() {
        mStrip = (TextView) findViewById(R.id.tv_strip);
        mViewpager = (ViewPager) findViewById(R.id.vp);
        mLl = (LinearLayout) findViewById(R.id.ll);
        textlist = new ArrayList<TextView>();
    }
}
</span>

MyFragmentAdapter.java

package com.sy.myindicator;

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

import java.util.ArrayList;

/**
 * Created by SY on 2016/3/19.
 */
public class MyFragmentPagerAdapter extends FragmentPagerAdapter {

    ArrayList<Fragment> mFlist;

    public MyFragmentPagerAdapter(FragmentManager fm,ArrayList<Fragment> list) {
        super(fm);
        this.mFlist=list;
    }

    

    @Override
    public Fragment getItem(int i) {
        return mFlist.get(i);
    }

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

剩下三个fragment基本都是一样的了

VPFragment2 .java

package com.sy.myindicator;

import android.support.v4.app.Fragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

/**
 * Created by SY on 2016/3/19.
 */
public class VPFragment2 extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View v = inflater.inflate(R.layout.vp_fglayout2, null);
        return v;
    }
}

布局文件

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:layout_width="match_parent"
              android:background="#000000"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textSize="30sp"
        android:layout_gravity="center"
        android:textColor="#ffffff"
        android:text="fragment2"/>
</LinearLayout>

第一次做，做得不好，位移动画还是有点小瑕疵的，不过自己还是花了时间在做的，所以先记录一下，以后有时间在修改。

参考资料：http://blog.csdn.net/knlnzhao/article/details/8026778

http://bbs.csdn.net/topics/360035885    

http://www.bkjia.com/qtjc/614146.html