私はTextView最初に長いテキストの小さな部分を表示するを持っています。
ユーザーは「もっと見る」ボタンを押してを展開し、TextViewそのテキストの残りを見ることができます。
テストを行うとTextView.setMaxLines、折りたたみの場合は4の値を、展開の場合はInteger.MAX_VALUEの値を交換するだけで到達できます。
さて、この振る舞いにアニメーションを添えてほしいと思います。この質問では、1つの解決策がほぼ完了していることを知っていますが、それを実装しようとしましたが、成功しませんでした。
誰かがこれを手伝ってくれますか？
ExpandableTexTViewで私のブログ投稿を確認できます。
アイデアは、最初にTextViewが長いテキストのごく一部を表示し、クリックすると残りのテキストを表示するというものです。
これが私がそれをどのように解決したかというコードです。
package com.rokonoid.widget;
import android.content.Context;
import android.content.res.TypedArray;
import android.text.SpannableStringBuilder;
import android.util.AttributeSet;
import android.view.View;
import android.widget.TextView;
/**
* User: Bazlur Rahman Rokon
* Date: 9/7/13 - 3:33 AM
*/
public class ExpandableTextView extends TextView {
private static final int DEFAULT_TRIM_LENGTH = 200;
private static final String ELLIPSIS = ".....";
private CharSequence originalText;
private CharSequence trimmedText;
private BufferType bufferType;
private boolean trim = true;
private int trimLength;
public ExpandableTextView(Context context) {
this(context, null);
}
public ExpandableTextView(Context context, AttributeSet attrs) {
super(context, attrs);
TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableTextView);
this.trimLength = typedArray.getInt(R.styleable.ExpandableTextView_trimLength, DEFAULT_TRIM_LENGTH);
typedArray.recycle();
setOnClickListener(new OnClickListener() {
@Override
public void onClick(View v) {
trim = !trim;
setText();
requestFocusFromTouch();
}
});
}
private void setText() {
super.setText(getDisplayableText(), bufferType);
}
private CharSequence getDisplayableText() {
return trim ? trimmedText : originalText;
}
@Override
public void setText(CharSequence text, BufferType type) {
originalText = text;
trimmedText = getTrimmedText(text);
bufferType = type;
setText();
}
private CharSequence getTrimmedText(CharSequence text) {
if (originalText != null && originalText.length() > trimLength) {
return new SpannableStringBuilder(originalText, 0, trimLength + 1).append(ELLIPSIS);
} else {
return originalText;
}
}
public CharSequence getOriginalText() {
return originalText;
}
public void setTrimLength(int trimLength) {
this.trimLength = trimLength;
trimmedText = getTrimmedText(originalText);
setText();
}
public int getTrimLength() {
return trimLength;
}
}
そして、attr.xmlに次の行を追加します
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="ExpandableTextView">
<attr name="trimLength" format="integer"/>
</declare-styleable>
</resources>
main.xmlに以下を入力します
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent">
<com.rokonoid.widget.ExpandableTextView
android:id="@+id/lorem_ipsum"
android:layout_width="fill_parent"
android:layout_height="wrap_content"/>
</LinearLayout>
そしてあなたの活動をテストします
package com.rokonoid.widget;
import android.app.Activity;
import android.os.Bundle;
public class MyActivity extends Activity {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
String yourText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. " +
"Ut volutpat interdum interdum. Nulla laoreet lacus diam, vitae " +
"sodales sapien commodo faucibus. Vestibulum et feugiat enim. Donec " +
"semper mi et euismod tempor. Sed sodales eleifend mi id varius. Nam " +
"et ornare enim, sit amet gravida sapien. Quisque gravida et enim vel " +
"volutpat. Vivamus egestas ut felis a blandit. Vivamus fringilla " +
"dignissim mollis. Maecenas imperdiet interdum hendrerit. Aliquam" +
" dictum hendrerit ultrices. Ut vitae vestibulum dolor. Donec auctor ante" +
" eget libero molestie porta. Nam tempor fringilla ultricies. Nam sem " +
"lectus, feugiat eget ullamcorper vitae, ornare et sem. Fusce dapibus ipsum" +
" sed laoreet suscipit. ";
ExpandableTextView expandableTextView = (ExpandableTextView) findViewById(R.id.lorem_ipsum);
expandableTextView.setText(yourText);
}
}
ObjectAnimatorを使用します。
ObjectAnimator animation = ObjectAnimator.ofInt(yourTextView, "maxLines", tv.getLineCount());
animation.setDuration(200).start();
これにより、TextViewが200ミリ秒にわたって完全に拡張されます。tv.getLineCount()折りたたむテキストの行数に置き換えることができます。
- - アップデート - -
ドロップインできる便利な方法は次のとおりです。
private void expandTextView(TextView tv){
ObjectAnimator animation = ObjectAnimator.ofInt(tv, "maxLines", tv.getLineCount());
animation.setDuration(200).start();
}
private void collapseTextView(TextView tv, int numLines){
ObjectAnimator animation = ObjectAnimator.ofInt(tv, "maxLines", numLines);
animation.setDuration(200).start();
}
API 16以降を使用している場合は、textView.getMaxLines（）を使用して、textViewが展開されているかどうかを簡単に判断できます。
private void cycleTextViewExpansion(TextView tv){
int collapsedMaxLines = 3;
ObjectAnimator animation = ObjectAnimator.ofInt(tv, "maxLines",
tv.getMaxLines() == collapsedMaxLines? tv.getLineCount() : collapsedMaxLines);
animation.setDuration(200).start();
}
ノート：
maxLinesが設定されていない場合、またはtextViewの高さをピクセル単位で設定している場合は、ArrayIndexOutOfBounds例外が発生する可能性があります。
上記の例では、3行拡張するか400行拡張するかに関係なく、常に200ミリ秒かかります。一定の拡張速度が必要な場合は、次のように実行できます。
int duration = (textView.getLineCount() - collapsedMaxLines) * 10;
インターネットで見つけた他のソリューションに満足できなかったため、このためのオープンソースライブラリを作成しました。私はそれをGitHubに置いたので、誰でも無料で使用できます。
public class ExpandableTextView extends TextView
{
// copy off TextView.LINES
private static final int MAXMODE_LINES = 1;
private OnExpandListener onExpandListener;
private TimeInterpolator expandInterpolator;
private TimeInterpolator collapseInterpolator;
private final int maxLines;
private long animationDuration;
private boolean animating;
private boolean expanded;
private int originalHeight;
public ExpandableTextView(final Context context)
{
this(context, null);
}
public ExpandableTextView(final Context context, final AttributeSet attrs)
{
this(context, attrs, 0);
}
public ExpandableTextView(final Context context, final AttributeSet attrs, final int defStyle)
{
super(context, attrs, defStyle);
// read attributes
final TypedArray attributes = context.obtainStyledAttributes(attrs, R.styleable.ExpandableTextView, defStyle, 0);
this.animationDuration = attributes.getInt(R.styleable.ExpandableTextView_animation_duration, BuildConfig.DEFAULT_ANIMATION_DURATION);
attributes.recycle();
// keep the original value of maxLines
this.maxLines = this.getMaxLines();
// create default interpolators
this.expandInterpolator = new AccelerateDecelerateInterpolator();
this.collapseInterpolator = new AccelerateDecelerateInterpolator();
}
@Override
public int getMaxLines()
{
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.JELLY_BEAN)
{
return super.getMaxLines();
}
try
{
final Field mMaxMode = TextView.class.getField("mMaxMode");
mMaxMode.setAccessible(true);
final Field mMaximum = TextView.class.getField("mMaximum");
mMaximum.setAccessible(true);
final int mMaxModeValue = (int) mMaxMode.get(this);
final int mMaximumValue = (int) mMaximum.get(this);
return mMaxModeValue == MAXMODE_LINES ? mMaximumValue : -1;
}
catch (final Exception e)
{
return -1;
}
}
/**
* Toggle the expanded state of this {@link ExpandableTextView}.
* @return true if toggled, false otherwise.
*/
public boolean toggle()
{
if (this.expanded)
{
return this.collapse();
}
return this.expand();
}
/**
* Expand this {@link ExpandableTextView}.
* @return true if expanded, false otherwise.
*/
public boolean expand()
{
if (!this.expanded && !this.animating && this.maxLines >= 0)
{
this.animating = true;
// notify listener
if (this.onExpandListener != null)
{
this.onExpandListener.onExpand(this);
}
// get original height
this.measure
(
MeasureSpec.makeMeasureSpec(this.getMeasuredWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
);
this.originalHeight = this.getMeasuredHeight();
// set maxLines to MAX Integer
this.setMaxLines(Integer.MAX_VALUE);
// get new height
this.measure
(
MeasureSpec.makeMeasureSpec(this.getMeasuredWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(0, MeasureSpec.UNSPECIFIED)
);
final int fullHeight = this.getMeasuredHeight();
final ValueAnimator valueAnimator = ValueAnimator.ofInt(this.originalHeight, fullHeight);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
@Override
public void onAnimationUpdate(final ValueAnimator animation)
{
final ViewGroup.LayoutParams layoutParams = ExpandableTextView.this.getLayoutParams();
layoutParams.height = (int) animation.getAnimatedValue();
ExpandableTextView.this.setLayoutParams(layoutParams);
}
});
valueAnimator.addListener(new AnimatorListenerAdapter()
{
@Override
public void onAnimationEnd(final Animator animation)
{
ExpandableTextView.this.expanded = true;
ExpandableTextView.this.animating = false;
}
});
// set interpolator
valueAnimator.setInterpolator(this.expandInterpolator);
// start the animation
valueAnimator
.setDuration(this.animationDuration)
.start();
return true;
}
return false;
}
/**
* Collapse this {@link TextView}.
* @return true if collapsed, false otherwise.
*/
public boolean collapse()
{
if (this.expanded && !this.animating && this.maxLines >= 0)
{
this.animating = true;
// notify listener
if (this.onExpandListener != null)
{
this.onExpandListener.onCollapse(this);
}
// get new height
final int fullHeight = this.getMeasuredHeight();
final ValueAnimator valueAnimator = ValueAnimator.ofInt(fullHeight, this.originalHeight);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener()
{
@Override
public void onAnimationUpdate(final ValueAnimator animation)
{
final ViewGroup.LayoutParams layoutParams = ExpandableTextView.this.getLayoutParams();
layoutParams.height = (int) animation.getAnimatedValue();
ExpandableTextView.this.setLayoutParams(layoutParams);
}
});
valueAnimator.addListener(new AnimatorListenerAdapter()
{
@Override
public void onAnimationEnd(final Animator animation)
{
// set maxLines to original value
ExpandableTextView.this.setMaxLines(ExpandableTextView.this.maxLines);
ExpandableTextView.this.expanded = false;
ExpandableTextView.this.animating = false;
}
});
// set interpolator
valueAnimator.setInterpolator(this.collapseInterpolator);
// start the animation
valueAnimator
.setDuration(this.animationDuration)
.start();
return true;
}
return false;
}
/**
* Sets the duration of the expand / collapse animation.
* @param animationDuration duration in milliseconds.
*/
public void setAnimationDuration(final long animationDuration)
{
this.animationDuration = animationDuration;
}
/**
* Sets a listener which receives updates about this {@link ExpandableTextView}.
* @param onExpandListener the listener.
*/
public void setOnExpandListener(final OnExpandListener onExpandListener)
{
this.onExpandListener = onExpandListener;
}
/**
* Returns the {@link OnExpandListener}.
* @return the listener.
*/
public OnExpandListener getOnExpandListener()
{
return onExpandListener;
}
/**
* Sets a {@link TimeInterpolator} for expanding and collapsing.
* @param interpolator the interpolator
*/
public void setInterpolator(final TimeInterpolator interpolator)
{
this.expandInterpolator = interpolator;
this.collapseInterpolator = interpolator;
}
/**
* Sets a {@link TimeInterpolator} for expanding.
* @param expandInterpolator the interpolator
*/
public void setExpandInterpolator(final TimeInterpolator expandInterpolator)
{
this.expandInterpolator = expandInterpolator;
}
/**
* Returns the current {@link TimeInterpolator} for expanding.
* @return the current interpolator, null by default.
*/
public TimeInterpolator getExpandInterpolator()
{
return this.expandInterpolator;
}
/**
* Sets a {@link TimeInterpolator} for collpasing.
* @param collapseInterpolator the interpolator
*/
public void setCollapseInterpolator(final TimeInterpolator collapseInterpolator)
{
this.collapseInterpolator = collapseInterpolator;
}
/**
* Returns the current {@link TimeInterpolator} for collapsing.
* @return the current interpolator, null by default.
*/
public TimeInterpolator getCollapseInterpolator()
{
return this.collapseInterpolator;
}
/**
* Is this {@link ExpandableTextView} expanded or not?
* @return true if expanded, false if collapsed.
*/
public boolean isExpanded()
{
return this.expanded;
}
public interface OnExpandListener
{
void onExpand(ExpandableTextView view);
void onCollapse(ExpandableTextView view);
}
}
ExpandableTextViewの使用は非常に簡単で、いくつかの追加機能が追加された通常のTextViewです。android：maxLines属性を定義することにより、TextViewの折りたたみ状態のデフォルトの行数を設定できます。
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<at.blogc.android.views.ExpandableTextView
android:id="@+id/expandableTextView"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lorem_ipsum"
android:maxLines="5"
android:ellipsize="end"
app:animation_duration="1000"/>
<!-- Optional parameter animation_duration: sets the duration of the expand animation -->
<Button
android:id="@+id/button_toggle"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/expand"/>
</LinearLayout>
アクティビティまたはフラグメント：
final ExpandableTextView expandableTextView = (ExpandableTextView) this.findViewById(R.id.expandableTextView);
final Button buttonToggle = (Button) this.findViewById(R.id.button_toggle);
// set animation duration via code, but preferable in your layout files by using the animation_duration attribute
expandableTextView.setAnimationDuration(1000L);
// set interpolators for both expanding and collapsing animations
expandableTextView.setInterpolator(new OvershootInterpolator());
// or set them separately
expandableTextView.setExpandInterpolator(new OvershootInterpolator());
expandableTextView.setCollapseInterpolator(new OvershootInterpolator());
// toggle the ExpandableTextView
buttonToggle.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(final View v)
{
expandableTextView.toggle();
buttonToggle.setText(expandableTextView.isExpanded() ? R.string.collapse : R.string.expand);
}
});
// but, you can also do the checks yourself
buttonToggle.setOnClickListener(new View.OnClickListener()
{
@Override
public void onClick(final View v)
{
if (expandableTextView.isExpanded())
{
expandableTextView.collapse();
buttonToggle.setText(R.string.expand);
}
else
{
expandableTextView.expand();
buttonToggle.setText(R.string.collapse);
}
}
});
// listen for expand / collapse events
expandableTextView.setOnExpandListener(new ExpandableTextView.OnExpandListener()
{
@Override
public void onExpand(final ExpandableTextView view)
{
Log.d(TAG, "ExpandableTextView expanded");
}
@Override
public void onCollapse(final ExpandableTextView view)
{
Log.d(TAG, "ExpandableTextView collapsed");
}
});
このライブラリは、Androidプロジェクトへのgradle依存関係として簡単に追加できます。詳細な手順については、Githubのプロジェクトをご覧ください。
スムーズな拡張（heighとObjectAnimatorを使用）参考
：API11が必要
public static void expandCollapsedByMaxLines(@NonNull final TextView text) {
final int height = text.getMeasuredHeight();
text.setHeight(height);
text.setMaxLines(Integer.MAX_VALUE); //expand fully
text.measure(View.MeasureSpec.makeMeasureSpec(text.getMeasuredWidth(), View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(ViewGroup.LayoutParams.WRAP_CONTENT, View.MeasureSpec.UNSPECIFIED));
final int newHeight = text.getMeasuredHeight();
ObjectAnimator animation = ObjectAnimator.ofInt(text, "height", height, newHeight);
animation.setDuration(250).start();
}
PS私はTextViewがmaxLinesによって制限されていると仮定します。
PSSはObjectAnimatorの例をAmagi82に感謝します
行数に基づいて実行する場合は、次の方法で実行できます。
（完全なコードの要点）
/**
* Ellipsize the text when the lines of text exceeds the value provided by {@link #makeExpandable} methods.
* Appends {@link #MORE} or {@link #LESS} as needed.
* TODO: add animation
* Created by vedant on 3/10/15.
*/
public class ExpandableTextView extends TextView {
private static final String TAG = "ExpandableTextView";
private static final String ELLIPSIZE = "... ";
private static final String MORE = "more";
private static final String LESS = "less";
private String mFullText;
private int mMaxLines;
//...constructors...
public void makeExpandable(String fullText, int maxLines) {
mFullText =fullText;
mMaxLines = maxLines;
ViewTreeObserver vto = getViewTreeObserver();
vto.addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
ViewTreeObserver obs = getViewTreeObserver();
obs.removeOnGlobalLayoutListener(this);
if (getLineCount() <= maxLines) {
setText(mFullText);
} else {
setMovementMethod(LinkMovementMethod.getInstance());
showLess();
}
}
});
}
/**
* truncate text and append a clickable {@link #MORE}
*/
private void showLess() {
int lineEndIndex = getLayout().getLineEnd(mMaxLines - 1);
String newText = mFullText.substring(0, lineEndIndex - (ELLIPSIZE.length() + MORE.length() + 1))
+ ELLIPSIZE + MORE;
SpannableStringBuilder builder = new SpannableStringBuilder(newText);
builder.setSpan(new ClickableSpan() {
@Override
public void onClick(View widget) {
showMore();
}
}, newText.length() - MORE.length(), newText.length(), 0);
setText(builder, BufferType.SPANNABLE);
}
/**
* show full text and append a clickable {@link #LESS}
*/
private void showMore() {
// create a text like subText + ELLIPSIZE + MORE
SpannableStringBuilder builder = new SpannableStringBuilder(mFullText + LESS);
builder.setSpan(new ClickableSpan() {
@Override
public void onClick(View widget) {
showLess();
}
}, builder.length() - LESS.length(), builder.length(), 0);
setText(builder, BufferType.SPANNABLE);
}
}
上記の応答のいくつかを使用して私のために働いたものは次のとおりです（私は例でButterKnifeを使用しています）：
private static final MAX_LINE_COUNT = 3;
@Bind(R.id.description)
TextView mDescription;
@Override
protected void onCreate(Bundle savedInstanceState) {
if(!TextUtils.isEmpty(mDescription)) {
mDescription.setText(mItem.description);
mDescription.setMaxLines(MAX_LINE_COUNT);
mDescription.setEllipsize(TextUtils.TruncateAt.END);
} else {
mDescription.setVisibility(View.GONE);
}
}
@OnClick(R.id.description)
void collapseExpandTextView(TextView tv) {
if (tv.getMaxLines() == MAX_LINE_COUNT) {
// collapsed - expand it
tv.setEllipsize(null);
tv.setMaxLines(Integer.MAX_VALUE);
} else {
// expanded - collapse it
tv.setEllipsize(TextUtils.TruncateAt.END);
tv.setMaxLines(MAX_LINE_COUNT);
}
ObjectAnimator animation = ObjectAnimator.ofInt(tv, "maxLines", tv.getMaxLines());
animation.setDuration(200).start();
}
ユーザーが説明をクリックすると、最大行数に基づいて折りたたまれたり展開されたりします。これはAPI16以降でのみ機能します。
私が遭遇した問題は、ラインカウントがポイントでゼロを返し、ラインカウントと最大カウントが特定のポイントで同じ値であったことでした。
あなたはこのようなことをすることができます。通常のビューでも、ListViewまたはRecyclerView内のビューでも、あらゆる種類のビューで機能します。
または同様のものにonCreate()、次を追加します。
// initialize integers
int collapsedHeight, expandedHeight;
// get collapsed height after TextView is drawn
textView.post(new Runnable() {
@Override
public void run() {
collapsedHeight = textView.getMeasuredHeight();
}
});
// view that will expand/collapse your TextView
view.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
// number of max lines when collapsed
if (textView.getMaxLines() == 2) {
// expand
textView.setMaxLines(Integer.MAX_VALUE);
textView.measure(View.MeasureSpec.makeMeasureSpec(notifMessage.getMeasuredWidth(), View.MeasureSpec.EXACTLY), View.MeasureSpec.makeMeasureSpec(View.MeasureSpec.UNSPECIFIED, View.MeasureSpec.UNSPECIFIED));
expandedHeight = textView.getMeasuredHeight();
ObjectAnimator animation = ObjectAnimator.ofInt(textView, "height", collapsedHeight, expandedHeight);
animation.setDuration(250).start();
} else {
// collapse
ObjectAnimator animation = ObjectAnimator.ofInt(textView, "height", expandedHeight, collapsedHeight);
animation.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {
// number of max lines when collapsed
textView.setMaxLines(2);
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
animation.setDuration(250).start();
}
}
});
これにより、必要なビューをクリックしてTextViewを展開/折りたたむことができます。（確かにTextView自体も選択できます）
アニメーションに新しいTransitionManagerを使用し、maxLines属性を呼び出して量を設定できます
fun toggleReadMoreTextView(linesWhenCollapsed: Float) {
if (viewDataBinding.textView.maxLines != Integer.MAX_VALUE) {
// exapand
viewDataBinding.textView.maxLines = Integer.MAX_VALUE
} else {
// collapse
viewDataBinding.textView.maxLines = linesWhenCollapsed
}
// start animation
TransitionManager.beginDelayedTransition(viewDataBinding.constraintLayout)
}
行数とテキスト数を減らすためのオプションを備えた拡張可能なTextViewについては、以下のリンクを参照してください。
サイズ変更可能なテキストビュー（表示を増やす、表示を減らす）
TextViewでテキストを設定した後、Javaクラスに以下の行を追加します。
// YourCustomeClass.class [your customized class]
// yourTextView [ TextView yourTextView = findViewById(R.id.yourTextView) ];
YourCustomeClass.doResizeTextView(yourTextView, 3, "More", true);
// 3 - No of lines after user wants to expand it.
// "More" : text want to see end of your TextView after shrink
// True : flag for viewMore
Cliffusの答えは私が探していたものに近づきましたが、このsetMaxLines()メソッドの使用はサポートされていません。これにより、XMLで最大行数を設定できない場合に問題が発生します。
私は彼らのライブラリをフォークして、使用setMaxLines()すると展開/折りたたみアクションが中断されないようにしました。また、Gradle構成を更新し、AndroidXに移行しました。それ以外の使用法は以前と同じです。
Jitpackを使用してプロジェクトに含めることができます。
allprojects {
repositories {
...
maven { url 'https://jitpack.io' }
}
}
dependencies {
implementation 'com.github.zacharee:Android-ExpandableTextView:Tag'
}
Tag最新のコミットタグはどこにありますか（ https://jitpack.io/#zacharee/Android-ExpandableTextView/）。
使用法は元のライブラリとまったく同じです。XMLにExpandableTextViewを含めます。
<at.blogc.android.views.ExpandableTextView
...
android:maxLines="10"
/>
そして、コードを展開/折りたたむ：
if (expandable.isExpanded) {
expandable.collapse()
else {
expandable.expand()
}
OnGlobalLayoutListenerを使用する代わりにListViewまたはRecyclerViewでは、常にOnPreDrawListenerを使用します。このコールバックは、開始時に非表示の行に対しても発生します。公式ドキュメントから：
private void makeTextViewResizable(final TextView tv, final int maxLine, final String expandText, final boolean viewMore){
try {
if (tv.getTag() == null) {
tv.setTag(tv.getText());
}
//OnGlobalLayoutListener
ViewTreeObserver vto = tv.getViewTreeObserver();
vto.addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {
@Override
public boolean onPreDraw() {
ViewTreeObserver obs = tv.getViewTreeObserver();
// obs.removeGlobalOnLayoutListener((ViewTreeObserver.OnGlobalLayoutListener) mActivity);
obs.removeOnPreDrawListener(this);
if (maxLine == 0) {
int lineEndIndex = tv.getLayout().getLineEnd(0);
String text = tv.getText().subSequence(0, lineEndIndex - expandText.length() + 1) + " " + expandText;
tv.setText(text);
tv.setMovementMethod(LinkMovementMethod.getInstance());
tv.setText(
addClickablePartTextViewResizable(Html.fromHtml(tv.getText().toString()), tv, expandText,
viewMore), TextView.BufferType.SPANNABLE);
} else if (maxLine > 0 && tv.getLineCount() >= maxLine) {
int lineEndIndex = tv.getLayout().getLineEnd(maxLine - 1);
String text = tv.getText().subSequence(0, lineEndIndex - expandText.length() + 1) + " " + expandText;
tv.setText(text);
tv.setMovementMethod(LinkMovementMethod.getInstance());
tv.setText(
addClickablePartTextViewResizable(Html.fromHtml(tv.getText().toString()), tv, expandText,
viewMore), TextView.BufferType.SPANNABLE);
} else {
int lineEndIndex = tv.getLayout().getLineEnd(tv.getLayout().getLineCount() - 1);
String text = tv.getText().subSequence(0, lineEndIndex) + " " + expandText;
tv.setText(text);
tv.setMovementMethod(LinkMovementMethod.getInstance());
tv.setText(
addClickablePartTextViewResizable(Html.fromHtml(tv.getText().toString()), tv, expandText,
viewMore), TextView.BufferType.SPANNABLE);
}
return true;
}
});
} catch (Exception e) {
e.printStackTrace();
}
}
主にテキストの最後に「もっと見る」を追加する場合のために、私はあなたに私のTruncatingTextViewを提示します。多くの実験の後、これらのテキストビューをRecyclerViewアイテムビューにロードするときにシームレスに機能するようです。
package com.example.android.widgets;
import android.content.Context;
import android.support.annotation.Nullable;
import android.support.v7.widget.AppCompatTextView;
import android.text.Spannable;
import android.text.SpannableString;
import android.text.TextUtils;
import android.text.style.ForegroundColorSpan;
import android.text.style.RelativeSizeSpan;
import android.util.AttributeSet;
import com.example.android.R;
public class TruncatingTextView extends AppCompatTextView {
public static final String TWO_SPACES = " ";
private int truncateAfter = Integer.MAX_VALUE;
private String suffix;
private RelativeSizeSpan truncateTextSpan = new RelativeSizeSpan(0.75f);
private ForegroundColorSpan viewMoreTextSpan = new ForegroundColorSpan(Color.BLUE);
private static final String MORE_STRING = getContext().getString(R.string.more);
private static final String ELLIPSIS = getContext().getString(R.string.ellipsis);
public TruncatingTextView(Context context) {
super(context);
}
public TruncatingTextView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public TruncatingTextView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
public void setText(CharSequence fullText, @Nullable CharSequence afterTruncation, int truncateAfterLineCount) {
this.suffix = TWO_SPACES + MORE_STRING;
if (!TextUtils.isEmpty(afterTruncation)) {
suffix += TWO_SPACES + afterTruncation;
}
// Don't call setMaxLines() unless we have to, since it does a redraw.
if (this.truncateAfter != truncateAfterLineCount) {
this.truncateAfter = truncateAfterLineCount;
setMaxLines(truncateAfter);
}
setText(fullText);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
if (getLayout() != null && getLayout().getLineCount() > truncateAfter) {
int lastCharToShowOfFullTextAfterTruncation = getLayout().getLineVisibleEnd(truncateAfter - 1) - suffix.length() - ELLIPSIS.length();
if (getText().length() <= lastCharToShowOfFullTextAfterTruncation) {
// No idea why this would be the case, but to prevent a crash, here it is. Besides, if this is true, we should be less than our maximum lines and thus good to go.
return;
}
int startIndexOfMoreString = lastCharToShowOfFullTextAfterTruncation + TWO_SPACES.length() + 1;
SpannableString truncatedSpannableString = new SpannableString(getText().subSequence(0, lastCharToShowOfFullTextAfterTruncation) + ELLIPSIS + suffix);
truncatedSpannableString.setSpan(truncateTextSpan, startIndexOfMoreString, truncatedSpannableString.length(), Spannable.SPAN_EXCLUSIVE_INCLUSIVE);
truncatedSpannableString.setSpan(viewMoreTextSpan, startIndexOfMoreString, startIndexOfMoreString + MORE_STRING.length(), Spannable.SPAN_EXCLUSIVE_EXCLUSIVE);
setText(truncatedSpannableString);
}
}
}
truncateAfterに独自の属性を追加することをいつでも選択でき、上記の回答のいずれかを使用して、展開/折りたたみのアニメーションを追加できます（展開/折りたたみを処理するコードは作成していませんが、上記のアニメーションの回答のいずれかを使用して簡単に実行できます）。
テキストビューの「もっと見る」機能を見つけようとしている他の人のために、これをもっとここに配置します。
これで、この素晴らしいライブラリExpandableTextViewを使用して、要求されたTextViewにアニメーションと必要なすべてのコントロールを提供することがさらに簡単になります。このライブラリでは、それをgradleに追加し、xmlで次のように定義するだけです。
<com.ms.square.android.expandabletextview.ExpandableTextView
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:expandableTextView="http://schemas.android.com/apk/res-auto"
android:id="@+id/expand_text_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
expandableTextView:maxCollapsedLines="4"
expandableTextView:animDuration="200">
<TextView
android:id="@id/expandable_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dp"
android:textSize="16sp"
android:textColor="#666666" />
<ImageButton
android:id="@id/expand_collapse"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:padding="16dp"
android:layout_gravity="right|bottom"
android:background="@android:color/transparent"/>
</com.ms.square.android.expandabletextview.ExpandableTextView>
その後、次のようにコードで使用します。
TextView expandableTextView = (ExpandableTextView) findViewById(R.id.expand_text_view);
ご覧のとおり、必要な最大行数、アニメーションの長さ、およびTextView拡張テクニックに必要なすべての設定を制御できます。
同様のアプローチのリポジトリは次のとおりです： https ：//github.com/CorradiSebastian/ExpandableTextView
それはこの質問から出てきました：
ステップ1
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<gradient
android:startColor="#11FFFFFF"
android:centerColor="#33FFFFFF"
android:endColor="#99FFFFFF"
android:angle="270" />
</shape>
ステップ2
<TextView
android:id="@+id/overviewText"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="8dp"
android:maxLines="3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="@+id/textView8"
app:layout_constraintTop_toBottomOf="@+id/textView8" />
<ImageView
android:id="@+id/seeMoreImage"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:background="@drawable/background_white"
android:visibility="invisible"
app:layout_constraintBottom_toBottomOf="@+id/overviewText"
app:layout_constraintEnd_toEndOf="@+id/overviewText"
app:layout_constraintStart_toStartOf="@+id/overviewText"
app:srcCompat="@drawable/ic_arrow_down"
tools:ignore="VectorDrawableCompat" />
ステップ3
var isTextViewClicked = true
if (binding.overviewText.lineCount > 3)
binding.seeMoreImage.visibility = View.VISIBLE
binding.seeMoreImage.setOnClickListener {
isTextViewClicked = if(isTextViewClicked){
binding.overviewText.maxLines = Integer.MAX_VALUE
binding.seeMoreImage.setImageResource(R.drawable.ic_arrow_up)
false
} else {
binding.overviewText.maxLines = 3
binding.seeMoreImage.setImageResource(R.drawable.ic_arrow_down)
true
}
}
ライブラリやカスタムクラスを使用せずにシンプルなソリューションを作成します。
まず、（たとえば）2つを使用してitem.xmlを作成しますTextView。1つは展開される表示テキスト用で、もう1つはボタン用です-「もっと見る」。
...
<TextView
android:id="@+id/item_info_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
tools:text="Test long text info\nTest long text info\nTest long text info\nTest long text info | Test long text info | Test long text info"
android:maxLines="@integer/info_collected_lines"
android:fontFamily="@string/font_roboto_regular"
android:textColor="@color/text_second"
android:layout_marginTop="8dp"
android:ellipsize="end"/>
<TextView
android:id="@+id/item_more_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="12sp"
android:text="@string/see_more"
android:singleLine="true"
android:fontFamily="@string/font_roboto_regular"
android:textColor="@color/text_accent"
android:ellipsize="marquee"/>
...
その他のリソース：
<color name="text_accent">#0070AA</color>
<color name="text_second">#616161</color>
<string name="font_roboto_regular" translatable="false">sans-serif</string>
<string name="font_roboto_medium" translatable="false">sans-serif-medium</string>
<string name="see_more">Show more</string>
<integer name="club_info_collected_lines">4</integer>
<integer name="club_info_expanded_lines">10</integer>
そしてそれはこのように見えます：
次のステップは、テキストを展開するためのロジックを追加することです。私たちは内部でそれを行いますRecyclerView.ViewHolder：
class ItemHolder(view: View) : RecyclerView.ViewHolder(view) {
...
private val infoText = view.findViewById<TextView>(R.id.item_info_text)
private val moreText = view.findViewById<TextView>(R.id.item_more_text)
fun bind(item: Item, callback: Callback) {
infoText.text = item.info
// This is extension (show code later) need for getting correct [TextView.getLineCount]. Because before draw view it always == 0.
infoText.afterLayoutConfiguration {
val hasEllipsize = infoText.layout.getEllipsisCount(infoText.lineCount - 1) > 0
moreText.visibility = if (hasEllipsize) View.VISIBLE else View.GONE
if (hasEllipsize) {
val maxLines = itemView.context.resources.getInteger(R.integer.club_info_expanded_lines)
moreText.setOnClickListener {
infoText.maxLines = maxLines
it.visibility = View.GONE
}
}
}
...
}
// Call this inside [RecyclerView.Adapter.onViewRecycled] for prevent memory leaks.
fun unbind() {
moreText.setOnClickListener(null)
}
}
拡大：
/**
* Function for detect when layout completely configure.
*/
fun View.afterLayoutConfiguration(func: () -> Unit) {
viewTreeObserver?.addOnGlobalLayoutListener(object : ViewTreeObserver.OnGlobalLayoutListener {
override fun onGlobalLayout() {
viewTreeObserver?.removeOnGlobalLayoutListener(this)
func()
}
})
}
でアニメーションを使ってみましTransitionManager.beginDelayedTransitionたが、中は醜く見えますRecyclerView。そして、アニメーションなしでどのように見えるかが好きです。
アプリモジュールのgradleに依存関係を追加します
dependencies {
implementation 'com.github.arshadbinhamza:ViewMore:1.0.9'
}
// ViewMoreHolder.load(textView_description,text, Typeface of end Text,UnderLine,number_of_lines,click_for_end_text_only);
// ViewMoreHolder.load(tv_description,description, Typeface.DEFAULT,true,3,false);
私が追加したサンプルをご覧ください（これは以前の回答から私のアプリ要件のために抽出されたソリューションです）。リクエストに応じてライブラリを更新/拡張できます