一篇学会自定义组合控件

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

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

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

下面看一个例子：

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

我把它分成了：

layout/activity_main.xml

<?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:background="#AAFFCC"
    android:orientation="vertical">


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <Button
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:onClick="change"
            android:text="Change" />

    </LinearLayout>

    <include layout="@layout/function_foot" />
</LinearLayout>

layout/function_foot.xml

<?xml version="1.0" encoding="utf-8"?>
<zs.android.functionview.view.HomeFoot xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <View
            android:id="@+id/view_back_top"
            android:layout_width="match_parent"
            android:background="#AAFFCC"
            android:layout_height="2dp" />

        <ImageView
            android:id="@+id/iv_bg"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:src="#00b0f0" />
    </LinearLayout>


    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <include layout="@layout/function_view" />

        <TextView
            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" />

    </LinearLayout>


</zs.android.functionview.view.HomeFoot>

layout/function_view.xml

<?xml version="1.0" encoding="utf-8"?>
<zs.android.functionview.view.FunctionView 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"
   >

    <View
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1" />

    <ImageView
        android:id="@+id/iv_chat"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/home_chat" />

    <ImageView
        android:id="@+id/iv_loc"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/home_locate" />

    <ImageView
        android:id="@+id/iv_health"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/home_health" />

    <View
        android:layout_width="0dp"
        android:layout_height="2dp"
        android:layout_weight="1" />
</zs.android.functionview.view.FunctionView>

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;
        }
    }
}