admin管理员组文章数量:1550426
自定义ViewPager的指示条—Indicate
ONE Goal,ONE Passion!
好久都没有写东西了,5-1公司组织去重渡沟,风景真心不怎样.不过还是挺值得回忆的.
当想使用viewpager时又想给每个pagerAdapter增加指示条,那就要去集成IndicateViewPager.每次都去集成,感觉很low.还是写自己的吧.
实现原理:
监听viewPager的滑动,根据一个item移动的偏移量来移动指示条
1,偏移距离 = 百分比*指示器的宽度
2,起始位置 = position*指示器的宽度
3,最终位置 = 起始位置+偏移距离
4,平移指示条: View.setTranslationX(endX);
第一步:Indicator的实现
// activity一定要继承FragmentActivity 否则不能得到getSupportFragmentManager();
public class IndicatorActivity extends FragmentActivity implements View.OnClickListener {
View indicate_line;
ViewPager view_Pager;
List<Fragment> mList;
MyAdapter adapter;
int width; //屏幕宽度
TextView tv_music, tv_video, tv_other;
//ViewPager 滑动的监听
private ViewPager.OnPageChangeListener listener = new ViewPager.OnPageChangeListener() {
/**
* 页面滑动过程中的回调
* @param position 当前索引
* @param positionOffset 偏移量
* @param positionOffsetPixels
*/
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
/**
* 偏移距离:百分比*指示器的宽度 起始位置:position*指示器的宽度 最终位置:起始位置+偏移距离
*
*/
float offsetX = positionOffset * indicate_line.getWidth();
float startX = position * indicate_line.getWidth();
float endX = startX + offsetX;
// ViewHelper.setTranslationX(indicate_line, endX);
indicate_line.setTranslationX(endX);
}
// 页面发生了改变的回调
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.layout_indicator);
initView();
}
private void initView() {
indicate_line = (View) findViewById(R.id.indicate_line);
view_Pager = (ViewPager) findViewById(R.id.viewPager);
tv_music = (TextView) findViewById(R.id.tv_music);
tv_video = (TextView) findViewById(R.id.tv_video);
tv_other = (TextView) findViewById(R.id.tv_other);
mList = new ArrayList<>();
// 为viewPager注册滑动监听
view_Pager.setOnPageChangeListener(listener);
tv_music.setOnClickListener(this);
tv_video.setOnClickListener(this);
tv_other.setOnClickListener(this);
mList.add(new Fragment_music());
mList.add(new Fragment_video());
mList.add(new Fragment_other());
adapter = new MyAdapter(getSupportFragmentManager());
view_Pager.setAdapter(adapter);
initIndicateWidth();
}
/**
* 初始化索引的宽度
*/
private void initIndicateWidth() {
width = getResources().getDisplayMetrics().widthPixels;
ViewGroup.LayoutParams layoutParams = indicate_line.getLayoutParams();
layoutParams.width = width / mList.size();
// indicate_line.setLayoutParams(layoutParams);
indicate_line.invalidate(); // 两种方法都可以
}
// 为指示条增加监听
@Override
public void onClick(View v) {
int position = 0;
switch (v.getId()) {
case R.id.tv_music:
position = 0;
break;
case R.id.tv_video:
position = 1;
break;
case R.id.tv_other:
position = 2;
break;
}
view_Pager.setCurrentItem(position, true);
}
public class MyAdapter extends FragmentPagerAdapter {
public MyAdapter(FragmentManager fm) {
super(fm);
}
@Override
public android.support.v4.app.Fragment getItem(int position) {
return mList.get(position);
}
@Override
public int getCount() {
return mList.size();
}
}
}
关键性代码:
/** * 偏移距离:百分比*指示器的宽度 起始位置:position*指示器的宽度
最终位置:起始位置+偏移距离
*
*/
float offsetX = positionOffset *indicate_line.getWidth();
float startX = position * indicate_line.getWidth();
// 指示条要移动到的X坐标
float endX = startX + offsetX;
//setTranslationX将view的left边的position平移到X位置
indicate_line.setTranslationX(endX);
第二步:R.layout.layout_indicator的布局
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:id="@+id/ll_title"
android:layout_width="match_parent"
android:layout_height="60dp"
android:background="@drawable/title_bg">
<TextView
android:id="@+id/tv_music"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_weight="1"
android:gravity="center"
android:text="音乐"
android:textSize="20dp" />
<TextView
android:id="@+id/tv_video"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="视频"
android:textSize="20dp" />
<TextView
android:id="@+id/tv_other"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:text="其他"
android:textSize="20dp" />
</LinearLayout>
<View
android:id="@+id/indicate_line"
android:layout_width="50dp"
android:layout_height="2dp"
android:layout_below="@id/ll_title"
android:background="@color/colorAccent" />
<android.support.v4.view.ViewPager
android:id="@+id/viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@id/indicate_line">
</android.support.v4.view.ViewPager>
</RelativeLayout>
第三步:下面是对应的fragment
public class Fragment_music extends Fragment {
public Fragment_music() {
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
return inflater.inflate(R.layout.fragment_fragment_music, container, false);
}
}
// Fragment的布局
<FrameLayout xmlns:android="http://schemas.android/apk/res/android"
xmlns:tools="http://schemas.android/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff00ff"
tools:context="com.example.recyclerviewtest.fragment.Fragment_music">
<TextView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:text="音乐"
android:textSize="50dp" />
</FrameLayout>
这个indicate实现时,指示条的个数在布局中写死了.正在使用到项目中时我们应该根据需要显示的个数去设置指示条的个数,等有时间了.再把这个完善一下.
版权声明:本文标题:自定义ViewPager的指示条---Indicate 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1727246299a1104668.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论