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

本文实例为大家分享了android仿微信左右滑动点击切换页面和图标的具体代码，供大家参考，具体内容如下

目标效果：

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

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

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="45dp"
  android:gravity="center"
  android:background="#000000"
  android:orientation="vertical" >
 
  <textview
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="微信"
    android:textcolor="#ffffff"
    android:textsize="20sp"
    android:layout_gravity="center"
    android:textstyle="bold" />
 
</linearlayout>

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

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="55dp"
  android:background="#000000"
  android:orientation="horizontal" >
 
  <!-- imagebutton没加android:clickable="false"时，点击下方的imagebuutton不会改变页面，点击textview才会改变页面，这是因为每个tab是一个linearlayout，每个linearlayout都有一个imagebutton，当点击imagebutton位置时，点击事件首先会到linearlayout上，linearlayout会去判断，发现内部有一个imagebutton可以解决点击事件，所以就把点击事件交给imagebutton，而imagebutton又没有写点击事件，所以点击事件就失效了。-->
 
  <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="#000000"
      android:clickable="false"
      android:src="@drawable/search" />
 
    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="微信"
      android:textcolor="#ffffff" />
  </linearlayout>
 
  <linearlayout
    android:id="@+id/tab_friend"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical" >
 
    <imagebutton
      android:id="@+id/tab_friend_img"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#000000"
      android:clickable="false"
      android:src="@drawable/study" />
 
    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="朋友"
      android:textcolor="#ffffff" />
  </linearlayout>
 
  <linearlayout
    android:id="@+id/tab_tongxunlu"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical" >
 
    <imagebutton
      android:id="@+id/tab_tongxunlu_img"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#000000"
      android:clickable="false"
      android:src="@drawable/study" />
 
    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="通讯录"
      android:textcolor="#ffffff" />
  </linearlayout>
 
  <linearlayout
    android:id="@+id/tab_set"
    android:layout_width="0dp"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:gravity="center"
    android:orientation="vertical" >
 
    <imagebutton
      android:id="@+id/tab_set_img"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:background="#000000"
      android:clickable="false"
      android:src="@drawable/study" />
 
    <textview
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="设置"
      android:textcolor="#ffffff" />
  </linearlayout>
 
</linearlayout>

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

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

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:orientation="vertical" >
  
  <textview 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:text="weixin tab"
    android:textsize="30sp"
    android:textstyle="bold"
    android:gravity="center"/>
</linearlayout>

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

activity_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/top"/>
  
  <android.support.v4.view.viewpager
    android:id="@+id/id_viewpager"
    android:layout_weight="1"
    android:layout_width="fill_parent"
    android:layout_height="0dp">
    
  </android.support.v4.view.viewpager>
  <include layout="@layout/bottom"/>
</linearlayout>

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<view> mviews;
 
 public pageadapter(list<view> 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<view> mviews = new arraylist<view>();
 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.运行就可以显示目标效果了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。