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

最新推荐文章于 2023-04-24 18:37:55 发布

MyselfGang

最新推荐文章于 2023-04-24 18:37:55 发布

阅读量1.7k

点赞数

分类专栏：仿微信之界面文章标签： android 微信

本文链接：https://blog.csdn.net/MyselfGang/article/details/78696174

版权

仿微信之界面专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

首先定义布局文件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;


    @Override
    protected void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //关闭屏幕顶部的title
        requestWindowFeature(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() {
            @Override
            public void onClick(View v) {
                closeByAni();
            }
        });

        mTvBigText.setOnTouchListener(new View.OnTouchListener() {

            private long mDownTime;

            @Override
            public 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);
        }
    }

    @Override
    protected void onStart() {
        overridePendingTransition(R.anim.activity_push_left_in, R.anim.activity_push_right_out);
        super.onStart();
    }

    @Override
    protected void onResume() {
        /**
         * 设置为横屏
         */
        if (getRequestedOrientation() != ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE) {
            setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_LANDSCAPE);
        }
        super.onResume();
    }

    int flag = 0;
    @Override
    public 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);
    }

    @Override
    public void onBackPressed() {
        closeByAni();
    }
}

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

 mTvBigText.setOnTouchListener(new View.OnTouchListener() {

            private long mDownTime;

            @Override
            public 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;
 @Override
  public 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>

MyselfGang

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
仿微信双击一条聊天记录后的效果

在开发中，有时候我们需要双击一个文本内容，需要新启一个界面进行阅览，并且可以对文本内容复制。我这里就是参考微信的双击一条聊天记录之后的效果。在这里只讲解文本放大界面的显示的实现和注意事项。首先定义布局文件copy_big_text_activity.xml:<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android
复制链接

扫一扫