一篇学会自定义组合控件

这里要讲的是通过继承系统viewgroup来实现的，这样子我们就不需要自己写测量方法和布局方法了。更加简单些。留给我们做的就是获取到组合控件中的子控件，然后根据实际需要做动画或者改变大小，或者监听事件等等。我通常使用自定义组合控件的方式来实现android屏幕的适配工作。

组合控件的实现方式有2种，一种是下面介绍的，通过布局文件的方式来包裹现有控件，然后对控件作调整；

另一种是直接通过java代码，在组合控件的构造方法中，add子控件到组合控件容器中，这种方法在布局文件中可以直接写组合控件的引用即可，因为子控件的添加是通过代码来完成的。

下面看一个例子：

这里面有3个图标，要完整展示到屏幕中间，如果单独的在布局文件中布局是难以做到的。因为大小无法控制。

我把它分成了：

layout/activity_main.xml

xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="match_parent"  android:background="#AAFFCC"  android:orientation="vertical">     android:layout_width="match_parent"  android:layout_height="0dp"  android:layout_weight="1"  android:orientation="vertical">    android:layout_width="match_parent"  android:layout_height="wrap_content"  android:onClick="change"  android:text="Change" />      layout="@layout/function_foot" />  

layout/function_foot.xml

xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android"  android:layout_width="match_parent"  android:layout_height="wrap_content">    android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="vertical">    android:id="@+id/view_back_top"  android:layout_width="match_parent"  android:background="#AAFFCC"  android:layout_height="2dp" />    android:id="@+id/iv_bg"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:src="#00b0f0" />       android:layout_width="match_parent"  android:layout_height="wrap_content"  android:orientation="vertical">   layout="@layout/function_view" />    android:layout_width="match_parent"  android:layout_height="wrap_content"  android:layout_marginBottom="16dp"  android:layout_marginTop="16dp"  android:gravity="center"  android:singleLine="true"  android:text="com.iwit.cloudcare.net"  android:textColor="#ff0000" />      

layout/function_view.xml

xml version="1.0" encoding="utf-8"?> xmlns:android="http://schemas.android.com/apk/res/android"  android:id="@+id/function"  android:layout_width="match_parent"  android:layout_height="wrap_content"  android:animateLayoutChanges="true"  >    android:layout_width="0dp"  android:layout_height="2dp"  android:layout_weight="1" />    android:id="@+id/iv_chat"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:src="@mipmap/home_chat" />    android:id="@+id/iv_loc"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:src="@mipmap/home_locate" />    android:id="@+id/iv_health"  android:layout_width="wrap_content"  android:layout_height="wrap_content"  android:src="@mipmap/home_health" />    android:layout_width="0dp"  android:layout_height="2dp"  android:layout_weight="1" />  

FunctionView，就是包裹3个图标的linearlayout

package zs.android.functionview.view;  import android.content.Context; import android.util.AttributeSet; import android.widget.ImageView; import android.widget.LinearLayout;  import zs.android.functionview.R;  public class FunctionView extends LinearLayout {

    private ImageView iv_chat;  private ImageView iv_loc;  private ImageView iv_health;   public ImageView getIv_chat() {
        return iv_chat;  }

    public ImageView getIv_loc() {
        return iv_loc;  }

    public ImageView getIv_health() {
        return iv_health;  }

    public FunctionView(Context context, AttributeSet attrs) {
        super(context, attrs);  setOrientation(HORIZONTAL);  }


    //xml解析完毕，初始化childview  @Override  protected void onFinishInflate() {
        super.onFinishInflate();   initView();  }

    private void initView() {
        iv_chat =(ImageView)findViewById(R.id.iv_chat);  iv_loc =(ImageView)findViewById(R.id.iv_loc);  iv_health =(ImageView)findViewById(R.id.iv_health);  }

    @Override  protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);  }


    //在onSizeChanged中每个childview的大小已经确定了，可以在可以重新设置大小  @Override  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);  int width = (int) (w*18.0/20/3);  LayoutParams layoutParams = new LayoutParams(width, width);  iv_chat.setLayoutParams(layoutParams);  iv_loc.setLayoutParams(layoutParams);  iv_health.setLayoutParams(layoutParams);  }
}

HomeFoot

package zs.android.functionview.view;  import android.content.Context; import android.util.AttributeSet; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RelativeLayout;  import zs.android.functionview.R;  /**  * Created by Administrator on 2016/9/18 0018.  */ public class HomeFoot extends RelativeLayout{
    private View view_back_top;  private ImageView iv_bg;  private FunctionView function;   public FunctionView getFunction() {
        return function;  }

    public HomeFoot(Context context, AttributeSet attrs) {
        super(context, attrs);  }

    @Override  protected void onFinishInflate() {
        super.onFinishInflate();   initView();  }

    private void initView() {
        view_back_top =  findViewById(R.id.view_back_top);  iv_bg =(ImageView)findViewById(R.id.iv_bg);  function = (FunctionView) findViewById(R.id.function);  }

    @Override  protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);   int functionViewHeight = function.getMeasuredHeight();   ViewGroup.LayoutParams view_back_topLayoutParams = view_back_top.getLayoutParams();  view_back_topLayoutParams.height = (int) (functionViewHeight/3.0);  view_back_top.setLayoutParams(view_back_topLayoutParams);   ViewGroup.LayoutParams iv_bgLayoutParams = iv_bg.getLayoutParams();  iv_bgLayoutParams.height = h-view_back_topLayoutParams.height;  iv_bg.setLayoutParams(iv_bgLayoutParams);  }
}

Activity代码：

package zs.android.functionview;  import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.view.View; import android.widget.ImageView; import android.widget.Toast;  import zs.android.functionview.view.FunctionView;  public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private ImageView iv_chat, iv_loc, iv_health;   @Override  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);  setContentView(R.layout.activity_main);   FunctionView function = (FunctionView) findViewById(R.id.function);   iv_chat = function.getIv_chat();  iv_loc = function.getIv_loc();  iv_health = function.getIv_health();  iv_chat.setOnClickListener(this);  iv_loc.setOnClickListener(this);  iv_health.setOnClickListener(this);  }

    public void change(View v) {
        if (iv_chat.getVisibility()==View.VISIBLE){
            iv_chat.setVisibility(View.GONE);  }else{
            iv_chat.setVisibility(View.VISIBLE);  }
    }

    @Override  public void onClick(View v) {
        switch (v.getId()) {
            case R.id.iv_chat:
                Toast.makeText(this, "iv_chat", Toast.LENGTH_SHORT).show();  break;   case R.id.iv_loc:
                Toast.makeText(this, "iv_loc", Toast.LENGTH_SHORT).show();  break;   case R.id.iv_health:
                Toast.makeText(this, "iv_health", Toast.LENGTH_SHORT).show();  break;  }
    }
}