Android 实现伸缩布局效果示例代码

最近项目实现下面的图示的效果，本来想用listview+gridview实现，但是貌似挺麻烦的于是就用flowlayout 来addview实现添加伸缩的效果，实现也比较简单。

mainActivity 布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
  xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="vertical" 
  >
  <RelativeLayout 
     android:id="@+id/rl_category_title_bar_layout"
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     >
     <RelativeLayout 
       android:layout_height="50dp"
       android:layout_width="match_parent"
       >
     <TextView 
       android:id="@+id/tv_category_title"
       android:layout_height="50dp"
       android:layout_width="wrap_content"
       android:text="分类"
       android:textSize="18sp"
       android:layout_centerInParent="true"
       android:gravity="center"
       />
     </RelativeLayout>
   </RelativeLayout>
    <ListView
       android:id="@+id/lv_category_menu"
       android:layout_height="match_parent"
       android:layout_width="match_parent"
       />
</LinearLayout>

自定义布局flowlayout

package comskyball.addflowlayout;
import android.content.Context;
import android.content.res.TypedArray;
import android.util.AttributeSet;
import android.view.View;
import android.view.ViewGroup;
import java.util.ArrayList;
import java.util.List;
public class FlowLayout extends ViewGroup {
  private Context mContext;
  private int usefulWidth; // the space of a line we can use(line's width minus the sum of left and right padding
  private int lineSpacing = 0; // the spacing between lines in flowlayout
  List<View> childList = new ArrayList();
  List<Integer> lineNumList = new ArrayList();
  public FlowLayout(Context context) {
    this(context, null);
  }
  public FlowLayout(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }
  public FlowLayout(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
    mContext = context;
    TypedArray mTypedArray = context.obtainStyledAttributes(attrs,
        R.styleable.FlowLayout);
    lineSpacing = mTypedArray.getDimensionPixelSize(
        R.styleable.FlowLayout_lineSpacing, 0);
    mTypedArray.recycle();
  }
  @Override
  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int mPaddingLeft = getPaddingLeft();
    int mPaddingRight = getPaddingRight();
    int mPaddingTop = getPaddingTop();
    int mPaddingBottom = getPaddingBottom();
    int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    int heightMode = MeasureSpec.getMode(heightMeasureSpec);
    int heightSize = MeasureSpec.getSize(heightMeasureSpec);
    int lineUsed = mPaddingLeft + mPaddingRight;
    int lineY = mPaddingTop;
    int lineHeight = 0;
    for (int i = 0; i < this.getChildCount(); i++) {
      View child = this.getChildAt(i);
      if (child.getVisibility() == GONE) {
        continue;
      }
      int spaceWidth = 0;
      int spaceHeight = 0;
      LayoutParams childLp = child.getLayoutParams();
      if (childLp instanceof MarginLayoutParams) {
        measureChildWithMargins(child, widthMeasureSpec, 0, heightMeasureSpec, lineY);
        MarginLayoutParams mlp = (MarginLayoutParams) childLp;
        spaceWidth = mlp.leftMargin + mlp.rightMargin;
        spaceHeight = mlp.topMargin + mlp.bottomMargin;
      } else {
        measureChild(child, widthMeasureSpec, heightMeasureSpec);
      }
      int childWidth = child.getMeasuredWidth();
      int childHeight = child.getMeasuredHeight();
      spaceWidth += childWidth;
      spaceHeight += childHeight;
      if (lineUsed + spaceWidth > widthSize) {
        //approach the limit of width and move to next line
        lineY += lineHeight + lineSpacing;
        lineUsed = mPaddingLeft + mPaddingRight;
        lineHeight = 0;
      }
      if (spaceHeight > lineHeight) {
        lineHeight = spaceHeight;
      }
      lineUsed += spaceWidth;
    }
    setMeasuredDimension(
        widthSize,
        heightMode == MeasureSpec.EXACTLY ? heightSize : lineY + lineHeight + mPaddingBottom
    );
  }
  @Override
  protected void onLayout(boolean changed, int l, int t, int r, int b) {
    int mPaddingLeft = getPaddingLeft();
    int mPaddingRight = getPaddingRight();
    int mPaddingTop = getPaddingTop();
    int lineX = mPaddingLeft;
    int lineY = mPaddingTop;
    int lineWidth = r - l;
    usefulWidth = lineWidth - mPaddingLeft - mPaddingRight;
    int lineUsed = mPaddingLeft + mPaddingRight;
    int lineHeight = 0;
    int lineNum = 0;
    lineNumList.clear();
    for (int i = 0; i < this.getChildCount(); i++) {
      View child = this.getChildAt(i);
      if (child.getVisibility() == GONE) {
        continue;
      }
      int spaceWidth = 0;
      int spaceHeight = 0;
      int left = 0;
      int top = 0;
      int right = 0;
      int bottom = 0;
      int childWidth = child.getMeasuredWidth();
      int childHeight = child.getMeasuredHeight();
      LayoutParams childLp = child.getLayoutParams();
      if (childLp instanceof MarginLayoutParams) {
        MarginLayoutParams mlp = (MarginLayoutParams) childLp;
        spaceWidth = mlp.leftMargin + mlp.rightMargin;
        spaceHeight = mlp.topMargin + mlp.bottomMargin;
        left = lineX + mlp.leftMargin;
        top = lineY + mlp.topMargin;
        right = lineX + mlp.leftMargin + childWidth;
        bottom = lineY + mlp.topMargin + childHeight;
      } else {
        left = lineX;
        top = lineY;
        right = lineX + childWidth;
        bottom = lineY + childHeight;
      }
      spaceWidth += childWidth;
      spaceHeight += childHeight;
      if (lineUsed + spaceWidth > lineWidth) {
        //approach the limit of width and move to next line
        lineNumList.add(lineNum);
        lineY += lineHeight + lineSpacing;
        lineUsed = mPaddingLeft + mPaddingRight;
        lineX = mPaddingLeft;
        lineHeight = 0;
        lineNum = 0;
        if (childLp instanceof MarginLayoutParams) {
          MarginLayoutParams mlp = (MarginLayoutParams) childLp;
          left = lineX + mlp.leftMargin;
          top = lineY + mlp.topMargin;
          right = lineX + mlp.leftMargin + childWidth;
          bottom = lineY + mlp.topMargin + childHeight;
        } else {
          left = lineX;
          top = lineY;
          right = lineX + childWidth;
          bottom = lineY + childHeight;
        }
      }
      child.layout(left, top, right, bottom);
      lineNum ++;
      if (spaceHeight > lineHeight) {
        lineHeight = spaceHeight;
      }
      lineUsed += spaceWidth;
      lineX += spaceWidth;
    }
    // add the num of last line
    lineNumList.add(lineNum);
  }
  /**
   * resort child elements to use lines as few as possible
   */
  public void relayoutToCompress() {
    int childCount = this.getChildCount();
    if (0 == childCount) {
      //no need to sort if flowlayout has no child view
      return;
    }
    int count = 0;
    for (int i = 0; i < childCount; i++) {
      View v = getChildAt(i);
      if (v instanceof BlankView) {
        //BlankView is just to make childs look in alignment, we should ignore them when we relayout
        continue;
      }
      count++;
    }
    View[] childs = new View[count];
    int[] spaces = new int[count];
    int n = 0;
    for (int i = 0; i < childCount; i++) {
      View v = getChildAt(i);
      if (v instanceof BlankView) {
        //BlankView is just to make childs look in alignment, we should ignore them when we relayout
        continue;
      }
      childs[n] = v;
      LayoutParams childLp = v.getLayoutParams();
      int childWidth = v.getMeasuredWidth();
      if (childLp instanceof MarginLayoutParams) {
        MarginLayoutParams mlp = (MarginLayoutParams) childLp ;
        spaces[n] = mlp.leftMargin + childWidth + mlp.rightMargin;
      } else {
        spaces[n] = childWidth;
      }
      n++;
    }
    int[] compressSpaces = new int[count];
    for (int i = 0; i < count; i++) {
      compressSpaces[i] = spaces[i] > usefulWidth ? usefulWidth : spaces[i];
    }
    sortToCompress(childs, compressSpaces);
    this.removeAllViews();
    for (View v : childList) {
      this.addView(v);
    }
    childList.clear();
  }
  private void sortToCompress(View[] childs, int[] spaces) {
    int childCount = childs.length;
    int[][] table = new int[childCount + 1][usefulWidth + 1];
    for (int i = 0; i < childCount +1; i++) {
      for (int j = 0; j < usefulWidth; j++) {
        table[i][j] = 0;
      }
    }
    boolean[] flag = new boolean[childCount];
    for (int i = 0; i < childCount; i++) {
      flag[i] = false;
    }
    for (int i = 1; i <= childCount; i++) {
      for (int j = spaces[i-1]; j <= usefulWidth; j++) {
        table[i][j] = (table[i-1][j] > table[i-1][j-spaces[i-1]] + spaces[i-1]) ? table[i-1][j] : table[i-1][j-spaces[i-1]] + spaces[i-1];
      }
    }
    int v = usefulWidth;
    for (int i = childCount ; i > 0 && v >= spaces[i-1]; i--) {
      if (table[i][v] == table[i-1][v-spaces[i-1]] + spaces[i-1]) {
        flag[i-1] = true;
        v = v - spaces[i - 1];
      }
    }
    int rest = childCount;
    View[] restArray;
    int[] restSpaces;
    for (int i = 0; i < flag.length; i++) {
      if (flag[i] == true) {
        childList.add(childs[i]);
        rest--;
      }
    }
    if (0 == rest) {
      return;
    }
    restArray = new View[rest];
    restSpaces = new int[rest];
    int index = 0;
    for (int i = 0; i < flag.length; i++) {
      if (flag[i] == false) {
        restArray[index] = childs[i];
        restSpaces[index] = spaces[i];
        index++;
      }
    }
    table = null;
    childs = null;
    flag = null;
    sortToCompress(restArray, restSpaces);
  }
  /**
   * add some blank view to make child elements look in alignment
   */
  public void relayoutToAlign() {
    int childCount = this.getChildCount();
    if (0 == childCount) {
      //no need to sort if flowlayout has no child view
      return;
    }
    int count = 0;
    for (int i = 0; i < childCount; i++) {
      View v = getChildAt(i);
      if (v instanceof BlankView) {
        //BlankView is just to make childs look in alignment, we should ignore them when we relayout
        continue;
      }
      count++;
    }
    View[] childs = new View[count];
    int[] spaces = new int[count];
    int n = 0;
    for (int i = 0; i < childCount; i++) {
      View v = getChildAt(i);
      if (v instanceof BlankView) {
        //BlankView is just to make childs look in alignment, we should ignore them when we relayout
        continue;
      }
      childs[n] = v;
      LayoutParams childLp = v.getLayoutParams();
      int childWidth = v.getMeasuredWidth();
      if (childLp instanceof MarginLayoutParams) {
        MarginLayoutParams mlp = (MarginLayoutParams) childLp ;
        spaces[n] = mlp.leftMargin + childWidth + mlp.rightMargin;
      } else {
        spaces[n] = childWidth;
      }
      n++;
    }
    int lineTotal = 0;
    int start = 0;
    this.removeAllViews();
    for (int i = 0; i < count; i++) {
      if (lineTotal + spaces[i] > usefulWidth) {
        int blankWidth = usefulWidth - lineTotal;
        int end = i - 1;
        int blankCount = end - start;
        if (blankCount >= 0) {
          if (blankCount > 0) {
            int eachBlankWidth = blankWidth / blankCount;
            MarginLayoutParams lp = new MarginLayoutParams(eachBlankWidth, 0);
            for (int j = start; j < end; j++) {
              this.addView(childs[j]);
              BlankView blank = new BlankView(mContext);
              this.addView(blank, lp);
            }
          }
          this.addView(childs[end]);
          start = i;
          i --;
          lineTotal = 0;
        } else {
          this.addView(childs[i]);
          start = i + 1;
          lineTotal = 0;
        }
      } else {
        lineTotal += spaces[i];
      }
    }
    for (int i = start; i < count; i++) {
      this.addView(childs[i]);
    }
  }
  /**
   * use both of relayout methods together
   */
  public void relayoutToCompressAndAlign(){
    this.relayoutToCompress();
    this.relayoutToAlign();
  }
  /**
   * cut the flowlayout to the specified num of lines
   * @param line_num
   */
  public void specifyLines(int line_num) {
    int childNum = 0;
    if (line_num > lineNumList.size()) {
      line_num = lineNumList.size();
    }
    for (int i = 0; i < line_num; i++) {
      childNum += lineNumList.get(i);
    }
    List<View> viewList = new ArrayList<View>();
    for (int i = 0; i < childNum; i++) {
      viewList.add(getChildAt(i));
    }
    removeAllViews();
    for (View v : viewList) {
      addView(v);
    }
  }
  @Override
  protected LayoutParams generateLayoutParams(LayoutParams p) {
    return new MarginLayoutParams(p);
  }
  @Override
  public LayoutParams generateLayoutParams(AttributeSet attrs)
  {
    return new MarginLayoutParams(getContext(), attrs);
  }
  @Override
  protected LayoutParams generateDefaultLayoutParams() {
    return new MarginLayoutParams(super.generateDefaultLayoutParams());
  }
  class BlankView extends View {
    public BlankView(Context context) {
      super(context);
    }
  }
}

adapter

package comskyball.addflowlayout;
import java.util.ArrayList;
import android.content.Context;
import android.os.Handler;
import android.os.Message;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;
import android.widget.Toast;
public class CategoryLvAdapter extends BaseAdapter {
  public Context context;
  public ArrayList<Category> list;
  public boolean isMore=true;
  public CategoryLvAdapter(Context context,ArrayList<Category> list) {
    this.context=context;
    this.list=list;
  }
  @Override
  public int getCount() {
    return list.size();
  }
  @Override
  public Object getItem(int position) {
    return 0;
  }
  @Override
  public long getItemId(int position) {
    return 0;
  }
  @Override
  public View getView(final int position, View convertView, ViewGroup parent) {
    ViewHolder viewHolder=null;
    if(convertView==null){
      convertView=View.inflate(context, R.layout.lv_category_item, null);
      viewHolder=new ViewHolder();
      viewHolder.iv_lv_category_img=(ImageView) convertView.findViewById(R.id.iv_lv_category_img);
      viewHolder.tv_lv_category=(TextView) convertView.findViewById(R.id.tv_lv_category);
      viewHolder.flow_layout_lv_category=(FlowLayout) convertView.findViewById(R.id.flow_layout_lv_category);
      viewHolder.ll_lv_category_add=(LinearLayout) convertView.findViewById(R.id.ll_lv_category_add);
      viewHolder.iv_lv_category_arrow=(ImageView) convertView.findViewById(R.id.iv_lv_category_arrow);
      convertView.setTag(viewHolder);
    }else{
      viewHolder=(ViewHolder) convertView.getTag();
    }
//   ImageLoader.getInstance().displayImage(AppConfig.APP_URL+list.get(position).getImg(),viewHolder.iv_lv_category_img,App.normalOption);
    viewHolder.tv_lv_category.setText(list.get(position).getCate_name());
    viewHolder.iv_lv_category_arrow.setBackgroundResource(R.drawable.arrow_down);
    viewHolder.flow_layout_lv_category.removeAllViews();
    Utils.addflow(context,6, list.get(position).getNext(),viewHolder.flow_layout_lv_category);
    final FlowLayout flowLayoutLvCategory = viewHolder.flow_layout_lv_category;
    final ImageView ivLvCategoryArrow = viewHolder.iv_lv_category_arrow;
    viewHolder.ll_lv_category_add.setOnClickListener(new OnClickListener() {
      @Override
      public void onClick(View v) {
        if(isMore){
          isMore=false;
          flowLayoutLvCategory.removeAllViews();
          Utils.addflow(context,list.get(position).getNext().size(), list.get(position).getNext(),flowLayoutLvCategory);
          ivLvCategoryArrow.setBackgroundResource(R.drawable.arrow_up);
        }else{
          isMore=true;
          flowLayoutLvCategory.removeAllViews();
          Utils.addflow(context,6, list.get(position).getNext(),flowLayoutLvCategory);
          ivLvCategoryArrow.setBackgroundResource(R.drawable.arrow_down);
        }
      }
    }); 
    return convertView; 
  }
  public class ViewHolder{
    public ImageView iv_lv_category_img;
    public TextView tv_lv_category;
    public FlowLayout flow_layout_lv_category;
    public LinearLayout ll_lv_category_add;
    public ImageView iv_lv_category_arrow;
  }
}

adapter item布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
  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"
  >
   <LinearLayout 
     android:layout_height="wrap_content"
     android:layout_width="match_parent"
     android:orientation="vertical"
     >
     <RelativeLayout 
       android:layout_height="35dp"
       android:layout_width="match_parent"
       >
       <ImageView
         android:id="@+id/iv_lv_category_img" 
         style="@style/category_iv_left_style"
         />
       <TextView
         android:id="@+id/tv_lv_category"
         style="@style/category_tv_style"
         android:text="衣食"
         android:layout_toRightOf="@id/iv_lv_category_img"
         />
     </RelativeLayout>
     <View 
       style="@style/category_view_style"
       />
     <ScrollView
       android:layout_width="match_parent"
       android:layout_height="match_parent"
       >
       <RelativeLayout
        android:layout_height="match_parent"
        android:layout_width="match_parent"
        >
       <comskyball.addflowlayout.FlowLayout
        android:id="@+id/flow_layout_lv_category"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:lineSpacing="10dp"
        app:maxLine="3"
        android:background="#F0F0F0"
        android:layout_marginTop="5dp"
        />
       <LinearLayout 
         android:id="@+id/ll_lv_category_add"
         style="@style/category_ll_style"
         android:layout_height="35dp"
         android:layout_below="@id/flow_layout_lv_category"
         >
         <ImageView 
           android:id="@+id/iv_lv_category_arrow"
           style="@style/category_iv_style"
           android:background="@drawable/arrow_down"
           />
         <View 
           style="@style/category_view_style"
           />
        </LinearLayout>
        </RelativeLayout>
      </ScrollView>
   </LinearLayout>
</RelativeLayout>

以上所述是小编给大家介绍的Android 实现伸缩布局效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

# android  # 伸缩布局  # Android实现登陆页logo随键盘收放动态伸缩（完美解决键盘弹出遮挡控件的问题）  # Android进阶篇-自定义图片伸缩控件具体实例  # android 自定义ScrollView实现背景图片伸缩的实现代码及思路  # Android ListView添加头布局和脚布局实例详解  # 探究Android中ListView复用导致布局错乱的解决方案  # 小编  # 在此  # 给大家  # 自定义  # 就用  # 想用  # 所述  # 给我留言  # 感谢大家  # 疑问请  # 有任何  # styleable  # FlowLayout_lineSpacing  # getDimensionPixelSize  # obtainStyledAttributes  # defStyleAttr  # super  # mTypedArray  # recycle  # heightMeasureSpec 

相关文章： 教程网站设计制作软件,怎么创建自己的一个网站？  ui设计制作网站有哪些,手机UI设计网址吗？  网站制作说明怎么写,简述网页设计的流程并说明原因？  湖州网站制作公司有哪些,浙江中蓝新能源公司官网？  如何通过西部数码建站助手快速创建专业网站？  ,想在网上投简历，哪几个网站比较好？  制作网站公司那家好,网络公司是做什么的？  大连 网站制作,大连天途有线官网？  常州企业网站制作公司,全国继续教育网怎么登录？  寿县云建站：智能SEO优化与多行业模板快速上线指南  建站主机是否等同于虚拟主机？  微信小程序 input输入框控件详解及实例（多种示例）  大同网页,大同瑞慈医院官网？  高端云建站费用究竟需要多少预算？  利用JavaScript实现拖拽改变元素大小  建站之星官网登录失败？如何快速解决？  如何用好域名打造高点击率的自主建站？  微信小程序制作网站有哪些,微信小程序需要做网站吗？  免费网站制作模板下载,除了易企秀之外还有什么H5平台可以制作H5长页面，最好是免费的？  网站建设制作需要多少钱费用,自己做一个网站要多少钱，模板一般多少钱？  SQL查询语句优化的实用方法总结  如何自己制作一个网站链接,如何制作一个企业网站，建设网站的基本步骤有哪些？  如何用VPS主机快速搭建个人网站？  C++用Dijkstra(迪杰斯特拉)算法求最短路径  简单实现Android文件上传  C++如何使用std::optional？（处理可选值）  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  公司门户网站制作流程,华为官网怎么做？  北京专业网站制作设计师招聘,北京白云观官方网站？  山东网站制作公司有哪些,山东大源集团官网？  个人摄影网站制作流程,摄影爱好者都去什么网站？  阿里云网站制作公司,阿里云快速搭建网站好用吗？  建站主机选择指南：服务器配置与SEO优化实战技巧  如何在Tomcat中配置并部署网站项目？  如何快速搭建高效服务器建站系统？  金*站制作公司有哪些,金华教育集团官网？  如何用PHP快速搭建高效网站？分步指南  官网自助建站系统：SEO优化+多语言支持，快速搭建专业网站  太原网站制作公司有哪些,网约车营运证查询官网？  如何在云主机快速搭建网站站点？  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？  如何用花生壳三步快速搭建专属网站？  如何在西部数码注册域名并快速搭建网站？  如何通过VPS建站无需域名直接访问？  电商平台网站制作流程,电商网站如何制作？  如何访问已购建站主机并解决登录问题？  5种Android数据存储方式汇总  网站制作免费,什么网站能看正片电影？  企业在线网站设计制作流程,想建设一个属于自己的企业网站，该如何去做？  如何获取免费开源的自助建站系统源码？