安卓开发_慕课网_ViewPager实现Tab(App主界面)

学习内容来自“慕课网”

网站上一共有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

这里有个需要注意的地方，就是ImageButton 他有一个属性android:clickable="false"

注意点在于为LinearLayout设置监听器的时候，会出现点击文字能响应监听事件，而点击图片不会响应的情况，问题在于LinearLayout会把监听事件先交给ImageButton，因为它是可以点击的，而ImageButton中未实现监听器，所以不能响应。解决方法就是设置它不能被点击。在XML文件中，添加android:clickable="false"，就可以。

（大家可以试试没有这行属性的情况下，点击图片是否有响应）

还有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

效果图：

安卓开发_慕课网_ViewPager实现Tab(App主界面)

秒客网

安卓开发_慕课网_ViewPager实现Tab(App主界面)

相关文章