안녕하세요! 크몽 안드로이드 개발자 vigli(비글리) 입니다. 오늘은 크몽 앱에서 사용하고 있는 더 보기가 있는 View 중 하나를 함께 만들어보겠습니다. 오늘 만들 View입니다. 소개에 있는 텍스트와 더보기 이 View 는 많은 페이지에서 사용하고있습니다. 전문가 프로필상세 일부 구매자후기 포트폴리오 상세 견적 요청상세 견적 제안상세 그리고 이 View 를 바탕으로 아래와 같은 View 로 변경도 가능하고요! (이렇게 만들기 위해서는 앞으로 설명할 작업 외에도 칩과 라인 계산 작업 등 추가 작업이필요하지만요) 전문분야 및 상세분야에 있는 칩과 더보기 그럼 만들어볼까요? 텍스트와 더보기 기본 사양은이렇습니다 텍스트와 더 보기 각각의 글자 크기, 색상, 텍스트를 지정할 수있다. 텍스트와 더 보기 사이 간격을 지정할 수있다. 미리 보기 라인을 지정할 수있다. 선택 영역을 더 보기만 설정할지, 전체 영역을 설정할지 지정할 수있다. 이 View 를 만들기 위해 다양한 방법이 있지만, 제가 한 방법은 텍스트와 더 보기를 보여줄 각각의 TextView 를 추가한 Vertical 한 LinearLayout 상속해서 Custom View를 만드는 방법을선택했습니다. 과정은 아래와같습니다. Style 선언 Custom View생성 Style 선언 res/valuse/attrs.xml 에 다음과 같이 추가합니다. (파일이 없다면 파일을 생성해서추가합니다) 기본 사양에서 언급했던 내용을 xml 에서 사용할 수 있게 속성으로정의했습니다. Custom View생성 LinearLayout 을 상속한 ExpandableTextLayout 클래스 파일을만듭니다. class ExpandableTextLayout @JvmOverloads constructor(context: Context, attrs: AttributeSet? = null, defStyleAttr: Int = 0) : LinearLayout(context, attrs, defStyleAttr) 텍스트와 더 보기를 보여줄 TextView를 생성하고 각각 View 에 xml 에서 지정해준 속성을설정해줍니다. private fun initView(attrs: AttributeSet?, defStyleAttr: Int) ( orientation = VERTICAL val typedArray = context.obtainStyledAttributes(attrs, R.styleable.ExpandableTextLayout, defStyleAttr, 0) //설명 TextView(context).apply ( layoutParams = LayoutParams(LayoutParams.MATCH_PARENT, LayoutParams.WRAP_CONTENT) val textSize = typedArray.getDimensionPixelSize(R.styleable.ExpandableTextLayout_descriptionTextSize, context.resources.getDimensionPixelSize(R.dimen.sp15)).toFloat() setTextSize(TypedValue.COMPLEX_UNIT_PX, textSize) setTextColor(typedArray.getColor(R.styleable.ExpandableTextLayout_descriptionTextColor, ContextCompat.getColor(context, R.color.black))) showingLine = typedArray.getInt(R.styleable.ExpandableTextLayout_descriptionPreviewLine, Integer.MAX_VALUE) maxLines = showingLine visibility = View.GONE ).also ( addView(it) ) //더보기, 접기 TextView(context).apply ( layoutParams = LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT).apply ( topMargin = typedArray.getDimension( R.styleable.ExpandableTextLayout_spacing, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 4f, context.resources.displayMetrics) ).roundToInt() ) typedArray.getDimensionPixelSize(R.styleable.ExpandableTextLayout_expandOrFoldTextSize, context.resources.getDimensionPixelSize(R.dimen.sp15)).toFloat().also ( setTextSize(TypedValue.COMPLEX_UNIT_PX, it) ) ContextCompat.getColor(context, R.color.black).also ( setTextColor(typedArray.getColor(R.styleable.ExpandableTextLayout_expandOrFoldTextColor, it)) ) typedArray.getString(R.styleable.ExpandableTextLayout_expandText)?.let ( moreText = it this@ExpandableTextLayout.moreText = it ) typedArray.getString(R.styleable.ExpandableTextLayout_foldText)?.let ( foldText = it this@ExpandableTextLayout.foldText = it ) visibility = View.GONE ).also ( addView(it) ) //레이아웃 클릭을 더보기 클릭으로 확장하는 경우 if (typedArray.getBoolean(R.styleable.ExpandableTextLayout_layoutOnCLickListenerEnabled, false)) this.setOnClickListener ( toggle() ) typedArray.getText(R.styleable.ExpandableTextLayout_descriptionText)?.let ( setText(it.toString()) ) typedArray.recycle() ) 상태(확장|접힘)를 관리를 위해 프로퍼티를 추가합니다. 이 상태에 따라 텍스트와 더 보기를변경합니다. private var state = State.EXPAND set(value) ( field = value when (field) ( State.FOLD -> ( descriptionTextView.maxLines = showingLine expandTextView.text = moreText ) State.EXPAND -> ( descriptionTextView.maxLines = Int.MAX_VALUE expandTextView.text = foldText ) ) ) 텍스트를 설정하고, fun setText(text: String?) ( // 확장, 접힘 초기화 expandTextView.run ( visibility = View.GONE setOnClickListener(null) ) descriptionTextView.run ( doOnPreDraw ( if (showingLine < lineCount) ( expandTextView.run ( visibility = View.VISIBLE setOnClickListener ( toggle() ) ) state = State.FOLD ) ) visibility = View.VISIBLE this.text = text?:"" ) ) 마지막으로 클릭 이벤트를처리합니다. private fun toggle() ( state = when (state) ( State.FOLD -> State.EXPAND State.EXPAND -> State.FOLD ) ) 사용하기 최대한 간단하게 만들어보았습니다. Custom View 로 여러분이 원하는 디자인과 기능의 View 를만들어보세요~! 전문가가 필요한 순간? 대한민국 No.1 프리랜서 마켓, 크몽 https://kmong.com/ 감사합니다. Android Developer 더 보기가 있는 TextView 만들기 was originally published in kmong on Medium, where people are continuing the conversation by highlighting and responding to this story.

더 보기가 있는 TextView 만들기

댓글 0개