Android通过ViewPager实现Tab面板实例

来源：互联网发布：淘宝中差评屏蔽软件编辑：程序博客网时间：2024/05/29 04:33

如何实现如下图所示效果呢？

可以看到，我们的效果还是不错的。由于制作动态图不清晰，所以这里我只截图了。我们的思路是什么呢？

ViewPager的使用方法

为ViewPager增加适配器
为ViewPager设置分配事件
关联按钮控件显示不同的ViewPager页面
注意事项:
适配器的基本用法
布局技巧

上面就是我们本篇文章的大概。下面呢？让我们开始代码的讲解：

头部

一个TextView,位于title的中间。由于我们需要使用自己制作的title背景以及样式。那么我们可以这样写：

main_title_bar.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="fill_parent"    android:layout_height="50dp"    android:background="@drawable/title_bar">    <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="微信"        android:textSize="20sp"        android:textColor="#ffffff"        android:layout_centerInParent="true"/></RelativeLayout><span style="font-family:microsoft yahei;color:#5a5a5a;"><span style="font-size: 19.8px; font-weight: 600; line-height: 21.78px; white-space: pre-wrap;"></span></span>

ok了，这样一个头部就搞定了。当然了，这个背景bar是我自己用photoshop做的，比较简单。

底部

底部总体上还是个LinearLayout线性布局，方向为horizontal。

然后包含了四个垂直方向的LinearLayout线性布局。在这里我们需要注意的是，我们后面需要根据每个LinearLayout设置点击事件，而此时我们又不需要里面的ImageButton获取点击焦点，此时，我们需要设置ImagButton的属性clickable为false.大家自己可以不加测试下，会出bug。原因点击事件被ImageButt获取了。

main_bottom_tab.xml

<?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="55dp"    android:orientation="horizontal"    android:background="@drawable/title_bar"    android:paddingTop="5dp"    android:paddingBottom="5dp" >    <LinearLayout        android:id="@+id/id_friend_tab"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:orientation="vertical"        android:layout_weight="1">         <ImageButton            android:id="@+id/btn_friend"            android:layout_width="33dp"            android:layout_height="33dp"            android:src="@drawable/friend"            android:layout_gravity="center"            android:clickable="false"/>        <TextView android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="联系人"            android:textColor="#ffffff"            android:textSize="10sp"            android:textStyle="bold"            android:gravity="center"            android:layout_gravity="center"/>    </LinearLayout>      <LinearLayout        android:id="@+id/id_msg_tab"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:orientation="vertical"        android:layout_weight="1">        <ImageButton            android:id="@+id/btn_msg"            android:layout_width="33dp"            android:layout_height="33dp"            android:src="@drawable/messagegrey"             android:layout_gravity="center"             android:clickable="false"/>        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="消息"             android:textColor="#ffffff"            android:textSize="10sp"            android:textStyle="bold"           android:gravity="center"            android:layout_gravity="center"/>         </LinearLayout>    <LinearLayout        android:id="@+id/id_circle_tab"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:orientation="vertical"        android:layout_weight="1">      <ImageButton            android:id="@+id/btn_circle"            android:layout_width="33dp"            android:layout_height="33dp"            android:src="@drawable/circlegrey"             android:layout_gravity="center"            android:clickable="false"/>        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="朋友圈"     android:textColor="#ffffff"            android:textSize="10sp"            android:textStyle="bold"            android:gravity="center"            android:layout_gravity="center"/>    </LinearLayout>     <LinearLayout        android:id="@+id/id_info_tab"        android:layout_width="0dp"        android:layout_height="wrap_content"        android:orientation="vertical"        android:layout_weight="1">        <ImageButton            android:id="@+id/btn_info"             android:layout_width="33dp"            android:layout_height="33dp"            android:src="@drawable/infogrey"             android:layout_gravity="center"            android:clickable="false"/>        <TextView             android:layout_width="wrap_content"            android:layout_height="wrap_content"            android:text="我"            android:textColor="#ffffff"            android:textSize="10sp"            android:textStyle="bold"            android:gravity="center"            android:layout_gravity="center"/>         </LinearLayout></LinearLayout>

接下来是我们的主布局

主布局main.xml

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:tools="http://schemas.android.com/tools"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <include        layout="@layout/main_title_bar"/>    <android.support.v4.view.ViewPager         android:id="@+id/viewPager"         android:layout_width="wrap_content"         android:layout_height="0dp"         android:layout_weight="1"/>    <include        layout="@layout/main_bottom_tab"/>"</LinearLayout>

我们看到这段主布局文件，其中包含了一个ViewPager控件。由于是v4包里面的，所以我们需要引入完整的控件路径名。那么如何设置中间部分的高度呢？在这用到一个小技巧。把height设置为0.把weight设置为1，这样中间部分会自动填充.其高度

在完成我们的布局文件之后呢？开始着手我们的Activity的代码编写。

MainActivity.java

public class MainActivity extends Activity implements OnClickListener{//声明控件private ViewPager mViewPager=null;private ImageButton btn_friend=null;private ImageButton btn_msg=null;private ImageButton btn_circle=null;private ImageButton btn_info=null;private LinearLayout tab_friend;private LinearLayout tab_msg;private LinearLayout tab_circle;private LinearLayout tab_info;//声明ViewPager的view集合private List<View> views=new ArrayList<View>();    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        requestWindowFeature(Window.FEATURE_NO_TITLE);        setContentView(R.layout.main_activity);                initView();            }private void initView() {//初始化控件btn_friend = (ImageButton) findViewById(R.id.btn_friend);btn_msg = (ImageButton) findViewById(R.id.btn_msg);btn_circle =  (ImageButton) findViewById(R.id.btn_circle);btn_info= (ImageButton) findViewById(R.id.btn_info);tab_friend = (LinearLayout) findViewById(R.id.id_friend_tab);tab_msg = (LinearLayout) findViewById(R.id.id_msg_tab);tab_circle = (LinearLayout) findViewById(R.id.id_circle_tab);tab_info = (LinearLayout) findViewById(R.id.id_info_tab);//为每个LinearLayout设置监听tab_friend.setOnClickListener(this);tab_msg.setOnClickListener(this);tab_circle.setOnClickListener(this);tab_info.setOnClickListener(this);//实例化ViewPager控件并且设置适配器mViewPager =(ViewPager) findViewById(R.id.viewPager);LayoutInflater inflater = LayoutInflater.from(this);//加载ViewPager中的四个viewView friendView = inflater.inflate(R.layout.pagerview_contact_people, null);View msgView = inflater.inflate(R.layout.pagerview_looper_message, null);View circleView = inflater.inflate(R.layout.pageview_friend_circle, null);View infoView = inflater.inflate(R.layout.pagerview_person_info, null);//将view加入到ListView集合中views.add(friendView);views.add(msgView);views.add(circleView);views.add(infoView);ViewPagerAdapter mViewPagerAdapter = new ViewPagerAdapter(this, views);mViewPager.setAdapter(mViewPagerAdchuapter);//对ViewPagers设置监听并处理ViewPager事件getViewEvent();}private void getViewEvent() {mViewPager.setOnPageChangeListener(new OnPageChangeListener(){@Overridepublic void onPageScrollStateChanged(int arg0) {}@Overridepublic void onPageScrolled(int arg0, float arg1, int arg2) {}//当选中不同View时，设置该View下的按钮控件样式@Overridepublic void onPageSelected(int arg0) {initEvent();int currentItem = mViewPager.getCurrentItem();switch (currentItem) {case 0:btn_friend.setImageDrawable(getResources().getDrawable(R.drawable.friend));break;case 1:btn_msg.setImageDrawable(getResources().getDrawable(R.drawable.message));break;case 2:btn_circle.setImageDrawable(getResources().getDrawable(R.drawable.circle));break;case 3:btn_info.setImageDrawable(getResources().getDrawable(R.drawable.myinfo));break;}}});}//当选择不同的按钮时候，ViewPager设置不同的view@Overridepublic void onClick(View v) {initEvent();switch (v.getId()) {case R.id.id_friend_tab:mViewPager.setCurrentItem(0);btn_friend.setImageResource(R.drawable.friend);break;case R.id.id_msg_tab:mViewPager.setCurrentItem(1);btn_msg.setImageResource(R.drawable.message);break;case R.id.id_circle_tab:mViewPager.setCurrentItem(2);btn_circle.setImageResource(R.drawable.circle);break;case R.id.id_info_tab:mViewPager.setCurrentItem(3);btn_info.setImageResource(R.drawable.myinfo);break;}}//初始化控件样式private void initEvent() {btn_friend.setImageDrawable(getResources().getDrawable(R.drawable.friendgrey));btn_msg.setImageDrawable(getResources().getDrawable(R.drawable.messagegrey));btn_circle.setImageDrawable(getResources().getDrawable(R.drawable.circlegrey));btn_info.setImageDrawable(getResources().getDrawable(R.drawable.infogrey));}    }

然后，我们为ViewPager编写一个适配器，继承自PagerAdapter

ViewPagerAdapter.java

package com.mero.weixin.Adapter;import java.text.AttributedCharacterIterator.Attribute;import java.util.List;import android.content.Context;import android.support.v4.view.PagerAdapter;import android.view.View;import android.view.ViewGroup;public class ViewPagerAdapter extends PagerAdapter{Context context;List<View> mViews;//此处传入View的List集合public ViewPagerAdapter(Context context,List<View> views){this.mViews=views;this.context=context;}public ViewPagerAdapter(Context context,Attribute arrts,List<View> views){this.mViews=views;this.context=context;}//重写初始化方法@Overridepublic Object instantiateItem(ViewGroup container, int position) {container.addView(mViews.get(position));return mViews.get(position);}//移除view@Overridepublic void destroyItem(ViewGroup container, int position, Object object) {container.removeView(mViews.get(position));}//得到view的个数@Overridepublic int getCount() {return mViews.size();}//这里注意了arg0==arg1就可以了public boolean isViewFromObject(View arg0, Object arg1) {return arg0==arg1;}}

最后四个ViewPager的界面布局就不用我说了吧!但是还是放上一个吧!

pagerview_contact_people.xml

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical" >    <TextView android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:text="@string/contact_people"       android:layout_centerInParent="true"       android:textSize="25sp"       android:textColor="#aaee00"/></RelativeLayout>

好了，到这里就结束了。最后附上本篇实例所用到的素材点击我下载

1 0