基于ViewPagerIndicator的UnderlinePageIndicator，ViewPager选项卡底部滑块衬线滑动控件

r囧r小猫 2023-10-16 21:19 27阅读 0赞

**《基于ViewPagerIndicator的UnderlinePageIndicator，ViewPager选项卡底部滑块衬线滑动控件》**

基于github上的第三方开源的ViewPagerIndicator的UnderlinePageIndicator（ [ **附：地址** ][Link 1]），自己写的一个在选项卡底部有衬线的滑动控件。  
控件效果图如图所示。

![Center][]

有一个特别的效果是：头部的选项卡在ViewPager切换过程中，底部的滑块也随之动态渐渐滑动过渡。  
代码：

MainActivity.java

package zhangphil.underline;
    
    import java.util.ArrayList;
    
    import com.viewpagerindicator.UnderlinePageIndicator;
    
    import android.support.v4.app.Fragment;
    import android.support.v4.app.FragmentManager;
    import android.support.v4.app.FragmentPagerAdapter;
    import android.support.v4.view.PagerAdapter;
    import android.support.v4.view.ViewPager;
    import android.support.v7.app.ActionBarActivity;
    import android.view.Gravity;
    import android.view.LayoutInflater;
    import android.view.View;
    import android.view.ViewGroup;
    import android.widget.LinearLayout;
    import android.widget.TextView;
    import android.widget.LinearLayout.LayoutParams;
    import android.graphics.Color;
    import android.os.Bundle;
    
    /**
     * 基于第三方开源的ViewPagerIndicator的UnderlinePageIndicator，自己写的一个在选项卡底部有衬线的滑动控件。
     * 控件效果图如图所示。
     * 这里面有一个特别的效果是：头部的选项卡在ViewPager切换过程中，底部的滑块也随之动态渐渐滑动过渡。
     * 
     * */
    
    public class MainActivity extends ActionBarActivity {
    
    	private LinearLayout mLinearLayout;
    	private ArrayList<Fragment> mArryList;
    	private ViewPager mPager;
    
    	// 未被选中的选项卡字体颜色
    	private int COLOR_NORMAL = Color.DKGRAY;
    
    	@Override
    	protected void onCreate(Bundle savedInstanceState) {
    		super.onCreate(savedInstanceState);
    		setContentView(R.layout.activity_main);
    
    		mArryList = new ArrayList<Fragment>();
    		// 初始化5个Fragment作为测试。
    		for (int i = 0; i < 5; i++) {
    			TestFragment f = (TestFragment) TestFragment.newInstance();
    			f.id = i;
    			mArryList.add(f);
    		}
    
    		PagerAdapter mAdapter = new MyFragmentAdapter(
    				getSupportFragmentManager());
    
    		mPager = (ViewPager) findViewById(R.id.pager);
    		mPager.setAdapter(mAdapter);
    
    		UnderlinePageIndicator mIndicator = (UnderlinePageIndicator) findViewById(R.id.indicator);
    		mIndicator.setViewPager(mPager);
    		mIndicator.setFades(false);
    		mIndicator.setSelectedColor(0xff33B5E5);
    		mIndicator
    				.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
    
    					@Override
    					public void onPageSelected(int pos) {
    						setIndicatorViewSelected(pos);
    					}
    
    					@Override
    					public void onPageScrolled(int arg0, float arg1, int arg2) {
    
    					}
    
    					@Override
    					public void onPageScrollStateChanged(int arg0) {
    
    					}
    				});
    
    		mLinearLayout = (LinearLayout) findViewById(R.id.tab_LinearLayout);
    		// 添加选项卡
    		addIndicators();
    
    		// 初始化，第0项被选中
    		setIndicatorViewSelected(0);
    	}
    
    	// 添加Tab选项卡
    	private void addIndicators() {
    		for (int i = 0; i < getItemsCount(); i++) {
    			View v = getIndicatorAt(i);
    			addIndicatorItem(v, i);
    		}
    	}
    
    	// 在这里设置被选中时候选项卡变化的效果
    	private void setIndicatorViewSelected(int pos) {
    		for (int i = 0; i < mLinearLayout.getChildCount(); i++) {
    			if (i == pos) {
    				View v = mLinearLayout.getChildAt(i);
    				TextView tv = (TextView) v;
    				// Android Holo 样式的蓝色
    				tv.setTextColor(0xff33B5E5);
    			} else {
    				View v = mLinearLayout.getChildAt(i);
    				TextView tv = (TextView) v;
    				tv.setTextColor(COLOR_NORMAL);
    			}
    		}
    	}
    
    	protected int getItemsCount() {
    		return mArryList.size();
    	}
    
    	// 在这里仅仅返回一个TextView作为选项卡的View。
    	// 此处可以返回更丰富的View。
    	protected View getIndicatorAt(int pos) {
    		TextView v = new TextView(this);
    		v.setGravity(Gravity.CENTER);
    		v.setText("选项卡" + pos);
    		v.setTextColor(COLOR_NORMAL);
    		return v;
    	}
    
    	// 在线性布局里面依次添加一个View，为添加的View添加事件。
    	private void addIndicatorItem(View view, final int index) {
    		LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
    				LayoutParams.MATCH_PARENT, 1);
    		mLinearLayout.addView(view, index, params);
    		view.setOnClickListener(new View.OnClickListener() {
    
    			@Override
    			public void onClick(View v) {
    				// 当用户点击该View时候，设置ViewPager正确而Pager Item
    				set(index);
    			}
    		});
    	}
    
    	private void set(int pos) {
    		mPager.setCurrentItem(pos, true);
    		setIndicatorViewSelected(pos);
    	}
    
    	// 仅仅用于测试的Fragment，用一个id标识。
    	private static class TestFragment extends Fragment {
    
    		public int id;
    
    		public static Fragment newInstance() {
    			return new TestFragment();
    		}
    
    		public View onCreateView(LayoutInflater inflater, ViewGroup container,
    				Bundle savedInstanceState) {
    
    			TextView v = new TextView(getActivity());
    			v.setGravity(Gravity.CENTER);
    			v.setTextSize(50f);
    			v.setText("Fragment: " + id);
    
    			return v;
    		}
    	}
    
    	private class MyFragmentAdapter extends FragmentPagerAdapter {
    
    		public MyFragmentAdapter(FragmentManager fm) {
    			super(fm);
    		}
    
    		@Override
    		public Fragment getItem(int position) {
    			return mArryList.get(position);
    		}
    
    		@Override
    		public int getCount() {
    			return mArryList.size();
    		}
    	}
    }

需要的布局文件：activity\_main.xml

<?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:id="@+id/tab_LinearLayout"
            android:layout_width="match_parent"
            android:layout_height="30dip"
            android:orientation="horizontal" />
    
        <com.viewpagerindicator.UnderlinePageIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="7px" />
    
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:background="#33B5E5" />
    
        <android.support.v4.view.ViewPager
            android:id="@+id/pager"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1" />
    
    </LinearLayout>

[Link 1]: https://github.com/JakeWharton/ViewPagerIndicator
[Center]: https://img-blog.csdn.net/20150330155702404?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvemhhbmdwaGls/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center