Android UI 는 여러 줄 텍스트 접 기 전개 효 과 를 구현 합 니 다.
본 고 는 여러 줄 의 텍스트 접 기 전 개 를 계속 소개 하고 사용자 정의 레이아웃 View 는 여러 줄 의 텍스트 접 기와 전 개 를 실현 합 니 다.
1.개술
자주 앱 에서 인용 글 이나 큰 단락 의 박문 이 있 는 내용 을 볼 수 있 고 그들의 전시 스타일 도 약간 재 미 있 습 니 다.기본 값 은 접 힌 것 입 니 다.글 을 클릭 하면 자동 으로 펼 쳐 집 니 다.다시 클릭 하면 그 는 다시 움 츠 러 들 것 이다.
인터넷 에서 일부 효 과 를 찾 아 만 족 스 럽 지 못 하 다.마지막 으로 사용자 정의 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃 레이아웃비교적 누추 하지만 쓸 수 있다.이 방면 에 필요 한 친 구 는 약간 개조 할 수 있다.더 좋 은 아이디어 가 있다 면 나 눠 보 세 요.
효과 그림:
2.구체 적 실현
그러나 실현 효 과 를 보면 필요 한 view 만 간단하게 정의 하면 되 고 나중에 확장 사용 과 유용 을 편리 하 게 하기 위해 전체 구 조 를 포장 하여 직접 사용 하기에 편리 하 다.
2.1 여러 개의 레이아웃 조합 을 통 해 실현
첫 번 째 아 이 디 어 는 당연히 여러 뷰 그룹 으로 이 루어 진다.그 동안 LinearLayout 레이아웃 을 각각 TextView 와 ImageView 로 정의 합 니 다.
대략적인 절차:
-레이아웃,수직 선형 LinearLayout 레이아웃,TextView 와 ImageView 를 정의 합 니 다.layot 에서 기본 구성 요 소 를 정의 합 니 다.
-TextView 의 높이 를 지정 한 줄 수*줄 높이 로 설정 합 니 다.max Line 을 사용 하지 않 는 이 유 는 max Line 이 텍스트 를 표시 하 는 줄 수 를 제어 하기 때문에 뒤에서 애니메이션 으로 모든 내용 을 펼 치 는 것 이 불편 합 니 다.그래서 여기 TextView 의 높이 도 wrapcontent。
-전체 레이아웃 에 클릭 이벤트,바 인 딩 애니메이션 을 추가 합 니 다.클릭 시 TextView 가 펼 쳐 지지 않 으 면 실제 높이 로 펼 쳐 지고 imageView 가 회전 합 니 다.그렇지 않 으 면 지정 한 줄 수*줄 높이 로 줄 이 고 imageView 회전 으로 줄 입 니 다.
코드 작성 시작:
1.xml 에서 레이아웃 정의:
<LinearLayout
android:id="@+id/description_layout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:paddingLeft="12dip"
android:paddingRight="12dip"
android:paddingTop="5dip" >
<TextView
android:id="@+id/description_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textColor="@android:color/black"
android:textSize="18dip" >
</TextView>
<ImageView
android:id="@+id/expand_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="right"
android:paddingBottom="5dip"
android:paddingLeft="5dip"
android:paddingRight="5dip"
android:paddingTop="5dip"
android:src="@drawable/text_ic_expand"
android:visibility="gone" />
</LinearLayout>
public class MainActivity extends Activity {
TextView descriptionView;
View layoutView ,expandView; //LinearLayout ImageView
int maxDescripLine = 3; //TextView
// OnCreate
{
layoutView = findViewById(R.id.description_layout);
descriptionView = (TextView)findViewById(R.id.description_view);
expandView = findViewById(R.id.expand_view);
}
}
//
descriptionView.setText(getText(R.string.content));
//descriptionView
descriptionView.setHeight(descriptionView.getLineHeight() * maxDescripLine);
//
descriptionView.post(new Runnable() {
@Override
public void run() {
expandView.setVisibility(descriptionView.getLineCount() > maxDescripLine ? View.VISIBLE : View.GONE);
}
});
마지막 줄 코드 를 봤 는데 누가 물 어 볼 까요?ImageView(클릭 하여 더 많이 펼 치기)표시 해 야 할 판단 논 리 를 왜 post 방법 에 넣 어야 합 니까?이 는 OnCreate 방법 에서 정 의 된 textView 가 바로 렌 더 링 되 고 표시 되 지 않 기 때문에 textview 의 getLineCount()에서 얻 은 값 은 보통 0 이 므 로 post 를 사용 하여 그림 을 완성 한 후에 ImageView 를 표시 제어 합 니 다.
ps:제 가 설명 할 수 없 을 것 같은 친 구 는 stackoverflow 의 설명 how to use getlinecount()in textview android 를 볼 수 있 습 니 다.
4.layoutView 에 클릭 이 벤트 를 설정 합 니 다.
ImageView 에 RotateAnimation 의 회전 애니메이션 을 정의 하고 회전 과정 에서 회전 백분율 진도 에 따라 textView 높이 를 제어 하여 우리 가 원 하 는 효 과 를 얻 을 수 있 습 니 다.
layoutView.setOnClickListener(new View.OnClickListener() {
boolean isExpand;//
@Override
public void onClick(View v) {
isExpand = !isExpand;
descriptionView.clearAnimation();//
final int deltaValue;// ， maxLine
final int startValue = descriptionView.getHeight();//
int durationMillis = 350;//
if (isExpand) {
/**
*
*
*/
deltaValue = descriptionView.getLineHeight() * descriptionView.getLineCount() - startValue;
RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(durationMillis);
animation.setFillAfter(true);
expandView.startAnimation(animation);
} else {
/**
*
*
*/
deltaValue = descriptionView.getLineHeight() * maxDescripLine - startValue;
RotateAnimation animation = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(durationMillis);
animation.setFillAfter(true);
expandView.startAnimation(animation);
}
Animation animation = new Animation() {
protected void applyTransformation(float interpolatedTime, Transformation t) { // ImageView textview ，
descriptionView.setHeight((int) (startValue + deltaValue * interpolatedTime));
}
};
animation.setDuration(durationMillis);
descriptionView.startAnimation(animation);
}
});
물론 우 리 는 이렇게 사용 할 수 있 지만,매번 이렇게 다시 쓰 는 것 은 좀 번 거 로 워 보인다.따라서 그 를 단독 컨트롤 러 로 써 앞으로 주머니 를 열 어 즉석 으로 먹 을 수 있 도록 할 필요 가 있다.잔말 말고 음식 나 와.
2.2 사용자 정의 View 조합 을 통 해 패키지
이 view 의 레이아웃 구 조 는 xml 를 사용 하여 layot 를 정의 하지 않 고 LinearLayout 를 계승 하 는 MoreTextView 류 를 직접 정의 합 니 다.이 클래스 에는 TextView 와 ImageView 가 추가 되 어 있 습 니 다.
1.stylable 사용자 정의 보기 속성 사용
뒤쪽 xml 레이아웃 에서 MoreTextView 라 는 사용자 정의 View 를 편리 하 게 사용 할 수 있 도록
android：text = “XXX”
android：textSize = “XXX”
이렇게 빠 른 바 인 딩 텍스트 내용 과 글꼴 크기 등 속성 을 설정 합 니 다.declare-styleable 을 통 해 values 파일 의 xml 에서 원 하 는 속성 을 정의 하고 View 에서 가 져 오고 사용 할 수 있 습 니 다.declare-styleable 을 자세히 사용 하 는 내용 은 뒤에서 보충 합 니 다.여기 서 간략하게 말씀 드 리 겠 습 니 다.
예 를 들 어 MoreTextView 에 있어 야 할 기본 속성 은 텍스트 글꼴 크기(textSize),색상(textColor)과 텍스트 내용(text),그리고 기본 디 스 플레이 줄 수(max Line)등 몇 가지 속성 이다.TextView 처럼 xml 에 바 인 딩 을 직접 설정 하려 면 이렇게 할 수 있 습 니 다.
우선 values 디 렉 터 리 에 attrs.xml(이름 마음대로)를 새로 만 들 고 MoreTextView 속성 을 정의 합 니 다.
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MoreTextStyle">
<attr name="textSize" format="dimension"/>
<attr name="textColor" format="color"/>
<attr name="maxLine" format="integer" />
<attr name="text" format="string" />
</declare-styleable>
</resources>
위 에서 이 속성 을 정의 하면 xml 에서 사용 할 수 있 습 니 다.
more：text = “XXX”
more：textSize = “XXX”
more : textColor = “XXX”
more : maxLine = “XXX”
(비고:more 라 는 키 워드 는 마음대로 사용 할 수 있 습 니 다)
이렇게 속성 값 을 직접 설정 합 니 다.그럼 구체 적 으로 어떻게 가 치 를 취 하 는 지 는 잠시 후에 말씀 드 리 겠 습 니 다.
(1)MoreTextView 의 속성 정의:
public class MoreTextView extends LinearLayout{
protected TextView contentView; //
protected ImageView expandView; //
// styleable
protected int textColor;
protected float textSize;
protected int maxLine;
protected String text;
//
public int defaultTextColor = Color.BLACK;
public int defaultTextSize = 12;
public int defaultLine = 3;
//....
}
public MoreTextView(Context context, AttributeSet attrs) {
super(context, attrs);
initalize();
initWithAttrs(context, attrs);
bindListener();
}
initalize()를 초기 화하 고 View 를 추가 합 니 다.TextView 와 ImageView 를 초기 화하 고 MoretextView 에 추가 합 니 다.
initWithAtts(context,attrs)에서 값 을 추출 하고 설정 합 니 다.attrs 를 이용 하여 xml 레이아웃 에서 우리 가 설정 한 text/textSize/textColor/max Line 등 속성의 속성 값 을 가 져 와 View 에 설정 합 니 다.
bindListener()바 인 딩 클릭 이벤트 및 애니메이션 설정.현재 MoreTextView 에 클릭 이 벤트 를 설정 하여 접 고 펼 치 기 를 실현 합 니 다.
각 방법의 구체 적 인 실현:
// View
protected void initalize() {
setOrientation(VERTICAL); //
setGravity(Gravity.RIGHT); //
// textView
contentView = new TextView(getContext());
addView(contentView, LinearLayout.LayoutParams.MATCH_PARENT, LinearLayout.LayoutParams.WRAP_CONTENT);
// ImageView
expandView = new ImageView(getContext());
int padding = dip2px(getContext(), 5);
expandView.setPadding(padding, padding, padding, padding);
expandView.setImageResource(R.drawable.text_ic_expand);
LinearLayout.LayoutParams llp = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT, LinearLayout.LayoutParams.WRAP_CONTENT);
addView(expandView, llp);
protected void initWithAttrs(Context context, AttributeSet attrs) {
TypedArray a = context.obtainStyledAttributes(attrs,
R.styleable.MoreTextStyle);
int textColor = a.getColor(R.styleable.MoreTextStyle_textColor,
defaultTextColor); // ， defaultTextColor
textSize = a.getDimensionPixelSize(R.styleable.MoreTextStyle_textSize, defaultTextSize);// ， defaultTextSize
maxLine = a.getInt(R.styleable.MoreTextStyle_maxLine, defaultLine);// ， defaultLine
text = a.getString(R.styleable.MoreTextStyle_text);//
// textView bindTextView(textColor,textSize,maxLine,text);
a.recycle();//
}
// textView
protected void bindTextView(int color,float size,final int line,String text){
contentView.setTextColor(color);
contentView.setTextSize(TypedValue.COMPLEX_UNIT_PX,size);
contentView.setText(text);
contentView.setHeight(contentView.getLineHeight() * line);
post(new Runnable() {// ，
@Override
public void run() {
expandView.setVisibility(contentView.getLineCount() > line ? View.VISIBLE : View.GONE);
}
});
}
// ，
protected void bindListener(){
setOnClickListener(new View.OnClickListener() {
boolean isExpand;
@Override
public void onClick(View v) {
isExpand = !isExpand;
contentView.clearAnimation();
final int deltaValue;
final int startValue = contentView.getHeight();
int durationMillis = 350;
if (isExpand) {
deltaValue = contentView.getLineHeight() * contentView.getLineCount() - startValue;
RotateAnimation animation = new RotateAnimation(0, 180, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(durationMillis);
animation.setFillAfter(true);
expandView.startAnimation(animation);
} else {
deltaValue = contentView.getLineHeight() * maxLine - startValue;
RotateAnimation animation = new RotateAnimation(180, 0, Animation.RELATIVE_TO_SELF, 0.5f, Animation.RELATIVE_TO_SELF, 0.5f);
animation.setDuration(durationMillis);
animation.setFillAfter(true);
expandView.startAnimation(animation);
}
Animation animation = new Animation() {
protected void applyTransformation(float interpolatedTime, Transformation t) {
contentView.setHeight((int) (startValue + deltaValue * interpolatedTime));
}
};
animation.setDuration(durationMillis);
contentView.startAnimation(animation);
}
});
}
public TextView getTextView(){
return contentView;
}
public void setText(CharSequence charSequence){
contentView.setText(charSequence);
}
public static int dip2px(Context context, float dipValue){
final float scale = context.getResources().getDisplayMetrics().density;
return (int)(dipValue * scale + 0.5f);
}
layout/xx.xml 에서 사용
방금 사용자 정의 속성 을 편리 하 게 사용 하여 값 을 정의 하려 면 xml namespace 에서 응용 을 정의 하 십시오.
자동 참조 네 임 스페이스 res-auto
xmlns:more=”http://schemas.android.com/apk/res-auto”
패키지 이름 을 직접 정의 하거나
xmlns:more=”http://schemas.android.com/apk/res/com.qiao.moretext”
네 임 스페이스 뒤에 있 는 more 즉 아래 에 서 는 사용자 정의 속성의 시작 부분 을 사용 해 야 합 니 다.
예 를 들 어 우리 의 activitymain.xml
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:more="http://schemas.android.com/apk/res/com.qiao.moretext"
android:id="@+id/root"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
android:orientation="vertical" >
<com.qiao.moretext.MoreTextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="5dip"
more:textColor="@android:color/black"
more:textSize="18dip"
more:maxLine="3"
more:text="@string/content"/>
</LinearLayout>
위 에서 MoreTextView 를 정의 하 는 것 은 하나의 구조 방법 인 MoreTextView(Context context,AttributeSet attrs)만 정의 하기 때문에 사용 할 때 도:
MoreTextView content = new MoreTextView(MainActivity.this, null);
content.setText(getText(R.string.content));
// addview
， ， 。
C>
MoreTextView(Context context){
//
bindTextView()；
}
다시 말 하면 우 리 는 이미 실현 하고 자 하 는 기능 을 완 성 했 습 니 다.UI 로 서 그 는 좀 초라 할 수 있 지만 demo 로 서 시범 적 인 역할 을 하 는 것 만으로 도 충분 합 니 다.뒤에 우 리 는 그것 을 웨 이 보 의 한 listitem 으로 목록 을 만 들 고 좋아요 등 기능 을 추가 하 는 것 을 고려 할 수 있 습 니 다.관심 있 으 면 해 보 세 요.
원본 예제 다운로드 주소:http://xiazai.jb51.net/201610/yuanma/Androidtouchmove(jb51.net).rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Bitrise에서 배포 어플리케이션 설정 테스트하기이 글은 Bitrise 광고 달력의 23일째 글입니다. 자체 또는 당사 등에서 Bitrise 구축 서비스를 사용합니다. 그나저나 며칠 전 Bitrise User Group Meetup #3에서 아래 슬라이드를 발표했...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
