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