我这里重提一下,只是想试试它的实现方法;
记录下来,可以以后快速的修改迭代~~~
很简单的一个类:
import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.util.Log; import android.util.TypedValue; import android.view.Gravity; import android.view.MotionEvent; import android.view.View; import android.widget.LinearLayout; import android.widget.TextView; public class SimpleViewPagerIndicator extends LinearLayout { private static final int COLOR_TEXT_NORMAL = 0xFF999999; private static final int COLOR_INDICATOR = Color.BLACK; private String[] mTitles; private int mTabCount; private int mIndicatorColor = COLOR_INDICATOR; private float mTranslationX; private Paint mPaint = new Paint(); private int mTabWidth; private int oldPosition = 0; private ViewPager viewPager; public SimpleViewPagerIndicator(Context context) { this(context, null); } public SimpleViewPagerIndicator(Context context, AttributeSet attrs) { super(context, attrs); mPaint.setColor(mIndicatorColor); mPaint.setStrokeWidth(10.0F); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mTabWidth = w / mTabCount; } public void setTitles(String[] titles) { mTitles = titles; mTabCount = titles.length; } public void setIndicatorColor(int indicatorColor) { this.mIndicatorColor = indicatorColor; } @Override protected void dispatchDraw(Canvas canvas) { super.dispatchDraw(canvas); canvas.save(); canvas.translate(mTranslationX, getHeight() - 2); canvas.drawLine(0, 0, mTabWidth, 0, mPaint); canvas.restore(); } public void setViewPager(ViewPager viewPager) { if (viewPager instanceof ViewPager) { this.viewPager = viewPager; viewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { View v = getChildAt(position); if (v instanceof TextView) { TextView oldTv = (TextView) getChildAt(oldPosition); oldTv.setTextColor(COLOR_TEXT_NORMAL); TextView tv = (TextView) v; tv.setTextColor(COLOR_INDICATOR); oldPosition = position; } if (onPageChangeListener != null) { onPageChangeListener.onPageSelected(position); } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { scroll(position, positionOffset); } @Override public void onPageScrollStateChanged(int state) { } }); } } public void scroll(int position, float offset) { mTranslationX = getWidth() / mTabCount * (position + offset); invalidate(); } @Override public boolean dispatchTouchEvent(MotionEvent ev) { return super.dispatchTouchEvent(ev); } private void generateIndicators() { if (getChildCount() > 0) this.removeAllViews(); int count = mTitles.length; setWeightSum(count); for (int i = 0; i < count; i++) { TextView tv = new TextView(getContext()); LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(0, LayoutParams.MATCH_PARENT); lp.weight = 1; tv.setTag(i); tv.setGravity(Gravity.CENTER); tv.setTextColor(COLOR_TEXT_NORMAL); tv.setText(mTitles[i]); tv.setTextSize(TypedValue.COMPLEX_UNIT_SP, 14); tv.setLayoutParams(lp); tv.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { int position = (Integer) v.getTag(); if (viewPager != null) { viewPager.setCurrentItem(position); } if(onItemClickListener!=null){ onItemClickListener.onItemClick(v, position); } } }); addView(tv); } } private OnPageChangeListener onPageChangeListener; public void setOnPageChangeListener(OnPageChangeListener onPageChangeListener) { this.onPageChangeListener = onPageChangeListener; } public interface OnPageChangeListener { public void onPageSelected(int position); } private OnItemClickListener onItemClickListener; public void setOnItemClickListener(OnItemClickListener onItemClickListener) { this.onItemClickListener = onItemClickListener; } public interface OnItemClickListener { public void onItemClick(View view,int position); } /** * 选中当前页 。此方法一定要在setTitles(),setViewPager()之后调用! * * @param position */ public void setCurrentItem(int position) { oldPosition = position; generateIndicators(); if (viewPager != null) { viewPager.setCurrentItem(position); } } }
用法:
package com.example.testviewpagerindicator; import android.content.Context; import android.os.Bundle; import android.support.v4.app.Fragment; import android.support.v4.app.FragmentActivity; import android.support.v4.app.FragmentPagerAdapter; import com.me.view.SimpleViewPagerIndicator; public class MainActivity extends FragmentActivity { private Context context; private String[] titles = new String[] { "第1页", "第2页", "第3页", "第4页" }; private SimpleViewPagerIndicator indicator; private ViewPager viewpager; private FragmentPagerAdapter pagerAdapter; private TabFragment[] fragments = new TabFragment[titles.length]; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); context = this; initViews(); } private void initViews() { for (int i = 0; i < titles.length; i++) { fragments[i] = (TabFragment) TabFragment.newInstance(titles[i]); } pagerAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) { @Override public int getCount() { return titles.length; } @Override public Fragment getItem(int position) { return fragments[position]; } }; viewpager = (ViewPager) findViewById(R.id.viewpager); viewpager.setAdapter(pagerAdapter); indicator = (SimpleViewPagerIndicator) findViewById(R.id.indicator); indicator.setTitles(titles); indicator.setViewPager(viewpager); indicator.setCurrentItem(1); // indicator.setOnPageChangeListener(new SimpleViewPagerIndicator.OnPageChangeListener() // { // // @Override // public void onPageSelected(int position) // { // // TODO Auto-generated method stub // Toast.makeText(context, position + " clicked", Toast.LENGTH_SHORT).show(); // } // }); } }
注意:使用了SimpleViewPagerIndicator之后,需要使用indicator.setOnPageChangeListener(...)监听页面的切换,不要再使用viewpager .setOnPageChangeListener(...)设置了。
最后是个Fragment:
package com.example.testviewpagerindicator; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; public class TabFragment extends Fragment { public static final String TITLE = "title"; private String mTitle = "Defaut Value"; private TextView mTextView; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); if (getArguments() != null) { mTitle = getArguments().getString(TITLE); } } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View view = inflater.inflate(R.layout.fragment_tab, container, false); mTextView = (TextView) view.findViewById(R.id.id_info); mTextView.setText(mTitle); return view; } public static TabFragment newInstance(String title) { TabFragment tabFragment = new TabFragment(); Bundle bundle = new Bundle(); bundle.putString(TITLE, title); tabFragment.setArguments(bundle); return tabFragment; } }
主布局:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res/com.example.testviewpagerindicator" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <com.me.view.SimpleViewPagerIndicator android:id="@+id/indicator" android:layout_width="match_parent" android:layout_height="48dp" android:background="#ffffffff" /> <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="match_parent" android:layout_height="match_parent" android:flipInterval="30" android:persistentDrawingCache="animation" /> </LinearLayout>
https://github.com/ogaclejapan/SmartTabLayout
http://www.open-open.com/lib/view/open1426474795101.html
一个带有回弹效果的ViewPager,这个类具体见:
http://gundumw100.iteye.com/blog/1775588
Android 高仿微信6.0主界面 带你玩转切换图标变色
http://blog.csdn.net/lmj623565791/article/details/41087219
Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
http://blog.csdn.net/lmj623565791/article/details/44098729
Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
http://blog.csdn.net/lmj623565791/article/details/42160391
Android TabLayout 库:FlycoTabLayout
http://www.open-open.com/lib/view/open1447294190257.html