[关闭]
@xujun94 2016-07-17T16:13:12.000000Z 字数 12283 阅读 1375

自定义View常用例子二（点击展开隐藏控件，九宫格图片控件）

今天博客的主要内容是两个常见的自定义控件，第一个是我们经常看到的点击隐藏点击查看控件，第二个控件是仿微信朋友圈的九宫格图片控件，相对上一篇的流布式布局来说，这篇博客更容易，只不过涉及更多的知识点而已

转载请注明原博客地址： http://blog.csdn.net/gdutxiaoxu/article/details/51772308

一.废话不多说了，先来看一下效果图

  1. 图一效果,点击隐藏，展开

  1. 图二效果，类似于朋友圈九宫格图片

图二源码下载地址

图一源码下载地址：

图一源码

  2.     public class CollapseView extends LinearLayout {
  3.         private long duration = 350;
  4.         private Context mContext;
  5.         private TextView mNumberTextView;
  6.         private TextView mTitleTextView;
  7.         private RelativeLayout mContentRelativeLayout;
  8.         private RelativeLayout mTitleRelativeLayout;
  9.         private ImageView mArrowImageView;
  10.         int parentWidthMeasureSpec;
  11.         int parentHeightMeasureSpec;
  12.         private String TAG = "xujun";
  14.         public CollapseView(Context context) {
  15.             this(context, null);
  16.         }
  18.         public CollapseView(Context context, AttributeSet attrs) {
  19.             super(context, attrs);
  20.             mContext = context;
  21.             LayoutInflater.from(mContext).inflate(R.layout.collapse_layout, this);
  22.             initView();
  23.         }
  26.         private void initView() {
  27.             mNumberTextView = (TextView) findViewById(R.id.numberTextView);
  28.             mTitleTextView = (TextView) findViewById(R.id.titleTextView);
  29.             mTitleRelativeLayout = (RelativeLayout) findViewById(R.id.titleRelativeLayout);
  30.             mContentRelativeLayout = (RelativeLayout) findViewById(R.id.contentRelativeLayout);
  31.             mArrowImageView = (ImageView) findViewById(R.id.arrowImageView);
  32.             mTitleRelativeLayout.setOnClickListener(new OnClickListener() {
  33.                 @Override
  34.                 public void onClick(View v) {
  35.                     rotateArrow();
  36.                 }
  37.             });
  38.             mNumberTextView.setBackgroundResource(R.drawable.circle);
  39.             Drawable circleShape = createCircleShape(Color.BLACK);
  40.             mNumberTextView.setBackgroundDrawable(circleShape);
  41.             collapse(mContentRelativeLayout);
  42.         }
  44.         public void setNumber(String number) {
  45.             if (!TextUtils.isEmpty(number)) {
  46.                 mNumberTextView.setText(number);
  47.             }
  48.         }
  50.         public void setTitle(String title) {
  51.             if (!TextUtils.isEmpty(title)) {
  52.                 mTitleTextView.setText(title);
  53.             }
  54.         }
  56.         public void setContent(int resID) {
  57.             View view = LayoutInflater.from(mContext).inflate(resID, null);
  58.             RelativeLayout.LayoutParams layoutParams =
  59.                     new RelativeLayout.LayoutParams(LayoutParams.MATCH_PARENT, RelativeLayout
  60.                             .LayoutParams.WRAP_CONTENT);
  61.             view.setLayoutParams(layoutParams);
  62.             mContentRelativeLayout.addView(view);
  63.         }
  65.         /**
  66.          * 若使用这个方法，强制layoutParams must be RelativeLayout.LayoutParams，防止在某些情况下出现错误
  67.          *
  68.          * @param view
  69.          */
  70.         public void setContent(View view) {
  71.             ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
  73.             if (layoutParams == null) {
  74.                 layoutParams = new RelativeLayout.LayoutParams(
  75.                         LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
  76.             }
  78.             if (!(layoutParams instanceof RelativeLayout.LayoutParams)) {
  79.                 throw new IllegalStateException("layoutParams must be RelativeLayout.LayoutParams ");
  80.             }
  82.             view.setLayoutParams(layoutParams);
  83.             mContentRelativeLayout.addView(view);
  84.         }
  86.         public void rotateArrow() {
  87.             int degree = 0;
  88.             if (mArrowImageView.getTag() == null || mArrowImageView.getTag().equals(true)) {
  89.                 mArrowImageView.setTag(false);
  90.                 degree = -180;
  91.                 expand(mContentRelativeLayout);
  92.             } else {
  93.                 degree = 0;
  94.                 mArrowImageView.setTag(true);
  95.                 collapse(mContentRelativeLayout);
  96.             }
  97.             mArrowImageView.animate().setDuration(duration).rotation(degree);
  98.         }
  100.         @Override
  101.         protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
  102.             super.onMeasure(widthMeasureSpec, heightMeasureSpec);
  103.             parentWidthMeasureSpec = widthMeasureSpec;
  104.             parentHeightMeasureSpec = heightMeasureSpec;
  105.         }
  107.         @Override
  108.         protected void onLayout(boolean changed, int l, int t, int r, int b) {
  109.             super.onLayout(changed, l, t, r, b);
  110.         }
  115.         // 展开
  116.         private void expand(final View view) {
  118.             view.setVisibility(View.VISIBLE);
  119.             int childWidthMode = getMode(parentWidthMeasureSpec);
  120.             int childHeightMode = getMode(parentHeightMeasureSpec);
  121.             view.measure(childWidthMode, childHeightMode);
  122.             final int measuredWidth = view.getMeasuredWidth();
  123.             final int measuredHeight = view.getMeasuredHeight();
  125.             final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
  126.             valueAnimator.setDuration(duration);
  127.             valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  128.                 @Override
  129.                 public void onAnimationUpdate(ValueAnimator animation) {
  130.                     float precent = animation.getAnimatedFraction();
  131.                     int width = (int) (measuredWidth * precent);
  132.                     setWidth(view, width);
  133.                     if (precent == 1) {
  134.                         valueAnimator.removeAllUpdateListeners();
  135.                     }
  136.                 }
  137.             });
  138.             valueAnimator.start();
  140.         }
  142.         private int getMode(int parentMeasureSpec) {
  144.             if (parentMeasureSpec == MeasureSpec.EXACTLY) {
  145.                 return MeasureSpec.AT_MOST;
  146.             } else if (parentMeasureSpec == MeasureSpec.AT_MOST) {
  147.                 return MeasureSpec.AT_MOST;
  148.             } else {
  149.                 return parentMeasureSpec;
  150.             }
  151.         }
  153.         private void setWidth(View view, int width) {
  154.             ViewGroup.LayoutParams layoutParams = view.getLayoutParams();
  155.             layoutParams.width = width;
  156.             view.setLayoutParams(layoutParams);
  157.             view.requestLayout();
  158.         }
  160.         // 折叠
  161.         private void collapse(final View view) {
  162.             final int measuredHeight = view.getMeasuredHeight();
  163.             final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
  164.             valueAnimator.setDuration(duration);
  165.             final int viewMeasuredWidth = view.getMeasuredWidth();
  167.             valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
  169.                 @Override
  170.                 public void onAnimationUpdate(ValueAnimator animation) {
  172.                     float precent = animation.getAnimatedFraction();
  173.                     Log.i(TAG, "onAnimationUpdate: precent" + precent);
  174.                     int width = (int) (viewMeasuredWidth - viewMeasuredWidth * precent);
  175.                     setWidth(view, width);
  176.     //                动画执行结束的时候，设置View为View.GONE，同时移除监听器
  177.                     if (precent == 1) {
  178.                         view.setVisibility(View.GONE);
  179.                         valueAnimator.removeAllUpdateListeners();
  180.                     }
  181.                 }
  182.             });
  183.             valueAnimator.start();
  184.         }
  185.     }

思路解析

  1. 如图所示，图一一四个部分组成，数字，标题，箭头，图片，点击标题所在的那一行，图片回相应地隐藏或者显示。
  2. 数字，标题，箭头都在同一个相对布局里面，图片在单独的一个相对布局中，总体由 LinearLayout构成，布局文件如下
  2.     <?xml version="1.0" encoding="utf-8"?>
  3.     <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  4.                   android:layout_width="match_parent"
  5.                   android:layout_height="wrap_content"
  6.                   android:background="#ffffff"
  7.                   android:orientation="vertical">
  8.         <RelativeLayout
  9.             android:id="@+id/titleRelativeLayout"
  10.             android:padding="30px"
  11.             android:layout_width="match_parent"
  12.             android:layout_height="170px"
  13.             android:clickable="true">
  15.             <TextView
  16.                 android:id="@+id/numberTextView"
  17.                 android:layout_width="70px"
  18.                 android:layout_height="70px"
  19.                 android:gravity="center"
  20.                 android:layout_centerVertical="true"
  22.                 android:clickable="false"
  23.                 android:text="1"
  24.                 android:textStyle="bold"
  25.                 android:textColor="#EBEFEC"
  26.                 android:textSize="35px" />
  28.             <TextView
  29.                 android:id="@+id/titleTextView"
  30.                 android:layout_width="match_parent"
  31.                 android:layout_height="wrap_content"
  32.                 android:layout_centerVertical="true"
  33.                 android:layout_toRightOf="@id/numberTextView"
  34.                 android:layout_marginLeft="30px"
  35.                 android:clickable="false"
  36.                 android:textColor="#1d953f"
  37.                 android:textSize="46px" />
  40.             <ImageView
  41.                 android:id="@+id/arrowImageView"
  42.                 android:layout_width="48px"
  43.                 android:layout_height="27px"
  44.                 android:layout_alignParentRight="true"
  45.                 android:layout_centerVertical="true"
  46.                 android:background="@mipmap/arrow_down"
  47.                 android:clickable="false"
  48.                 android:scaleType="fitCenter" />
  49.         </RelativeLayout>
  51.         <View
  52.             android:layout_width="match_parent"
  53.             android:layout_height="2px"
  54.             android:layout_below="@id/titleRelativeLayout"
  55.             android:background="#E7E7EF"
  56.             android:clickable="false"
  57.             />
  59.         <RelativeLayout
  60.             android:id="@+id/contentRelativeLayout"
  61.             android:visibility="gone"
  62.             android:layout_width="match_parent"
  63.             android:layout_height="wrap_content">
  64.         </RelativeLayout>
  66.     </LinearLayout>

把contentRelativeLayout的visibility设置为android:visibility="gone"，是因为一开始不用加载这个相对局部，这样它不会占用位置

  1. 在代码中初始化布局，并给 mTitleRelativeLayout设置点击事件。
 mTitleRelativeLayout.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    rotateArrow();
                }
            });

我们来看 rotateArrow()里面我们做了什么，其实就是根据相应的动画执行箭头旋转的动作和更改
contentRelativeLayout的高度
核心代码如下：

  int degree = 0;
  if (mArrowImageView.getTag() == null || mArrowImageView.getTag().equals(true)) {
        mArrowImageView.setTag(false);
        degree = -180;
        expand(mContentRelativeLayout);
   } else {
        degree = 0;
        mArrowImageView.setTag(true);
        collapse(mContentRelativeLayout);
   }
   mArrowImageView.animate().setDuration(duration).rotation(degree);

我们在来看一下在expand我们做了什么，其实就是给contentRelativeLayout执行一个动画，在动画的执行过程中不断改变contentRelativeLayout的高度，注意在执行动画之前，我们需要小调用view.measure(childWidthMode, childHeightMode);方法，这样我们可能获取到高度

    view.setVisibility(View.VISIBLE);
    int childWidthMode = getMode(parentWidthMeasureSpec);
    int childHeightMode = getMode(parentHeightMeasureSpec);
    view.measure(childWidthMode, childHeightMode);
    final int measuredWidth = view.getMeasuredWidth();
    final int measuredHeight = view.getMeasuredHeight();

    final ValueAnimator valueAnimator = ValueAnimator.ofFloat(0, 1);
    valueAnimator.setDuration(duration);
    valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
        @Override
        public void onAnimationUpdate(ValueAnimator animation) {
            float precent = animation.getAnimatedFraction();
            int width = (int) (measuredWidth * precent);
            setWidth(view, width);
            // 动画执行结束的时候，同时移除监听器
            if (precent == 1) {
                valueAnimator.removeAllUpdateListeners();
            }
        }
    });
    valueAnimator.start();

反之，隐藏也是执行一个动画，不断改变高度，只不过高度 是越来越小，直至为0为止

图一的源码分析到此为止，源码下载地址：https://github.com/gdutxiaoxu/CustomViewDemo2.git

图二源码分析

源码下载地址

1.思路解析，

1）首先我们自己自定义一个CustomImageView,在这个类里面我们给其提供了一个方法

public void setImageUrl(String url)；

在这个方法里面其实我们做的工作就是Picasso框架加载图片，即图片交给CustomImageView自己去加载，更符合面向对象的四位

    if (!TextUtils.isEmpty(url)) {
        this.url = url;
        if (isAttachedToWindow) {
            Picasso.with(getContext()).load(url).placeholder(new ColorDrawable(Color.parseColor("#f5f5f5"))).into(this);
        }
    }

2）接着我们自定义一个NineGridlayout，继承ViewGroup，在这个类里面我们主要做的工作就是添加孩子，并确定每个孩子的位置

首先我们在构造方法里面初始化我们控件需要的宽度

public NineGridlayout(Context context, AttributeSet attrs) {
    super(context, attrs);
    ScreenTools screenTools=ScreenTools.instance(getContext());
  //        初始总宽度
    totalWidth=screenTools.getScreenWidth()-screenTools.dip2px(80);
}

接着我们提供了setImagesData（）方法，基本所有的逻辑都放在这里

注意我们这里之所以需要判断是否需要复用，是因为ListView或RecyclerView的缓存机制，若每次setImagesData（）的时候直接添加，会导致添加多个孩子，若直接移除所有孩子的话，性能相对来说较差，所以我们进行缓存，到此源码分析位置。

代码如下

/**
 * 博客地址：http://blog.csdn.net/gdutxiaoxu
 * @author xujun
 * @time 2015/11/27 16:13.
 */
public class NineGridlayout extends ViewGroup {

    /**
     * 图片之间的间隔
     */
    private int gap = 5;
    private int columns;//列数
    private int rows;//行数
    private List listData;
    private int totalWidth;

    private final int MAX_COLUMNS=3;
    private final int MAX_ROW3=3;

    public NineGridlayout(Context context) {
        this(context,null);
    }

    public NineGridlayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        ScreenTools screenTools=ScreenTools.instance(getContext());
//        初始总宽度
        totalWidth=screenTools.getScreenWidth()-screenTools.dip2px(80);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }

    @Override
    protected void onLayout(boolean changed, int l, int t, int r, int b) {

    }
    private void layoutChildrenView(){
        int childrenCount = listData.size();

        int singleWidth = (totalWidth - gap * (3 - 1)) / 3;
        int singleHeight = singleWidth;


        /**
         * 根据子view数量确定高度,这里直接调用setLayoutParams设置NineGridlayout的高度
         * 
         */

        LayoutParams params = getLayoutParams();
        int marginHeight = getPaddingTop() + getPaddingTop();
        params.height = singleHeight * rows + gap * (rows - 1)+marginHeight;
        setLayoutParams(params);

//摆放孩子的位置
        for (int i = 0; i < childrenCount; i++) {
            CustomImageView childrenView = (CustomImageView) getChildAt(i);
            childrenView.setImageUrl(((Image) listData.get(i)).getUrl());
            int[] position = findPosition(i);

//            加上getPaddingLeft（），为了支持Padding属性
            int left = (singleWidth + gap) * position[1]+getPaddingLeft();
            int top = (singleHeight + gap) * position[0]+getPaddingTop();
            int right = left + singleWidth;
            int bottom = top + singleHeight;

            childrenView.layout(left, top, right, bottom);
        }

    }


    private int[] findPosition(int childNum) {
        int[] position = new int[2];
        for (int i = 0; i < rows; i++) {
            for (int j = 0; j < columns; j++) {
                if ((i * columns + j) == childNum) {
                    position[0] = i;//行
                    position[1] = j;//列
                    break;
                }
            }
        }
        return position;
    }

    public int getGap() {
        return gap;
    }

    public void setGap(int gap) {
        this.gap = gap;
    }


    public void setImagesData(List<Image> lists) {
        if (lists == null || lists.isEmpty()) {
            return;
        }
        //初始化布局
        generateChildrenLayout(lists.size());
        //这里做一个重用view的处理
        if (listData == null) {
            int i = 0;
            while (i < lists.size()) {
                CustomImageView iv = generateImageView();
                addView(iv,generateDefaultLayoutParams());
                i++;
            }
        } else {
            int oldViewCount = listData.size();
            int newViewCount = lists.size();
            if (oldViewCount > newViewCount) {
                removeViews(newViewCount - 1, oldViewCount - newViewCount);
            } else if (oldViewCount < newViewCount) {
                for (int i = 0; i < newViewCount - oldViewCount; i++) {
                    CustomImageView iv = generateImageView();
                    addView(iv,generateDefaultLayoutParams());
                }
            }
        }
        listData = lists;
        layoutChildrenView();
    }


    /**
     * 根据图片个数确定行列数量
     * 对应关系如下
     * num  row column
     * 1       1    1
     * 2       1    2
     * 3       1    3
     * 4       2    2
     * 5       2    3
     * 6       2    3
     * 7       3    3
     * 8       3    3
     * 9       3    3
     *
     * @param length
     */
    private void generateChildrenLayout(int length) {
        if (length <= MAX_COLUMNS) {
            rows = 1;
            columns = length;
        } else if (length <= MAX_COLUMNS*2) {
            rows = 2;
            columns = MAX_COLUMNS;
            if (length == MAX_COLUMNS+1) {
                columns = 2;
            }
        } else {
            rows = 3;
            columns = MAX_COLUMNS;
        }
    }

    private CustomImageView generateImageView() {
        CustomImageView iv = new CustomImageView(getContext());
        iv.setScaleType(ImageView.ScaleType.CENTER_CROP);
        iv.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
        iv.setBackgroundColor(Color.parseColor("#f5f5f5"));
        return iv;
    }


}

图二源码下载地址

图一源码下载地址：

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注