一、效果演示及分析
我们直接看两幅图。如下：
上两幅图实现的效果就是：
（1）手指左右滑动时，中间的布局呈现不同的效果。而且下面的按钮也会做相应的改变。
（2）我们也可以不左右滑动，直接点击下面的按钮来改变中间的布局。
这就是android开发中经常要用到的Tab效果，可以最大限度的使用屏幕资源。中间的View可以显示复杂又不同的界面效果。这里为了学习上的简洁，我每一个界面都只是实现了一个TextView效果而已，但这足以将利用ViewPager实现Tab的原理将清楚了。
我们很容易想到，上面的布局可以由线程布局来完成，上、中、下分别是三个线性布局，而下面的一个布局里面装了四个按钮而已。因此编写布局并不难，下面我们就开始书写吧。
二、准备相应的资源
我们只需要准备一些图片即可，即每一个按钮都有两种状态，暗色和亮色。简单利用PS就可以处理了。
三、开始写实际的代码
(1)首先我们把上面和下面的布局构建完成。
上面的布局就是 一个线性布局，中间放了一个TextView而已。我们起名为top.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="65dp" 5 android:background="#fffccc" 6 android:gravity="center"> 7 8 <TextView 9 android:layout_width="wrap_content" 10 android:layout_height="wrap_content" 11 android:text="Tab试验" 12 android:textSize="25dp"/> 13 14 </LinearLayout>
下面的布局采用一个总的线性布局安水平方向摆放四个布局，每一个布局里再放置相应的图片和文字。我们起名为bottum.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="wrap_content" 5 android:background="#ccffff" 6 > 7 8 <LinearLayout 9 android:id="@+id/lay_hudie" 10 android:layout_width="0dp" 11 android:layout_height="match_parent" 12 android:layout_weight="1" 13 android:orientation="vertical" 14 android:gravity="center"> 15 16 <ImageButton 17 android:id="@+id/ibtn_hudie" 18 android:layout_width="wrap_content" 19 android:layout_height="wrap_content" 20 android:clickable="false" 21 android:src="@drawable/hudie"/> 22 <TextView 23 android:layout_width="wrap_content" 24 android:layout_height="wrap_content" 25 android:text="蝴蝶"/> 26 " 27 </LinearLayout> 28 29 <LinearLayout 30 android:id="@+id/lay_set" 31 android:layout_width="0dp" 32 android:layout_height="match_parent" 33 android:layout_weight="1" 34 android:orientation="vertical" 35 android:gravity="center"> 36 37 <ImageButton 38 android:id="@+id/ibtn_set" 39 android:clickable="false" 40 android:layout_width="wrap_content" 41 android:layout_height="wrap_content" 42 android:src="@drawable/set"/> 43 <TextView 44 android:layout_width="wrap_content" 45 android:layout_height="wrap_content" 46 android:text="设置"/> 47 48 </LinearLayout> 49 <LinearLayout 50 android:id="@+id/lay_user" 51 android:layout_width="0dp" 52 android:layout_height="match_parent" 53 android:layout_weight="1" 54 android:orientation="vertical" 55 android:gravity="center"> 56 57 <ImageButton 58 android:id="@+id/ibtn_user" 59 android:clickable="false" 60 android:layout_width="wrap_content" 61 android:layout_height="wrap_content" 62 android:src="@drawable/user"/> 63 <TextView 64 android:layout_width="wrap_content" 65 android:layout_height="wrap_content" 66 android:text="用户"/> 67 68 </LinearLayout> 69 <LinearLayout 70 android:id="@+id/lay_yang" 71 android:layout_width="0dp" 72 android:layout_height="match_parent" 73 android:layout_weight="1" 74 android:orientation="vertical" 75 android:gravity="center"> 76 77 <ImageButton 78 android:id="@+id/ibtn_yang" 79 android:clickable="false" 80 android:layout_width="wrap_content" 81 android:layout_height="wrap_content" 82 android:src="@drawable/yang"/> 83 <TextView 84 android:layout_width="wrap_content" 85 android:layout_height="wrap_content" 86 android:text="羊羊"/> 87 88 </LinearLayout> 89 90 </LinearLayout>
注意：ImageButton里的点击事件要设定为false。这是因为在后面我们要对它的父view，即相应的LinearLayout设置点击事件，为了保证点击事件一定能被LinearLayout捕捉到，所以要将ImageButton的点击事件设定为false。否则，如果你点击ImageButton那一部分的屏幕区域，因为它是 放在LinearLayout里面，所以点击事件先被LinearLayout捕捉。但是LinearLayout发现他里面有一个按钮也是可以处理点击事件的，就会把点击事件传递给它处理（这是android里的规定）。但是我们却没有给ImageButton设定点击事件，因为就会造成点击事件不响应。所以为了让点击事件不向下传递，我们就将按钮的点击事件设为fasle，即让它不能处理点击事件。而TextView是本身就不能响应点击事件的，因为我们不用对它设定。
（2）搭建主界面，其中就包括ViewPager
现在我们将主界面的头和尾（即上面写的），以及中间的ViewPager搭建起来。取名为activity_main.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 8 <include layout="@layout/top"/> 9 10 <android.support.v4.view.ViewPager 11 android:id="@+id/vp" 12 android:layout_width="match_parent" 13 android:layout_height="0dp" 14 android:layout_weight="1" > 15 </android.support.v4.view.ViewPager> 16 17 <include layout="@layout/bottum"/>" 18 </LinearLayout>
注意：在这里我们应当记住，include语句是怎样引入布局的。还有ViewPager是怎样引入的。
（3）编写所有的Tab界面
从效果图上，我们可以看到Tab界面有4个（即中间黑色每滑动一次就出现不同的TextView）。很简单，我们编写四个就可以了，分别命名为Tab01.xml,Tab02.xml,Tab03.xml,Tab04.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:gravity="center"> 6 7 <TextView 8 android:layout_width="wrap_content" 9 android:layout_height="wrap_content" 10 android:text="这是一只蝴蝶" 11 android:textSize="25dp"/> 12 13 </LinearLayout>
其他的一样，就是把中间的TextView显示的字改了一下而已。我就不重复了。
（4）写入活动中展示出来。
这一步还是比较复杂的。具体包括，要为按钮设定点击事件，要为ViewPager写适配器，并且要为它编写Item改变时的事件。具体看代码：
1 import java.util.ArrayList; 2 import java.util.List; 3 import java.util.zip.Inflater; 4 import android.os.Bundle; 5 import android.app.Activity; 6 import android.support.v4.view.PagerAdapter; 7 import android.support.v4.view.ViewPager; 8 import android.support.v4.view.ViewPager.OnPageChangeListener; 9 import android.view.LayoutInflater; 10 import android.view.Menu; 11 import android.view.View; 12 import android.view.View.OnClickListener; 13 import android.view.ViewGroup; 14 import android.widget.ImageButton; 15 import android.widget.LinearLayout; 16 17 public class MainActivity extends Activity implements OnClickListener{ 18 19 20 private ViewPager vp; 21 22 private PagerAdapter mAdapter;//适配器 23 24 private List<View> mViews = new ArrayList<View>();//数据集 25 26 private LinearLayout mlay1; 27 private LinearLayout mlay2; 28 private LinearLayout mlay3; 29 private LinearLayout mlay4; 30 31 private ImageButton img1; 32 private ImageButton img2; 33 private ImageButton img3; 34 private ImageButton img4; 35 36 37 38 protected void onCreate(Bundle savedInstanceState) { 39 super.onCreate(savedInstanceState); 40 setContentView(R.layout.activity_main); 41 42 initView(); 43 44 initEvent();//用来 初始化点击事件 45 46 47 } 48 49 50 51 //初始化点击事件 52 private void initEvent() { 53 54 55 mlay1.setOnClickListener(this); 56 mlay2.setOnClickListener(this); 57 mlay3.setOnClickListener(this); 58 mlay4.setOnClickListener(this); 59 60 //设置滑动ViewPager时的事件 61 62 vp.setOnPageChangeListener(new OnPageChangeListener() { 63 64 65 //主要在这个方法里操作，当选中相应的view时一系列的响应事件 66 public void onPageSelected(int arg0) { 67 68 resetImg(); 69 int item = vp.getCurrentItem(); 70 switch(item){ 71 72 case 0: 73 img1.setImageResource(R.drawable.hudie2); 74 break; 75 case 1: 76 img2.setImageResource(R.drawable.set2); 77 break; 78 case 2: 79 img3.setImageResource(R.drawable.user2); 80 break; 81 case 3: 82 img4.setImageResource(R.drawable.yang2); 83 break; 84 } 85 86 } 87 88 89 public void onPageScrolled(int arg0, float arg1, int arg2) { 90 // TODO Auto-generated method stub 91 92 } 93 94 95 public void onPageScrollStateChanged(int arg0) { 96 // TODO Auto-generated method stub 97 98 } 99 }); 100 } 101 102 103 104 //该方法初始化各个view 105 private void initView() { 106 107 vp = (ViewPager) findViewById(R.id.vp); 108 109 //获取底部的各个线性布局 110 mlay1 = (LinearLayout) findViewById(R.id.lay_hudie); 111 mlay2 = (LinearLayout) findViewById(R.id.lay_set); 112 mlay3 = (LinearLayout) findViewById(R.id.lay_user); 113 mlay4 = (LinearLayout) findViewById(R.id.lay_yang); 114 115 116 //获取各个imageView 117 img1 = (ImageButton) findViewById(R.id.ibtn_hudie); 118 img2 = (ImageButton) findViewById(R.id.ibtn_set); 119 img3 = (ImageButton) findViewById(R.id.ibtn_user); 120 img4 = (ImageButton) findViewById(R.id.ibtn_yang); 121 122 123 //下面将view加入到数据集中 124 View v1 = LayoutInflater.from(this).inflate(R.layout.tab01, null); 125 View v2 = LayoutInflater.from(this).inflate(R.layout.tab02, null); 126 View v3 = LayoutInflater.from(this).inflate(R.layout.tab03, null); 127 View v4 = LayoutInflater.from(this).inflate(R.layout.tab04, null); 128 129 mViews.add(v1); 130 mViews.add(v2); 131 mViews.add(v3); 132 mViews.add(v4); 133 134 135 //然后再根据数据集配置适配器 136 137 mAdapter = new PagerAdapter() { 138 139 140 //销毁item 141 public void destroyItem(ViewGroup container, int position, 142 Object object) { 143 144 container.removeView(mViews.get(position)); 145 } 146 147 148 //初始化item 149 public Object instantiateItem(ViewGroup container, int position) { 150 151 View view = mViews.get(position); 152 container.addView(view); 153 return view; 154 } 155 156 157 //TODO 158 //这个方法是什么意思，有待进一步查解 159 public boolean isViewFromObject(View arg0, Object arg1) { 160 161 return arg0 == arg1; 162 } 163 164 165 //获得适配的总数目 166 public int getCount() { 167 168 return mViews.size(); 169 } 170 }; 171 172 173 //为ViewPager设置适配器 174 175 vp.setAdapter(mAdapter); 176 177 178 } 179 180 181 182 183 //点击事件，会把执行点击的控件传进来，即view 184 public void onClick(View v) { 185 resetImg(); 186 switch(v.getId()){ 187 188 case R.id.lay_hudie: 189 vp.setCurrentItem(0);//设置ViewPager当前的view 190 img1.setImageResource(R.drawable.hudie2); 191 break; 192 case R.id.lay_set: 193 vp.setCurrentItem(1);//设置ViewPager当前的view 194 img2.setImageResource(R.drawable.set2); 195 break; 196 case R.id.lay_user: 197 vp.setCurrentItem(2);//设置ViewPager当前的view 198 img3.setImageResource(R.drawable.user2); 199 break; 200 case R.id.lay_yang: 201 vp.setCurrentItem(3);//设置ViewPager当前的view 202 img4.setImageResource(R.drawable.yang2); 203 break; 204 205 } 206 } 207 208 //该方法用来将图片还原到初始状态 209 private void resetImg(){ 210 img1.setImageResource(R.drawable.hudie); 211 img2.setImageResource(R.drawable.set); 212 img3.setImageResource(R.drawable.user); 213 img4.setImageResource(R.drawable.yang); 214 } 215 }
好了，所有的工作完成了，我们可以运行程序看看效果了。
四、总结
来看看编写代码的过程中，有那些重要的android知识。
（1）在一个布局中引入另外一个布局，可采用如下语句：
<include layout="@layout/top"/>
（2）在布局中书写ViewPager的代码，关键是要记住它的包名：
<android.support.v4.view.ViewPager android:id="@+id/vp" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1" > </android.support.v4.view.ViewPager>
（3）ViewPager的适配器，除了书写它默认的两个方法外，还要重写如下两个方法：
public void destroyItem(ViewGroup container, int position, Object object) public Object instantiateItem(ViewGroup container, int position)
（4）当ViewPager状态发生改变时，我们想做出一系列响应，应该设置监听接口，并主要在onPageSelected进行操作。例如：
1 vp.setOnPageChangeListener(new OnPageChangeListener() { 2 3 4 //主要在这个方法里操作，当选中相应的view时一系列的响应事件 5 public void onPageSelected(int arg0) { 6 int item = vp.getCurrentItem(); 7 switch(item){ 8 case 0: 9 img1.setImageResource(R.drawable.hudie2); 10 break; 11 case 1: 12 img2.setImageResource(R.drawable.set2); 13 break; 14 case 2: 15 img3.setImageResource(R.drawable.user2); 16 break; 17 case 3: 18 img4.setImageResource(R.drawable.yang2); 19 break; 20 21 } 22 public void onPageScrolled(int arg0, float arg1, int arg2) { 23 } 24 public void onPageScrollStateChanged(int arg0) { 25 26 } 27 }); 28 }
96
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
