学习内容来自“慕课网”
网站上一共有4种方法来实现APP主界面的TAB方法
这里学习第一种
ViewPager实现Tab
布局文件有7个，
主界面acitivity.layout
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 > 7 <include layout="@layout/top"/> 8 9 <android.support.v4.view.ViewPager 10 android:id="@+id/id_viewpager" 11 android:layout_width="fill_parent" 12 android:layout_height="0dp" 13 android:layout_weight="1"> 14 15 </android.support.v4.view.ViewPager> 16 17 <include layout="@layout/bottom"/> 18 </LinearLayout> 19
activity_main.xml
头部部分top.xml
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:background="@drawable/title_bar" 5 android:layout_height="45dp" 6 android:gravity="center" 7 android:orientation="vertical" > 8 <TextView 9 android:layout_height="wrap_content" 10 android:layout_width="wrap_content" 11 android:layout_gravity="center" 12 android:text="微信" 13 android:textColor="#ffffff" 14 android:textSize="20sp" 15 android:textStyle="bold" 16 17 /> 18 19 </LinearLayout>
top.xml
底部部分bottom.xml
1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 2 xmlns:tools="http://schemas.android.com/tools" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" 6 > 7 <include layout="@layout/top"/> 8 9 <android.support.v4.view.ViewPager 10 android:id="@+id/id_viewpager" 11 android:layout_width="fill_parent" 12 android:layout_height="0dp" 13 android:layout_weight="1"> 14 15 </android.support.v4.view.ViewPager> 16 17 <include layout="@layout/bottom"/> 18 </LinearLayout> 19
bottom.xml
还有4个对应功能的layout
1 <?xml version="1.0" encoding="utf-8"?> 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 android:layout_width="match_parent" 4 android:layout_height="match_parent" 5 android:orientation="vertical" > 6 7 <TextView 8 android:id="@+id/textView1" 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:layout_gravity="center_horizontal" 12 android:text="微信" 13 android:textAppearance="?android:attr/textAppearanceMedium" /> 14 15 </LinearLayout>
tab(相同的四个)
Mainactivity.java文件
1 package com.example.viewpager_tab;
2
3 import java.util.ArrayList;
4 import java.util.List;
5
6 import android.os.Bundle;
7 import android.app.Activity;
8 import android.support.v4.view.PagerAdapter;
9 import android.support.v4.view.ViewPager;
10 import android.support.v4.view.ViewPager.OnPageChangeListener;
11 import android.view.LayoutInflater;
12 import android.view.Menu;
13 import android.view.View;
14 import android.view.View.OnClickListener;
15 import android.view.ViewGroup;
16 import android.view.Window;
17 import android.widget.Gallery.LayoutParams;
18 import android.widget.ImageButton;
19 import android.widget.LinearLayout;
20
21 public class MainActivity extends Activity implements OnClickListener{
22
23 private ViewPager mViewPager;
24 private PagerAdapter mAdapter;
25 private List<View> mviews = new ArrayList<View>();
26
27 //Tab
28 private LinearLayout mTabweixin;
29 private LinearLayout mTabset;
30 private LinearLayout mTabfrd;
31 private LinearLayout mTabadd;
32
33 private ImageButton mweixin_image;
34 private ImageButton mfrd_image;
35 private ImageButton madd_image;
36 private ImageButton mset_image;
37 @Override
38 protected void onCreate(Bundle savedInstanceState) {
39 super.onCreate(savedInstanceState);
40 requestWindowFeature(Window.FEATURE_NO_TITLE);
41 setContentView(R.layout.activity_main);
42
43
44 initView(); //初始化
45
46 initEvent();//初始化事件
47
48 }
49
50 private void initEvent(){
51 mTabweixin.setOnClickListener(this);
52 mTabadd.setOnClickListener(this);
53 mTabset.setOnClickListener(this);
54 mTabfrd.setOnClickListener(this);
55
56 //设置view左右滑动的响应事件
57 mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
58
59 @Override
60 public void onPageSelected(int arg0) {
61 // TODO Auto-generated method stub
62 int currentItem = mViewPager.getCurrentItem();
63 resgmit();
64 switch (currentItem) {
65 case 0:
66 mweixin_image.setImageResource(R.drawable.tab_weixin_pressed);
67 break;
68 case 1:
69 madd_image.setImageResource(R.drawable.tab_address_pressed);
70 break;
71 case 2:
72 mfrd_image.setImageResource(R.drawable.tab_find_frd_pressed);
73 break;
74 case 3:
75 mset_image.setImageResource(R.drawable.tab_settings_pressed);
76 break;
77 default:
78 break;
79 }
80
81 }
82
83 @Override
84 public void onPageScrolled(int arg0, float arg1, int arg2) {
85 // TODO Auto-generated method stub
86
87 }
88
89 @Override
90 public void onPageScrollStateChanged(int arg0) {
91 // TODO Auto-generated method stub
92
93 }
94 });
95 }
96
97
98 private void initView(){
99 mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
100 //layout
101 mTabadd = (LinearLayout) findViewById(R.id.id_tab_add);
102 mTabfrd = (LinearLayout) findViewById(R.id.id_tab_frd);
103 mTabset = (LinearLayout) findViewById(R.id.id_tab_set);
104 mTabweixin = (LinearLayout) findViewById(R.id.id_tab_weixin);
105
106 //imagebutton
107 mweixin_image = (ImageButton) findViewById(R.id.id_tab_weixin_image);
108 madd_image = (ImageButton) findViewById(R.id.id_tab_add_image);
109 mfrd_image = (ImageButton) findViewById(R.id.id_tab_frd_image);
110 mset_image = (ImageButton) findViewById(R.id.id_tab_set_image);
111
112 LayoutInflater mInflater = LayoutInflater.from(this);
113 View tab_1 = mInflater.inflate(R.layout.tab_1, null);
114 View tab_2 = mInflater.inflate(R.layout.tab_2, null);
115 View tab_3 = mInflater.inflate(R.layout.tab_3, null);
116 View tab_4 = mInflater.inflate(R.layout.tab_4, null);
117
118 mviews.add(tab_1);
119 mviews.add(tab_2);
120 mviews.add(tab_3);
121 mviews.add(tab_4);
122
123 mAdapter = new PagerAdapter() {
124
125 @Override
126 public void destroyItem(View container, int position,
127 Object object) {
128 // TODO Auto-generated method stub
129 ((ViewPager) container).removeView(mviews.get(position));
130
131 }
132
133 @Override
134 public Object instantiateItem(View container, int position) {
135 // TODO Auto-generated method stub
136 View view = mviews.get(position);
137 ((ViewGroup) container).addView(view);
138 return view;
139 }
140
141 @Override
142 public boolean isViewFromObject(View arg0, Object arg1) {
143 // TODO Auto-generated method stub
144 return arg0 == arg1;
145 }
146
147 @Override
148 public int getCount() {
149 // TODO Auto-generated method stub
150 return mviews.size();
151 }
152 };
153
154 mViewPager.setAdapter(mAdapter);
155
156 }
157
158 @Override
159 public void onClick(View v) {
160 // TODO Auto-generated method stub
161
162 resgmit();
163
164 switch (v.getId()) {
165 case R.id.id_tab_weixin:
166 mViewPager.setCurrentItem(0);
167 mweixin_image.setImageResource(R.drawable.tab_weixin_pressed);
168 break;
169 case R.id.id_tab_add:
170 mViewPager.setCurrentItem(1);
171 madd_image.setImageResource(R.drawable.tab_address_pressed);
172 break;
173 case R.id.id_tab_frd:
174 mViewPager.setCurrentItem(2);
175 mfrd_image.setImageResource(R.drawable.tab_find_frd_pressed);
176 break;
177 case R.id.id_tab_set:
178 mViewPager.setCurrentItem(3);
179 mset_image.setImageResource(R.drawable.tab_settings_pressed);
180 break;
181
182 default:
183 break;
184 }
185
186 }
187
188 //将所有的图片切换为暗色
189 private void resgmit() {
190 // TODO Auto-generated method stub
191 mweixin_image.setImageResource(R.drawable.tab_weixin_normal);
192 madd_image.setImageResource(R.drawable.tab_address_normal);
193 mfrd_image.setImageResource(R.drawable.tab_find_frd_normal);
194 mset_image.setImageResource(R.drawable.tab_settings_normal);
195
196 }
197
198 }
MainActivity.java
效果图：
时间： 2024-08-05 00:49:31