程序博客网 > 山东半岛城市群知乎

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

来源：互联网 发布：山东半岛城市群知乎 编辑：程序博客网 时间：2024/05/29 04:34

目标效果：

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


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

top.xml页面：

[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="45dp"  
  5.     android:gravity="center"  
  6.     android:background="#000000"  
  7.     android:orientation="vertical" >  
  8.   
  9.     <TextView  
  10.         android:layout_width="wrap_content"  
  11.         android:layout_height="wrap_content"  
  12.         android:text="微信"  
  13.         android:textColor="#ffffff"  
  14.         android:textSize="20sp"  
  15.         android:layout_gravity="center"  
  16.         android:textStyle="bold" />  
  17.   
  18. </LinearLayout>  


2.新建bottom.xml页面，作为底部导航。
bottom.xml页面：
[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="55dp"  
  5.     android:background="#000000"  
  6.     android:orientation="horizontal" >  
  7.   
  8.     <!-- ImageButton没加android:clickable="false"时，点击下方的ImageBuutton不会改变页面，点击TextView才会改变页面，这是因为每个tab是一个LinearLayout，每个LinearLayout都有一个ImageButton，当点击ImageButton位置时，点击事件首先会到LinearLayout上，LinearLayout会去判断，发现内部有一个ImageButton可以解决点击事件，所以就把点击事件交给ImageButton，而ImageButton又没有写点击事件，所以点击事件就失效了。-->  
  9.   
  10.     <LinearLayout  
  11.         android:id="@+id/tab_weixin"  
  12.         android:layout_width="0dp"  
  13.         android:layout_height="fill_parent"  
  14.         android:layout_weight="1"  
  15.         android:gravity="center"  
  16.         android:orientation="vertical" >  
  17.   
  18.         <ImageButton  
  19.             android:id="@+id/tab_weixin_img"  
  20.             android:layout_width="wrap_content"  
  21.             android:layout_height="wrap_content"  
  22.             android:background="#000000"  
  23.             android:clickable="false"  
  24.             android:src="@drawable/search" />  
  25.   
  26.         <TextView  
  27.             android:layout_width="wrap_content"  
  28.             android:layout_height="wrap_content"  
  29.             android:text="微信"  
  30.             android:textColor="#ffffff" />  
  31.     </LinearLayout>  
  32.   
  33.     <LinearLayout  
  34.         android:id="@+id/tab_friend"  
  35.         android:layout_width="0dp"  
  36.         android:layout_height="fill_parent"  
  37.         android:layout_weight="1"  
  38.         android:gravity="center"  
  39.         android:orientation="vertical" >  
  40.   
  41.         <ImageButton  
  42.             android:id="@+id/tab_friend_img"  
  43.             android:layout_width="wrap_content"  
  44.             android:layout_height="wrap_content"  
  45.             android:background="#000000"  
  46.             android:clickable="false"  
  47.             android:src="@drawable/study" />  
  48.   
  49.         <TextView  
  50.             android:layout_width="wrap_content"  
  51.             android:layout_height="wrap_content"  
  52.             android:text="朋友"  
  53.             android:textColor="#ffffff" />  
  54.     </LinearLayout>  
  55.   
  56.     <LinearLayout  
  57.         android:id="@+id/tab_tongxunlu"  
  58.         android:layout_width="0dp"  
  59.         android:layout_height="fill_parent"  
  60.         android:layout_weight="1"  
  61.         android:gravity="center"  
  62.         android:orientation="vertical" >  
  63.   
  64.         <ImageButton  
  65.             android:id="@+id/tab_tongxunlu_img"  
  66.             android:layout_width="wrap_content"  
  67.             android:layout_height="wrap_content"  
  68.             android:background="#000000"  
  69.             android:clickable="false"  
  70.             android:src="@drawable/study" />  
  71.   
  72.         <TextView  
  73.             android:layout_width="wrap_content"  
  74.             android:layout_height="wrap_content"  
  75.             android:text="通讯录"  
  76.             android:textColor="#ffffff" />  
  77.     </LinearLayout>  
  78.   
  79.     <LinearLayout  
  80.         android:id="@+id/tab_set"  
  81.         android:layout_width="0dp"  
  82.         android:layout_height="fill_parent"  
  83.         android:layout_weight="1"  
  84.         android:gravity="center"  
  85.         android:orientation="vertical" >  
  86.   
  87.         <ImageButton  
  88.             android:id="@+id/tab_set_img"  
  89.             android:layout_width="wrap_content"  
  90.             android:layout_height="wrap_content"  
  91.             android:background="#000000"  
  92.             android:clickable="false"  
  93.             android:src="@drawable/study" />  
  94.   
  95.         <TextView  
  96.             android:layout_width="wrap_content"  
  97.             android:layout_height="wrap_content"  
  98.             android:text="设置"  
  99.             android:textColor="#ffffff" />  
  100.     </LinearLayout>  
  101.   
  102. </LinearLayout>  
这里注意ImageButton的clickable属性，如果不设置false，那么鼠标点击不起作用，只有点击下边的TextView才会跳转页面。


3.新建tab01.xml页面，复制三个，只更改显示文本，作为切换页面。
tab01.xml页面：
[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical" >  
  6.       
  7.     <TextView   
  8.         android:layout_width="fill_parent"  
  9.         android:layout_height="fill_parent"  
  10.         android:text="Weixin Tab"  
  11.         android:textSize="30sp"  
  12.         android:textStyle="bold"  
  13.         android:gravity="center"/>  
  14. </LinearLayout>  


4.activity_main.xml页面导入顶部和底部xml文件，并放置ViewPager。
activity_main.xml页面：
[html] view plain copy 在CODE上查看代码片派生到我的代码片
  1. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  2.     xmlns:tools="http://schemas.android.com/tools"  
  3.     android:layout_width="match_parent"  
  4.     android:layout_height="match_parent"  
  5.     android:orientation="vertical">  
  6.   
  7.     <include layout="@layout/top"/>  
  8.       
  9.     <android.support.v4.view.ViewPager  
  10.         android:id="@+id/id_viewpager"  
  11.         android:layout_weight="1"  
  12.         android:layout_width="fill_parent"  
  13.         android:layout_height="0dp">  
  14.           
  15.     </android.support.v4.view.ViewPager>  
  16.     <include layout="@layout/bottom"/>  
  17. </LinearLayout>  


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



6.新建pageAdapter.java，继承PageAdapter，实现四个方法。
pageAdapter.java页面：
[java] view plain copy 在CODE上查看代码片派生到我的代码片
  1. package com.example.adapter;  
  2.   
  3. import java.util.List;  
  4.   
  5. import android.support.v4.view.PagerAdapter;  
  6. import android.view.View;  
  7. import android.view.ViewGroup;  
  8.   
  9. public class pageAdapter extends PagerAdapter {  
  10.     private List<View> mViews;  
  11.   
  12.     public pageAdapter(List<View> mViews) {  
  13.         this.mViews = mViews;  
  14.     }  
  15.   
  16.     /** 
  17.      * 重写四个方法 boolean isViewFromObject(View arg0, Object arg1) int getCount() 
  18.      * void destroyItem(ViewGroup container, int position,Object object) Object 
  19.      * instantiateItem(ViewGroup container, int position) 
  20.      */  
  21.   
  22.     // 从当前container中删除指定位置的view  
  23.     @Override  
  24.     public void destroyItem(ViewGroup container, int position, Object object) {  
  25.         container.removeView(mViews.get(position));  
  26.     }  
  27.   
  28.     // 初始化view  
  29.     @Override  
  30.     public Object instantiateItem(ViewGroup container, int position) {  
  31.         View view = mViews.get(position);  
  32.         container.addView(view);  
  33.         return view;  
  34.     }  
  35.   
  36.     @Override  
  37.     public boolean isViewFromObject(View arg0, Object arg1) {  
  38.         return arg0 == arg1;  
  39.     }  
  40.   
  41.     // 返回要滑动的view个数  
  42.     @Override  
  43.     public int getCount() {  
  44.         return mViews.size();  
  45.     }  
  46.   
  47. }  


7.MainActivity.java页面编写点击和滑动事件。
MainActivity.java页面：
[java] view plain copy 在CODE上查看代码片派生到我的代码片
  1. package com.example.studytab;  
  2.   
  3. import java.util.ArrayList;  
  4. import java.util.List;  
  5.   
  6. import com.example.adapter.pageAdapter;  
  7.   
  8. import android.os.Bundle;  
  9. import android.app.Activity;  
  10. import android.support.v4.view.PagerAdapter;  
  11. import android.support.v4.view.ViewPager;  
  12. import android.support.v4.view.ViewPager.OnPageChangeListener;  
  13. import android.view.LayoutInflater;  
  14. import android.view.Menu;  
  15. import android.view.View;  
  16. import android.view.View.OnClickListener;  
  17. import android.view.ViewGroup;  
  18. import android.view.Window;  
  19. import android.widget.ImageButton;  
  20. import android.widget.LinearLayout;  
  21.   
  22. public class MainActivity extends Activity implements OnClickListener {  
  23.   
  24.     private ViewPager mViewPager;  
  25.     private List<View> mViews = new ArrayList<View>();  
  26.     private pageAdapter mAdapter = new pageAdapter(mViews);  
  27.   
  28.     // Tab  
  29.     private LinearLayout mTabWeixin, mTabFriend, mTabTongxunlu, mTabSet;  
  30.     private ImageButton mWeixinImg, mFriendImg, mTongxunluImg, mSetImg;  
  31.   
  32.     @Override  
  33.     protected void onCreate(Bundle savedInstanceState) {  
  34.         super.onCreate(savedInstanceState);  
  35.         requestWindowFeature(Window.FEATURE_NO_TITLE);// 去掉标题  
  36.         setContentView(R.layout.activity_main);  
  37.   
  38.         initView();  
  39.   
  40.         initEvents();  
  41.     }  
  42.   
  43.     //View的滑动事件  
  44.     private void initEvents() {  
  45.         mTabWeixin.setOnClickListener(this);  
  46.         mTabFriend.setOnClickListener(this);  
  47.         mTabTongxunlu.setOnClickListener(this);  
  48.         mTabSet.setOnClickListener(this);  
  49.   
  50.         //滑动切换页面  
  51.         mViewPager.setOnPageChangeListener(new OnPageChangeListener() {  
  52.   
  53.             @Override  
  54.             public void onPageSelected(int arg0) {  
  55.                 resetImg();    //将图片全部默认为不选中  
  56.                 int currentItem = mViewPager.getCurrentItem();  
  57.                 switch (currentItem) {  
  58.                 case 0:  
  59.                     mWeixinImg.setImageResource(R.drawable.search);  
  60.                     break;  
  61.                 case 1:  
  62.                     mFriendImg.setImageResource(R.drawable.search);  
  63.                     break;  
  64.                 case 2:  
  65.                     mTongxunluImg.setImageResource(R.drawable.search);  
  66.                     break;  
  67.                 case 3:  
  68.                     mSetImg.setImageResource(R.drawable.search);  
  69.                     break;  
  70.   
  71.                 default:  
  72.                     break;  
  73.                 }  
  74.             }  
  75.   
  76.             @Override  
  77.             public void onPageScrolled(int arg0, float arg1, int arg2) {  
  78.   
  79.             }  
  80.   
  81.             @Override  
  82.             public void onPageScrollStateChanged(int arg0) {  
  83.   
  84.             }  
  85.         });  
  86.     }  
  87.   
  88.     //实例化控件  
  89.     private void initView() {  
  90.         mViewPager = (ViewPager) findViewById(R.id.id_viewpager);  
  91.         // Tab  
  92.         mTabWeixin = (LinearLayout) findViewById(R.id.tab_weixin);  
  93.         mTabFriend = (LinearLayout) findViewById(R.id.tab_friend);  
  94.         mTabTongxunlu = (LinearLayout) findViewById(R.id.tab_tongxunlu);  
  95.         mTabSet = (LinearLayout) findViewById(R.id.tab_set);  
  96.         // img  
  97.         mWeixinImg = (ImageButton) findViewById(R.id.tab_weixin_img);  
  98.         mFriendImg = (ImageButton) findViewById(R.id.tab_friend_img);  
  99.         mTongxunluImg = (ImageButton) findViewById(R.id.tab_tongxunlu_img);  
  100.         mSetImg = (ImageButton) findViewById(R.id.tab_set_img);  
  101.   
  102.         LayoutInflater mInflater = LayoutInflater.from(this);  
  103.         View tab01 = mInflater.inflate(R.layout.tab01, null);  
  104.         View tab02 = mInflater.inflate(R.layout.tab02, null);  
  105.         View tab03 = mInflater.inflate(R.layout.tab03, null);  
  106.         View tab04 = mInflater.inflate(R.layout.tab04, null);  
  107.   
  108.         mViews.add(tab01);  
  109.         mViews.add(tab02);  
  110.         mViews.add(tab03);  
  111.         mViews.add(tab04);  
  112.   
  113.         mViewPager.setAdapter(mAdapter);  
  114.     }  
  115.   
  116.     //ImageButton的点击事件  
  117.     @Override  
  118.     public void onClick(View view) {  
  119.         resetImg();  
  120.         switch (view.getId()) {  
  121.         case R.id.tab_weixin:  
  122.             mViewPager.setCurrentItem(0);// 跳到第一个页面  
  123.             mWeixinImg.setImageResource(R.drawable.search); // 图片变为选中  
  124.             break;  
  125.         case R.id.tab_friend:  
  126.             mViewPager.setCurrentItem(1);  
  127.             mFriendImg.setImageResource(R.drawable.search);  
  128.             break;  
  129.         case R.id.tab_tongxunlu:  
  130.             mViewPager.setCurrentItem(2);  
  131.             mTongxunluImg.setImageResource(R.drawable.search);  
  132.             break;  
  133.         case R.id.tab_set:  
  134.             mViewPager.setCurrentItem(3);  
  135.             mSetImg.setImageResource(R.drawable.search);  
  136.             break;  
  137.   
  138.         default:  
  139.             break;  
  140.         }  
  141.     }  
  142.   
  143.     // 将所有的图片切换为未选中  
  144.     private void resetImg() {  
  145.         mWeixinImg.setImageResource(R.drawable.study);  
  146.         mFriendImg.setImageResource(R.drawable.study);  
  147.         mTongxunluImg.setImageResource(R.drawable.study);  
  148.         mSetImg.setImageResource(R.drawable.study);  
  149.     }  
  150.   
  151. }  


8.运行就可以显示目标效果了。
1 0
山东半岛城市群知乎 山东半岛城市群知乎
原创粉丝点击
热门IT博客
上海交通大学 网络教育上海交通大学 网络教育
删除表中数据的sql语句删除表中数据的sql语句
移动网络哪家
java 代码生成器
js中的this详解
张益唐 莫宗坚 知乎
mac无法识别iphone
蓝月传奇龙魂进阶数据
js session的用法
会声会影软件免费吗
淘宝天天特价通过技巧
淘宝:麋鹿森林日本代购
公司域名怎么申请
云计算 科普
diffrac.eva软件下载
一览 mac 版
exe打包软件工具
先锋乒羽淘宝商城
天猫魔盒软件下载
iphone6打不开蜂窝数据
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 大枣枸杞泡水喝有什么好处 葶苈大枣泻肺汤 枸杞大枣泡水正确方法 大枣不能和什么一起吃 木瓜花生大枣汤 甘麦大枣汤哪些人禁用 山药百合大枣粥 益母草大枣鸡蛋汤 吃大枣会发胖吗 新鲜大枣怎么保存 孕妇能吃大枣吗 孕妇可以吃大枣吗 大枣红糖姜水 红糖大枣馒头 甘麦大枣汤配方 枸杞大枣泡酒正确方法 孕妇能吃大枣 大枣怎么保存 吃大枣上火吗 冰糖大枣燕窝 减肥期间吃大枣会胖吗 微波大枣烘干设备 大枣是红枣吗 吃大枣有什么好处 大枣吃多了会怎么样 大枣的功效与作用 大枣馒头的做法 血糖高能吃大枣吗 月经期间吃大枣好吗 吃大枣的好处 胃不好能吃大枣吗 怀孕可以吃大枣吗 怀孕能吃大枣吗 经期可以吃大枣吗 痛风能吃大枣吗 坐月子能吃大枣吗 经期能吃大枣吗 茵陈大枣汤的功效 大枣怎么吃补血 大枣树苗价格 胃炎能吃大枣吗

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里