仿微信双击一条聊天记录后的效果

在开发中，有时候我们需要双击一个文本内容，需要新启一个界面进行阅览，并且可以对文本内容复制。我这里就是参考微信的双击一条聊天记录之后的效果。在这里只讲解文本放大界面的显示的实现和注意事项。

首先定义布局文件copy_big_text_activity.xml:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"android:layout_width="match_parent"android:layout_height="match_parent"android:background="#fff"android:gravity="center"><TextView
        android:id="@+id/tv_big_text_top"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_marginLeft="50dp"android:layout_marginRight="70dp"android:layout_marginTop="70dp"android:layout_toLeftOf="@id/close_btn"android:ellipsize="end"android:maxLines="1"android:textSize="28sp"/><TextView
        android:id="@+id/tv_big_text_bottom"android:layout_width="match_parent"android:layout_height="wrap_content"android:layout_alignParentBottom="true"android:layout_marginBottom="50dp"android:layout_marginLeft="50dp"android:layout_marginRight="70dp"android:ellipsize="end"android:gravity="right"android:maxLines="1"android:textSize="28sp"/><ScrollView
        android:layout_width="match_parent"android:layout_height="match_parent"android:layout_above="@id/tv_big_text_bottom"android:layout_below="@id/tv_big_text_top"android:layout_marginBottom="50dp"android:layout_marginLeft="50dp"android:layout_marginRight="70dp"android:layout_marginTop="70dp"android:fillViewport="true"android:gravity="center"android:layout_gravity="center"><TextView
            android:textIsSelectable="true"android:id="@+id/tv_big_text"android:layout_width="match_parent"android:layout_height="match_parent"android:gravity="center_vertical"android:scrollbars="vertical"android:textSize="28sp"/></ScrollView>
</RelativeLayout>

.注意事项:
1.因为tv_big_text对应的TextView需要可以复制,所以需要加上android:textIsSelectable=”true”。
2.如果我们给内容显示对应的TextView设置了其他修改位置的属性(例如:padding,margin,gravity),我们会发现TextView的内容会显示不全。我这里个TextView设置了android:gravity=”center_vertical”，导致内容的上面一部分被顶上去了，显示不了，给ScrollView添加android:fillViewport=”true”都没用，后来经过查找资料，给ScrollView添加android:gravity=”center” android:layout_gravity=”center”这两个属性就可以了。

Activity的功能实现:

package com.example.bigtextactivity;import android.app.Activity;
import android.content.Intent;
import android.content.pm.ActivityInfo;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.text.TextUtils;
import android.view.MotionEvent;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;
import android.widget.TextView;/*** Created by Black.Man* Created Time 2017-4-28* dese 意见双击显示页面* <p>* Updata by Administrator* UpData Time ${DATA}* dese*/
public class CopyBigTextActivity extends Activity {private TextView mTvBigText;private TextView mTvBigTextTop;private TextView mTvBigTextBottom;private TextView closeBtn;@Overrideprotected void onCreate(@Nullable Bundle savedInstanceState) {super.onCreate(savedInstanceState);//关闭屏幕顶部的titlerequestWindowFeature(Window.FEATURE_NO_TITLE);setContentView(R.layout.activity_big_text_my);//View.SYSTEM_UI_FLAG_HIDE_NAVIGATION 隐藏虚拟按钮//View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY 点击屏幕不弹出虚拟按钮getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);//隐藏状态栏getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN,WindowManager.LayoutParams.FLAG_FULLSCREEN);initView();initData();}public void initView() {mTvBigText = (TextView) findViewById(R.id.tv_big_text);mTvBigTextTop = (TextView) findViewById(R.id.tv_big_text_top);mTvBigTextBottom = (TextView) findViewById(R.id.tv_big_text_bottom);closeBtn = (TextView) findViewById(R.id.close_btn);closeBtn.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {closeByAni();}});mTvBigText.setOnTouchListener(new View.OnTouchListener() {private long mDownTime;@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mDownTime = System.currentTimeMillis();break;case MotionEvent.ACTION_UP:final long curTime = System.currentTimeMillis();if (curTime - mDownTime < 800) {final boolean hasSelection = mTvBigText.hasSelection();if (hasSelection) {mTvBigText.setText(mTvBigText.getText().toString());break;}closeByAni();}break;}return false;}});}public void initData() {Intent intent = getIntent();String content = intent.getStringExtra("content");mTvBigText.setText(content);String content_top = intent.getStringExtra("content_top");if (TextUtils.isEmpty(content_top)) {mTvBigTextTop.setVisibility(View.GONE);} else {mTvBigTextTop.setVisibility(View.VISIBLE);mTvBigTextTop.setText(content_top);}String content_bottom = intent.getStringExtra("content_bottom");if (TextUtils.isEmpty(content_bottom)) {mTvBigTextBottom.setVisibility(View.GONE);} else {mTvBigTextBottom.setVisibility(View.VISIBLE);mTvBigTextBottom.setText(content_bottom);}}@Overrideprotected void onStart() {overridePendingTransition(R.anim.activity_push_left_in, R.anim.activity_push_right_out);super.onStart();}@Overrideprotected void onResume() {/*** 设置为横屏*/if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) {setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);}super.onResume();}int flag = 0;@Overridepublic boolean onTouchEvent(MotionEvent event) {final boolean textSelectable = mTvBigText.hasSelection();if (textSelectable && flag == 0) {mTvBigText.setText(mTvBigText.getText().toString());flag++;return true;}if (flag != 0) {flag = 0;return true;}finish();return true;}static public void showText(Activity activity,String content, String contentTop, String contentBottom) {Intent intent = new Intent(activity, CopyBigTextActivity.class);intent.putExtra("content", content);intent.putExtra("content_top", contentTop);intent.putExtra("content_bottom", contentBottom);activity.startActivity(intent);activity.overridePendingTransition(R.anim.activity_push_right_in, R.anim.activity_push_left_out);}void closeByAni() {finish();overridePendingTransition(R.anim.activity_push_right_in, R.anim.activity_push_left_out);}@Overridepublic void onBackPressed() {closeByAni();}
}

注意事项:
1.因为当内容超出屏幕的高度时也可以查看，所以用ScrollView嵌套TextView。这里特别需要注意的是:当TextView没有内容被选中的时候，我们瞬间触摸TextView时，直接退出界面，但是当有内容被选中时，点击直接退出接不太好了，所以给TextView设置触摸事件,判断TextView是否有内容被选中，有，就取消掉内容选中的效果，保持界面不被退出：

 mTvBigText.setOnTouchListener(new View.OnTouchListener() {private long mDownTime;@Overridepublic boolean onTouch(View v, MotionEvent event) {switch (event.getAction()) {case MotionEvent.ACTION_DOWN:mDownTime = System.currentTimeMillis();break;case MotionEvent.ACTION_UP:final long curTime = System.currentTimeMillis();if (curTime - mDownTime < 800) {//判断是否有内容被选中final boolean hasSelection = mTvBigText.hasSelection();//有，取消内容选中效果if (hasSelection) {mTvBigText.setText(mTvBigText.getText().toString());break;}closeByAni();}break;}return false;}});}

2.当我们触摸其他的地方是，如果没有内容被选中，直接退出界面，如果内容有被选中，我们需要取消内容选中效果，保持界面不被退出。重写Activity的onTouchEvent(MotionEvent event)：

 int flag = 0;@Overridepublic boolean onTouchEvent(MotionEvent event) {final boolean textSelectable = mTvBigText.hasSelection();if (textSelectable && flag == 0) {mTvBigText.setText(mTvBigText.getText().toString());flag++;return true;}if (flag != 0) {flag = 0;return true;}closeByAni();return true;}

在这里因为onTouchEvent会被调用两次，如果我们不加标记位(flag)区分，不管内容有没有被选中，都会直接退出。

最后献上进入和退出界面的动画：

//activity_push_right_in
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><alpha android:fromAlpha="0.0"android:toAlpha="1.0"android:duration="600"/>
</set>//activity_push_left_out
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><alpha android:fromAlpha="1.0"android:toAlpha="0.0"android:duration="600"/>
</set>//activity_push_left_in
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><alpha android:fromAlpha="0.0"android:toAlpha="1.0"android:duration="600"/>
</set>//acitivy_push_right_out
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"><alpha android:fromAlpha="1.0"android:toAlpha="0.0"android:duration="600"/>
</set>

仿微信双击一条聊天记录后的效果相关推荐

WPF仿微信保存与查看聊天记录
WPF仿微信保存与查看聊天记录之前做了仿微信发送消息,当然也要有个聊天记录来保存消息内容啦,下面一起来看看 ViewModel中在服务器中创建用户与当前聊天好友的文件夹,以便存放聊天记录文件和图片文 ...
工作篇之高仿微信双击消息弹出可自由复制
LZ-Says:书山有路勤为径,学海无涯苦作舟. 前言最近呐,难已琢磨. 很喜欢,却又很忧愁. 喜欢的是,找到了自己认可的.喜欢的工作: 忧愁的是,压力山大. I Love-! 举个栗子 Enmmm ...
Android 天气APP（十三）仿微信弹窗(右上角加号点击弹窗效果)、自定义背景图片、UI优化调整
上一篇:Android 天气APP(十二)空气质量.UI优化调整天气预报详情,逐小时预报详情新版------------------- 一.适配器点击监听二.页面实现三.天气预报详情弹窗四. ...
android中点击加号动画,android animation之scale 缩放（仿微信加号弹出菜单的动画效果）...
仿微信 +号处理事件:弹出菜单的动画效果--缩放(反义词) 放大效果(缩小的代码只需将fromXScale和toXScale,:fromYScale和toYScale变换) android:inte ...
仿微信未读RecyclerView平滑滚动定位效果
效果图有红点的地方表示有未读消息,依次双击首页图标定位,然后定位到某个未读在手动下滑一点距离在次点击定位效果用过 RecyclerView 的人都知道,自带有几个滚动到item下标的方法,但是不靠谱 ...
Android仿微信聊天语言点击喇叭动画效果
微信聊天界面点击语音时,喇叭的动画效果,下面上代码,该类是控制背景变化的工具类,不涉及语音录制和播放. 图片资源: package xxx;import android.os.Handler; imp ...
仿微信朋友圈图片点击放大效果
这两天写了个小项目,其中用到了点击一组图片中的一张可以查看它的放大版,用手向左滑动能看到下一张的这组图片中的第二张的放大版...依次类推,单击放大版的图片实现关闭效果,对于js能力不太好的我只能找度娘 ...
SAP Cloud for Customer的微信集成原型开发完毕后的效果示意图
要获取更多Jerry的原创文章,请关注公众号"汪子熙":
Android版仿微信朋友圈图片拖拽返回效果，websocketapp保活
true 2.初始化 DragCloseHelper dragCloseHelper = new DragCloseHelper(this); 3.如果是共享元素启动的页面,需要如下设置(强烈建议和共 ...

仿微信双击一条聊天记录后的效果

仿微信双击一条聊天记录后的效果相关推荐

最新文章

热门文章