您的位置:首页 > 移动开发 > Android开发

ViewPager+Fragment组成滑动且带有光标

2016-04-11 00:14 573 查看
效果如图:





这个实现了可以自由滑动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就不贴了。就是测试页面

Demo下载地址
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  android viewpager