Android 滚动Tab

先看效果:

Android 滚动Tab_第1张图片

如果对效果感兴趣, 请耐心看完, 其实不复杂.

需要android-support-v4.jar的支持.

主布局文件activity_main.xml

1 2 3 4 5 6 7 < android.support.v4.view.ViewPager xmlns:android = "http://schemas.android.com/apk/res/android" xmlns:tools = "http://schemas.android.com/tools" android:id = "@+id/pager" android:layout_width = "match_parent" android:layout_height = "match_parent" tools:context = ".MainActivity" > </ android.support.v4.view.ViewPager >

主Activity, 核心是给mViewPager设置一个Adapter--mFragmentAdapter

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 public class MainActivity extends FragmentActivity { private FragmentAdapter mFragmentAdapter; private ViewPager mViewPager; @Override protected void onCreate(Bundle savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.activity_main); mFragmentAdapter = new FragmentAdapter(MainActivity. this , getSupportFragmentManager()); mViewPager = (ViewPager) findViewById(R.id.pager); mViewPager.setAdapter(mFragmentAdapter); } @Override public boolean onCreateOptionsMenu(Menu menu) { getMenuInflater().inflate(R.menu.main, menu); return true ; } }

接下来看看FragmentAdapter如何实现的.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 public class FragmentAdapter extends FragmentPagerAdapter { private Context mContext; public FragmentAdapter(Context context, FragmentManager fm) { super (fm); mContext = context; } @Override public Fragment getItem( int position) { Fragment fragment; if (position == 2 ) { fragment = new AboutMeFragment(); } else { fragment = new TabFragment(); Bundle args = new Bundle(); args.putInt(TabFragment.TAB_POSITION, position + 1 ); fragment.setArguments(args); } return fragment; } @Override public int getCount() { return 3 ; } @Override public CharSequence getPageTitle( int position) { if (position == 2 ) { return mContext.getString(R.string.about_me_title); } else { Locale l = Locale.getDefault(); return mContext.getString(R.string.tab_fragment_title, position + 1 ).toUpperCase(l); } } }

在getCount()里面设置了3个Tab页, 等position==2的时候也就是最后一个页, 我设置了一个不同于前两个页的about_me页面. 主要是表示: 可以根据需要设置不同类型的Fragment到Adapter里面. 这里两种Fragment分别是TabFragment()和AboutMeFragment()

TabFragment的布局文件只有一个TextView, 就不贴了, 直接看java文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.TextView; import com.lichen.remind.R; public class TabFragment extends Fragment { public static final String TAB_POSITION = "tab_position" ; public TabFragment() { } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_tab, container, false ); TextView tabLabel = (TextView) rootView.findViewById(R.id.tab_label); tabLabel.setText(getString(R.string.tab_fragment_content, getArguments().getInt(TAB_POSITION))); return rootView; } }

AboutMeFragment的布局文件fragment_tab.xml, 其实也一个TextView, 不过使用了android:drawableTop=""属性.

1 2 3 4 5 6 7 8 9 10 11 12 <? 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" android:gravity = "center_horizontal|center_vertical" android:orientation = "vertical" > < TextView android:layout_width = "wrap_content" android:layout_height = "wrap_content" android:drawableTop = "@drawable/me" android:text = "@string/about_me_email" /> </ LinearLayout >

然后是AboutMeFragment.java

1 2 3 4 5 6 7 8 9 10 11 12 13 14 import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import com.lichen.remind.R; public class AboutMeFragment extends Fragment { @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { View rootView = inflater.inflate(R.layout.fragment_about_me,container, false ); return rootView; } }

资源文件strings.xml中, 使用了替换值得方式.

1 2 3 4 5 6 7 8 9 <? xml version = "1.0" encoding = "utf-8" ?> < resources xmlns:xliff = "urn:oasis:names:tc:xliff:document:1.2" > < string name = "app_name" >Remind</ string > < string name = "action_settings" >Settings</ string > < string name = "about_me_title" >关于我</ string > < string name = "about_me_email" >[email protected]</ string > < string name = "tab_fragment_title" >第 < xliff:g id = "tab_fragment_title_position" >%1$d</ xliff:g > 个Tab</ string > < string name = "tab_fragment_content" >这是第 < xliff:g id = "tab_fragment_content_position" >%1$d</ xliff:g > 个Tab页面</ string > </ resources >

这样就可以看到上图滚动Tab了.

作者：lc19850921 发表于2013-6-4 2:42:13 原文链接阅读：44 评论：0 查看评论

更多相关文章

随机推荐