先上效果图:
代码思路:
1、设置top和bottom布局;
2、设置主界面布局;
3、初始化控件、视图和PagerAdapter,并绑定适配器;
4、初始化事件,4个组合控件的onclick事件;
5、监听滑动事件,切换图片。
代码:
1、top布局
<?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="45dp" android:background="@drawable/title_bar" android:gravity="center" android:orientation="vertical" > <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="center" android:text="微信" android:textColor="#ffffff" android:textSize="20sp" android:textStyle="bold" /> </LinearLayout>
2、bottom布局
<?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:background="@drawable/bottom_bar" android:orientation="horizontal" > <LinearLayout android:id="@+id/tab_weixin" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_weixin_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/tab_weixin_pressed" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="微信" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/tab_frd" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_frd_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/tab_find_frd_normal" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="朋友" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/tab_address" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_address_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/tab_address_normal" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="通讯录" android:textColor="#ffffff" /> </LinearLayout> <LinearLayout android:id="@+id/tab_setting" android:layout_width="0dp" android:layout_height="fill_parent" android:layout_weight="1" android:gravity="center" android:orientation="vertical" > <ImageButton android:id="@+id/tab_setting_img" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="@drawable/tab_settings_normal" android:clickable="false" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="设置" android:textColor="#ffffff" /> </LinearLayout> </LinearLayout>
3、设置主界面布局;
<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" tools:context="${packageName}.${activityClass}" > <include layout="@layout/top" /> <android.support.v4.view.ViewPager android:id="@+id/mypage" android:layout_width="fill_parent" android:layout_height="0dp" android:layout_weight="1" > </android.support.v4.view.ViewPager> <include layout="@layout/bottom" /> </LinearLayout>
4、初始化控件
<span style="white-space:pre"> </span>private ViewPager viewPager; private PagerAdapter pagerAdapter; private List<View> views = new ArrayList<View>(); private LinearLayout weixinLayout, frdLayout, addressLayout, settingLayout; private ImageButton weixinButton, frdButton, addressButton, settingButton; <span style="white-space:pre"> </span>private void initControl() { viewPager = (ViewPager) findViewById(R.id.mypage); weixinLayout = (LinearLayout) findViewById(R.id.tab_weixin); frdLayout = (LinearLayout) findViewById(R.id.tab_frd); addressLayout = (LinearLayout) findViewById(R.id.tab_address); settingLayout = (LinearLayout) findViewById(R.id.tab_setting); weixinButton = (ImageButton) findViewById(R.id.tab_weixin_img); frdButton = (ImageButton) findViewById(R.id.tab_frd_img); addressButton = (ImageButton) findViewById(R.id.tab_address_img); settingButton = (ImageButton) findViewById(R.id.tab_setting_img); LayoutInflater inflater = LayoutInflater.from(this); View tab01 = inflater.inflate(R.layout.tab01, null); View tab02 = inflater.inflate(R.layout.tab02, null); View tab03 = inflater.inflate(R.layout.tab03, null); View tab04 = inflater.inflate(R.layout.tab04, null); views.add(tab01); views.add(tab02); views.add(tab03); views.add(tab04); pagerAdapter = new PagerAdapter() { @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(views.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = views.get(position); container.addView(view); return view; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getCount() { return views.size(); } }; viewPager.setAdapter(pagerAdapter); }
5、初始化事件
<span style="white-space:pre"> </span>private void initEvent() { weixinLayout.setOnClickListener(this); frdLayout.setOnClickListener(this); addressLayout.setOnClickListener(this); settingLayout.setOnClickListener(this); viewPager.setOnPageChangeListener(this); } <span style="white-space:pre"> </span>public void onClick(View v) { resetImage(); switch (v.getId()) { case R.id.tab_weixin: viewPager.setCurrentItem(0); weixinButton.setImageResource(R.drawable.tab_weixin_pressed); break; case R.id.tab_frd: viewPager.setCurrentItem(1); frdButton.setImageResource(R.drawable.tab_find_frd_pressed); break; case R.id.tab_address: viewPager.setCurrentItem(2); addressButton.setImageResource(R.drawable.tab_address_pressed); break; case R.id.tab_setting: viewPager.setCurrentItem(3); settingButton.setImageResource(R.drawable.tab_settings_pressed); break; } } private void resetImage() { weixinButton.setImageResource(R.drawable.tab_weixin_normal); frdButton.setImageResource(R.drawable.tab_find_frd_normal); addressButton.setImageResource(R.drawable.tab_address_normal); settingButton.setImageResource(R.drawable.tab_settings_normal); } @Override public void onPageScrollStateChanged(int arg0) { int currentItem = viewPager.getCurrentItem(); resetImage(); switch (currentItem) { case 0: weixinButton.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: frdButton.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: addressButton.setImageResource(R.drawable.tab_address_pressed); break; case 3: settingButton.setImageResource(R.drawable.tab_settings_pressed); break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub }
java 完整代码:
package com.example.viewpagerdemo; import java.util.ArrayList; import java.util.List; import android.app.Activity; import android.os.Bundle; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.support.v4.view.ViewPager.OnPageChangeListener; import android.view.LayoutInflater; import android.view.View; import android.view.View.OnClickListener; import android.view.ViewGroup; import android.view.Window; import android.widget.ImageButton; import android.widget.LinearLayout; public class MainActivity extends Activity implements OnClickListener, OnPageChangeListener { private ViewPager viewPager; private PagerAdapter pagerAdapter; private List<View> views = new ArrayList<View>(); private LinearLayout weixinLayout, frdLayout, addressLayout, settingLayout; private ImageButton weixinButton, frdButton, addressButton, settingButton; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); requestWindowFeature(Window.FEATURE_NO_TITLE); setContentView(R.layout.activity_main); initControl(); initEvent(); } private void initEvent() { weixinLayout.setOnClickListener(this); frdLayout.setOnClickListener(this); addressLayout.setOnClickListener(this); settingLayout.setOnClickListener(this); viewPager.setOnPageChangeListener(this); } private void initControl() { viewPager = (ViewPager) findViewById(R.id.mypage); weixinLayout = (LinearLayout) findViewById(R.id.tab_weixin); frdLayout = (LinearLayout) findViewById(R.id.tab_frd); addressLayout = (LinearLayout) findViewById(R.id.tab_address); settingLayout = (LinearLayout) findViewById(R.id.tab_setting); weixinButton = (ImageButton) findViewById(R.id.tab_weixin_img); frdButton = (ImageButton) findViewById(R.id.tab_frd_img); addressButton = (ImageButton) findViewById(R.id.tab_address_img); settingButton = (ImageButton) findViewById(R.id.tab_setting_img); LayoutInflater inflater = LayoutInflater.from(this); View tab01 = inflater.inflate(R.layout.tab01, null); View tab02 = inflater.inflate(R.layout.tab02, null); View tab03 = inflater.inflate(R.layout.tab03, null); View tab04 = inflater.inflate(R.layout.tab04, null); views.add(tab01); views.add(tab02); views.add(tab03); views.add(tab04); pagerAdapter = new PagerAdapter() { @Override public void destroyItem(ViewGroup container, int position, Object object) { container.removeView(views.get(position)); } @Override public Object instantiateItem(ViewGroup container, int position) { View view = views.get(position); container.addView(view); return view; } @Override public boolean isViewFromObject(View arg0, Object arg1) { return arg0 == arg1; } @Override public int getCount() { return views.size(); } }; viewPager.setAdapter(pagerAdapter); } @Override public void onClick(View v) { resetImage(); switch (v.getId()) { case R.id.tab_weixin: viewPager.setCurrentItem(0); weixinButton.setImageResource(R.drawable.tab_weixin_pressed); break; case R.id.tab_frd: viewPager.setCurrentItem(1); frdButton.setImageResource(R.drawable.tab_find_frd_pressed); break; case R.id.tab_address: viewPager.setCurrentItem(2); addressButton.setImageResource(R.drawable.tab_address_pressed); break; case R.id.tab_setting: viewPager.setCurrentItem(3); settingButton.setImageResource(R.drawable.tab_settings_pressed); break; } } private void resetImage() { weixinButton.setImageResource(R.drawable.tab_weixin_normal); frdButton.setImageResource(R.drawable.tab_find_frd_normal); addressButton.setImageResource(R.drawable.tab_address_normal); settingButton.setImageResource(R.drawable.tab_settings_normal); } @Override public void onPageScrollStateChanged(int arg0) { int currentItem = viewPager.getCurrentItem(); resetImage(); switch (currentItem) { case 0: weixinButton.setImageResource(R.drawable.tab_weixin_pressed); break; case 1: frdButton.setImageResource(R.drawable.tab_find_frd_pressed); break; case 2: addressButton.setImageResource(R.drawable.tab_address_pressed); break; case 3: settingButton.setImageResource(R.drawable.tab_settings_pressed); break; } } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { // TODO Auto-generated method stub } @Override public void onPageSelected(int arg0) { // TODO Auto-generated method stub } }
源码下载:点击打开链接