背景
創(chuàng)新互聯(lián)2013年至今，先為盤錦等服務(wù)建站，盤錦等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為盤錦企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問題。
在開發(fā)過程中，當(dāng)我們的需求中包含說說或者評(píng)論等內(nèi)容的展示時(shí)，我們都會(huì)考慮當(dāng)內(nèi)容太多時(shí)該如何顯示。當(dāng)內(nèi)容的字?jǐn)?shù)太多，如果全部展示出來可能會(huì)影響體驗(yàn)效果，但是又不能只截取一部分內(nèi)容進(jìn)行展示，此時(shí)就需要考慮使用多行顯示折疊的效果來實(shí)現(xiàn)。
效果圖：
使用
1.布局文件調(diào)用
2.Java文件調(diào)用
重慶分公司
重慶分公司
private void initData() {
mTvMoreLineShort.setText(Constant.content1);
mTvExpandableShort.setText(Constant.content2);
mTvMoreLineLong.setText(Constant.content3);
mTvExpandableLong.setText(Constant.content4);
}
MoreLineTextView使用
1.在attr.xml中定義屬性
2.是否顯示折疊效果
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 如果沒有變化，測(cè)量并返回
if (!mRelayout || getVisibility() == View.GONE) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
return;
}
mRelayout = false;
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 內(nèi)容區(qū)域初始顯示行高
mTvContent.setHeight(mTvContent.getLineHeight() * (mMaxLine > mTvContent.getLineCount() ? mTvContent.getLineCount() : mMaxLine));
mLlExpand.post(new Runnable() {
@Override
public void run() {
// 是否顯示折疊效果
mLlExpand.setVisibility(mTvContent.getLineCount() > mMaxLine ? View.VISIBLE : View.GONE);
}
});
}
3.設(shè)置顯示內(nèi)容
/**
* @Description 設(shè)置顯示內(nèi)容
*/
public void setText(String str) {
mRelayout = true;
mTvContent.setText(str);
setVisibility(TextUtils.isEmpty(str) ? View.GONE : View.VISIBLE);
}
4.展開/收起動(dòng)畫
@Override
public void onClick(View v) {
if (mTvContent.getLineCount() <= mMaxLine) {
return;
}
isExpand = !isExpand;
mTvContent.clearAnimation();
final int deltaValue;
final int startValue = mTvContent.getHeight();
if (isExpand) {
deltaValue = mTvContent.getLineHeight() * mTvContent.getLineCount() - startValue;//計(jì)算要展開高度
RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(mDurationMillis);
animation.setFillAfter(true);
mIvExpand.startAnimation(animation);
mTvExpand.setText(getContext().getString(R.string.collapse));
} else {
deltaValue = mTvContent.getLineHeight() * mMaxLine - startValue;//為負(fù)值，收縮的高度
RotateAnimation animation = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(mDurationMillis);
animation.setFillAfter(true);
mIvExpand.startAnimation(animation);
mTvExpand.setText(getContext().getString(R.string.expand));
}
Animation animation = new Animation() {
protected void applyTransformation(float interpolatedTime, Transformation t) {
//interpolatedTime:為當(dāng)前動(dòng)畫幀對(duì)應(yīng)的相對(duì)時(shí)間，值總在0-1之間,原始長度+高度差*（從0到1的漸變）即表現(xiàn)為動(dòng)畫效果
mTvContent.setHeight((int) (startValue + deltaValue * interpolatedTime));
}
};
animation.setDuration(mDurationMillis);
mTvContent.startAnimation(animation);
}
ExpandableTextView使用
1.在attr.xml中定義屬性
2.是否顯示折疊效果
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 如果沒有變化，測(cè)量并返回
if (!mRelayout || getVisibility() == View.GONE) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
return;
}
mRelayout = false;
// Setup with optimistic case
// i.e. Everything fits. No button needed
mLlExpand.setVisibility(View.GONE);
mTvContent.setMaxLines(Integer.MAX_VALUE);
// Measure
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//如果內(nèi)容真實(shí)行數(shù)小于等于最大行數(shù)，不處理
if (mTvContent.getLineCount() <= mMaxCollapsedLines) {
return;
}
// 獲取內(nèi)容tv真實(shí)高度（含padding）
mTextHeightWithMaxLines = getRealTextViewHeight(mTvContent);
// 如果是收起狀態(tài)，重新設(shè)置最大行數(shù)
if (mCollapsed) {
mTvContent.setMaxLines(mMaxCollapsedLines);
}
mLlExpand.setVisibility(View.VISIBLE);
// Re-measure with new setup
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (mCollapsed) {
// Gets the margin between the TextView's bottom and the ViewGroup's bottom
mTvContent.post(new Runnable() {
@Override
public void run() {
mMarginBetweenTxtAndBottom = getHeight() - mTvContent.getHeight();
}
});
// 保存這個(gè)容器的測(cè)量高度
mCollapsedHeight = getMeasuredHeight();
}
}
3.設(shè)置顯示內(nèi)容
/**
* @Description 設(shè)置顯示內(nèi)容
*/
public void setText(CharSequence text) {
mRelayout = true;
mTvContent.setText(text);
setVisibility(TextUtils.isEmpty(text) ? View.GONE : View.VISIBLE);
}
4.展開/收起動(dòng)畫
@Override
public void onClick(View view) {
if (mLlExpand.getVisibility() != View.VISIBLE) {
return;
}
mCollapsed = !mCollapsed;
// 修改收起/展開圖標(biāo)、文字
setDrawbleAndText();
// 保存位置狀態(tài)
if (mCollapsedStatus != null) {
mCollapsedStatus.put(mPosition, mCollapsed);
}
// 執(zhí)行展開/收起動(dòng)畫
mAnimating = true;
ValueAnimator valueAnimator;
if (mCollapsed) {
valueAnimator = new ValueAnimator().ofInt(getHeight(), mCollapsedHeight);
} else {
mCollapsedHeight = getHeight();
valueAnimator = new ValueAnimator().ofInt(getHeight(), getHeight() + mTextHeightWithMaxLines - mTvContent.getHeight());
}
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator valueAnimator) {
int animatedValue = (int) valueAnimator.getAnimatedValue();
mTvContent.setMaxHeight(animatedValue - mMarginBetweenTxtAndBottom);
getLayoutParams().height = animatedValue;
requestLayout();
}
});
valueAnimator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
// 動(dòng)畫結(jié)束后發(fā)送結(jié)束的信號(hào)，清除動(dòng)畫標(biāo)志
mAnimating = false;
// 通知監(jiān)聽
if (mListener != null) {
mListener.onExpandStateChanged(mTvContent, !mCollapsed);
}
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
valueAnimator.setDuration(mAnimationDuration);
valueAnimator.start();
}
項(xiàng)目地址 ☞ 傳送門
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
