自定义View —— 可伸展的CollapsExpendView

原创 2017年01月03日 10:24:10

自定义可伸缩的ViewGroup

效果图

具体代码及详解:

主要几个注意点

  1. 在OnMeasure中调用measureChild方法,该方法会调用子View的Measure方法,获取MeasuredWidth和MeasureHeight。之后可以根据这些已测量的数值计算父View的高度。
  2. 在构造函数中执行addView操作将预备添加的view添加上去,包括最初未显示的ImageView,当点击右侧按钮时添加背景图片,再次点击设置背景为空,设置后都进行View的requestLayout和invalidate来重绘。

public class CollapsExpendView extends ViewGroup{
	private static String TAG="CollapsExpendView";
    // 图片数组  
    private static final int[] ARR_IMAGES = {   
        R.drawable.sample_0,   
        R.drawable.sample_1,   
        R.drawable.sample_2,   
    };
    private TextView textview[];
    private ImageButton button[];
    private ImageView imageView[];
    private Context context;
    private Boolean ifexpend=false;
    private int linearLayout_height,linearLayout_width;
    private static final String[] names={
    	"狗111111",
    	"狗222222",
    	"狗333333"
    };
    private LinearLayout linearLayout[];
	public CollapsExpendView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		// TODO Auto-generated constructor stub
		this.context=context;
		addViewFirst();
	}

	public CollapsExpendView(Context context, AttributeSet attrs) {
		this(context, attrs, 0);
		// TODO Auto-generated constructor stub
		this.context=context;
	}

	public CollapsExpendView(Context context) {
		this(context,null);
		this.context=context;
		// TODO Auto-generated constructor stub
	}
	public void addViewFirst(){
		Log.i(TAG,"addViewFirst");
		linearLayout = new LinearLayout[3];
		textview=new TextView[3];
		button= new ImageButton[3];
		imageView=new ImageView[3];
		for(int i=0;i<3;i++){
			linearLayout[i]=new LinearLayout(context);
			imageView[i]=new ImageView(context);
			//设置宽高大小,这个时候只是在构造函数中执行,还没有到View的Measure阶段,调用get方法获取到的高和宽都是0;
			LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.MATCH_PARENT,LinearLayout.LayoutParams.WRAP_CONTENT);
			linearLayout[i].setOrientation(LinearLayout.HORIZONTAL);
			//给横向的LinearLayout添加三个view
			setLinearLayoutView(linearLayout[i],i);
			linearLayout[i].setLayoutParams(params);
			imageView[i].setLayoutParams(new LayoutParams(LayoutParams.WRAP_CONTENT,LayoutParams.WRAP_CONTENT));
			//整体的viewGroup添加纵向的三个view,分别是一个Layout,一个分割线,一个图片(由于是wrap_Content最开始不显示),一个是分割线
			this.addView(linearLayout[i]);
			this.addView(imageView[i]);
			this.addView(getDividerView());
		}	
	}
	public View getDividerView(){
		ImageView divider=new ImageView(context);
		LayoutParams params = new LayoutParams(LayoutParams.MATCH_PARENT,LayoutParams.WRAP_CONTENT);
		divider.setLayoutParams(params);
		divider.setBackgroundResource(R.drawable.category_list_divider);
		return divider;
	}
	@Override
	protected void onLayout(boolean arg0, int arg1, int arg2, int arg3, int arg4) {
		// TODO Auto-generated method stub
		int count = getChildCount();     
		int sumHeight=0;
        //根据每个子View的设定大小,设置每一个子View的位置
        for(int i = 0 ;i < count;i++) {
        	View child= getChildAt(i);
        	child.layout(0, sumHeight,child.getMeasuredWidth(), sumHeight+child.getMeasuredHeight());
        	sumHeight+=child.getMeasuredHeight();
        }
	}
	@Override
	protected void onDraw(Canvas canvas) {
		// TODO Auto-generated method stub
		super.onDraw(canvas);
	}
/*
 * 父视图可能在它的子视图上调用一次以上的measure(int,int)方法。
 * 例如,父视图可以使用unspecified dimensions来将它的每个子视图都测量一次来算出它们到底需要多大尺寸,
 * 如果所有这些子视图没被限制的尺寸的和太大或太小,那么它会用精确数值再次调用measure()
 * (也就是说,如果子视图不满意它们获得的区域大小,那么父视图将会干涉并设置第二次测量规则)。
 * @see android.view.View#onMeasure(int, int)
 */
	@Override
	protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
		// TODO Auto-generated method stub
		super.onMeasure(widthMeasureSpec, heightMeasureSpec);
		//获取父view的最宽大显示限制
		int rw = MeasureSpec.getSize(widthMeasureSpec);
		int rh = MeasureSpec.getSize(heightMeasureSpec);
		Log.i(TAG,"rw: "+rw+"rh: "+rh);
		int count=this.getChildCount();
		int sumHeight=0;//累加高度
		View child=null;
		for (int i = 0; i < count; i++) {
			child = this.getChildAt(i);
			Log.i(TAG,"child:width》》  "+child.getWidth()+"LayoutParams》》 "+child.getLayoutParams().width+"getMeasuredWidth》》 "+child.getMeasuredWidth());
			this.measureChild(child, widthMeasureSpec, heightMeasureSpec); 
			//在第一次测量中,会使用UNSPECIFIED测量子View期望的size,所以在自定义viewgroup中,
			//调用Measurechild之后才会有getMeasureHeight和getMeasureWidth的值
			Log.i(TAG,"child:width》》  "+child.getWidth()+"LayoutParams》》  "+child.getLayoutParams().width+"getMeasuredWidth》》 "+child.getMeasuredWidth());
			sumHeight+=child.getMeasuredHeight();
		}
		setMeasuredDimension(rw, sumHeight);
	}
	public void setLinearLayoutView(LinearLayout layout,int i){
		//设置textView
		textview[i] =new TextView(context);
		LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,88);
		textview[i].setLayoutParams(params);
		textview[i].setText(names[i]);
		textview[i].setTextSize(32);
		layout.addView(textview[i],params);
		//设置填充Layout,权重是1
		LayoutParams params2= new LinearLayout.LayoutParams(0, LinearLayout.LayoutParams.WRAP_CONTENT, 1);
		layout.addView(new View(context),params2);
		//设置按钮
		button[i]=new ImageButton(context);
		LayoutParams params_button = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);
		button[i].setLayoutParams(params_button);
		button[i].setBackgroundResource(R.drawable.btn_alarms_more);	
		button[i].setOnClickListener(getButtonOnclickListener(button[i],i));
		layout.addView(button[i]);	
	}	
	private OnClickListener getButtonOnclickListener(final ImageButton button, final int i) {
		// TODO Auto-generated method stub
		return new OnClickListener() {
			
			@Override
			public void onClick(View arg0) {
				// TODO Auto-generated method stub
				if(ifexpend==false){//表示是收缩的,点击后需要展开
					button.setBackgroundResource(R.drawable.btn_alarms_up);	
					ifexpend=true;
					imageView[i].setBackgroundResource(ARR_IMAGES[i]);
				}
				else{
					button.setBackgroundResource(R.drawable.btn_alarms_more);	
					ifexpend=false;
					imageView[i].setBackground(null);
				}
				CollapsExpendView.this.requestLayout();
				CollapsExpendView.this.invalidate();
					
			}
		};
	}
}



版权声明:本文为博主原创文章,未经博主允许不得转载。

Android 收缩展开动画

activity_main.xml

android自定义view实现开关

下面是一个自定义view实现的开关,方法使用并且附加监听 1、自定义view代码 package com.android.sf.view; import android.content.Conte...

自定义View——日历的绘制

  • 2017年11月20日 18:33
  • 24.74MB
  • 下载

Android自定义view——组合控件

  • 2017年08月04日 15:15
  • 20.22MB
  • 下载

Android自定义View——仿ViVO X6 极速闪充动画效果

一直都在看自定义View,经过一个星期的坚持,基本上能够写出一些比较实用的控件效果了,今天天气太热,就待在家里玩手机,然后手机没电了,在充电的时候,看到了手机的充电动画,觉得挺酷,然后自己我就仔细的分...

Android自定义View——实现联系人列表字母索引

相信大家对这个列表字母索引已经不陌生了,在很多app中也随处可见,像没团的城市地址选择,微信联系人列表,手机通讯录…等等。既然是个这么nb这么实用的功能我们怎么能不Get到来呢,下面就让我们一起造一个...
  • a_zhon
  • a_zhon
  • 2016年11月18日 13:53
  • 6002
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:自定义View —— 可伸展的CollapsExpendView
举报原因:
原因补充:

(最多只允许输入30个字)