平時(shí)看見(jiàn) UI 設(shè)計(jì)的圖里面有許多的圓角和漸變色，相信做Android的同志對(duì)這個(gè)很熟悉了间螟。
可以用Shape 文件實(shí)現(xiàn)上面的效果吴旋，但是當(dāng)Shape文件變多了呢，咋辦厢破，這東西又不好管理荣瑟。所以我自己自定義了一個(gè)相對(duì)布局，直接可以在布局中聲明圓角漸變色摩泪。
首先來(lái)看效果吧
image.png
貼代碼
/**
* @description 實(shí)現(xiàn)自定義圓角相對(duì)布局
* 支持
* 1.四邊圓角
* 2.指定邊圓角
* 3.支持填充色以及邊框色,邊框虛線
*/
public class ShapeRelativeLayout extends RelativeLayout {
//自定背景邊框Drawable
private GradientDrawable gradientDrawable;
//填充色
private int solidColor = 0;
//漸變色
private int startColor = 0;
private int endColor = 0;
//邊框色
private int strokeColor = 0;
//邊框?qū)挾? private int strokeWidth = 0;
//漸變方向 0 是從左到右 1是從上到下
private int orientation = 0;
//四個(gè)角的弧度
private float radius;
private float topLeftRadius;
private float topRightRadius;
private float bottomLeftRadius;
private float bottomRightRadius;
//邊框虛線的寬度
float dashWidth = 0;
//邊框虛線的間隙
float dashGap = 0;
public ShapeRelativeLayout(Context context) {
this(context,null);
}
public ShapeRelativeLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public ShapeRelativeLayout(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
if (startColor != 0 && endColor != 0) {
//漸變背景
gradientDrawable = getLineDrawable(new float[]{topLeftRadius, topLeftRadius, topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius, bottomLeftRadius, bottomLeftRadius},
startColor, endColor, strokeWidth, strokeColor, dashWidth, dashGap, orientation);
} else {
//默認(rèn)背景
gradientDrawable = getNeedDrawable(new float[]{topLeftRadius, topLeftRadius, topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius, bottomLeftRadius, bottomLeftRadius},
solidColor, strokeWidth, strokeColor, dashWidth, dashGap);
}
setBackground(gradientDrawable);
}
/**
* 初始化參數(shù)
*
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ShapeLayout, 0, 0);
//填充顏色
solidColor = ta.getInteger(R.styleable.ShapeLayout_solidColor, 0x00000000);
//邊框顏色
strokeColor = ta.getInteger(R.styleable.ShapeLayout_strokeColor, 0x00000000);
startColor = ta.getInteger(R.styleable.ShapeLayout_startColor, 0x00000000);
endColor = ta.getInteger(R.styleable.ShapeLayout_endColor, 0x00000000);
//邊框?qū)挾? strokeWidth = (int) ta.getDimension(R.styleable.ShapeLayout_strokeWidth, 0);
//四個(gè)角單獨(dú)設(shè)置會(huì)覆蓋radius設(shè)置
radius = ta.getDimension(R.styleable.ShapeLayout_radius, 0);
topLeftRadius = ta.getDimension(R.styleable.ShapeLayout_topLeftRadius, radius);
topRightRadius = ta.getDimension(R.styleable.ShapeLayout_topRightRadius, radius);
bottomLeftRadius = ta.getDimension(R.styleable.ShapeLayout_bottomLeftRadius, radius);
bottomRightRadius = ta.getDimension(R.styleable.ShapeLayout_bottomRightRadius, radius);
dashGap = ta.getDimension(R.styleable.ShapeLayout_dashGap, 0);
dashWidth = ta.getDimension(R.styleable.ShapeLayout_dashWidth, 0);
orientation = ta.getInt(R.styleable.ShapeLayout_orientation, 0);
ta.recycle();
}
/**
* @param radius 四個(gè)角的半徑
* @param bgColor 背景顏色
* @param strokeWidth 邊框?qū)挾? * @param strokeColor 邊框顏色
* @param dashWidth 虛線邊框?qū)挾? * @param dashGap 虛線邊框間隙
* @return
*/
public static GradientDrawable getNeedDrawable(float[] radius, int bgColor, int strokeWidth, int strokeColor, float dashWidth, float dashGap) {
GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadii(radius);
drawable.setStroke(strokeWidth, strokeColor, dashWidth, dashGap);
drawable.setColor(bgColor);
return drawable;
}
public static GradientDrawable getLineDrawable(float[] radius, int startColor, int endColor, int strokeWidth, int strokeColor, float dashWidth, float dashGap, int orientation) {
GradientDrawable drawable = new GradientDrawable();
if (orientation == 0) {
drawable.setOrientation(GradientDrawable.Orientation.TOP_BOTTOM);
} else if (orientation == 1) {
drawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT);
}
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadii(radius);
drawable.setStroke(strokeWidth, strokeColor, dashWidth, dashGap);
drawable.setColors(new int[]{startColor, endColor});
return drawable;
}
}
自定義圓角線性布局
public class ShapeLinearLayout extends LinearLayout {
//自定背景邊框Drawable
private GradientDrawable gradientDrawable;
//填充色
private int solidColor = 0;
//漸變色
private int startColor = 0;
private int endColor = 0;
//邊框色
private int strokeColor = 0;
//邊框?qū)挾? private int strokeWidth = 0;
//漸變方向 0 是從左到右 1是從上到下
private int orientation = 0;
//四個(gè)角的弧度
private float radius;
private float topLeftRadius;
private float topRightRadius;
private float bottomLeftRadius;
private float bottomRightRadius;
//邊框虛線的寬度
float dashWidth = 0;
//邊框虛線的間隙
float dashGap = 0;
public ShapeLinearLayout(Context context) {
this(context,null);
}
public ShapeLinearLayout(Context context, @Nullable AttributeSet attrs) {
this(context, attrs,0);
}
public ShapeLinearLayout(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init(context, attrs);
if (startColor != 0 && endColor != 0) {
//漸變背景
gradientDrawable = getLineDrawable(new float[]{topLeftRadius, topLeftRadius, topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius, bottomLeftRadius, bottomLeftRadius},
startColor, endColor, strokeWidth, strokeColor, dashWidth, dashGap, orientation);
} else {
//默認(rèn)背景
gradientDrawable = getNeedDrawable(new float[]{topLeftRadius, topLeftRadius, topRightRadius, topRightRadius,
bottomRightRadius, bottomRightRadius, bottomLeftRadius, bottomLeftRadius},
solidColor, strokeWidth, strokeColor, dashWidth, dashGap);
}
setBackground(gradientDrawable);
}
/**
* 初始化參數(shù)
*
* @param context
* @param attrs
*/
private void init(Context context, AttributeSet attrs) {
TypedArray ta = context.getTheme().obtainStyledAttributes(attrs, R.styleable.ShapeLayout, 0, 0);
//填充顏色
solidColor = ta.getInteger(R.styleable.ShapeLayout_solidColor, 0x00000000);
//邊框顏色
strokeColor = ta.getInteger(R.styleable.ShapeLayout_strokeColor, 0x00000000);
startColor = ta.getInteger(R.styleable.ShapeLayout_startColor, 0x00000000);
endColor = ta.getInteger(R.styleable.ShapeLayout_endColor, 0x00000000);
//邊框?qū)挾? strokeWidth = (int) ta.getDimension(R.styleable.ShapeLayout_strokeWidth, 0);
//四個(gè)角單獨(dú)設(shè)置會(huì)覆蓋radius設(shè)置
radius = ta.getDimension(R.styleable.ShapeLayout_radius, 0);
topLeftRadius = ta.getDimension(R.styleable.ShapeLayout_topLeftRadius, radius);
topRightRadius = ta.getDimension(R.styleable.ShapeLayout_topRightRadius, radius);
bottomLeftRadius = ta.getDimension(R.styleable.ShapeLayout_bottomLeftRadius, radius);
bottomRightRadius = ta.getDimension(R.styleable.ShapeLayout_bottomRightRadius, radius);
dashGap = ta.getDimension(R.styleable.ShapeLayout_dashGap, 0);
dashWidth = ta.getDimension(R.styleable.ShapeLayout_dashWidth, 0);
orientation = ta.getInt(R.styleable.ShapeLayout_orientation, 0);
ta.recycle();
}
/**
* @param radius 四個(gè)角的半徑
* @param bgColor 背景顏色
* @param strokeWidth 邊框?qū)挾? * @param strokeColor 邊框顏色
* @param dashWidth 虛線邊框?qū)挾? * @param dashGap 虛線邊框間隙
* @return
*/
public static GradientDrawable getNeedDrawable(float[] radius, int bgColor, int strokeWidth, int strokeColor, float dashWidth, float dashGap) {
GradientDrawable drawable = new GradientDrawable();
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadii(radius);
drawable.setStroke(strokeWidth, strokeColor, dashWidth, dashGap);
drawable.setColor(bgColor);
return drawable;
}
public static GradientDrawable getLineDrawable(float[] radius, int startColor, int endColor, int strokeWidth, int strokeColor, float dashWidth, float dashGap, int orientation) {
GradientDrawable drawable = new GradientDrawable();
if (orientation == 0) {
drawable.setOrientation(GradientDrawable.Orientation.TOP_BOTTOM);
} else if (orientation == 1) {
drawable.setOrientation(GradientDrawable.Orientation.LEFT_RIGHT);
}
drawable.setShape(GradientDrawable.RECTANGLE);
drawable.setCornerRadii(radius);
drawable.setStroke(strokeWidth, strokeColor, dashWidth, dashGap);
drawable.setColors(new int[]{startColor, endColor});
return drawable;
}
}
自定義屬性
<!--RelativeLayout-->
<declare-styleable name="ShapeLayout">
<!--填充色-->
<attr name="solidColor" format="color" />
<!--邊框色-->
<attr name="strokeColor" format="color" />
<!--邊框?qū)挾?->
<attr name="strokeWidth" format="dimension" />
<!--設(shè)置漸變色-->
<attr name="startColor" format="color" />
<attr name="endColor" format="color" />
<!--圓角弧度-->
<attr name="radius" format="dimension" />
<!--四個(gè)角的圓角弧度-->
<attr name="topLeftRadius" format="dimension" />
<attr name="topRightRadius" format="dimension" />
<attr name="bottomLeftRadius" format="dimension" />
<attr name="bottomRightRadius" format="dimension" />
<!--虛線邊框?qū)挾?->
<attr name="dashWidth" format="dimension" />
<!--虛線邊框間隙-->
<attr name="dashGap" format="dimension" />
<!-- Standard orientation constant. -->
<attr name="orientation">
<!-- 漸變從左至右 -->
<enum name="horizontal" value="0" />
<!-- 漸變從上至下 -->
<enum name="vertical" value="1" />
</attr>
</declare-styleable>
使用方式
<com.example.ShapeRelativeLayout
app:startColor="#FF9326"
app:endColor="#FFC54E"
android:layout_width="200dp"
app:radius="5dp"
app:orientation="vertical"
android:layout_height="100dp"
android:layout_marginTop="220dp"
>
</com.example.ShapeRelativeLayout>
