Android 사용자 정의 ViewGroup 의 FlowLayout(3)

이 편 은 계속해서 사용자 정의 ViewGroup 을 말 합 니 다.여러분 에 게 플 로 우 레이아웃 이라는 실례 를 가 져 다 드 리 겠 습 니 다.FlowLayout 이란 컨트롤 이 ViewGroup 의 너비 에 따라 자동 으로 오른쪽으로 추 가 됩 니 다.현재 줄 의 남 은 공간 이 부족 하면 다음 줄 에 자동 으로 추 가 됩 니 다.그래서 스 트림 레이아웃 이 라 고도 합 니 다.Android 는 스 트림 레이아웃 을 제공 하지 않 았 지만 어떤 경우 에는 스 트림 레이아웃 이 사용 하기에 매우 적합 합 니 다.예 를 들 어 키워드 태그,검색 열 단어 목록 등 입 니 다.예 를 들 어 다음 그림 과 같 습 니 다.

정의 FlowLayout
Layout Params,onLayout 의 작법 은 모두 전편 에서 말 한 Waterfall Layout 와 똑같다.여기 서 더 이상 군말 하지 않 겠 다.보지 못 한 것 은 전편 을 참조 할 수 있다Android 사용자 정의 ViewGroup(2)의 WaterfallLayout
여기 서 주로 onMeasure 방법 을 말 하 는데 주석 은 아래 와 같다.

 @Override 
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { 
 super.onMeasure(widthMeasureSpec, heightMeasureSpec); 
 //                     
 int sizeWidth = MeasureSpec.getSize(widthMeasureSpec); 
 int sizeHeight = MeasureSpec.getSize(heightMeasureSpec); 
 int modeWidth = MeasureSpec.getMode(widthMeasureSpec); 
 int modeHeight = MeasureSpec.getMode(heightMeasureSpec); 

 int childCount = getChildCount();
 //    wrap_content   ，      
 int wrapWidth = 0; 
 int wrapHeight = 0; 
 //        ，width        
 int lineWidth = 0; 
 //      ，   height 
 int lineHeight = 0;

 //         
 for (int i = 0; i < childCount; i++) { 
 View child = getChildAt(i); 
 //      child     
 measureChild(child, widthMeasureSpec, heightMeasureSpec); 
 //   child lParams 
 LayoutParams lParams = (LayoutParams) child.getLayoutParams(); 
 //              
 int childWidth = child.getMeasuredWidth(); 
 //              
 int childHeight = child.getMeasuredHeight(); 
 //       child，       ，       
 if (lineWidth + childWidth > sizeWidth) {
 //           ， onLayout   
 lParams.left = 0;
 lParams.top = wrapHeight + lineHeight + vSpace;
 lParams.right = childWidth;
 lParams.bottom = lParams.top + childHeight;
 //    ，    lineWidth     hSpace ，     
 wrapWidth = Math.max(lineWidth - hSpace, childWidth); 
 //       ，    ，           hSpace 
 lineWidth = childWidth + hSpace;
 //       ，  ，    vSpace
 wrapHeight += lineHeight + vSpace;
 //            
 lineHeight = childHeight; 
 } else {
 //         ， onLayout   
 lParams.left = lineWidth;
 lParams.top = wrapHeight;
 lParams.right = lParams.left + childWidth;
 lParams.bottom = lParams.top + childHeight;
 //       ，    lineWidth,lineHeight      
 lineWidth += childWidth + hSpace;
 lineHeight = Math.max(lineHeight, childHeight);
 } 
 //        
 if (i == childCount - 1) {
 //             lineWidth   ,    
 wrapWidth = Math.max(wrapWidth, lineWidth - hSpace);
 //          
 wrapHeight += lineHeight; 
 } 
 } 
 setMeasuredDimension((modeWidth == MeasureSpec.EXACTLY) ? sizeWidth : wrapWidth, (modeHeight == MeasureSpec.EXACTLY) ? sizeHeight : wrapHeight); 
 }

FlowLayout 사용 하기
직접 xml 를 보 세 요.한 번 보면 알 수 있 습 니 다.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 xmlns:tools="http://schemas.android.com/tools"
 xmlns:attr="http://schemas.android.com/apk/res/com.hx.flowlayout"
 android:layout_width="match_parent"
 android:layout_height="match_parent"
 android:background="#E1E6F6"
 android:orientation="vertical" >

 <com.hx.flowlayout.FlowLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="10dp"
 attr:hSpace="20"
 attr:vSpace="10">

 <TextView
 style="@style/flow_text_style_1"
 android:text="  " />

 <TextView
 style="@style/flow_text_style_1"
 android:text="Welcome" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="IT   " />

 <TextView
 style="@style/flow_text_style_1"
 android:text="   " />

 <TextView
 style="@style/flow_text_style_1"
 android:text="Android" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="Java" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="ViewGroup" />

 <TextView
 style="@style/flow_text_style_1"
 android:text="FlowLayout" />
 </com.hx.flowlayout.FlowLayout>

 <com.hx.flowlayout.FlowLayout
 android:layout_width="match_parent"
 android:layout_height="wrap_content"
 android:layout_margin="10dp"
 attr:hSpace="20"
 attr:vSpace="10">

 <TextView
 style="@style/flow_text_style_2"
 android:text="  " />

 <TextView
 style="@style/flow_text_style_2"
 android:text="Welcome" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="IT   " />

 <TextView
 style="@style/flow_text_style_2"
 android:text="   " />

 <TextView
 style="@style/flow_text_style_2"
 android:text="Android" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="Java" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="ViewGroup" />

 <TextView
 style="@style/flow_text_style_2"
 android:text="FlowLayout" />
 </com.hx.flowlayout.FlowLayout>
</LinearLayout>

여기에 쓴 것 은 비교적 올 바 르 고 모든 TextView 는 xml 에 쓰 여 있 습 니 다.물론 자바 코드 를 통 해 동적 으로 추가 할 수 있 습 니 다.
다시 스타일 을 보 자.여기 서 우 리 는 두 가지 다른 스타일 을 정 의 했 는데 구체 적 으로 다음 과 같다.

 <style name="flow_text_style_1">
 <item name="android:layout_width">wrap_content</item>
 <item name="android:layout_height">wrap_content</item>
 <item name="android:background">@drawable/flow_text_bg_1</item>
 <item name="android:textColor">#ffffff</item>
 <item name="android:textSize">16sp</item>
 </style>

 <style name="flow_text_style_2">
 <item name="android:layout_width">wrap_content</item>
 <item name="android:layout_height">wrap_content</item>
 <item name="android:background">@drawable/flow_text_bg_2</item>
 <item name="android:textColor">#4B0082</item>
 <item name="android:textSize">20sp</item>
 </style>

background 를 찾 아서 들 어가 보 겠 습 니 다.여 기 는 shapeDrawable 을 사용 하고 있 습 니 다.그 다음 에 shapeDrawable 에 관 한 글 을 쓰 겠 습 니 다.

<?xml version="1.0" encoding="utf-8"?> 
<shape xmlns:android="http://schemas.android.com/apk/res/android" > 
 <solid android:color="#FFFFFF"/> 
 <corners android:radius="40dp"/> 
 <stroke android:color="#C9C9C9" android:width="2dp"/> 
 <padding 
 android:bottom="2dp" 
 android:left="10dp" 
 android:right="10dp" 
 android:top="2dp" /> 
</shape> 

 효과 도 는 다음 과 같다.

원본 다운로드:http://xiazai.jb51.net/201609/yuanma/Android-FlowLayout(jb51.net).rar
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.