版权声明: https://blog.csdn.net/InternetProgrammers/article/details/80824147
我们在使用手机软件的时候,经常会用到的一个功能是活动切换页面,今天我就给大家详细的介绍怎样去实现。
实现一个功能肯定要有界面,有界面肯定要有控件,下面我先来介绍用到的控件。
(一)ViewPager
ViewPager就是一个简单的页面切换组件,我们可以往里面填充多个View,然后我们可以左 右滑动,从而切换不同的View。
(二)Fragment
Fragment是Android3.0后引入的一个新的API,他出现的初衷是为了适应大屏幕的平板电脑, 当然现在他仍然是平板APP UI设计的宠儿,而且我们普通手机开发也会加入这个Fragment, 我们可以把他看成一个小型的Activity,又称Activity片段!
好了用到的控件已经说完了,在进入实战之前,先来看看效果图:
这个呢不光是可以滑动切换,同时单击上边的导航栏也可以切换到对应的页面,下面进行代码演示。
首先先来看看项目结构
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
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"
android:orientation="vertical"
tools:context="android.medal.cn.hd.MainActivity">
<android.support.design.widget.TabLayout
android:id="@+id/hd_tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
</android.support.design.widget.TabLayout>
<android.support.v4.view.ViewPager
android:id="@+id/hd_viewPager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</LinearLayout>
fragment1.xml——-fragment4.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:text="第一个页面"
android:textAlignment="center"
android:textSize="50sp" />
</LinearLayout>
因为fragment都是一样的所以不全贴出来了
MainActivity
public class MainActivity extends AppCompatActivity {
private TabLayout fragmentTabHost;
private ViewPager personViewpager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
initData();
}
protected void initView() {
fragmentTabHost = (TabLayout) findViewById(R.id.hd_tablayout);
personViewpager = (ViewPager) findViewById(R.id.hd_viewPager);
}
protected void initData() {
List<Fragment> fragments=new ArrayList<>();
fragments.add(new Fragment1());
fragments.add(new Fragment2());
fragments.add(new Fragment3());
fragments.add(new Fragment4());
MyAdapter adapter=new MyAdapter(getSupportFragmentManager(),fragments);
personViewpager.setAdapter(adapter);
fragmentTabHost.setupWithViewPager(personViewpager);
}
private class MyAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
private String[] mTabTitle={"第一个页面", "第二个页面", "第三个页面", "第四个页面"};
public MyAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments=fragments;
}
@Override
public Fragment getItem(int position) {
return fragments.get(position);
}
@Override
public int getCount() {
return 4;
}
@Nullable
@Override
public CharSequence getPageTitle(int position) {
return mTabTitle[position];
}
}
}
注意 :MyAdapter是MainActivity的一个内部类
fragment1——fragment4
public class Fragment1 extends BaseFragment{
@Override
protected void initView(View view) {
}
@Override
protected int getLayoutId() {
return R.layout.fragment1;
}
@Override
protected void initData() {
}
}
因为fragment中并没有其他控件,也没有添加其他的功能,所以fragment中没有内容。
BaseFragment
public abstract class BaseFragment extends Fragment {
protected Context mContext;
private void getBaseContext(){this.mContext=getContext();}
@Nullable
@Override
public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
View view=inflater.inflate(getLayoutId(),null);
getBaseContext();
initView(view);
return view;
}
protected abstract void initView(View view);
protected abstract int getLayoutId();
@Override
public void onActivityCreated(@Nullable Bundle savedInstanceState) {
super.onActivityCreated(savedInstanceState);
initData();
}
protected abstract void initData();
}
到这里呢,我已经将我全部的代码都帖出来了。运行一下你就可以实现上面的效果图。