这里使用 ViewPager+Fragment 实现滑动效果
当然首先要先上效果图
总共需要的文件:
- 2个Layou文件
- 1个Adapter文件
- 3个Fragment文件
- 1个Activity文件
Layout文件
- activity_main.xml
fragment_layout.xml
activity_main.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.a25086.viewpagetest.MainActivity">
<!--实现滑动切换的ViewPager-->
<android.support.v4.view.ViewPager
android:layout_weight="1"
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent">
</android.support.v4.view.ViewPager>
<!--以下是小圆点,就是使用RadioButton实现的-->
<RadioGroup
android:layout_marginLeft="100dp"
android:layout_marginRight="100dp"
android:layout_weight="13"
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="match_parent">
<RadioButton
android:id="@+id/chooseone"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RadioButton
android:id="@+id/choosetwo"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<RadioButton
android:id="@+id/choosethree"
android:layout_weight="1"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RadioGroup>
</LinearLayout>
fragment_layout.xml:
<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/text"
android:gravity="center"
android:textSize="50dp"
android:text="This is One Fragment"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</android.support.constraint.ConstraintLayout>
Adapter文件:
- FragmentChangeAdapter 继承自 FragmentPagerAdapter
public class FragmentChangeAdapter extends FragmentPagerAdapter {
private List<Fragment> flist;//添加的Fragment就在这里
public FragmentChangeAdapter(FragmentManager fm, List<Fragment> flist) {
super(fm);
this.flist = flist;
}
@Override
public Fragment getItem(int position) {
return flist.get(position);
}
@Override
public int getCount()
return flist.size();
}
}
Fragment文件
我这里全部使用一个布局文件(fragment_layout)进行加载
- OneFramgent
- TwoFragment
- ThreeFragment
OneFragment:
public class OneFragment extends Fragment {
private TextView text;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_layout, container, false);
initView(view);
return view;
}
private void initView(View view) {
text = (TextView) view.findViewById(R.id.text);
}
}
TwoFragmetn:
public class TwoFragment extends Fragment {
private TextView text;
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_layout, container, false);
initView(view);
return view;
}
private void initView(View view) {
text = (TextView) view.findViewById(R.id.text);
text.setText("This is Two Fragment");
}
}
ThreeFragment:
与TwoFragment相同,所以就不写啦,Thanks♪(・ω・)ノ
MainActivity文件
我会尽力注释解释清楚地ヾ(◍°∇°◍)ノ゙
public class MainActivity extends AppCompatActivity {
private FragmentChangeAdapter fadapter;
private List<Fragment> flist;//声明一个存放Fragment的List
private ViewPager viewpager;
private RadioButton chooseone;
private RadioButton choosetwo;
private RadioButton choosethree;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initPager();
}
private void initView() {
viewpager = (ViewPager) findViewById(R.id.viewpager);
chooseone = (RadioButton) findViewById(R.id.chooseone);
choosetwo = (RadioButton) findViewById(R.id.choosetwo);
choosethree = (RadioButton) findViewById(R.id.choosethree);
}
private void initPager(){
flist=new ArrayList<>();//这里如果不写的话,就没有存放Fragment的list了
//是会报错的
//添加Fragment
flist.add(new OneFragment());
flist.add(new TwoFragment());
flist.add(new ThreeFragment());
fadapter=new FragmentChangeAdapter(getSupportFragmentManager(),flist);
viewpager.setAdapter(fadapter);
viewpager.addOnPageChangeListener(new OnPageChane());//滑动时会做的事
viewpager.setCurrentItem(0);//指定当前出现的界面
chooseone.setChecked(true);//应用一进来就是第一个被选中
}
private class OnPageChane implements ViewPager.OnPageChangeListener {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
}
@Override
public void onPageSelected(int position) {
//实现滑动时RadioButton的选中状态进行变换
switch (position){
case 0:
chooseone.setChecked(true);
choosetwo.setChecked(false);
choosethree.setChecked(false);
break;
case 1:
chooseone.setChecked(false);
choosetwo.setChecked(true);
choosethree.setChecked(false);
break;
case 2:
chooseone.setChecked(false);
choosetwo.setChecked(false);
choosethree.setChecked(true);
break;
}
}
@Override
public void onPageScrollStateChanged(int state) {
}
}
}
我在这上面踩过的坑,希望对大家有所帮助
- 如果不写 flist=new ArrayList<>();会报错,刚开始写,经常写忘记了
- 如果界面出现白屏,小圆点还在,但是程序不奔溃,那就有可能是以下两种错误:
1.忘记setAdapter了
2.在Adapter中的getCount方法,忘记写成flist.size();