标签:android android应用 布局 fragment viewpager
最上面是一个导航栏,分别有三个textview构成,然后再textview下面设置一个标签卡最下面是使用Android.support.v4.view.viewpager构成
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
<?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:orientation= "vertical" > <LinearLayout android:layout_width= "match_parent" android:layout_height= "wrap_content" android:orientation= "horizontal" > <TextView android:id= "@+id/tv_guid1" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_weight= "1.0" android:gravity= "center" android:text= "特性1" android:textSize= "18sp" /> <TextView android:id= "@+id/tv_guid2" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_weight= "1.0" android:gravity= "center" android:text= "特性2" android:textSize= "18sp" /> <TextView android:id= "@+id/tv_guid3" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_weight= "1.0" android:gravity= "center" android:text= "特性3
" android:textSize= "18sp" /> <TextView android:id= "@+id/tv_guid4" android:layout_width= "wrap_content" android:layout_height= "wrap_content" android:layout_weight= "1.0" android:gravity= "center" android:text= "特性4" android:textSize= "18sp" /> </LinearLayout> <TextView android:id= "@+id/cursor" android:layout_width= "80dp" android:layout_height= "5dp" android:background= "#990033" /> <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> |
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
|
public class MainActivity extends FragmentActivity{ private ViewPager
mPager; private ArrayList<Fragment>
fragmentList; private TextView
barText; private TextView
view1, view2, view3, view4; private int currIndex; //当前页卡编号 protected void onCreate(Bundle
savedInstanceState) { super .onCreate(savedInstanceState); setContentView(R.layout.main); InitTextView(); InitTextBar(); InitViewPager(); } //
初始化标签名 public void InitTextView(){ view1
= (TextView)findViewById(R.id.tv_guid1); view2
= (TextView)findViewById(R.id.tv_guid2); view3
= (TextView)findViewById(R.id.tv_guid3); view4
= (TextView)findViewById(R.id.tv_guid4); view1.setOnClickListener( new txListener( 0 )); view2.setOnClickListener( new txListener( 1 )); view3.setOnClickListener( new txListener( 2 )); view4.setOnClickListener( new txListener( 3 )); } public class txListener implements View.OnClickListener{ private int index= 0 ; public txListener( int i)
{ index
=i; } @Override public void onClick(View
v) { mPager.setCurrentItem(index); } } //
初始化标签卡的位移像素 public void InitTextBar(){ barText
= (TextView) super .findViewById(R.id.cursor); Display
display = getWindow().getWindowManager().getDefaultDisplay(); //
得到屏幕的宽度 DisplayMetrics
metrics = new DisplayMetrics(); display.getMetrics(metrics); //
1/3得到屏幕 int tabLineLength
= metrics.widthPixels / 4 ; LayoutParams
lp = (LayoutParams) barText.getLayoutParams(); lp.width
= tabLineLength; barText.setLayoutParams(lp); } //
初始化ViewPager public void InitViewPager(){ mPager
= (ViewPager)findViewById(R.id.viewpager); fragmentList
= new ArrayList<Fragment>(); Fragment
btFragment= new ButtonFragment(); Fragment
secondFragment = TestFragment.newInstance( "this
is second fragment" ); Fragment
thirdFragment = TestFragment.newInstance( "this
is third fragment" ); Fragment
fourthFragment = TestFragment.newInstance( "this
is fourth fragment" ); fragmentList.add(btFragment); fragmentList.add(secondFragment); fragmentList.add(thirdFragment); fragmentList.add(fourthFragment); //给ViewPager设置适配器 mPager.setAdapter( new MyFragmentPagerAdapter(getSupportFragmentManager(),
fragmentList)); mPager.setCurrentItem( 0 ); //设置当前显示标签页为第一页 mPager.setOnPageChangeListener( new MyOnPageChangeListener()); //页面变化时的监听器 } public class MyOnPageChangeListener implements OnPageChangeListener{ public void onPageScrolled( int arg0, float arg1, int arg2)
{ //取得该控件的实例 LinearLayout.LayoutParams
ll = (android.widget.LinearLayout.LayoutParams) barText .getLayoutParams(); if (currIndex
== arg0){ ll.leftMargin
= ( int )
(currIndex * barText.getWidth() + arg1 *
barText.getWidth()); } else if (currIndex
> arg0){ ll.leftMargin
= ( int )
(currIndex * barText.getWidth() - ( 1 -
arg1)* barText.getWidth()); } barText.setLayoutParams(ll); } public void onPageScrollStateChanged( int arg0)
{ } public void onPageSelected( int arg0)
{ currIndex
= arg0; int i
= currIndex + 1 ; Toast.makeText(MainActivity. this , "您选择了第" +i+ "个页卡" ,
Toast.LENGTH_SHORT).show(); } } } |
自定义的FragmentPagerAdapter要继承FragmentPagerAdapter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
public class MyFragmentPagerAdapter extends FragmentPagerAdapter
{ ArrayList<Fragment>
list; public MyFragmentPagerAdapter(FragmentManager
fm, ArrayList<Fragment> list) { super (fm); this .list
= list; } public int getCount()
{ return list.size(); } public Fragment
getItem( int arg0)
{ return list.get(arg0); } } |
Fragment加载布局文件实现viewpager中单个页面的内容。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
public class ButtonFragment extends Fragment
{ Button
myButton; public View
onCreateView(LayoutInflater inflater, ViewGroup container, Bundle
savedInstanceState) { View
rootView = inflater.inflate(R.layout.guide_1, container, false ); //
关联布局文件 myButton
= (Button) rootView.findViewById(R.id.mybutton); //
根据rootView找到button myButton.setOnClickListener( new View.OnClickListener()
{ public void onClick(View
v) { Toast.makeText(ButtonFragment. this .getActivity(), "button
is click!" ,
Toast.LENGTH_SHORT).show(); } }); return rootView; } } |
可滑动的顶部导航页ViewPager和Fragment的使用
标签:android android应用 布局 fragment viewpager
原文地址:http://blog.csdn.net/itwuchen/article/details/43086677