Android实战简易教程-第二十六枪（基于ViewPager实现微信页面切换效果）

时间：2022-06-09 22:17:45

1.头部布局文件top.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="40dp"

    android:background="@drawable/title_bar"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:id="@+id/title"

        android:layout_width="wrap_content"

        android:layout_height="30dp"

        android:layout_gravity="center"

        android:text="WeChat"

        android:textColor="#ffffffff"

        android:textSize="25dp" />

</LinearLayout>

2.底部布局文件bottom.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="50dp"

    android:background="@drawable/bottom_bar"

    android:orientation="horizontal" >

    <LinearLayout

        android:id="@+id/ll_chat"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/ibtn_chat"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#0000"

            android:clickable="false"

            android:src="@drawable/tab_weixin_pressed" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="聊天"

            android:textColor="#ffffffff" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/ll_pengyouquan"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/ibtn_pengyouquan"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#0000"

            android:clickable="false"

            android:src="@drawable/tab_find_frd_normal" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="朋友圈"

            android:textColor="#ffffffff" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/ll_tongxunlu"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/ibtn_tongxunlu"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#0000"

            android:clickable="false"

            android:src="@drawable/tab_address_normal" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="好友"

            android:textColor="#ffffffff" />

    </LinearLayout>

    <LinearLayout

        android:id="@+id/ll_set"

        android:layout_width="0dp"

        android:layout_height="fill_parent"

        android:layout_weight="1"

        android:gravity="center"

        android:orientation="vertical" >

        <ImageButton

            android:id="@+id/ibtn_set"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:background="#0000"

            android:clickable="false"

            android:src="@drawable/tab_settings_normal" />

        <TextView

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:text="设置"

            android:textColor="#ffffffff" />

    </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" >

    <include layout="@layout/top" />

    <android.support.v4.view.ViewPager

        android:id="@+id/viewpager"

        android:layout_width="match_parent"

        android:layout_height="0dp"

        android:layout_weight="1" >

    </android.support.v4.view.ViewPager>

    <include layout="@layout/bottom" />

</LinearLayout>

4.四个ViewPager的内容页布局

tab01.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="match_parent"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="聊天页"

        android:textSize="30sp" >

    </TextView>

</LinearLayout>

tab02.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="match_parent"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="朋友圈"

        android:textSize="30sp" >

    </TextView>

</LinearLayout>

tab03.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="match_parent"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="联系人页面"

        android:textSize="30sp" >

    </TextView>

</LinearLayout>

tab04.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="match_parent"

    android:gravity="center"

    android:orientation="vertical" >

    <TextView

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:layout_gravity="center"

        android:text="设置页面"

        android:textSize="30sp" >

    </TextView>

</LinearLayout>

5.MainActivity.java: 

package com.example.tabtest;

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 {

	private ViewPager mViewPager;

	private PagerAdapter pagerAdapter;

	private List<View> mViews = new ArrayList<View>();

	private LinearLayout mLLChat;

	private LinearLayout mLLPengyouquan;

	private LinearLayout mLLAddress;

	private LinearLayout mLLSet;

	private ImageButton mImageButtonChat;

	private ImageButton mImageButtonPengyouquan;

	private ImageButton mImageButtonAddress;

	private ImageButton mImageButtonSet;

	@Override

	protected void onCreate(Bundle savedInstanceState) {

		super.onCreate(savedInstanceState);

		requestWindowFeature(Window.FEATURE_NO_TITLE);

		setContentView(R.layout.activity_main);

		initView();// 初始化控件

		initEvent();// 点击事件

	}

	private void initEvent() {

		mLLChat.setOnClickListener(this);

		mLLPengyouquan.setOnClickListener(this);

		mLLAddress.setOnClickListener(this);

		mLLSet.setOnClickListener(this);

		mViewPager.setOnPageChangeListener(new OnPageChangeListener() {//ViewPager滑动切换监听

			@Override

			public void onPageSelected(int arg0) {

				int currentItem=mViewPager.getCurrentItem();

				resetImag();

				switch (currentItem) {

				case 0:

					mImageButtonChat.setImageResource(R.drawable.tab_weixin_pressed);

					break;

				case 1:

					mImageButtonPengyouquan.setImageResource(R.drawable.tab_find_frd_pressed);

					break;

				case 2:

					mImageButtonAddress.setImageResource(R.drawable.tab_address_pressed);

					break;

				case 3:

					mImageButtonSet.setImageResource(R.drawable.tab_settings_pressed);

					break;

				default:

					break;

				}

			}

			@Override

			public void onPageScrolled(int arg0, float arg1, int arg2) {

				// TODO Auto-generated method stub

			}

			@Override

			public void onPageScrollStateChanged(int arg0) {

				// TODO Auto-generated method stub

			}

		});

	}

	private void initView() {

		/**

		 * 初始化全部控件

		 */

		mViewPager = (ViewPager) findViewById(R.id.viewpager);

		mLLChat = (LinearLayout) findViewById(R.id.ll_chat);

		mLLPengyouquan = (LinearLayout) findViewById(R.id.ll_pengyouquan);

		mLLAddress = (LinearLayout) findViewById(R.id.ll_tongxunlu);

		mLLSet = (LinearLayout) findViewById(R.id.ll_set);

		mImageButtonChat = (ImageButton) findViewById(R.id.ibtn_chat);

		mImageButtonPengyouquan = (ImageButton) findViewById(R.id.ibtn_pengyouquan);

		mImageButtonAddress = (ImageButton) findViewById(R.id.ibtn_tongxunlu);

		mImageButtonSet = (ImageButton) findViewById(R.id.ibtn_set);

		/**

		 * 获取mViews

		 */

		LayoutInflater layoutInflater = LayoutInflater.from(this);

		View tab01 = layoutInflater.inflate(R.layout.tab01, null);

		View tab02 = layoutInflater.inflate(R.layout.tab02, null);

		View tab03 = layoutInflater.inflate(R.layout.tab03, null);

		View tab04 = layoutInflater.inflate(R.layout.tab04, null);

		mViews.add(tab01);

		mViews.add(tab02);

		mViews.add(tab03);

		mViews.add(tab04);

		// ViewPager适配器

		pagerAdapter = new PagerAdapter() {

			/**

			 * 摧毁

			 */

			@Override

			public void destroyItem(ViewGroup container, int position,

					Object object) {

				container.removeView(mViews.get(position));

			}

			/**

			 * 初始化

			 */

			@Override

			public Object instantiateItem(ViewGroup container, int position) {

				View view = mViews.get(position);

				container.addView(view);

				return view;

			}

			@Override

			public boolean isViewFromObject(View arg0, Object arg1) {

				return arg0 == arg1;

			}

			@Override

			public int getCount() {

				return mViews.size();

			}

		};

		mViewPager.setAdapter(pagerAdapter);

	}

	@Override

	public void onClick(View v) {

		resetImag();

		switch (v.getId()) {

		case R.id.ll_chat:

			mViewPager.setCurrentItem(0);

			mImageButtonChat.setImageResource(R.drawable.tab_weixin_pressed);

			break;

		case R.id.ll_pengyouquan:

			mViewPager.setCurrentItem(1);

			mImageButtonPengyouquan.setImageResource(R.drawable.tab_find_frd_pressed);

			break;

		case R.id.ll_tongxunlu:

			mViewPager.setCurrentItem(2);

			mImageButtonAddress.setImageResource(R.drawable.tab_address_pressed);

			break;

		case R.id.ll_set:

			mViewPager.setCurrentItem(3);

			mImageButtonSet.setImageResource(R.drawable.tab_settings_pressed);

			break;

		default:

			break;

		}

	}

/**

 * 将全部图片设置成未选中状态

 */

	private void resetImag() {

		mImageButtonChat.setImageResource(R.drawable.tab_weixin_normal);

		mImageButtonPengyouquan.setImageResource(R.drawable.tab_find_frd_normal);

		mImageButtonAddress.setImageResource(R.drawable.tab_address_normal);

		mImageButtonSet.setImageResource(R.drawable.tab_settings_normal);

	}

}

6.执行实例：

Android实战简易教程-第二十六枪（基于ViewPager实现微信页面切换效果）

Android实战简易教程-第二十六枪（基于ViewPager实现微信页面切换效果）

watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center" alt="" />

Android实战简易教程-第二十六枪（基于ViewPager实现微信页面切换效果）

喜欢的朋友能够关注我。谢谢

源代码下载


相关文章