页面切换的3种实现
来源：互联网 发布：js 删除预览图片 编辑：程序博客网 时间：2024/06/02 02:10
页面切换的实现
这里要实现页面切换的三种方式:
方法一: 首页等ViewPager(配合Fragment或View) + LinearLayout(配合TextView)框架搭建;
方法二: ViewPagerIndicator 或使用 PagerSlidingTab实现;
方法三: 用Fragment + frameLayout;
方式一:主要是思路,先看布局吧:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="match_parent"> <!-- <ui.PagerSlidingTab//方式三:自定义的Tab类,后边有介绍 android:id="@+id/pager_tab" android:layout_width="match_parent" android:layout_height="45dp" android:background="@drawable/selector_color" app:dividerColor="#00000000" app:shouldExpand="true" app:indicatorColor="#40AA53"/>--> <com.viewpagerindicator.TitlePageIndicator //方式三:页面切换---页面上边Tab控制 android:id="@+id/pager_tab" android:padding="10dip" android:layout_height="45dp" android:layout_width="fill_parent" android:background="#18FF0000" android:textColor="#AA000000" app:footerColor="#FFAA2222" app:footerLineHeight="1dp" app:footerIndicatorHeight="3dp" app:footerIndicatorStyle="underline" app:selectedColor="#FF000000" app:selectedBold="true" /> <android.support.v4.view.ViewPager//方式一:页面切换---页面下边TextView控制 android:id="@+id/vp" android:layout_above="@+id/view" android:layout_below="@+id/pager_tab" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/green" /> <View android:id="@+id/view" android:layout_width="match_parent" android:layout_height="0.5dp" android:background="@android:color/darker_gray" android:layout_above="@+id/ll" /> <LinearLayout android:id="@+id/ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:background="@android:color/background_light" android:orientation="horizontal"> <TextView android:id="@+id/tv1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw" android:text="dddddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> <TextView android:id="@+id/tv2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw2" android:text="ddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> <TextView android:id="@+id/tv3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw3" android:text="ddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> <TextView android:id="@+id/tv4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw4" android:text="ddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> </LinearLayout></RelativeLayout>这里我直接采用两种方式控制页面切换,因为布局都差不多,所以我偷下懒就采用一个啦!Activity中代码,重要的代码已经标出:
public class ViewPagerFragPagerIndicatorActivity extends BaseActivity implements View.OnClickListener, ViewPager.OnPageChangeListener { private TextView tv1; private TextView tv2; private TextView tv3; private TextView tv4; private ViewPager viewPager; private List<View> viewsList; private List<Fragment> fragmentsList; private PagerSlidingTab pager_tab; private ArrayList<String> pagerTabs; private TabPageIndicator tabIndicator; private TitlePageIndicator titleIndicator; @Override protected void initView() { tv1 = (TextView) findViewById(R.id.tv1); tv2 = (TextView) findViewById(R.id.tv2); tv3 = (TextView) findViewById(R.id.tv3); tv4 = (TextView) findViewById(R.id.tv4); viewPager = (ViewPager) findViewById(R.id.vp);// pager_tab = (PagerSlidingTab) findViewById(R.id.pager_tab); // tabIndicator = (TabPageIndicator) findViewById(R.id.pager_tab); titleIndicator = (TitlePageIndicator) findViewById(R.id.pager_tab); viewPager.addOnPageChangeListener(this); tv1.setOnClickListener(this); tv2.setOnClickListener(this); tv3.setOnClickListener(this); tv4.setOnClickListener(this); viewPager.setPageTransformer(false, new ViewPager.PageTransformer() { @Override public void transformPage(View page, float position) { //执行pager切换动画 ObjectAnimator.ofFloat(page, "scaleX", 1,0.3f,2,1).setDuration(1222).start(); } }); } @Override protected void initData() { preparData(); tv1.setSelected(true); viewPager.setCurrentItem(0); viewPager.setAdapter(getAdapter(1));// pager_tab.setViewPager(viewPager);// pager_tab.setSmoothScrollingEnabled(true);// tabIndicator.setViewPager(viewPager);// tabIndicator.setCurrentItem(0); titleIndicator.setViewPager(viewPager);//indicator有关设置一 } private void preparData() { viewsList = new ArrayList<View>(); //用于ViewPager fragmentsList = new ArrayList<Fragment>(); //用于FragmentViewPager pagerTabs = new ArrayList<>(); for (int i = 0; i < 4; i++) { //这里必须要创建新的view,这样在后来Adapter中填充时,view的父控件才不会把这唯一的view删除没,这样才 //能显示多个view效果 View view = getLayoutInflater().from(ViewPagerFragPagerIndicatorActivity.this).inflate(R.layout.activity_second, new RelativeLayout(ViewPagerFragPagerIndicatorActivity.this)); viewsList.add(i, view); pagerTabs.add("title" + i); fragmentsList.add(new MyPagerFragment("我是被选页面: 小" + i)); } } @NonNull private PagerAdapter getAdapter(int i) { if (i == 1) { //ViewPager配合View方式 MyPagerAdapter pagerAdapter = new MyPagerAdapter(viewsList); //indicator有关设置二,其需要Adapter重写getPageTitle(int position)方法给indicator的title pagerAdapter.setPageTitle(pagerTabs); return pagerAdapter; } else if (i == 2) { //ViewPager配合Fragment方式 MyFragmentPagerAdapter pagerAdapter = new MyFragmentPagerAdapter(getSupportFragmentManager(), fragmentsList); pagerAdapter.setPageTitle(pagerTabs); return pagerAdapter; } return null; } @Override protected int getContentId() { return R.layout.frag_vp_indicator; } @Override public void onClick(View view) { //下边按钮点击事件监听 changePager(view.getId()); } private void changePager(int viewId) { tv1.setSelected(false); tv2.setSelected(false); tv3.setSelected(false); tv4.setSelected(false); switch (viewId) { case R.id.tv1: tv1.setSelected(true); viewPager.setCurrentItem(0, true); break; case R.id.tv2: viewPager.setCurrentItem(1, true); tv2.setSelected(true); break; case R.id.tv3: viewPager.setCurrentItem(2, true); tv3.setSelected(true); break; case R.id.tv4: viewPager.setCurrentItem(3, true); tv4.setSelected(true); break; } } @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { //ViewPager页面滑动监听 int tv = R.id.tv1; switch (position) { case 1: tv = R.id.tv2; break; case 2: tv = R.id.tv3; break; case 3: tv = R.id.tv4; break; } changePager(tv); } @Override public void onPageScrollStateChanged(int state) { }}TitlePageIndicator只有两处重要设置,一个是titlePageIndicator.setViewPager(viewPager);另一个是ViewPager的Adapter中需要重写getPageTitle()方法,好让TitlePageIndicator去调用,基本使用设置仅此而已;MyPagerAdapter中代码:
/** * (View)PagerAdapter:使用的时,要求填充View集合,而FragmentPagerAdapter使用时, * 要求填充的是Fragment集合,这点需要注意; */public class MyPagerAdapter extends PagerAdapter { public List<View> viewList; private List<String> titlesList; public MyPagerAdapter(List<View> viewList) { this.viewList = viewList; if (viewList == null) { viewList = new ArrayList<>(); } } @Override public int getCount() { return viewList.size(); } @Override public boolean isViewFromObject(View view, Object object) { return view == object; } @Override public Object instantiateItem(ViewGroup container, int position) { View view = viewList.get(position); if (view.getParent() !=null) { //去除view的父布局 ViewGroup parent = (ViewGroup) view.getParent(); parent.removeView(view); } container.addView(view); return view; } @Override public CharSequence getPageTitle(int position) { return titlesList.get(position); } public void setPageTitle(List<String> titlesList){ this.titlesList = titlesList; } @Override public void destroyItem(ViewGroup container, int position, Object object) {// container.removeView((View) object); //已经remove过了,这里就不要再次remove了, //但这个方法必须重写,否则报错 }}MyFragmentPagerAdapter中代码:
/** * (View)PagerAdapter:使用的时,要求填充View集合,而FragmentPagerAdapter使用时,要求填充的 * 是Fragment集合,这点需要注意; */public class MyFragmentPagerAdapter extends FragmentPagerAdapter { private List<Fragment> fragmentsList; private List<String> titlesList; public MyFragmentPagerAdapter(FragmentManager fm, List<Fragment> fragmentsList) { super(fm); this.fragmentsList = fragmentsList; } @Override public Fragment getItem(int position) { Fragment fragment = fragmentsList.get(position);// ((MyPagerFragment)fragment).initData(); //延后型数据加载模式,能节省流量 return fragment; } @Override public int getCount() { return fragmentsList.size(); } @Override public CharSequence getPageTitle(int position) { return titlesList.get(position); } public void setPageTitle(List<String> titlesList){ this.titlesList = titlesList; }}方法三:用Fragment(切换) + frameLayout,先看布局:
<?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <FrameLayout//此处替换ViewPager android:id="@+id/replace" android:background="@android:color/holo_blue_dark" android:layout_weight="1" android:layout_width="match_parent" android:layout_height="match_parent"/> <LinearLayout android:id="@+id/ll" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@android:color/background_light" android:orientation="horizontal"> <TextView android:id="@+id/tv1" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw" android:text="dddddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> <TextView android:id="@+id/tv2" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw2" android:text="ddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> <TextView android:id="@+id/tv3" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw3" android:text="ddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> <TextView android:id="@+id/tv4" android:layout_width="0dp" android:layout_height="wrap_content" android:layout_weight="1" android:drawableTop="@drawable/selector_draw4" android:text="ddd" android:gravity="center" android:textColor="@color/selector_tv" android:textSize="14sp" /> </LinearLayout></LinearLayout>Activity中代码:
public class FramFragSlidTabActivity extends BaseActivity { @Bind(R.id.replace) FrameLayout frameLayout; @Bind(R.id.tv1) TextView tv1; @Bind(R.id.tv2) TextView tv2; @Bind(R.id.tv3) TextView tv3; @Bind(R.id.tv4) TextView tv4; @Bind(R.id.ll) LinearLayout ll; FragmentManager fragmentManager; private MyPagerFragment fragment; private android.support.v4.app.FragmentTransaction fragmentTransaction; private List<MyPagerFragment> fragmentsList; private Fragment currentFragment; @Override protected void initView() { } @Override protected void initData() { tv1.setSelected(true);//这里要求Activity要用FragmentActivity子类this.fragmentManager = getSupportFragmentManager(); fragmentTransaction = fragmentManager.beginTransaction(); fragmentsList = new ArrayList<>(); for (int i = 0;i < 4;i++) { fragment = new MyPagerFragment("我是被选页面: 小 "+ i); fragmentsList.add(fragment); //初始化数据时就需要把全部页面都add进去,并使之都隐藏hide,然后进行单一的显示出来 fragmentTransaction.add(R.id.replace, fragment, "tag" + i) //默认显示最后add的Fragment .hide(fragment) .addToBackStack("backStack" + i); //添加到返回队列中 } currentFragment = fragmentsList.get(0); fragmentTransaction.show(fragmentsList.get(0)); fragmentTransaction.commitAllowingStateLoss(); } @Override protected int getContentId() { return R.layout.frag_fram; } @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); ButterKnife.bind(this); } @OnClick({R.id.tv1, R.id.tv2, R.id.tv3, R.id.tv4}) public void onClick(View view) { switch (view.getId()) { case R.id.tv1: switchPager(0); break; case R.id.tv2: switchPager(1); break; case R.id.tv3: switchPager(2); break; case R.id.tv4: switchPager(3); break; } } private void switchPager(int i) { tv1.setSelected(false); tv2.setSelected(false); tv3.setSelected(false); tv4.setSelected(false); fragmentTransaction = fragmentManager.beginTransaction(); //每次页面切换都需要重新创建(开启)//事务,并且最后需要再次提交事务 fragmentTransaction.hide(currentFragment); switch(i) { case 0 : tv1.setSelected(true); break; case 1 : tv2.setSelected(true); break; case 2 : tv3.setSelected(true); break; case 3 : tv4.setSelected(true); break; } fragmentTransaction.show(fragmentsList.get(i)); currentFragment = fragmentsList.get(i); fragmentTransaction.commitAllowingStateLoss(); //最后需要提交事务,且每个事务都只能被提交一次 }}代码中重要地方都已注释,使用的时候注意下就可以啦!
相关文档: Fragment详解之管理Fragment
0 0
- 页面切换的3种实现
- iOS： SegmentControl 实现页面切换的四种方法
- iOS： SegmentControl 实现页面切换的四种方法
- iOS： SegmentControl 实现页面切换的四种方法
- 自动切换的viewpager,实现广告页面的持续切换
- 页面图片flash切换的实现
- iphone-实现页面的切换和修改
- Silverlight For WinEmbedded 的页面切换实现
- Android页面的切换动画代码实现
- jquerymobile的页面滑动切换效果实现
- ViewFlipper实现ViewPager的页面切换效果
- 利用viewpager实现页面的滑动切换
- RadioGroup+Fragment实现页面之间的切换
- react-native 页面切换的实现
- Fragment更容易实现页面的切换
- RadioGroup+Fragment实现页面之间的切换
- ViewPager和 Fragment 实现的页面切换
- ViewPager结合Fragment 实现的页面切换
- Task
- 通过Spring Mail Api发送邮件
- 1049. Counting Ones (30)
- Leetcode 83. Remove Duplicates from Sorted List
- clang源码——CompilerInstance和Preprocessor（二）
- 页面切换的3种实现
- 【CG物理模拟系列】开篇：介绍（下）
- linux 计划任务crontab，定时打开一个图形界面
- cf448C
- IE主页被恶意软件劫持,360卫士无法修改
- SpringMVC HelloWorld实例开发及部署
- 寻找素数
- 回文数字
- [BZOJ3519][Zjoi2014][模拟]消棋子
