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 ListmViews; 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 ListmViews = 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如何实现仿微信左右滑动点击切换页面和图标”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
文章标题:Android如何实现仿微信左右滑动点击切换页面和图标
链接URL:http://pwwzsj.com/article/gscohs.html