效果如图:
这个实现了可以自由滑动viewpager切换fragment
最下面有Demo
MainActivity
public class MainActivity extends AppCompatActivity {
@Bind(R.id.iv_line)
ImageView imageView;
@Bind(R.id.viewpager)
ViewPager viewPager;
@OnClick({R.id.group_one, R.id.group_two, R.id.group_three})
public void onBtnClick(View view) {
switch (view.getId()) {
case R.id.group_one:
viewPager.setCurrentItem(0);
break;
case R.id.group_two:
viewPager.setCurrentItem(1);
break;
case R.id.group_three:
viewPager.setCurrentItem(2);
break;
}
}
private int ivWidth;
private ArrayList<Fragment> mDatas;
private FragmentPagerAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ButterKnife.bind(this);
init();
}
private void init() {
Display display = getWindow().getWindowManager().getDefaultDisplay();
DisplayMetrics dm = new DisplayMetrics();
display.getMetrics(dm);
ivWidth = (dm.widthPixels / 3);
mDatas = new ArrayList<>();
TestFragment1 testFragment1 = new TestFragment1();
TestFragment2 testFragment2 = new TestFragment2();
TestFragment3 testFragment3 = new TestFragment3();
mDatas.add(testFragment1);
mDatas.add(testFragment2);
mDatas.add(testFragment3);
mAdapter = new FragmentPagerAdapter(getSupportFragmentManager()) {
@Override
public Fragment getItem(int position) {
return mDatas.get(position);
}
@Override
public int getCount() {
return mDatas.size();
}
};
viewPager.setAdapter(mAdapter);
viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
RelativeLayout.LayoutParams lp = (RelativeLayout.LayoutParams) imageView.getLayoutParams();
lp.leftMargin = position * ivWidth + (int) (positionOffset * ivWidth);
lp.width = ivWidth;//这里动态设置光标的长度,以便适配不同的分辨率
imageView.setLayoutParams(lp);
}
@Override
public void onPageSelected(int position) {
}
@Override
public void onPageScrollStateChanged(int state) {
}
});
}
}
主布局也比较简单 就是几个组合在一起
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="test.test.demo.MainActivity">
<include
android:id="@+id/include_group"
layout="@layout/group"
android:layout_width="match_parent"
android:layout_height="50dp"
android:layout_gravity="center" />
<ImageView
android:id="@+id/iv_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/include_group"
android:background="@drawable/tabline"
android:src="@drawable/tabline" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/iv_line" />
</RelativeLayout>
几个界面的Fragment就不贴了。就是测试页面