仿微信滑动翻页UI设计和实现

最新推荐文章于 2023-03-06 23:48:10 发布
最新推荐文章于 2023-03-06 23:48:10 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： android入门学习笔记 文章标签： android 仿微信 UI ViewPager OnPageChangeListener
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/icedcap/article/details/20566635
版权

最近一直在苦学android，看到好的UI交互界面真是挖干心思也要想弄明怎么实现的。正好滑动翻页的UI界面几乎比比皆是，恰巧从网络上获取相关知识的总结学习一下，今天就把学到的成果汇总一下。

其实有很多方法都能实现滑动翻页，这里也采用了最简单的方法。利用实现ViewPager.OnPageChangeListener接口来实现滑动。

废话不多说看看效果图吧。


主窗体布局activity_main.xml：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/mainweixin"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#eee"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/main_bottom"
        android:layout_width="match_parent"
        android:layout_height="70dp"
        android:layout_alignParentBottom="true"
        android:background="@drawable/bottom_bar"
        android:orientation="vertical" >

        <ImageView
            android:id="@+id/img_tab_now"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_gravity="bottom"
            android:scaleType="matrix"
            android:src="@drawable/tab_bg" />

        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:paddingBottom="2dp" >

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/img_weixin"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:scaleType="matrix"
                    android:src="@drawable/tab_weixin_pressed" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="微信"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/img_address"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:scaleType="matrix"
                    android:src="@drawable/tab_address_normal" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="通讯录"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/img_friends"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:scaleType="matrix"
                    android:src="@drawable/tab_find_frd_normal" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="朋友们"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:gravity="center_horizontal"
                android:orientation="vertical" >

                <ImageView
                    android:id="@+id/img_settings"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:clickable="true"
                    android:scaleType="matrix"
                    android:src="@drawable/tab_settings_normal" />

                <TextView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:text="设置"
                    android:textColor="#fff"
                    android:textSize="12sp" />
            </LinearLayout>
        </LinearLayout>
    </RelativeLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/main_bottom"
        android:layout_alignParentTop="true"
        android:orientation="vertical" >

        <android.support.v4.view.ViewPager
            android:id="@+id/tabpager"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center" >
        </android.support.v4.view.ViewPager>
    </LinearLayout>

</RelativeLayout>
各个page的布局只举一个微信page的例子main_tab_weixin.xml： 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="#fcfcfc"
    android:orientation="vertical" >

    <RelativeLayout
        android:id="@+id/title"
        android:layout_width="fill_parent"
        android:layout_height="45dp"
        android:background="@drawable/title_bar"
        android:gravity="center_vertical" >

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="通讯录"
            android:textColor="#ffffff"
            android:textSize="20sp" />
    </RelativeLayout>

    <TextView
        android:id="@+id/main_tab_weixin_textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="这是一个通讯录列表的主页面"
        android:textSize="70dp" />

</LinearLayout>

代码实现部分： 

package com.icedcap.weixinuidemo;

import java.util.ArrayList;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.view.Display;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.PopupWindow;

public class MainActivity extends Activity {
	private ViewPager mTabPager;
	private ImageView mTabImg;// 动画图片
	private ImageView mTab1, mTab2, mTab3, mTab4;
	private int zero = 0;// 动画图片偏移量
	private int currIndex = 0;// 当前页卡编号
	private int one;// 单个水平动画位移
	private int two;
	private int three;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		initView();
		flipPage();
	}

	private void initView() {
		mTabPager = (ViewPager) findViewById(R.id.tabpager);
		// set滑动翻页监听
		mTabPager.setOnPageChangeListener(new MyOnPageChangeListener());
		mTab1 = (ImageView) findViewById(R.id.img_weixin);
		mTab2 = (ImageView) findViewById(R.id.img_address);
		mTab3 = (ImageView) findViewById(R.id.img_friends);
		mTab4 = (ImageView) findViewById(R.id.img_settings);
		mTabImg = (ImageView) findViewById(R.id.img_tab_now);
		// set底部imageview的onclicklistener
		mTab1.setOnClickListener(new MyOnClickListener(0));
		mTab2.setOnClickListener(new MyOnClickListener(1));
		mTab3.setOnClickListener(new MyOnClickListener(2));
		mTab4.setOnClickListener(new MyOnClickListener(3));

	}

	private void flipPage() {
		Display currDisplay = getWindowManager().getDefaultDisplay();// 获取屏幕当前分辨率
		int displayWidth = currDisplay.getWidth();
		int displayHeight = currDisplay.getHeight();
		one = displayWidth / 4; // 设置水平动画平移大小
		two = one * 2;
		three = one * 3;

		// 将要分页显示的View装入数组中
		LayoutInflater mLi = LayoutInflater.from(this);
		View view1 = mLi.inflate(R.layout.main_tab_weixin, null);
		View view2 = mLi.inflate(R.layout.main_tab_address, null);
		View view3 = mLi.inflate(R.layout.main_tab_friends, null);
		View view4 = mLi.inflate(R.layout.main_tab_settings, null);

		// 每个页面的view数据
		final ArrayList<View> views = new ArrayList<View>();
		views.add(view1);
		views.add(view2);
		views.add(view3);
		views.add(view4);

		// 填充ViewPager的数据适配器
		PagerAdapter mPagerAdapter = new PagerAdapter() {

			@Override
			public boolean isViewFromObject(View arg0, Object arg1) {
				return arg0 == arg1;
			}

			@Override
			public int getCount() {
				return views.size();
			}

			@Override
			public void destroyItem(View container, int position, Object object) {
				((ViewPager) container).removeView(views.get(position));
			}

			@Override
			public Object instantiateItem(View container, int position) {
				((ViewPager) container).addView(views.get(position));
				return views.get(position);
			}
		};

		mTabPager.setAdapter(mPagerAdapter);
	}

	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
		// Inflate the menu; this adds items to the action bar if it is present.
		getMenuInflater().inflate(R.menu.main, menu);
		return true;
	}

	/**
	 * 头标点击监听
	 */
	public class MyOnClickListener implements View.OnClickListener {
		private int index = 0;

		public MyOnClickListener(int i) {
			index = i;
		}

		@Override
		public void onClick(View v) {
			mTabPager.setCurrentItem(index);
		}
	};

	/**
	 * 页卡切换监听(原作者:D.Winter)
	 */
	public class MyOnPageChangeListener implements OnPageChangeListener {
		@Override
		public void onPageSelected(int arg0) {
			Animation animation = null;
			switch (arg0) {
			case 0:
				mTab1.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_weixin_pressed));
				if (currIndex == 1) {
					animation = new TranslateAnimation(one, 0, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_address_normal));
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, 0, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_find_frd_normal));
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, 0, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_settings_normal));
				}
				break;
			case 1:
				mTab2.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_address_pressed));
				if (currIndex == 0) {
					animation = new TranslateAnimation(zero, one, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_weixin_normal));
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, one, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_find_frd_normal));
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, one, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_settings_normal));
				}
				break;
			case 2:
				mTab3.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_find_frd_pressed));
				if (currIndex == 0) {
					animation = new TranslateAnimation(zero, two, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_weixin_normal));
				} else if (currIndex == 1) {
					animation = new TranslateAnimation(one, two, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_address_normal));
				} else if (currIndex == 3) {
					animation = new TranslateAnimation(three, two, 0, 0);
					mTab4.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_settings_normal));
				}
				break;
			case 3:
				mTab4.setImageDrawable(getResources().getDrawable(
						R.drawable.tab_settings_pressed));
				if (currIndex == 0) {
					animation = new TranslateAnimation(zero, three, 0, 0);
					mTab1.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_weixin_normal));
				} else if (currIndex == 1) {
					animation = new TranslateAnimation(one, three, 0, 0);
					mTab2.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_address_normal));
				} else if (currIndex == 2) {
					animation = new TranslateAnimation(two, three, 0, 0);
					mTab3.setImageDrawable(getResources().getDrawable(
							R.drawable.tab_find_frd_normal));
				}
				break;
			}
			currIndex = arg0;
			animation.setFillAfter(true);// True:图片停在动画结束位置
			animation.setDuration(150);
			mTabImg.startAnimation(animation);
		}

		@Override
		public void onPageScrolled(int arg0, float arg1, int arg2) {
		}

		@Override
		public void onPageScrollStateChanged(int arg0) {
		}
	}

}

源码下载地址： http://download.csdn.net/detail/icedcap/6997347


我只是个菜
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
android-整体UI设计（滑动导航栏+滚动页面）.zip
12-16
源码参考，欢迎下载
Unity滑动切换图片
06-07
之前在网上找了好久也没找到，自己花了很多时间才弄好的抱你满意
Android仿微信APP实现源码
09-07
Android仿微信APP实现源码。注册、登录、主界面、扫一扫、朋友圈、我
unity 弧形UI 圆形slider 圆形滑动条
12-12
unity 弧形UI 圆形slider 圆形滑动条 制作版本5.3 ugui 需要把预置体放到canvas上使用
Unity3D图片滑动效果
08-14
Unity3D图片滑动效果,Unity3D图片滑动插件
循环UI列表+滑动翻页
南宫铭的博客
01-29 560
支持自定义选项数量,按钮切换,鼠标滑动切换,当前项框选提示,选项缩放等功能。：滑动触发值,鼠标X轴向滑动大于此值切换选项,小于不触发。：透明度开关,开启根据Z值越靠前越清晰越靠后越透明。：缩放开关,开启根据Z值越靠前越大越靠后越小。：鼠标切换选项开关,关闭只能点击按钮切换。：最大缩放,控制最靠前的选项。：旋转半径,控制选项X坐标。：Y轴偏移,控制选项Y坐标。
UI中图片翻页功能的实现
weixin_37013988的博客
03-10 494
using System.Collections; using System.Collections.Generic; using UnityEngine; using UnityEngine.UI; public class FanYe : MonoBehaviour { int index=0 ; public Text text; // Use this for in...
移动开发实验一：微信ui设计
liuniantyy的博客
03-06 963
微信ui
1.微信APP首页UI结构设计思想viewpager
chezabo6116的博客
11-07 1618
为什么能够提高性能 他是为了懒加载 为了提升性能 每个页面占用内存最少5m 页面进app的时候加载 预加载 页面看上去更加顺滑 舒服，先加载进来 没有显示之前我进行加载，那么以头条为例 头条一个页面至少是5m 假设 加载5个页面 要加载25m数据，每一个页面的显示要很多内存 如果有预加载 一上来加载网络数据 缓存数据 需要内存 不要预加载 而是用懒加载 滑动当前页面 只是显示空白页面 结果会损失用户的观赏性，但是他并不会影响性能 会节约能量，节约内存 节约cpu 让我们app滑动的时候不会卡顿，
UI翻页功能，带同步页码标签
wonder13579的博客
03-21 919
UI翻页功能，带同步页码标签一． 创建组件首先创建组件，分为主体layout与页码两部分。1.Layout部分依次为遮罩MASK》LayOut脚本》子物体（依次包含），另外在mask上挂一个scroll Rect控制现layout拖动。（关闭Vertical）PS：scroll Rect的拖动范围：脚本挂在上级物体A上，然后指定要拖动的物体B，B应比A大，B不能超出A。如图，若B没有包含完全，则只...
仿微信App首页
11-13
ViewPager和Fragment仿微信App首页，能够满足大部分商场类的需求
UI翻页式设计
09-18
UI翻页式设计 很精美的设计
微信小程序实现滑动翻页效果(完整代码)
10-15
主要介绍了微信小程序实现滑动翻页效果，本文通过效果图展示实例代码讲解的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
手机端产品交互设计:手机端产品翻页控件的设计
01-31
易语言仿微信登录UI界面设计源码
05-28
易语言仿微信登录UI界面设计源码。@北柠。Tags：仿微信登录UI界面。
仿微信QQ聊天UI源码
08-13
仿微信QQ聊天UI源码带有表情，可以翻页，带翻页拖动缓冲等功能。 效果图：
Android仿微信滑动退出Activity
08-31
主要介绍了Android仿微信滑动退出Activity的相关资料，非常不错，具有参考借鉴价值，需要的朋友参考下
android天气预报应用（二）
icedcap的专栏
03-10 3266
接上一篇博文。http://blog.csdn.net/icedcap/article/details/20743627 上一篇博文稍微开了个头，没想到很多朋友都很感兴趣催我继续往下写。今天挤出点时间为大家继续介绍。     在进入真题之前，笔者还是想要吐槽以下中国气象局。事情是这样的，笔者申请的是android和ios平台的接口，而他却给我的web端的接口。笔者回信询问他却说统一发放web端
微信小程序UI设计尺寸
最新发布
05-30
微信小程序UI设计尺寸建议以iPhone 6/7/8为基准，即750*1334px。但是需要注意的是，不同手机屏幕尺寸不同，为了适应不同屏幕，可以使用rpx作为尺寸单位，rpx是微信小程序专属的尺寸单位，可以根据不同屏幕自动进行缩放。一般情况下，设计师可以根据iPhone 6/7/8的尺寸进行设计，具体实现时可以使用rpx进行布局。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值