android布局首页,Android 首页TAB突出部分的布局

一、先看一下效果

底部Tab突出效果.jpg

二、效果分析图

效果分析图.jpg

自定义View由三部分组成：两条直线 + 一条圆弧

圆弧左边点的距离 = (宽度 - 中间距离) / 2

圆弧右边点的距离 = (宽度 - 中间距离) / 2 + 中间距离

圆心：cx = 宽度 / 2 、 cy = 高度 + offsetY

圆的半径 ： R = cos Q / (中间距离 / 2)

夹角和中间距离自定义，可根据实际做小调整

三、自定义属性

线和圆弧的颜色、大小(高度)

中间的距离

夹角

四、编写自定义OutView ，代码不难，关键是上面的分析

/**

* 底部突出来的View

*/

public class OutView extends View {

/**

* 线的高度

*/

public int mLineHeight = 1;

/**

* 线的颜色

*/

private int mLineColor;

/**

* 中间的线宽度

*/

private int mDistance;

/**

* 夹角

*/

private double Q = Math.PI / 4;

/**

* 圆的半径

*/

private float mRadius;

/**

* 圆偏移的距离

*/

private int mOffsetY;

private Paint mPaint;

public OutView(Context context) {

this(context, null);

}

public OutView(Context context, @Nullable AttributeSet attrs) {

this(context, attrs, 0);

}

public OutView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {

super(context, attrs, defStyleAttr);

TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.OutView);

mLineHeight = (int) array.getDimension(R.styleable.OutView_outViewLineHeight, dip2px(mLineHeight));

mLineColor = array.getColor(R.styleable.OutView_outViewLineColor, Color.parseColor("#dddddd"));

mDistance = (int) array.getDimension(R.styleable.OutView_outViewDistance, dip2px(20));

float angle = array.getFloat(R.styleable.OutView_outViewOffsetAngle, 30);

array.recycle();

// rad(弧度) = deg(角度) * PI / 180

Q = angle * Math.PI / 180;

mPaint = new Paint();

mPaint.setAntiAlias(true);

mPaint.setDither(true);

mPaint.setColor(mLineColor);

mPaint.setStrokeWidth(mLineHeight);

}

private float dip2px(int value) {

return TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, value, getResources().getDisplayMetrics()) + 0.5f;

}

@Override

protected void onSizeChanged(int w, int h, int oldw, int oldh) {

super.onSizeChanged(w, h, oldw, oldh);

// 圆的半径

mRadius = (float) (mDistance / 2 / Math.cos(Q));

// 圆心偏移Y的距离

mOffsetY = (int) (mDistance / 2 * Math.tan(Q));

}

@Override

protected void onDraw(Canvas canvas) {

// 画线

mPaint.setStyle(Paint.Style.FILL);

int y = getHeight() - mLineHeight / 2;

int stopX = (getWidth() - mDistance) / 2;

canvas.drawLine(0, y, stopX, y, mPaint);

// 画圆

mPaint.setStyle(Paint.Style.STROKE);

canvas.drawCircle(getWidth() / 2, getHeight() + mOffsetY, mRadius, mPaint);

// 画线

mPaint.setStyle(Paint.Style.FILL);

canvas.drawLine(stopX + mDistance, y, getWidth(), y, mPaint);

}

}

五、Activity的布局，这个要技巧

xmlns:app="http://schemas.android.com/apk/res-auto"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="vertical">

android:layout_width="match_parent"

android:layout_height="match_parent">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_marginBottom="50dp"

android:layout_weight="1"

android:background="#45784578">

android:layout_width="match_parent"

android:layout_height="50dp"

android:layout_gravity="bottom"

android:background="#66f41410" />

android:layout_width="match_parent"

android:layout_height="70dp"

android:layout_gravity="bottom">

android:layout_width="match_parent"

android:layout_height="match_parent"

android:orientation="horizontal">

android:layout_width="0dp"

android:layout_height="50dp"

android:layout_gravity="bottom"

android:layout_weight="1"

android:scaleType="center"

android:src="@mipmap/ic_launcher" />

android:layout_width="0dp"

android:layout_height="50dp"

android:layout_gravity="bottom"

android:layout_weight="1"

android:scaleType="center"

android:src="@mipmap/ic_launcher_round" />

android:layout_width="0dp"

android:layout_height="match_parent"

android:layout_weight="1"

android:scaleType="center"

android:src="@mipmap/ic_launcher_round" />

android:layout_width="0dp"

android:layout_height="50dp"

android:layout_gravity="bottom"

android:layout_weight="1"

android:scaleType="center"

android:src="@mipmap/ic_launcher_round" />

android:layout_width="0dp"

android:layout_height="50dp"

android:layout_gravity="bottom"

android:layout_weight="1"

android:scaleType="center"

android:src="@mipmap/ic_launcher_round" />

android:layout_width="match_parent"

android:layout_height="20dp"

app:outViewDistance="45dp"

app:outViewLineColor="#ff0000"

app:outViewOffsetAngle="30" />

实际开发要自己去调整，上面的代码仅供参考。

运行的效果就是开始那个效果。

效果是帮朋友写的，刚开始没想好，瞎写。后面画了分析图才搞定。