先看效果:
![022236152.gif]( "Tab.gif")
如果对效果感兴趣, 请耐心看完, 其实不复杂.
需要android-support-v4.jar的支持.
主布局文件activity_main.xml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
<
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.PagerTitleStrip
android:id
=
"@+id/pager_title_strip"
android:layout_width
=
"match_parent"
android:layout_height
=
"wrap_content"
android:layout_gravity
=
"top"
android:background
=
"#33b5e5"
android:paddingBottom
=
"4dp"
android:paddingTop
=
"4dp"
android:textColor
=
"#fff"
/>
</
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"
>chain_li7@163.com</
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了.
本文转自chainli 51CTO博客，原文链接：http://blog.51cto.com/lichen/1215521，如需转载请自行联系原作者
