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.运行就可以显示目标效果了。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
Android基于ViewPager实现类似微信页面切换效果
此文,仅做为个人学习Android,记录成长以及方便复习! 实现ViewPager实现类似微信的页面切换,此文通过Fragment适配器实现 首先在布局文件activity_main.xml添加ViewPager ViewPager是页面,PagerTabStrip和 PagerTitleStrip是设置标题的 <?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android=
-
Android实现微信首页左右滑动切换效果
大家看到微信首页切换效果有没有觉得很炫,滑动切换,点击底部bar瞬间切换,滑动切换渐变效果,线上效果图: 之前也在博客上看到别人的实现,再次基础上,我做了些优化.首先说下实现原理,大神略过,o(╯□╰)o 页面上看到的三个页面是三个Fragment, 左右滑动使用viewpager,相信大家也都是这么再用,那么底部用的是什么技术呢,底部渐变其实就是重写了ImageView,以及在左右滑动时,改变了TextView的颜色值,是不是很简单...下面我们一步一步的来: 1.自定义ImageView:
-
Android实现简单底部导航栏 Android仿微信滑动切换效果
Android仿微信滑动切换最终实现效果: 大体思路: 1. 主要使用两个自定义View配合实现; 底部图标加文字为一个自定义view,底部导航栏为一个载体,根据需要来添加底部图标; 2. 底部导航栏的设置方法类似于TabLayout的关联,View需要创建关联方法,用来关联VIewPager; 3. 通过关联方法获取ViewPager实例后,根据ViewPager页面数创建底部导航栏的图标按钮; 代码实现: 1. 新建第一个自定义View, 图标 + 文字 的底部按钮; /** * 自定义控件
-
Android仿微信底部实现Tab选项卡切换效果
在网上看了比较多的关于Tab的教程,发现都很杂乱.比较多的用法是用TitlePagerTabStrip和ViewPaper.不过TitlePagerTabStrip有个很大的缺陷,Tab里面的内容刚进去是没有的,要滑一次才能加载出来.而且滑动的时候,Tab里面的内容位置不是固定的,滑倒最后会出现一片空白,非常不美观.虽然有其他的补救方法,但是非常的麻烦,所以我就按照自己的方法实现了一个,功能不错而且非常简单. 直接点击或者是滑动界面,都可以转到相应的页面. 效果图: 原理是用了三个按钮和View
-
Android App仿微信界面切换时Tab图标变色效果的制作方法
概述 1.概述 学习Android少不了模仿各种app的界面,自从微信6.0问世以后,就觉得微信切换时那个变色的Tab图标屌屌的,今天我就带大家自定义控件,带你变色变得飞起~~ 好了,下面先看下效果图: 清晰度不太好,大家凑合看~~有木有觉得这个颜色弱爆了了的,,,下面我动动手指给你换个颜色: 有没有这个颜色比较妖一点~~~好了~下面开始介绍原理. 2.原理介绍 通过上面的效果图,大家可能也猜到了,我们的图标并非是两张图片,而是一张图,并且目标颜色是可定制的,谁让现在动不动就谈个性化呢. 那么我
-
Android仿微信左右滑动点击切换页面和图标
本文实例为大家分享了Android仿微信左右滑动点击切换页面和图标的具体代码,供大家参考,具体内容如下 目标效果: 使用鼠标滑动屏幕或者点击下边的小图标,可以更改页面和图标,因为没有那么多素材所以只用了两张图片区分. 1.layout文件夹下新建top.xml页面,作为顶部标题. top.xml页面: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="h
-
Android仿微信通讯录滑动快速定位功能
先给大家展示下效果图: 实现代码如下: 下面简单说下实现原理. public class IndexBar extends LinearLayout implements View.OnTouchListener { private static final String[] INDEXES = new String[]{"#", "A", "B", "C", "D", "E", &qu
-
Android仿微信activity滑动关闭效果
Android仿微信activity滑动关闭功能 1.利用具体利用v4包下的slidingPaneLayout实现透明的activity,代码如下: BaseActivity: public class BaseSlideCloseActivity extends AppCompatActivity implements SlidingPaneLayout.PanelSlideListener { @Override protected void onCreate(Bundle savedIns
-
Android仿微信、qq点击右上角加号弹出操作框
Android仿微信.qq点击右上角加号弹出操作框,先上图,类似于下图这种,点击加号,会弹出一个对话框,如下图: 微信: 自己实现: 接下来,我们来实现此功能: 其实,实现原理就是,点击"+"号,弹出一个PopupWindow. 1.写一个用于展示在ToolBar中的 menu文件,如下: <?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http:
-
Android仿微信列表滑动删除 如何实现滑动列表SwipeListView
接上一篇,本篇主要讲如何实现滑动列表SwipeListView. 上篇完成了滑动控件SwipeItemView,这个控件是一个自定义的ViewGroup,作为列表的一个item,为列表提供一些方法让这个SwipeItemView能滑动其视图内容,同时滑动过程中会有顺滑的动画效果.而本篇讲的SwipeListView则是这个列表的具体实现了.当然啦,这个SwipeListView继承自ListView,为了实现我们需要的功能,重点就是重写ListView的onTouchEvent()以及onInt
-
Android仿微信列表滑动删除之可滑动控件（一）
这次是列表滑动删除的第三波,仿微信的列表滑动删除.先上个效果图: 前面的文章里面说过开源框架SwipeListView的实现原理是每个列表item中包含上下两层view,普通状态下上层的view覆盖着下层的view,当用户滑开上层的view,下层的view就显示出来了.但是仔细观察微信列表的item,很明显并非这个实现方案,微信的item应该一个单层view,只不过这个item超出了所在的ListView的宽度,在用户滑动item的时候,item超出屏幕的view则会显示在屏幕之上,这种滑动实现
-
Android仿微信5实现滑动导航条
本文实例为大家分享了Android 仿微信5滑动导航效果,供大家参考,具体内容如下 ViewPageAdapter.java package com.rong; import java.util.ArrayList; import java.util.List; import android.support.v4.view.PagerAdapter; import android.support.v4.view.ViewPager; import android.view.View; publi
-
Android 仿微信底部渐变Tab效果
先来看一下效果图 除了第三个的发现Tab有所差别外,其他的基本还原了微信的底部Tab渐变效果 每个Tab都是一个自定义View,根据ImageView的tint属性来实现颜色渐变效果,tint属性的使用可以看我的上一篇文章 我将自定义View命名为ShadeView,包含四个自定义属性 意思分别为图标.背景色.底部文本.底部文本大小 <declare-styleable name="ShadeView"> <attr name="icon" for