Android 滚动Tab
- - CSDN博客推荐文章如果对效果感兴趣, 请耐心看完, 其实不复杂.. 需要android-support-v4.jar的支持.. 主布局文件activity_main.xml. 主Activity, 核心是给mViewPager设置一个Adapter--mFragmentAdapter. 接下来看看FragmentAdapter如何实现的..
先看效果:
如果对效果感兴趣, 请耐心看完, 其实不复杂.
需要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 = "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了.