这一节自定义一个容器,新建一个CenterLayout继承自ViewGroup
先做一些练习
模拟一个LinearLayout
//写一个布局,容器
public class CenterLayout extends ViewGroup {
public CenterLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
//设置子控件如何显示
@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
View view1 = getChildAt(0);
Log.d("CenterLayout","textView width:"+view1.getMeasuredWidth()+";height:"+view1.getMeasuredHeight());
//指定控件位置
view1.layout(0,0,600,100);
View view2 = getChildAt(1);
Log.d("CenterLayout","image width:"+view2.getMeasuredWidth()+";height:"+view2.getMeasuredHeight());
view2.layout(0,100,600,300);
}
//测量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获得子控件个数
int childViewCount = getChildCount();
//测量
for(int i=0;i<childViewCount;i++){
View childView = getChildAt(i);
childView.measure(widthMeasureSpec,heightMeasureSpec);
}
}
}
布局
<com.xx.shadeview.CenterLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:Shade="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.xx.shadeview.ShadeView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Shade:shade_color="#FF888888"
Shade:text="运动伙伴 就选酷跑"
Shade:text_color="#FF0000FF"
Shade:text_size="20" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="运动伙伴 就选酷跑"
android:textSize="20dp" />
</com.xx.shadeview.CenterLayout>
这里的ShadeView,是之前的自定义控件【达内课程】自定义控件(文字阴影)
效果
现在模拟一个帧布局
View view1 = getChildAt(0);
view1.layout(0,0,300,100);
//坐标左上角重叠
View view2 = getChildAt(1);
view2.layout(0,0,600,100);
效果
模拟一个相对布局
View view1 = getChildAt(0);
view1.layout(0,0,300,100);
View view2 = getChildAt(1);
view2.layout(300,100,600,200);
效果
现在来做居中效果
假设有2个view,来计算下它们相关数据
CenterLayout
//写一个布局,容器
public class CenterLayout extends ViewGroup {
int groupWidth,groupHeight;
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
groupHeight = h;
groupWidth = w;
}
public CenterLayout(Context context, AttributeSet attrs) {
super(context, attrs);
}
//设置子控件如何显示
@Override
protected void onLayout(boolean b, int i, int i1, int i2, int i3) {
//获得子控件个数
int childViewCount = getChildCount();
//所有控件的高度之和
int sum = 0;
for(int j=0;j<childViewCount;j++){
View view = getChildAt(j);
sum+=view.getMeasuredHeight();
}
int top = (groupHeight - sum)/2;
for(int j=0;j<childViewCount;j++){
View view = getChildAt(j);
int viewWidth = view.getMeasuredWidth();
int viewHeight = view.getMeasuredHeight();
int left = (groupWidth - viewWidth)/2;
int right = left + viewWidth;
int bottom = top + viewHeight;
view.layout(left,top,right,bottom);
top += viewHeight;
}
}
//测量
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
//获得子控件个数
int childViewCount = getChildCount();
//测量
for(int i=0;i<childViewCount;i++){
View childView = getChildAt(i);
childView.measure(widthMeasureSpec,heightMeasureSpec);
}
}
}
布局
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">
<com.xx.shadeview.CenterLayout xmlns:Shade="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.xx.shadeview.ShadeView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Shade:shade_color="#FF888888"
Shade:text="运动伙伴 就选酷跑"
Shade:text_color="#FF0000FF"
Shade:text_size="20" />
<com.xx.shadeview.ShadeView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
Shade:shade_color="#FF888888"
Shade:text="运动伙伴 就选酷跑"
Shade:text_color="#FF0000FF"
Shade:text_size="20" />
</com.xx.shadeview.CenterLayout>
</LinearLayout>