1. 程式人生 > >Viewpager+Fragment實現滑動,點選滑動效果

Viewpager+Fragment實現滑動,點選滑動效果

佈局頁面 佈局有很多種方式,為了美觀,這裡我們就用RadioGroup實現

<android.support.v4.view.ViewPager
    android:id="@+id/viewpager"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1">
</android.support.v4.view.ViewPager>
<RadioGroup
    android:id="@+id/rg"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="5dp"
    android:orientation="horizontal">
    <RadioButton
        android:id="@+id/rb1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/a1"
        android:text="文字"
        android:gravity="center"
        android:button="@null"/>
    <RadioButton
        android:id="@+id/rb2"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/a2"
        android:text="文字"
        android:gravity="center"
        android:button="@null"/>
    <RadioButton
        android:id="@+id/rb3"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:drawableTop="@drawable/a5"
        android:text="文字"
        android:gravity="center"
        android:button="@null"/>
</RadioGroup>

效果 在這裡插入圖片描述 接下來要實現這三個頁面間的滑動切換,點選切換

private ViewPager viewPager;
private RadioGroup radioGroup;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    //初始化控制元件物件
    initView();
    //設定viewpager
    initViewPager();
}

//初始化控制元件物件
private void initView() {
    viewPager=findViewById(R.id.viewpager);
    radioGroup=findViewById(R.id.rg);
}
private void initViewPager() {
    final ArrayList<Fragment> fragments=new ArrayList<>();
    fragments.add(new GuanZhuFragment());
    fragments.add(new MessageFragment());
    fragments.add(new MyFragment());
    //設定介面卡/如果是巢狀的fragment要用getChildFragmentManager()
    viewPager.setAdapter(new FragmentPagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int i) {
            return fragments.get(i);
        }

        @Override
        public int getCount() {
            return fragments.size();
        }
    });
    //給radioGroup設定點選事件
    radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.rb1:
                //viewPager按照點選顯示頁面
                    viewPager.setCurrentItem(0);
                    break;
                case R.id.rb2:
                    viewPager.setCurrentItem(1);
                    break;
                case R.id.rb3:
                    viewPager.setCurrentItem(2);
                    break;
            }
        }
    });
}