Android(安卓)ViewPager+Fragment滑动选项卡,tab点击选项卡
16lz
2021-01-25
有一段时间一直再研究这个,自Android 3.0以后,很少开发者再用以前的TabWidget控件了。那种效果不是很好,也不能滑动。后来陆续出现了各种各样滑动选项卡,每种的出现都各有优势吧。但我还是推荐ViewPager+Fragment滑动选项卡,tab点击选项卡。因为横屏或者竖屏效果都还不错,针对这种效果,还有一种开源框架的出现。接下来会有所介绍。
转载请注明出处:http://blog.csdn.net/qq_16064871
本文demo下载:请点击
一、ViewPagerActivity
这里面主要有ViewPager页面选项卡,以及ActionBar.Tab页面标签。要进行同步变化以及选择。ViewPager选项卡可以滑动,里面装载是Fragment。Fragment也是有自已的布局的以及生命周期。接下来看代码以及注释。
package com.example.viewpagerfragmentdemo;import java.util.ArrayList;import android.os.Build;import android.os.Bundle;import android.annotation.SuppressLint;import android.annotation.TargetApi;import android.app.ActionBar;import android.app.ActionBar.Tab;import android.app.ActionBar.TabListener;import android.app.FragmentTransaction;import android.support.v4.app.Fragment;import android.support.v4.app.FragmentActivity;import android.support.v4.app.FragmentManager;import android.support.v4.app.FragmentPagerAdapter;import android.support.v4.view.ViewPager;import android.support.v4.view.ViewPager.OnPageChangeListener;import android.view.View;import android.view.ViewGroup;@SuppressLint("NewApi")public class ViewPagerActivity extends FragmentActivity implementsOnPageChangeListener, TabListener {private ViewPager mPager;private ArrayList mfragmentList;// 标题列表ArrayList titleList = new ArrayList();@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_view_pager);initViewPager();}@TargetApi(Build.VERSION_CODES.HONEYCOMB)private void initViewPager() {mPager = (ViewPager) findViewById(R.id.viewpager);mfragmentList = new ArrayList();mfragmentList.add(new FragmentTest1());mfragmentList.add(new FragmentTest2());mfragmentList.add(new FragmentTest3());mPager.setAdapter(new MyViewPagerAdapter(getSupportFragmentManager(),mfragmentList));mPager.setCurrentItem(0); mPager.setOnPageChangeListener(this);getActionBar().setNavigationMode(ActionBar.NAVIGATION_MODE_TABS);getActionBar().setBackgroundDrawable(getResources().getDrawable(R.drawable.title_bar_shape));// 初始化TAB属性String[] tabName = null;String[] temTabName = { "第一页 ", "第二页", "第三页 " };tabName = temTabName;for (int i = 0; i < tabName.length; i++) {ActionBar.Tab tab = getActionBar().newTab();tab.setText(tabName[i]);tab.setTabListener(this);tab.setTag(i);getActionBar().addTab(tab);}}//三个页面选项卡Fragment适配器public class MyViewPagerAdapter extends FragmentPagerAdapter {ArrayList list;public MyViewPagerAdapter(FragmentManager fManager,ArrayList arrayList) {super(fManager);this.list = arrayList;}@Overridepublic int getCount() {return list == null ? 0 : list.size();}@Overridepublic Fragment getItem(int arg0) {return list.get(arg0);}@Overridepublic int getItemPosition(Object object) {return POSITION_NONE;}@Overridepublic boolean isViewFromObject(View view, Object obj) {return view == ((Fragment) obj).getView();}@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {}}@Overridepublic void onPageScrollStateChanged(int arg0) {// TODO Auto-generated method stub}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {// TODO Auto-generated method stub}@Overridepublic void onPageSelected(int arg0) {//滑动ViewPager的时候设置相对应的ActionBar Tab被选中 getActionBar().getTabAt(arg0).select();}@Overridepublic void onTabReselected(Tab arg0, FragmentTransaction arg1) {// TODO Auto-generated method stub}@Overridepublic void onTabSelected(Tab tab, FragmentTransaction arg1) {if (tab.getTag() == null)return;//选中tab,滑动选项卡int index = ((Integer) tab.getTag()).intValue();if (mPager != null && mPager.getChildCount() > 0&& mfragmentList.size() > index)mPager.setCurrentItem(index);}@Overridepublic void onTabUnselected(Tab arg0, FragmentTransaction arg1) {// TODO Auto-generated method stub}}
二、activity_view_pager布局 <?xml version="1.0" encoding="utf-8"?>
三、FragmentTest1 过程中使用到的FragmentTest1都是继承Fragment。这个类的生命周期跟activity很相似,是跟随着activity生命周期,activity消失,Fragment也会消失。
package com.example.viewpagerfragmentdemo;import android.os.Bundle;import android.support.v4.app.Fragment;import android.view.LayoutInflater;import android.view.View;import android.view.ViewGroup;public class FragmentTest1 extends Fragment{@Overridepublic View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment1, container, false);//关联布局文件return rootView;}@Overridepublic void onDestroy() {super.onDestroy();}@Overridepublic void onPause() {super.onPause();}@Overridepublic void onResume() {super.onResume();}@Overridepublic void onStart() {super.onStart();}@Overridepublic void onStop() {super.onStop();}}
四、效果图 竖屏
横屏
在这里第一张图可以看到tab标题栏是黑色,是系统自带的颜色,那要怎样修改呢?看这张图片以及xml
上图中红色箭头指向的,代码如下。
五、修改后效果图 在这里我只是简单提供了修改tab颜色方法,具体修改还是要设计整个app设计,主题样式问题。具体需要怎样的效果,各位有需要可以去尝试。
其实,为了更好的效果,出现了标题栏开源框架使用。可以看这篇博客:Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端
转载请注明出处:http://blog.csdn.net/qq_16064871
本文demo下载:请点击
更多相关文章
- Android开发问题之布局(layout)文件图形界面不能显示
- Android(安卓)毛玻璃效果实现(Glide)
- 一个大型新闻app的骨架(android)
- Android(安卓)Service生命周期及用法!
- Android(安卓)ListView中复杂数据流的高效渲染
- Android(安卓)系统状态栏一体化实现
- Android(安卓)gallery 3D效果
- android 的Java代码中的布局相关方法LayoutParams
- Android(安卓)在java代码中使用selector设置setTextColor无效