把ImageView放到控件右上角并超出控件的两种实现方式
效果图
一安卓交流群里有个程序猿放出这样一张图,问怎么按钮放到图示里的位置,群里七嘴八舌的说了几种办法,但实现起来比较麻烦,于是我就向他分享了我的想法,实现起来也相当简单,于是就分享给大家
公司要求图片
楼主实现效果图
方法一,使用RelativeLayout布局加layout_margin属性
关键思想,
- 先添加一个RelativeLayout作为根布局,把imageview放到RelativeLayout右上角,
- 添加一个控件,宽高都设置为match_parent,并设置layout_margin属性为图像宽的一般效果就达到我们想要的效果了,代码如下
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:padding="25dp">
<LinearLayout
android:layout_margin="15dp"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#6fea57"></LinearLayout>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/common_input_edit_clear_pressed" />
<ImageView
android:layout_alignParentRight="true"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/common_input_edit_clear_pressed" />
<ImageView
android:layout_alignParentBottom="true"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/common_input_edit_clear_pressed" />
<ImageView
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/common_input_edit_clear_pressed" />
</RelativeLayout>
第二种,自定义viewgroup
看到第一种如此简单,第二种我都不想写了,但还是写一下,可以开阔一下思想,核心思想如下
- 自定义控件继承FrameLayout,
public class RightTopView extends FrameLayout
- 在onmeasure里面测量控件的大小和子控件的大小
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (getChildCount()!=2){
throw new IllegalStateException("you should have two child ,你必须拥有两个子控件");
}
//测量总控件的宽和高
width = getMeasuredWidth();
height = getMeasuredHeight();
//测量第二个子控件的宽和高
childWidth = getChildAt(1).getMeasuredWidth();
childHeight =getChildAt(1).getMeasuredHeight();
}
- 在onlayout方法中分布设置两个控件的位置
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
//对控件进行位置布局
getChildAt(0).layout(childWidth/2,childHeight/2,width-childWidth/2,height-childHeight/2);
getChildAt(1).layout(width-childWidth,0,width,childHeight);
}
- 在布局文件中使用,并把想要放在左上角的控件设置为第二个子控件即可
<com.example.csdn.view.RightTopView
android:layout_width="match_parent"
android:layout_height="match_parent">
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#ed9999"></LinearLayout>
<ImageView
android:layout_width="30dp"
android:layout_height="30dp"
android:src="@mipmap/common_input_edit_clear_pressed" />
</com.example.csdn.view.RightTopView>
下面附上自定义控件的代码
package com.example.csdn.view;
import android.content.Context;
import android.util.AttributeSet;
import android.widget.FrameLayout;
/**
* Created by 玉光 on 2016-8-18.
*/
public class RightTopView extends FrameLayout {
private int width;
private int height;
private int childWidth;
private int childHeight;
public RightTopView(Context context) {
super(context);
}
public RightTopView(Context context, AttributeSet attrs) {
super(context, attrs);
}
public RightTopView(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if (getChildCount()!=2){
throw new IllegalStateException("you should have two child ,你必须拥有两个子控件");
}
//测量总控件的宽和高
width = getMeasuredWidth();
height = getMeasuredHeight();
//测量第二个子控件的宽和高
childWidth = getChildAt(1).getMeasuredWidth();
childHeight =getChildAt(1).getMeasuredHeight();
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
super.onLayout(changed, left, top, right, bottom);
//对控件进行位置布局
getChildAt(0).layout(childWidth/2,childHeight/2,width-childWidth/2,height-childHeight/2);
getChildAt(1).layout(width-childWidth,0,width,childHeight);
}
}
作者有时间的时候会帮同行们实现一些网上不容易找到效果,如果你也需要帮助,不妨私信一下作者,欢迎大家一起交流和进步!