有一段时间一直再研究这个,自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 implements OnPageChangeListener, TabListener { private ViewPager mPager; private ArrayList<Fragment> mfragmentList; // 标题列表 ArrayList<String> titleList = new ArrayList<String>(); @Override protected 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<Fragment>(); 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<Fragment> list; public MyViewPagerAdapter(FragmentManager fManager, ArrayList<Fragment> arrayList) { super(fManager); this.list = arrayList; } @Override public int getCount() { return list == null ? 0 : list.size(); } @Override public Fragment getItem(int arg0) { return list.get(arg0); } @Override public int getItemPosition(Object object) { return POSITION_NONE; } @Override public boolean isViewFromObject(View view, Object obj) { return view == ((Fragment) obj).getView(); } @Override public void destroyItem(ViewGroup container, int position, Object object) { } } @Override public void onPageScrollStateChanged(int arg0) { // TODO Auto-generated method stub } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int arg0) { //滑动ViewPager的时候设置相对应的ActionBar Tab被选中 getActionBar().getTabAt(arg0).select(); } @Override public void onTabReselected(Tab arg0, FragmentTransaction arg1) { // TODO Auto-generated method stub } @Override public 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); } @Override public void onTabUnselected(Tab arg0, FragmentTransaction arg1) { // TODO Auto-generated method stub } }
二、activity_view_pager布局
<?xml version="1.0" encoding="utf-8"?> <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" > <android.support.v4.view.ViewPager android:id="@+id/viewpager" android:layout_width="fill_parent" android:layout_height="fill_parent" android:flipInterval="30" android:persistentDrawingCache="animation" /> </LinearLayout>
三、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{ @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment1, container, false);//关联布局文件 return rootView; } @Override public void onDestroy() { super.onDestroy(); } @Override public void onPause() { super.onPause(); } @Override public void onResume() { super.onResume(); } @Override public void onStart() { super.onStart(); } @Override public void onStop() { super.onStop(); } }
四、效果图
竖屏
横屏
在这里第一张图可以看到tab标题栏是黑色,是系统自带的颜色,那要怎样修改呢?看这张图片以及xml
上图中红色箭头指向的,代码如下。
<resources> <!-- Base application theme for API 14+. This theme completely replaces AppBaseTheme from BOTH res/values/styles.xml and res/values-v11/styles.xml on API 14+ devices. --> <style name="AppBaseTheme" parent="android:Theme.Holo.Light.DarkActionBar"> <!-- 默认是黑色的,这里设置tab的颜色 --> <item name="android:background">#ff1ea8e8</item> </style> </resources>
五、修改后效果图
在这里我只是简单提供了修改tab颜色方法,具体修改还是要设计整个app设计,主题样式问题。具体需要怎样的效果,各位有需要可以去尝试。
其实,为了更好的效果,出现了标题栏开源框架使用。可以看这篇博客:Android
开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端
转载请注明出处:http://blog.csdn.net/qq_16064871
本文demo下载:请点击