说到ViewPagerIndicator,网上有很多专门的开源库;
我这里重提一下,只是想试试它的实现方法;
记录下来,可以以后快速的修改迭代~~~
很简单的一个类:
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主界面 带你玩转切换图标变色
Android 自定义控件玩转字体变色 打造炫酷ViewPager指示器
Android 教你打造炫酷的ViewPagerIndicator 不仅仅是高仿MIUI
Android TabLayout 库:FlycoTabLayout
http://www.open-open.com/lib/view/open1447294190257.html
- TestViewPagerIndicator.rar (2.2 MB)
- 下载次数: 26