文本伸缩的实现

最新推荐文章于 2021-08-23 14:47:17 发布
最新推荐文章于 2021-08-23 14:47:17 发布
阅读量449 收藏
点赞数 1
分类专栏： 学习笔记 文章标签： 文本的伸缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35556000/article/details/52433928
版权


效果如上,首先是上面的安全信息部分DetailSafeHolder

public class DetailSafeHolder extends BaseHolder<DetailBean> {

    @Bind(R.id.app_detail_safe_iv_arrow)
    ImageView mAppDetailSafeIvArrow;
    @Bind(R.id.app_detail_safe_pic_container)
    LinearLayout mAppDetailSafePicContainer;
    @Bind(R.id.app_detail_safe_des_container)
    LinearLayout mAppDetailSafeDesContainer;
    private View mSafeView;

    private boolean isOpen = false;
    private int mStart;
    private int mEnd;

    @Override
    public void setContent(DetailBean detailBean) {
	//添加几个绿色安全图片
	addPicView(detailBean);
	//添加安全描述信息
	addSafeDes(detailBean);
    }

    @Override
    public View getViewInflate() {
	mSafeView = View.inflate(UiUtil.getContext(), R.layout.item_app_detail_safe, null);
	ButterKnife.bind(this, mSafeView);
	//设置箭头的点击监听事件
	//初始不需要执行伸缩动画
	toggle(false);
	mAppDetailSafeIvArrow.setOnClickListener(new View.OnClickListener() {
	    @Override
	    public void onClick(View v) {
		toggle(true);
	    }
	});
	return mSafeView;
    }

    private void toggle(boolean isAnimator) {
	//首先需要测量安全信息的宽高
	mAppDetailSafeDesContainer.measure(View.MeasureSpec.makeMeasureSpec(
		mAppDetailSafePicContainer.getMeasuredWidth(),
		View.MeasureSpec.EXACTLY), 0);
	//动态定义高度
	int height = mAppDetailSafeDesContainer.getMeasuredHeight();
	if (isAnimator) {
	    //需要执行伸缩动画
	    if (isOpen) {
		//收缩
		mStart = height;
		mEnd = 0;
		//箭头向下动画
		ObjectAnimator animator = ObjectAnimator.ofFloat(mAppDetailSafeIvArrow,"rotation",-180,0);
		animator.setDuration(500);
		animator.start();
	    } else {
		//伸展
		mStart = 0;
		mEnd = height;
		//箭头向上动画
		ObjectAnimator animator = ObjectAnimator.ofFloat(mAppDetailSafeIvArrow,"rotation",0,180);
		animator.setDuration(500);
		animator.start();
	    }
	    //开始动画
	    startAnimation(mStart,mEnd);
	    isOpen = !isOpen;
	} else {
	    //无需伸缩动画
	    ViewGroup.LayoutParams params = mAppDetailSafeDesContainer.getLayoutParams();
	    if (isOpen) {
		//收缩
		params.height = 0;
	    } else {
		//伸展
		params.height = height;
	    }
	    mAppDetailSafeDesContainer.setLayoutParams(params);
	}
    }

    private void startAnimation(int start,int end) {
	ValueAnimator animator = ValueAnimator.ofObject(new FloatEvaluator(),start,end);
	animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
	    @Override
	    public void onAnimationUpdate(ValueAnimator animation) {
		float animatedValue = (float) animation.getAnimatedValue();
		ViewGroup.LayoutParams params = mAppDetailSafeDesContainer.getLayoutParams();
		params.height = (int) animatedValue;
		mAppDetailSafeDesContainer.setLayoutParams(params);
		mAppDetailSafeDesContainer.invalidate();
	    }
	});
	animator.setDuration(500);
	animator.start();
    }

    private void addSafeDes(DetailBean detailBean) {
	for (DetailBean.SafeBean safeBean : detailBean.safe) {
	    LinearLayout desLayout = new LinearLayout(UiUtil.getContext());
	    desLayout.setGravity(Gravity.CENTER);
	    //添加安全描述信息里的图片部分
	    ImageView iv = new ImageView(UiUtil.getContext());
	    String url = Constant.SERVER_IMAGEURL + safeBean.safeDesUrl;
	    Picasso.with(UiUtil.getContext()).load(url).into(iv);
	    desLayout.addView(iv);

	    //添加文字描述信息部分
	    TextView tv = new TextView(UiUtil.getContext());
	    tv.setText(safeBean.safeDes);
	    desLayout.addView(tv);

	    LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
									    ViewGroup.LayoutParams.WRAP_CONTENT);
	    param.leftMargin = 4;
	    //添加到安全信息容器里
	    mAppDetailSafeDesContainer.addView(desLayout,param);
	}
    }

    private void addPicView(DetailBean detailBean) {
	for (DetailBean.SafeBean safeBean : detailBean.safe) {
	    LinearLayout picLayout = new LinearLayout(UiUtil.getContext());
	    picLayout.setGravity(Gravity.CENTER);
	    ImageView picView = new ImageView(UiUtil.getContext());
	    String url = Constant.SERVER_IMAGEURL + safeBean.safeUrl;
	    Picasso.with(UiUtil.getContext()).load(url).into(picView);
	    picLayout.addView(picView);

	    LinearLayout.LayoutParams param = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
									    ViewGroup.LayoutParams.WRAP_CONTENT);
	    param.leftMargin = 4;
	    mAppDetailSafePicContainer.addView(picLayout, param);
	}
    }
}

DetailSafeHolder需要填充的布局文件 item_app_detail_safe.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">

    <!-- 上面部分 -->

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <ImageView
            android:id="@+id/app_detail_safe_iv_arrow"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="15dp"
            android:src="@drawable/arrow_down"/>

        <!-- 图片容器 -->

        <LinearLayout
            android:id="@+id/app_detail_safe_pic_container"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/app_detail_des_iv_arrow"
            android:orientation="horizontal"
            android:paddingBottom="5dp"
            android:paddingLeft="10dp"
            android:paddingTop="5dp">
        </LinearLayout>
    </RelativeLayout>

    <!-- 下面部分 -->

    <LinearLayout
        android:id="@+id/app_detail_safe_des_container"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">
    </LinearLayout>

</LinearLayout>

下面的描述部分DetailDesHolder部分 

public class DetailDesHolder extends BaseHolder<DetailBean> {

    @Bind(R.id.app_detail_des_tv_des)
    TextView mAppDetailDesTvDes;
    @Bind(R.id.app_detail_des_tv_author)
    TextView mAppDetailDesTvAuthor;
    @Bind(R.id.app_detail_des_iv_arrow)
    ImageView mAppDetailDesIvArrow;
    private View mDesView;
    private int mWidth;
    private boolean isOpen = false;
    private int mStart;
    private int mEnd;

    @Override
    public void setContent(DetailBean detailBean) {
	System.out.println("des==" + detailBean.des);
	mAppDetailDesTvDes.setText(detailBean.des);
	mAppDetailDesTvAuthor.setText("作者:" + detailBean.author);
	System.out.println("author==" + detailBean.author);
    }

    @Override
    public View getViewInflate() {
	mDesView = View.inflate(UiUtil.getContext(), R.layout.item_app_detail_des, null);
	ButterKnife.bind(this, mDesView);
	toggle(false);
	mAppDetailDesTvDes.getViewTreeObserver()
			  .addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
			      @Override
			      public void onGlobalLayout() {
				  mWidth = mAppDetailDesTvDes.getMeasuredWidth();
				  mAppDetailDesTvDes.getViewTreeObserver()
						    .removeOnGlobalLayoutListener(this);
			      }
			  });
	mAppDetailDesIvArrow.setOnClickListener(new View.OnClickListener() {
	    @Override
	    public void onClick(View v) {
		toggle(true);
	    }
	});
	return mDesView;
    }

    private void toggle(boolean isAnimator) {
	//首先需要测量描述信息的宽高
	mAppDetailDesTvDes.measure(View.MeasureSpec.makeMeasureSpec(mWidth,
								    View.MeasureSpec.EXACTLY), 0);
	//动态定义高度
	int height = mAppDetailDesTvDes.getMeasuredHeight();
	if (isAnimator) {
	    //需要执行伸缩动画
	    if (isOpen) {
		//收缩
		mStart = height;
		mEnd = get7Height();
		//箭头向下动画
		ObjectAnimator animator = ObjectAnimator.ofFloat(mAppDetailDesIvArrow,
								 "rotation",
								 -180,
								 0);
		animator.setDuration(500);
		animator.start();
	    } else {
		//伸展
		mStart = get7Height();
		mEnd = height;
		//箭头向上动画
		ObjectAnimator animator = ObjectAnimator.ofFloat(mAppDetailDesIvArrow,
								 "rotation",
								 0,
								 180);
		animator.setDuration(500);
		animator.start();
	    }
	    //开始动画
	    startAnimation(mStart, mEnd);
	    isOpen = !isOpen;
	} else {
	    //无需伸缩动画
	    ViewGroup.LayoutParams params = mAppDetailDesTvDes.getLayoutParams();
	    if (isOpen) {
		//收缩
		params.height = 0;
	    } else {
		//伸展
		params.height = height;
	    }
	    mAppDetailDesTvDes.setLayoutParams(params);
	}
    }

    private int get7Height() {
	TextView textView = new TextView(UiUtil.getContext());
	textView.setText(mAppDetailDesTvDes.getText());
	textView.setLines(7);
	textView.measure(View.MeasureSpec.makeMeasureSpec(mWidth, View.MeasureSpec.EXACTLY),0);
	return textView.getMeasuredHeight();
    }

    private void startAnimation(int start, int end) {
	ValueAnimator animator = ValueAnimator.ofObject(new FloatEvaluator(), start, end);
	animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
	    @Override
	    public void onAnimationUpdate(ValueAnimator animation) {
		float animatedValue = (float) animation.getAnimatedValue();
		ViewGroup.LayoutParams params = mAppDetailDesTvDes.getLayoutParams();
		params.height = (int) animatedValue;
		mAppDetailDesTvDes.setLayoutParams(params);
		mAppDetailDesTvDes.invalidate();
	    }
	});

	animator.addListener(new Animator.AnimatorListener() {
	    @Override
	    public void onAnimationStart(Animator animation) {

	    }

	    @Override
	    public void onAnimationEnd(Animator animation) {
		//动画结束时,让ScrollView滚到最下面
		//获取ScrollView
		ViewParent parent = mAppDetailDesTvDes.getParent();
		while (parent != null) {
		    parent = parent.getParent();
		    if (parent != null && parent instanceof ScrollView) {
			//找到了
			ScrollView scrollView = (ScrollView) parent;
			scrollView.fullScroll(View.FOCUS_DOWN);
		    }
		}
	    }

	    @Override
	    public void onAnimationCancel(Animator animation) {

	    }

	    @Override
	    public void onAnimationRepeat(Animator animation) {

	    }
	});
	animator.setDuration(500);
	animator.start();
    }
}

填充 DetailDesHolder的布局文件 item_app_detail_des.xml 

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             android:layout_width="match_parent"
             android:layout_height="match_parent"
             android:padding="4dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@android:color/white"
        android:orientation="vertical"
        android:padding="5dp">

        <!-- 简介 -->

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:singleLine="true"
            android:text="简介"
            android:textColor="@android:color/black"
            android:textSize="16sp"/>

        <!-- 描述详情区域 -->

        <TextView
            android:id="@+id/app_detail_des_tv_des"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp"
            android:text="内容"
            android:textColor="@android:color/darker_gray"
            android:textSize="14sp"/>

        <!-- 作者区域 -->

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="25dp">

            <TextView
                android:id="@+id/app_detail_des_tv_author"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerVertical="true"
                android:text="作者 : "
                android:textColor="@android:color/darker_gray"
                android:textSize="14sp"/>

            <ImageView
                android:id="@+id/app_detail_des_iv_arrow"
                android:layout_width="15dp"
                android:layout_height="15dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:src="@drawable/arrow_down"/>
        </RelativeLayout>
    </LinearLayout>

</FrameLayout>

上面的只是文本伸缩部分的代码片段,仅供参考






ItStepMore
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ExpandableTextView—可以伸缩的文本
程序病毒小队的博客
01-15 3116
介绍ExpandableTextView 是一个Android库，使开发人员能够轻松地创建一个TextView可以展开/折叠就像谷歌Play的应用说明。随意使用它所有你想在你的Android应用程序，只要你引用这个项目。控件一般用在应用详情页面的简介中，可伸缩扩展的。 展示图依赖GitHub源码 点击查看dependencies { compile 'com.ms-square:ex
Android 文本伸缩效果
Litchi的专栏
05-29 701
android开发过程中，经常遇到Textview展示不完全的情况。 遇到此情况，通常的处理是： 方案一、Textview添加android:ellipsize属性，让展示不完的部分使用省略号代替。 方案二、Textview采用走马灯效果，使其滚动展示全部文本内容。(android Textview 使用之二：走马灯效果 android Textview 使用之二：走马灯效果 andro
TextView文字伸缩类似于商品详情文字伸缩
03-30
仿美团百度外卖等软件商品详情点击文字隐藏到你想要的行数和显示全部的一个伸缩功能、
文本阅读伸缩显示
八维空间
11-26 264
看了一个Demo里面类似于文本显示，点击显示更多，再点击图标文本缩回去只显示几行代码（显示几行可以设置），于是乎我把它整理到自己的项目中，完美成功。非常感谢：刘启刚同志提供的下载demo。效果如下图 点击了“更多”显示所有的文章：如下图： 大家可以把文字修改下。初始化时不要获取String文件下的文字内容直接设置成自己想要的内容就可以了。
【基础学习】Android可伸缩文本内容显示
梦想启航者
08-30 1370
介绍： 一个可以伸缩展开并且带平缓过渡动画的自定义文本控件，你可以设置其展开的行数，伸缩收起的图标，伸缩收起的文本和颜色等。 运行效果： 使用说明： 把TextViewExpandableAnimation.java以及一些资源文件比如attrs.xml拷贝到你的项目。 xml  xmlns:app="http://schemas.android.com/apk
C#Winform左侧伸缩菜单实现
03-21
在C# WinForm中，我们可以使用MenuStrip控件来创建菜单项，并通过编程方式控制它们的可见性，从而实现伸缩效果。 1. **创建MenuStrip控件**： 在WinForm设计界面，从工具箱中拖拽MenuStrip控件到窗体上。然后，...
文本伸缩显示
11-26
"文本伸缩显示"是一种优化用户体验的技术，尤其当文本内容较长时，能够有效地管理屏幕空间，避免内容过于拥挤或者需要滚动才能查看全部信息。这种功能通常通过设置`TextView`的相关属性来实现。 1. **单行显示与...
android使用Textview实现伸缩效果
08-28
Android 使用 Textview 实现伸缩效果 Android 中，Textview 是一个常用的控件，用于显示文本信息。在实际开发中，我们经常会遇到 Textview 展示不完全的情况，这时我们需要使用一些技巧来解决这个问题。本文将详细...
WPF 简单实现上下伸缩面板效果
02-28
在Windows Presentation Foundation（WPF）中，创建一个可以伸缩的面板效果，通常是通过使用`Expander`控件来实现的。`Expander`控件允许用户通过点击一个标题来展开或折叠其内容区域，这在展示大量信息时非常有用，...
JS实现横向拉伸动感伸缩菜单效果代码
10-23
本文将详细解读如何通过JavaScript实现具有动态伸缩效果的横向菜单。在探讨实现细节之前，首先要明确以下几个关键知识点： 1. JavaScript定时器函数：在本文中，定时器函数指的是`setInterval`和`clearInterval`。`...
html+css实现文字折叠特效实例
yunduanaoligei的博客
08-23 849
近期在学习培训html css，因此梳理了一下思路，写了一个小demo，文中关键详细介绍了html css完成文本伸缩动画特效案例，感兴趣的小伙伴们能够参考一下 本文主要介绍了html+css实现文字折叠特效实例，分享给大家，具体如下： 效果： watermark,size_14,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_100,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk= 实现： 定义标签： 1 aurora 设
js点击收缩展开文本（不能用废弃）
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
10-27 2083
&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8" /&gt; &lt;title&gt;js点击收缩展开文本&lt;/title&gt; &lt;script src="http://libs.baidu.com/jq...
长文案展开和收缩实现
xingzhong128的博客
04-19 1063
前言 Android应用中通常有一些很长的文案，比如有些用户评论或者文章内容特别的长，如果整体都展示出来可能会占据很大的空间，其他的控件都无法完全展现在用户面前。通常程序会对长文案做收缩操作，只展示开头的部分，用户如果真的对内容感兴趣可以点击展开按钮或文字，这种功能在应用中很常见。现在就来简单实现两种常见的展开缩放功能。 实现效果 自定义控件实现 自定义控件实现要求展开/缩放按钮和...
仿新浪微博发布时 @ 及 #某话题# 的效果
Alexander Wei的博客
09-18 1866
项目需要实现如下效果： 我实现的思路是，监听textView的变化，然后使用正则匹配出 #话题# 和 @对象所在位置，动态设置文本的颜色，代码如下： #pragma mark - UITextViewDelegate - (void)textViewDidChange:(UITextView *)textView { self.placeholderLbl.hidden...
JS与安卓的通信
ItStepMore的博客
09-08 4228
JS与安卓的通信包括了安卓调用JS,JS调用安卓以及比较常用的使用callback方式调用. 要调用JS,首先要开启JS,调用websetting的setJavaScriptEnable(true);接着需要设置webview的加载打开方式,setWebViewClient(),setChromClient(),需要重写里面的方法. 首先,安卓调用JS,需要调用方法 mWebView.loa
第三方登录之QQ登录集成(一)
ItStepMore的博客
09-04 1615
首先还是得先到QQ的开发平台下载SDK和Demo,先导入eclipse观察,然后决定哪些资源导入AS 先看以WebView方式登录QQ的集成 1.导入资源 2.配置清单文件 配置权限和activity   3.调用SDK的方法 /** * 打开登录认证与授权页面 * * @param String * clientId 申请时分配的
自定义购物车控件，使用起来就是这么丝滑
ItStepMore的博客
04-19 1395
本购物车自定义控件包括了购物车的抛物线动画效果，根据需求可设置是否需要。本控件自定义view，详细实现，代码注释较详细，请参考注释。 首先过下效果图 按照自定义控件三部曲，首先创建attr属性文件，定义相关属性。 res/values/attrs.xml
安卓中一些界面过场动画的实现
ItStepMore的博客
02-22 1174
一.在res的anim下写anim文件 <alpha xmlns:android="http://schemas.android.com/apk/res/android" android:interpolator="@android:anim/accelerate_interpolator" android:fromAlpha="0.0" android:toAlpha="1.
简析Activity的工作流程
ItStepMore的博客
06-29 1140
对于Activity的分析，本文选择的是安卓8.0的源码，我们从Activity的创建即onCreat方法去探索它的工作流程。分析之前，先上一个UML活动图，大致梳理一下工作流程:我们平时通调用startActivity方法来启动一个Activity，所以就从startActivity这个方法分析。通过API，Activity有多个重载的startActivity方法，但最终都调用的是startA...
Android实现京东搜索框滑动伸缩动画
"这篇文章主要介绍了如何在Android平台上实现京东应用顶部搜索框的滑动伸缩动画效果，通过分析京东和安居客的相似效果，并创建自定义的滑动控件来达到这一目的。" 在Android开发中，为了实现类似京东顶部搜索框的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值