ساخت یک TextView با قابلیت نمایش مختصری از متن و سپس نمایش کامل متن هنگام اشاره کاربر (Expandable TextView)، در برنامه نویسی اندروید
در این مبحث قصد داریم یک پروژه اندروید بسازیم که در آن یک TextView وجود دارد که برای نمایش یک متن طولانی به کار می رود، اما می خواهیم چون متن طولانی است، ابتدا چند خط اول آن نمایش داده شود و سپس، اگر کاربر بر روی TextView اشاره کرد، متن به طور کامل نمایش داده شود (TextView باز شود). همچنین معکوس این فرآیند نیز امکان پذیر خواهد بود، یعنی وقتی TextView به طور کامل، متن را نمایش داده است، اگر کاربر بر روی TextView اشاره کند، آنگاه تنها همان چند خط اول نمایش داده شود (TextView جمع شود).
دو عکس از دو حالت مربوط به نمایش TextView را در زیر نمایش می دهیم. عکس اول، برای زمانی که TextView تنها چند خط اول را نمایش می دهد :
عکس دوم برای زمانی که TextView ، متن را به طور کامل نمایش می دهد :
در برنامه eclipse ، ابتدا یک پروژه اندروید با نام ExpandableEditText می سازیم (نام package را برابر com.kelidestan.expandableedittext انتخاب می کنیم. نام Activity اصلی را برابر MainActivity انتخاب می کنیم و فایل xml متناظر آن را هم برابر activity_main قرار می دهیم) :
سپس برای پروژه اندروید، یک کلاس (class) جدید با نام ExpandableTextView می سازیم و همچنین در پوشه values از پروژه اندروید، یک فایل xml با نام attr.xml می سازیم :
در فایل attr.xml ، کدهای زیر را می نویسیم :
<resources>
<declare-styleable name="ExpandableTextView">
<attr name="trimLength" format="integer"/>
</declare-styleable>
</resources>
در فایل ExpandableTextView.java که همان کلاس (class) ساخته شده می باشد، کدهای زیر را می نویسیم :
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;
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;
}
}
در واقع با کلاس ExpandableTextView ، عنصری با نام ExpandableTextView را در پروژه اندروید ساخته ایم که در هر فایل xml که آن را تعریف کنیم، دقیقا همین مشخصه های باز شدن و جمع شدن را خواهد داشت (یک TextView که دارای ویژگی باز شدن و جمع شدن می باشد). بنابراین باید دقت داشت که اگر یک عنصر TextView در فایل های xml پروژه اندروید تعریف کنید، همان ویژگی های معمولی TextView را خواهد داشت، اما اگر نیاز به قابلیت باز شدن و جمع شدن دارید، باید یک عنصر ExpandableTextView در فایل xml تعریف کنید.
در واقع کلاس ExpandableTextView را بر اساس توسعه کلاس TextView ساخته ایم. این مورد در خط زیر از کدهای کلاس ExpandableTextView نوشته شده است :
در کد بالا، به کلمه extends دقت کنید.
در فایل activity_main.xml ، کدهای زیر را می نویسیم :
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<com.kelidestan.expandableedittext.ExpandableTextView
android:id="@+id/expandableTextView"
android:layout_width="fill_parent"
android:layout_height="wrap_content" />
</RelativeLayout>
همان طور که مشاهده می کنید، در آن یک عنصر ExpandableTextView تعریف کرده ایم و نکته مهم این است که قبل از نام ExpandableTextView ، نام package برنامه اندروید را نوشته ایم :
بنابراین شما برای پروژه اندروید خود، باید نام package برنامه اندروید خود را بنویسید.
در فایل MainActivity.java ، کدهای زیر را می نویسیم :
import android.app.Activity;
import android.os.Bundle;
public class MainActivity extends Activity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
String yourText = "kelidestan.com kelidestan.com kelidestan.com kelidestan.com" +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com " +
"kelidestan.com kelidestan.com kelidestan.com kelidestan.com";
ExpandableTextView expandableTextView = (ExpandableTextView) findViewById(R.id.expandableTextView);
expandableTextView.setText(yourText);
}
}
پروژه اندروید آماده است و شما می توانید آن را با روش دلخواهتان تست کنید.
من برنامه اندروید را بر روی یک گوشی اندروید واقعی تست می کنم، با اجرا شدن برنامه اندروید، صفحه زیر نمایش داده می شود :
من بر روی متن اشاره می کنم و بنابراین، ادامه متن نیز نمایش داده می شود :
دوباره بر روی متن اشاره می کنم تا تنها چند خط اول متن نمایش داده شود :
فایل های پروژه اندروید را می توانید از لینک های زیر دریافت کنید :