ViewPager+Fragment实现应用框架
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.moliying.fragmentviewpagerdemo.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/viewPager"/>
<RadioGroup
android:gravity="center"
android:id="@+id/tab_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/tab_bg"
android:orientation="horizontal">
<RadioButton
android:gravity="center"
android:button="@null"
android:drawableTop="@drawable/tab_home_selector_bg"
android:textColor="@drawable/tab_selector_bg"
android:layout_weight="1"
android:tag="0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="主页"/>
<RadioButton
android:gravity="center"
android:button="@null"
android:drawableTop="@drawable/tab_discover_selector_bg"
android:textColor="@drawable/tab_selector_bg"
android:layout_weight="1"
android:tag="1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="发现"/>
<RadioButton
android:gravity="center"
android:button="@null"
android:drawableTop="@drawable/tab_personal_selector_bg"
android:textColor="@drawable/tab_selector_bg"
android:layout_weight="1"
android:tag="2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="我"/>
</RadioGroup>
</LinearLayout>
IndexFragment类:
public class IndexFragment extends Fragment {
public static IndexFragment getInstance(){
IndexFragment indexFragment = new IndexFragment();
return indexFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.index_fragment_layout,null);
return view;
}
}
IndexFragment对应的布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff5b5b">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="index layout"
android:id="@+id/textView"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
DiscoverFragment类
public class DiscoverFragment extends Fragment {
public static DiscoverFragment getInstance(){
DiscoverFragment discoverFragment = new DiscoverFragment();
return discoverFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.discover_fragment_layout,null);
return view;
}
}
DiscoverFragment布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f109c6">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="discover layout"
android:id="@+id/textView"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
PersonalFragment类
public class PersonalFragment extends Fragment {
public static PersonalFragment getInstance(){
PersonalFragment personalFragment = new PersonalFragment();
return personalFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.personal_fragment_layout,null);
return view;
}
}
PersonalFragment的布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#53ba03">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="personal layout"
android:id="@+id/textView"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
fragments.add(IndexFragment.getInstance());
fragments.add(DiscoverFragment.getInstance());
fragments.add(PersonalFragment.getInstance());
MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(myViewPagerAdapter);
MyViewPagerAdapter类:
static class MyViewPagerAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> fragments;
public MyViewPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
@Override
public void onPageSelected(int position) {
radioButtons.get(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {}
RadioGroup的单击事件:
在Activity类实现事件接口:RadioGroup.OnCheckedChangeListener
初始化时调用:
private ArrayList<RadioButton> radioButtons = new ArrayList<>();
tab_group.setOnCheckedChangeListener(this);
for (int i = 0; i < tab_group.getChildCount(); i++) {
radioButtons.add((RadioButton) tab_group.getChildAt(i));
}
事件方法:
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb = (RadioButton) group.findViewById(checkedId);
int index = Integer.parseInt(rb.getTag().toString());
viewPager.setCurrentItem(index);
}
<1>Activity类的布局文件:
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.moliying.fragmentviewpagerdemo.MainActivity">
<android.support.v4.view.ViewPager
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_weight="1"
android:id="@+id/viewPager"/>
<RadioGroup
android:gravity="center"
android:id="@+id/tab_group"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/tab_bg"
android:orientation="horizontal">
<RadioButton
android:gravity="center"
android:button="@null"
android:drawableTop="@drawable/tab_home_selector_bg"
android:textColor="@drawable/tab_selector_bg"
android:layout_weight="1"
android:tag="0"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="主页"/>
<RadioButton
android:gravity="center"
android:button="@null"
android:drawableTop="@drawable/tab_discover_selector_bg"
android:textColor="@drawable/tab_selector_bg"
android:layout_weight="1"
android:tag="1"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="发现"/>
<RadioButton
android:gravity="center"
android:button="@null"
android:drawableTop="@drawable/tab_personal_selector_bg"
android:textColor="@drawable/tab_selector_bg"
android:layout_weight="1"
android:tag="2"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:text="我"/>
</RadioGroup>
</LinearLayout>
<2>创建三个Fragment及其布局文件
IndexFragment类:
public class IndexFragment extends Fragment {
public static IndexFragment getInstance(){
IndexFragment indexFragment = new IndexFragment();
return indexFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.index_fragment_layout,null);
return view;
}
}
IndexFragment对应的布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#ff5b5b">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="index layout"
android:id="@+id/textView"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
DiscoverFragment类
public class DiscoverFragment extends Fragment {
public static DiscoverFragment getInstance(){
DiscoverFragment discoverFragment = new DiscoverFragment();
return discoverFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.discover_fragment_layout,null);
return view;
}
}
DiscoverFragment布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#f109c6">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="discover layout"
android:id="@+id/textView"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
PersonalFragment类
public class PersonalFragment extends Fragment {
public static PersonalFragment getInstance(){
PersonalFragment personalFragment = new PersonalFragment();
return personalFragment;
}
@Nullable
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.personal_fragment_layout,null);
return view;
}
}
PersonalFragment的布局文件:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#53ba03">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="personal layout"
android:id="@+id/textView"
android:layout_gravity="center_horizontal"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>
<3>在Activity中初始化Fragment
private ArrayList<Fragment> fragments = new ArrayList<>();fragments.add(IndexFragment.getInstance());
fragments.add(DiscoverFragment.getInstance());
fragments.add(PersonalFragment.getInstance());
<4>初始化ViewPager组件,及适配器
viewPager = (ViewPager) findViewById(R.id.viewPager);MyViewPagerAdapter myViewPagerAdapter = new MyViewPagerAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(myViewPagerAdapter);
MyViewPagerAdapter类:
static class MyViewPagerAdapter extends FragmentPagerAdapter {
private ArrayList<Fragment> fragments;
public MyViewPagerAdapter(FragmentManager fm, ArrayList<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return fragments.size();
}
}
<5>viewPager的事件处理及RadioGroup的单击事件
viewPager事件处理:在Activity类实现事件接口:ViewPager.OnPageChangeListenerpublic void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {}
@Override
public void onPageSelected(int position) {
radioButtons.get(position).setChecked(true);
}
@Override
public void onPageScrollStateChanged(int state) {}
RadioGroup的单击事件:
在Activity类实现事件接口:RadioGroup.OnCheckedChangeListener
初始化时调用:
private ArrayList<RadioButton> radioButtons = new ArrayList<>();
tab_group.setOnCheckedChangeListener(this);
for (int i = 0; i < tab_group.getChildCount(); i++) {
radioButtons.add((RadioButton) tab_group.getChildAt(i));
}
事件方法:
public void onCheckedChanged(RadioGroup group, int checkedId) {
RadioButton rb = (RadioButton) group.findViewById(checkedId);
int index = Integer.parseInt(rb.getTag().toString());
viewPager.setCurrentItem(index);
}