Android如何实现仿微信左右滑动点击切换页面和图标

这篇文章主要介绍了Android如何实现仿微信左右滑动点击切换页面和图标，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

站在用户的角度思考问题，与客户深入沟通，找到巢湖网站设计与巢湖网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、做网站、企业官网、英文网站、手机端网站、网站推广、域名注册、网页空间、企业邮箱。业务覆盖巢湖地区。

具体内容如下

目标效果：

使用鼠标滑动屏幕或者点击下边的小图标，可以更改页面和图标，因为没有那么多素材所以只用了两张图片区分。

1.layout文件夹下新建top.xml页面，作为顶部标题。

top.xml页面：

2.新建bottom.xml页面，作为底部导航。

bottom.xml页面：

这里注意ImageButton的clickable属性，如果不设置false，那么鼠标点击不起作用，只有点击下边的TextView才会跳转页面。

3.新建tab01.xml页面，复制三个，只更改显示文本，作为切换页面。

tab01.xml页面：

4.activity_main.xml页面导入顶部和底部xml文件，并放置ViewPager。

activity_main.xml页面：

5.因为ViewPager是在jar包里，添加该控件需要写出路径，当记不住的时候，按下Ctrl+Shift+t，弹出框里输入“ViewPager”并选择，显示的页面中就包含该控件的路径。

6.新建pageAdapter.java，继承PageAdapter，实现四个方法。

pageAdapter.java页面：

package com.example.adapter;
 
import java.util.List;
 
import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;
 
public class pageAdapter extends PagerAdapter {
 private List mViews;
 
 public pageAdapter(List mViews) {
 this.mViews = mViews;
 }
 
 /**
 * 重写四个方法 boolean isViewFromObject(View arg0, Object arg1) int getCount()
 * void destroyItem(ViewGroup container, int position,Object object) Object
 * instantiateItem(ViewGroup container, int position)
 */
 
 // 从当前container中删除指定位置的view
 @Override
 public void destroyItem(ViewGroup container, int position, Object object) {
 container.removeView(mViews.get(position));
 }
 
 // 初始化view
 @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;
 }
 
 // 返回要滑动的view个数
 @Override
 public int getCount() {
 return mViews.size();
 }
 
}

7.MainActivity.java页面编写点击和滑动事件。

MainActivity.java页面：

package com.example.studytab;
 
import java.util.ArrayList;
import java.util.List;
 
import com.example.adapter.pageAdapter;
 
import android.os.Bundle;
import android.app.Activity;
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.Menu;
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 List mViews = new ArrayList();
 private pageAdapter mAdapter = new pageAdapter(mViews);
 
 // Tab
 private LinearLayout mTabWeixin, mTabFriend, mTabTongxunlu, mTabSet;
 private ImageButton mWeixinImg, mFriendImg, mTongxunluImg, mSetImg;
 
 @Override
 protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题
 setContentView(R.layout.activity_main);
 
 initView();
 
 initEvents();
 }
 
 //View的滑动事件
 private void initEvents() {
 mTabWeixin.setOnClickListener(this);
 mTabFriend.setOnClickListener(this);
 mTabTongxunlu.setOnClickListener(this);
 mTabSet.setOnClickListener(this);
 
 //滑动切换页面
 mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
 
  @Override
  public void onPageSelected(int arg0) {
  resetImg();  //将图片全部默认为不选中
  int currentItem = mViewPager.getCurrentItem();
  switch (currentItem) {
  case 0:
   mWeixinImg.setImageResource(R.drawable.search);
   break;
  case 1:
   mFriendImg.setImageResource(R.drawable.search);
   break;
  case 2:
   mTongxunluImg.setImageResource(R.drawable.search);
   break;
  case 3:
   mSetImg.setImageResource(R.drawable.search);
   break;
 
  default:
   break;
  }
  }
 
  @Override
  public void onPageScrolled(int arg0, float arg1, int arg2) {
 
  }
 
  @Override
  public void onPageScrollStateChanged(int arg0) {
 
  }
 });
 }
 
 //实例化控件
 private void initView() {
 mViewPager = (ViewPager) findViewById(R.id.id_viewpager);
 // Tab
 mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin);
 mTabFriend = (LinearLayout) findViewById(R.id.tab_friend);
 mTabTongxunlu = (LinearLayout) findViewById(R.id.tab_tongxunlu);
 mTabSet = (LinearLayout) findViewById(R.id.tab_set);
 // img
 mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img);
 mFriendImg = (ImageButton) findViewById(R.id.tab_friend_img);
 mTongxunluImg = (ImageButton) findViewById(R.id.tab_tongxunlu_img);
 mSetImg = (ImageButton) findViewById(R.id.tab_set_img);
 
 LayoutInflater mInflater = LayoutInflater.from(this);
 View tab01 = mInflater.inflate(R.layout.tab01, null);
 View tab02 = mInflater.inflate(R.layout.tab02, null);
 View tab03 = mInflater.inflate(R.layout.tab03, null);
 View tab04 = mInflater.inflate(R.layout.tab04, null);
 
 mViews.add(tab01);
 mViews.add(tab02);
 mViews.add(tab03);
 mViews.add(tab04);
 
 mViewPager.setAdapter(mAdapter);
 }
 
 //ImageButton的点击事件
 @Override
 public void onClick(View view) {
 resetImg();
 switch (view.getId()) {
 case R.id.tab_weixin:
  mViewPager.setCurrentItem(0);// 跳到第一个页面
  mWeixinImg.setImageResource(R.drawable.search); // 图片变为选中
  break;
 case R.id.tab_friend:
  mViewPager.setCurrentItem(1);
  mFriendImg.setImageResource(R.drawable.search);
  break;
 case R.id.tab_tongxunlu:
  mViewPager.setCurrentItem(2);
  mTongxunluImg.setImageResource(R.drawable.search);
  break;
 case R.id.tab_set:
  mViewPager.setCurrentItem(3);
  mSetImg.setImageResource(R.drawable.search);
  break;
 
 default:
  break;
 }
 }
 
 // 将所有的图片切换为未选中
 private void resetImg() {
 mWeixinImg.setImageResource(R.drawable.study);
 mFriendImg.setImageResource(R.drawable.study);
 mTongxunluImg.setImageResource(R.drawable.study);
 mSetImg.setImageResource(R.drawable.study);
 }
 
}

8.运行就可以显示目标效果了。

感谢你能够认真阅读完这篇文章，希望小编分享的“Android如何实现仿微信左右滑动点击切换页面和图标”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!