Android 仿微信的应用进入界面

最新推荐文章于 2022-11-29 17:45:37 发布
原创 最新推荐文章于 2022-11-29 17:45:37 发布 · 856 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#微信 #界面 #动画

本文详细介绍了如何使用Android开发一个模仿微信风格的应用界面，并提供了关键XML布局文件和自定义滚动布局类的代码实现。通过设置动画效果和交互逻辑，实现了一个简洁而富有特色的启动界面。

Android 仿微信的应用进入界面

不会制作动画，简易给出效果吧


OK    大致效果如图

给出xml文件
  <?xml version="1.0" encoding="utf-8" ?> 
- <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:id="@+id/mainRLayout" android:background="#000000">
  <ImageView android:layout_width="fill_parent" android:layout_height="fill_parent" android:src="@drawable/show" /> 
- <com.yyy.weixin.MyScrollLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/ScrollLayout" android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="visible">
- <RelativeLayout android:background="@drawable/w01" android:layout_width="fill_parent" android:layout_height="fill_parent">
  <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="89dp" android:text="微信，不只是个聊天工具" android:textColor="@color/TextColor" android:textSize="18sp" /> 
  </RelativeLayout>
- <RelativeLayout android:background="@drawable/w02" android:layout_width="fill_parent" android:layout_height="fill_parent">
  <TextView android:id="@+id/t1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_centerHorizontal="true" android:layout_marginTop="96dp" android:text="第一次，你可以使用透明背景的动画表情，来表达你此刻的心情" android:gravity="center_horizontal" android:textColor="@color/TextColor" android:textSize="18sp" /> 
  </RelativeLayout>
  <RelativeLayout android:background="@drawable/w03" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 
  <RelativeLayout android:background="@drawable/w04" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 
  <RelativeLayout android:background="@drawable/w05" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 
  <RelativeLayout android:background="@drawable/w06" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 
  <RelativeLayout android:background="@drawable/w07" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 
  <RelativeLayout android:background="@drawable/w08" android:layout_width="fill_parent" android:layout_height="fill_parent" /> 
- <RelativeLayout android:background="@drawable/w01" android:layout_width="fill_parent" android:layout_height="fill_parent">
  <Button android:id="@+id/startBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:layout_marginBottom="98dp" android:text="开始我的微信生活" android:textSize="22sp" android:textColor="@color/TextColor" android:background="@drawable/button_bg" android:layout_gravity="center_vertical" android:paddingLeft="20dp" android:paddingRight="20dp" android:paddingTop="15dp" android:paddingBottom="15dp" /> 
  </RelativeLayout>
  </com.yyy.weixin.MyScrollLayout>
- <LinearLayout android:orientation="horizontal" android:id="@+id/llayout" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginBottom="24.0dip" android:layout_alignParentBottom="true" android:layout_centerHorizontal="true" android:visibility="visible">
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  <ImageView android:clickable="true" android:padding="5.0dip" android:layout_gravity="center_vertical" android:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/page_indicator_bg" /> 
  </LinearLayout>
- <LinearLayout android:layout_width="fill_parent" android:layout_height="fill_parent" android:visibility="gone" android:id="@+id/animLayout">
- <LinearLayout android:id="@+id/leftLayout" android:layout_width="wrap_content" android:layout_height="fill_parent">
  <ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/whatsnew_left" /> 
  <ImageView android:layout_height="wrap_content" android:layout_width="wrap_content" android:src="@drawable/whatsnew_left_m" android:layout_marginLeft="-3dp" /> 
  </LinearLayout>
- <LinearLayout android:id="@+id/rightLayout" android:layout_width="wrap_content" android:layout_height="fill_parent">
  <ImageView android:layout_height="fill_parent" android:layout_width="wrap_content" android:src="@drawable/whatsnew_right_m" /> 
  <ImageButton android:layout_height="fill_parent" android:layout_width="wrap_content" android:src="@drawable/whatsnew_right" /> 
  </LinearLayout>
  </LinearLayout>
  </RelativeLayout>
在这里，我们需要重点关注啊
<com.yyy.weixin.MyScrollLayout>
<LinearLayout
android:id="@+id/llayout">
他们构成了整个界面的核心
<com.yyy.weixin.MyScrollLayout>构成了左右滑动切换界面
android:id="@+id/llayout" 构成了9个相互装换的小节点


import android.R.bool;
import android.content.Context;
import android.util.AttributeSet;
import android.util.Log;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewConfiguration;
import android.view.ViewGroup;
import android.view.View.MeasureSpec;
import android.widget.Scroller;

public class MyScrollLayout extends ViewGroup {

	private static final String TAG = "ScrollLayout";
	private VelocityTracker mVelocityTracker; // 用于判断甩动手势
	private static final int SNAP_VELOCITY = 600;   //X轴速度基值，大于该值时进行切换
	private Scroller mScroller; // 滑动控制器	private int mCurScreen;   //当前页面为第几屏
	private int mDefaultScreen = 0;
	private float mLastMotionX;


	private OnViewChangeListener mOnViewChangeListener;

	public MyScrollLayout(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
		init(context);
	}

	public MyScrollLayout(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
		init(context);
	}

	private void init(Context context) {
		mCurScreen = mDefaultScreen;
		mScroller = new Scroller(context);
	}

	@Override
	protected void onLayout(boolean changed, int l, int t, int r, int b) {
		// TODO Auto-generated method stub
		
		Log.e("a", "a");
		if (changed) {
			int childLeft = 0;
			final int childCount = getChildCount();
			Log.e("count", childCount+"");
			for (int i = 0; i < childCount; i++) {
				final View childView = getChildAt(i);
				if (childView.getVisibility() != View.GONE) {
					final int childWidth = childView.getMeasuredWidth();
					childView.layout(childLeft, 0, childLeft + childWidth,
							childView.getMeasuredHeight());
					childLeft += childWidth;
				}
			}
		}
	}

	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);

		Log.e("b", "b");
		final int width = MeasureSpec.getSize(widthMeasureSpec);

		final int count = getChildCount();
		for (int i = 0; i < count; i++) {
			getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
		}
		
		scrollTo(mCurScreen * width, 0);
		
	}

	public void snapToDestination() {
		final int screenWidth = getWidth();

		final int destScreen = (getScrollX() + screenWidth / 2) / screenWidth;
		snapToScreen(destScreen);
	}

	//使屏幕移动到第whichScreen+1屏
	public void snapToScreen(int whichScreen) {

		if (getScrollX() != (whichScreen * getWidth())) {
			final int delta = whichScreen * getWidth() - getScrollX();
			mScroller.startScroll(getScrollX(), 0, delta, 0,
					Math.abs(delta) * 2);
			mCurScreen = whichScreen;
			invalidate(); 

			if (mOnViewChangeListener != null) {
				mOnViewChangeListener.OnViewChange(mCurScreen);
			}
		}
	}

	@Override
	public void computeScroll() {
		// TODO Auto-generated method stub
		if (mScroller.computeScrollOffset()) {
			scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
			postInvalidate();
		}
	}

	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub

		final int action = event.getAction();
		final float x = event.getX();
		final float y = event.getY();

		switch (action) {
		case MotionEvent.ACTION_DOWN:

			Log.i("", "onTouchEvent  ACTION_DOWN");
			if (mVelocityTracker == null) {
				mVelocityTracker = VelocityTracker.obtain();
				mVelocityTracker.addMovement(event);
			}
			if (!mScroller.isFinished()) {
				mScroller.abortAnimation();
			}
			mLastMotionX = x;
			break;

		case MotionEvent.ACTION_MOVE:
			
			int deltaX = (int) (mLastMotionX - x);
			if (IsCanMove(deltaX)) {
				if (mVelocityTracker != null) {
					mVelocityTracker.addMovement(event);
				}
				mLastMotionX = x;
				//正向或者负向移动，屏幕跟随手指移动

				scrollBy(deltaX, 0);
			}
			break;

		case MotionEvent.ACTION_UP:

			int velocityX = 0;
			if (mVelocityTracker != null) {
				mVelocityTracker.addMovement(event);
				mVelocityTracker.computeCurrentVelocity(1000);
				//得到X轴方向手指移动速度
				velocityX = (int) mVelocityTracker.getXVelocity();
			}
			//velocityX为正值说明手指向右滑动，为负值说明手指向左滑动
			if (velocityX > SNAP_VELOCITY && mCurScreen > 0) {
				// Fling enough to move left
				Log.e(TAG, "snap left");
				snapToScreen(mCurScreen - 1);
			} else if (velocityX < -SNAP_VELOCITY
					&& mCurScreen < getChildCount() - 1) {
				// Fling enough to move right
				Log.e(TAG, "snap right");
				snapToScreen(mCurScreen + 1);
			} else {
				snapToDestination();
			}

			if (mVelocityTracker != null) {
				mVelocityTracker.recycle();
				mVelocityTracker = null;
			}

			break;
		}
		return true;
	}


	private boolean IsCanMove(int deltaX) {
		//deltaX<0说明手指向右划
		if (getScrollX() <= 0 && deltaX < 0) {
			return false;
		}
		//deltaX>0说明手指向左划
		if (getScrollX() >= (getChildCount() - 1) * getWidth() && deltaX > 0) {
			return false;
		}
		return true;
	}

	public void SetOnViewChangeListener(OnViewChangeListener listener) {
		mOnViewChangeListener = listener;
	}

}

public interface OnViewChangeListener {
public void OnViewChange(int view);
}


?
package com.yyy.weixin;


import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.Animation.AnimationListener;
import android.view.animation.AnimationUtils;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;

public class TestWeiXinOpen extends Activity implements OnViewChangeListener{
	
	private MyScrollLayout mScrollLayout;
	private ImageView[] imgs;
	private int count;
	private int currentItem;
	private Button startBtn;
	private RelativeLayout mainRLayout;
	private LinearLayout pointLLayout;
	private LinearLayout leftLayout;
	private LinearLayout rightLayout;
	private LinearLayout animLayout;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        initView();
    }
    
	private void initView() {
		mScrollLayout  = (MyScrollLayout) findViewById(R.id.ScrollLayout);
		pointLLayout = (LinearLayout) findViewById(R.id.llayout);
		mainRLayout = (RelativeLayout) findViewById(R.id.mainRLayout);
		startBtn = (Button) findViewById(R.id.startBtn);
		startBtn.setOnClickListener(onClick);
		animLayout = (LinearLayout) findViewById(R.id.animLayout);
		leftLayout  = (LinearLayout) findViewById(R.id.leftLayout);
		rightLayout  = (LinearLayout) findViewById(R.id.rightLayout);
		count = mScrollLayout.getChildCount();
		imgs = new ImageView[count];
		for(int i = 0; i< count;i++) {
			imgs[i] = (ImageView) pointLLayout.getChildAt(i);
			imgs[i].setEnabled(true);
			imgs[i].setTag(i);
		}
		currentItem = 0;
		imgs[currentItem].setEnabled(false);
		mScrollLayout.SetOnViewChangeListener(this);
	}
	
	private View.OnClickListener onClick = new View.OnClickListener() {
		@Override
		public void onClick(View v) {
			switch (v.getId()) {
			case R.id.startBtn:
				mScrollLayout.setVisibility(View.GONE);
				pointLLayout.setVisibility(View.GONE);
				animLayout.setVisibility(View.VISIBLE);
				mainRLayout.setBackgroundResource(R.drawable.whatsnew_bg);
				Animation leftOutAnimation = AnimationUtils.loadAnimation(TestWeiXinOpen.this, R.anim.translate_left);
				Animation rightOutAnimation = AnimationUtils.loadAnimation(TestWeiXinOpen.this, R.anim.translate_right);
				leftLayout.startAnimation(leftOutAnimation);
				rightLayout.startAnimation(rightOutAnimation);
				leftOutAnimation.setAnimationListener(new AnimationListener() {
					@Override
					public void onAnimationStart(Animation animation) {
						mainRLayout.setBackgroundColor(R.color.bgColor);
					}
					@Override
					public void onAnimationRepeat(Animation animation) {
					}
					@Override
					public void onAnimationEnd(Animation animation) {
						leftLayout.setVisibility(View.GONE);
						rightLayout.setVisibility(View.GONE);
					}
				});
				break;
			}
		}
	};

	
	@Override
	public void OnViewChange(int position) {
		setcurrentPoint(position);
	}

	private void setcurrentPoint(int position) {
		if(position < 0 || position > count -1 || currentItem == position) {
			return;
		}
		imgs[currentItem].setEnabled(true);
		imgs[position].setEnabled(false);
		currentItem = position;
	}
}


Android仿微信APP实现源码
EricFantastic
10-27 1万+
前几个月做的Android仿微信客户端一直没时间做个总结，现在拿出来整理整理。      实现一个IM实时聊天应用，少不了弄服务器，目前开源的Openfire服务器就比较合适，而且很多功能都已经封装好了，实现聊天APP就简洁很多。服务器后端的数据库我选择了MySQL，当然Openfire也支持大部分的主流数据库，只要在配置的时候修改好参数即可；搭建的时候，把服务器配到8G内存笔记本上，网上得知，
Android studio心得——用fragment仿微信APP
2301_77275933的博客
06-20 2293
在Android Studio的学习过程中，我获得了丰富的知识、技能和经验。fragment是一种控制器对象，activity可委派它完成一些任务，通常这些任务就是管理用户界面，受管理的用户界面可以是一整屏或是整屏的一部分，管理用户界面的fragment又称Ul fragment 它也有自己的布局文件视图，fragment视图包含了用户可以交互的可视化的UI元素，activity视图含有可供fragment视图插入的位置，如果有多个fragment要插入,activity视图也可以提供多个位置。
Android仿微信APP源码
10-28
Android仿微信APP源码，包含登录注册，添加好友，会话，聊天，换肤，二维码扫描等功能，具体配置及使用请参考我的博客：http://blog.youkuaiyun.com/ericfantastic/article/details/49451249
android端仿微信app源码
03-06
一款仿微信客户端的Android APP，帮助大家了解微信页面布局搭建，动画学习
android仿微信app应用
07-23
android仿微信app应用，android仿微信app应用，android仿微信app应用，android仿微信app应用，android仿微信app应用，
Android 仿微信之界面导航篇（一）
热门推荐
极致的专注 无限的热情
11-02 3万+
微信是现在比较流行的应用了，在各大安卓市场几乎都是名列前茅了。说实话不得不羡慕腾讯庞大的用户群体，只要腾讯敢做，就会有很多人去用。废话不多说，下面就开始说一下如何实现微信的第一次启动程序的用户导航，ViewPager相信大家都不陌生了，是google放出的一个安卓低版本的兼容包android-support-v4.jar，里面有很多类我们可以去使用。那这个导航就是使用这个类来辅助完成的，在每一个V
仿微信android app
天龙的博客
10-13 874
仿微信android app，实现了单聊，群聊，图片，语音聊天功能，个人头象的更换，下载好友头象等 ps:还有好多bug没处理，但做这个app花了2个月了，有点累了，只是练个手，就这样收工了吧 作者：天龙 联系QQ：1880161 时间:2015.10.13 本APP中很多图片和工具类都取自网络，经过加工而成，谢谢大家!
Android仿微信语音聊天界面设计
09-01
在本文中，我们将探讨如何在Android平台上实现一个...以上就是Android仿微信语音聊天界面设计的关键知识点和实现流程。通过这个设计，我们可以创建一个功能完备的语音消息系统，让用户能够方便地发送和接收语音消息。
Android仿微信多人音视频通话界面
08-25
Android仿微信多人音视频通话界面是指在Android平台上实现类似微信多人音视频通话功能的界面，主要用于实时通话、视频会议和社交媒体等应用场景。这种界面通常需要具备以下几个关键特性： 1. 多人音视频通话：...
精选资源
Android仿微信之界面导航篇（1）
01-04
微信是现在比较流行的应用了，在各大安卓市场几乎都是名列前茅了。 说实话不得不羡慕腾讯庞大的用户群体，只要腾讯敢做，就会有很多人去用。 废话不多说，下面就开始说一下如何实现微信的第一次启动程序的用户导航，...
android高仿微信聊天界面
05-15
综上所述，"android高仿微信聊天界面"项目涵盖了Android应用开发的多个重要知识点，包括UI设计、传感器交互、网络通信、数据存储和性能优化等，对于提升开发者在实际项目中的技能和经验具有很高的价值。通过这个项目...
精选资源
基于Android Studio开发的安卓的高仿微信
最新发布
03-21
以上是基于Android Studio开发高仿微信应用的一些关键知识点。每个部分都需要深入理解和实践，才能构建出功能完备且用户体验良好的社交应用。记住，持续学习和改进是开发者的重要品质，尤其是在快速发展的移动应用...
安卓仿微信app，有源码和apk
06-15
安卓仿微信写的app页面，有启动页，首页，和列表页面，详情页面 页面美观大方，，非常好看 Android studio打开 。页面有代码和apk文件，完美运行
仿微信App首页
11-13
ViewPager和Fragment仿微信App首页，能够满足大部分商场类的需求
模仿微信登录
05-16
登录界面，键盘挡住编辑框。让键盘向上顶。模仿微信，QQ登录界面效果。
仿微信登录界面
09-20
仿微信登录界面有几个东西，分别是 1、欢迎页，2秒跳转 2、用户名只允许为手机号 3、密码不可见 4、以及忘记密码页面跳转
android studio仿微信主界面
06-14
使用android studio设计微信主界面，采用ViewPager和Fragment相结合的方法，实现界面滑动更换页面，点击等
Android仿微信在线聊天app（含服务端）
安卓精品项目源码
11-29 1204
​ 本系统带服务器端。服务器端代码是javaweb。手机端主要实现了用户注册，登录，添加好友，修改个人信息，发送文字消息等功能，适合新手学习app和服务器端交互原理。搭建方法请看入门教程菜单中的androidstudio(带服务器)项目搭建教程。 ​
高仿微信登入界面
Insist Surpass Strive
11-09 1566
刚刚仿照微信学做了这个微信开始和登入界面，现在把一些自己的心得分享给大家。微信这款应用做的很细致，像页面之间跳转的动画，按钮大小的兼容性，都做的很好，而我只是仿照了一些表面上的东西。 原文地址：http://blog.jerry002.com/archives/359 标签： 代码片段(1) [图片] loginweixin.jpg
Android仿微信UI滑动界面设计与实现
首先，从标题“Android仿微信的UI滑动界面.rar”可以看出，该项目旨在模仿微信应用在启动时所呈现的引导滑动界面（ViewPager + Indicator 组合）。微信作为一款国民级社交应用，其启动引导界面不仅具有良好的交互...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值