ViewPagerを使用してTabの効果を実現
29561 ワード
プログラムの実行後に実現する効果は、次の図のようになります.
実装コードについて詳しく説明します.
1、レイアウト実現
1)上のレイアウトは簡単でtopと名付けられている.xml、コードは次のとおりです.
2)下辺のレイアウトは,それぞれ4つの垂直分布のLinearLayoutで構成され,各LinearLayoutはImageButtonとTextViewで構成され,bottomと命名されている.xml、コードは以下の通りです:(中間のコードは省略されています)
View Code
3)全体のレイアウトを実現する:
View Code
2、Viewpagerを使ってTab類似の効果を実現する:
View Code
寄り添って歩まず、千里もなく、小流も積もらず、江海になることはない.
実装コードについて詳しく説明します.
1、レイアウト実現
1)上のレイアウトは簡単でtopと名付けられている.xml、コードは次のとおりです.
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 android:layout_width="fill_parent"
3 android:layout_height="45dp"
4 android:background="#000000"
5 android:gravity="center"
6 android:orientation="vertical" >
7
8 <TextView
9 android:layout_width="wrap_content"
10 android:layout_height="45dp"
11 android:layout_gravity="center"
12 android:text=" "
13 android:textColor="#FFFFFF"
14 android:textSize="30sp"
15 android:textStyle="bold" />
16
17 </LinearLayout>2)下辺のレイアウトは,それぞれ4つの垂直分布のLinearLayoutで構成され,各LinearLayoutはImageButtonとTextViewで構成され,bottomと命名されている.xml、コードは以下の通りです:(中間のコードは省略されています)
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 android:layout_width="fill_parent"
3 android:layout_height="wrap_content"
4 android:background="#FFFFFF"
5 android:gravity="center"
6 android:orientation="horizontal" >
7
8 <LinearLayout
9 android:id="@+id/tab_weixin"
10 android:layout_width="0dp"
11 android:layout_height="wrap_content"
12 android:layout_weight="1"
13 android:gravity="center"
14 android:orientation="vertical" >
15
16 <ImageButton
17 android:id="@+id/weixin_img"
18 android:layout_width="wrap_content"
19 android:layout_height="wrap_content"
20 android:clickable="false"
21 android:src="@drawable/yesb" />
22
23 <TextView
24 android:layout_width="wrap_content"
25 android:layout_height="wrap_content"
26 android:text=" "
27 android:textColor="#000000" />
28 </LinearLayout>
29 .
30 .
31 .
32 <LinearLayout
33 android:id="@+id/tab_setting"
34 android:layout_width="0dp"
35 android:layout_height="wrap_content"
36 android:layout_weight="1"
37 android:gravity="center"
38 android:orientation="vertical" >
39
40 <ImageButton
41 android:id="@+id/setting_img"
42 android:layout_width="wrap_content"
43 android:layout_height="wrap_content"
44 android:clickable="false"
45 android:src="@drawable/jibla" />
46
47 <TextView
48 android:layout_width="wrap_content"
49 android:layout_height="wrap_content"
50 android:text=" "
51 android:textColor="#000000" />
52 </LinearLayout>
53
54 </LinearLayout> View Code
3)全体のレイアウトを実現する:
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
2 xmlns:tools="http://schemas.android.com/tools"
3 android:id="@+id/container"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6 android:orientation="vertical" >
7
8 <include layout="@layout/top" />
9
10 <android.support.v4.view.ViewPager
11 android:id="@+id/viewpager"
12 android:layout_width="wrap_content"
13 android:layout_height="0dp"
14 android:layout_weight="1" >
15 </android.support.v4.view.ViewPager>
16
17 <include layout="@layout/bottom" />
18
19 </LinearLayout>View Code
2、Viewpagerを使ってTab類似の効果を実現する:
1 @Override
2 protected void onCreate(Bundle savedInstanceState) {
3 super.onCreate(savedInstanceState);
4 requestWindowFeature(Window.FEATURE_NO_TITLE);// setContentView
5 setContentView(R.layout.activity_main);
6 initView();
7 ininEvents();
8 }
9
10 private void ininEvents() {
11 // TODO Auto-generated method stub
12 tab_weixin.setOnClickListener(this);
13 tab_friend.setOnClickListener(this);
14 tab_contact.setOnClickListener(this);
15 tab_setting.setOnClickListener(this);
16 // viewpager ， viewpager ，
17 viewpager.setOnPageChangeListener(new OnPageChangeListener() {
18
19 @Override
20 public void onPageSelected(int arg0) {
21 // TODO Auto-generated method stub
22 int currentItem = viewpager.getCurrentItem();
23 resetImg();
24 switch (currentItem) {
25 case 0:
26 weixin.setImageResource(R.drawable.yesr);
27 break;
28 case 1:
29 friend.setImageResource(R.drawable.jib);
30 break;
31
32 case 2:
33 contact.setImageResource(R.drawable.yesr);
34 break;
35
36 case 3:
37 setting.setImageResource(R.drawable.jib);
38 break;
39
40 default:
41 break;
42 }
43 }
44
45 @Override
46 public void onPageScrolled(int arg0, float arg1, int arg2) {
47 // TODO Auto-generated method stub
48
49 }
50
51 @Override
52 public void onPageScrollStateChanged(int arg0) {
53 // TODO Auto-generated method stub
54
55 }
56 });
57 }
58
59 private void initView() {
60 // TODO Auto-generated method stub
61 viewpager = (ViewPager) findViewById(R.id.viewpager);
62 weixin = (ImageButton) findViewById(R.id.weixin_img);
63 friend = (ImageButton) findViewById(R.id.friend_img);
64 contact = (ImageButton) findViewById(R.id.contact_img);
65 setting = (ImageButton) findViewById(R.id.setting_img);
66
67 tab_weixin = (LinearLayout) findViewById(R.id.tab_weixin);
68 tab_friend = (LinearLayout) findViewById(R.id.tab_friend);
69 tab_contact = (LinearLayout) findViewById(R.id.tab_contact);
70 tab_setting = (LinearLayout) findViewById(R.id.tab_setting);
71
72 // View
73 LayoutInflater inflater = LayoutInflater.from(this);
74 View view1 = inflater.inflate(R.layout.tab_01, null);
75 View view2 = inflater.inflate(R.layout.tab_02, null);
76 View view3 = inflater.inflate(R.layout.tab_03, null);
77 View view4 = inflater.inflate(R.layout.tab_04, null);
78 mViews.add(view1);
79 mViews.add(view2);
80 mViews.add(view3);
81 mViews.add(view4);
82
83 // PagerAdapter
84 adapter = new PagerAdapter() {
85
86 // PagerAdapter
87 @Override
88 public void destroyItem(ViewGroup container, int position,
89 Object object) {
90 // TODO Auto-generated method stub
91 container.removeView(mViews.get(position));
92 }
93
94 // Item
95 @Override
96 public Object instantiateItem(ViewGroup container, int position) {
97 // TODO Auto-generated method stub
98 View view = mViews.get(position);
99 container.addView(view);
100 return view;
101 }
102
103 // PagerAdapter
104 @Override
105 public int getCount() {
106 // TODO Auto-generated method stub
107 return mViews.size();
108 }
109
110 @Override
111 public boolean isViewFromObject(View arg0, Object arg1) {
112 // TODO Auto-generated method stub
113 return arg0 == arg1;
114 }
115
116 };
117 viewpager.setAdapter(adapter);
118 }
119
120 @Override
121 public void onClick(View arg0) {
122 // TODO Auto-generated method stub
123 resetImg();
124 switch (arg0.getId()) {
125 case R.id.tab_weixin:
126 weixin.setImageResource(R.drawable.yesr);
127 viewpager.setCurrentItem(0);
128 break;
129 case R.id.tab_friend:
130 friend.setImageResource(R.drawable.jib);
131 viewpager.setCurrentItem(1);
132 break;
133 case R.id.tab_contact:
134 contact.setImageResource(R.drawable.yesr);
135 viewpager.setCurrentItem(2);
136 break;
137 case R.id.tab_setting:
138 setting.setImageResource(R.drawable.jib);
139 viewpager.setCurrentItem(3);
140 break;
141
142 default:
143 break;
144 }
145 }
146
147 /**
148 *
149 */
150 private void resetImg() {
151 // TODO Auto-generated method stub
152 weixin.setImageResource(R.drawable.yesb);
153 friend.setImageResource(R.drawable.jibla);
154 contact.setImageResource(R.drawable.yesb);
155 setting.setImageResource(R.drawable.jibla);
156
157 }
158 }View Code
寄り添って歩まず、千里もなく、小流も積もらず、江海になることはない.