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

来源：互联网发布：minitab 两组数据分析编辑：程序博客网时间：2024/05/01 12:47

效果如图：

这个实现了可以自由滑动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下载地址

0 0