一篇学会自定义组合控件

来源：互联网发布：三亚克洛伊婚纱照知乎编辑：程序博客网时间：2024/06/15 23:59

这里要讲的是通过继承系统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;        }    }}

1 0