《基于ViewPagerIndicator的UnderlinePageIndicator,ViewPager选项卡底部滑块衬线滑动控件》
基于github上的第三方开源的ViewPagerIndicator的UnderlinePageIndicator( 附:地址 ),自己写的一个在选项卡底部有衬线的滑动控件。
控件效果图如图所示。有一个特别的效果是:头部的选项卡在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:///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>