Ui图
说明
当拿到这张UI的时候就有写个自定义控件的冲动，其中六边形稍加复制，经过分析得知可以自定义一个控制，只用给背景图、图标、和文字就可以，让后加入点击事件和带圆点的控件就可以了。
正文
可以说重载onMeasure()，onLayout()，onDraw()三个函数构建了自定义View的外观形象。再加上onTouchEvent()等重载视图的行为，可以构建任何我们需要的可感知到的自定义View。
代码很简单
public class Hexagon extends ImageView {
String text = "未付款";
private Bitmap mAreaBitmap, logobitmap;
private Paint paint;
private Paint painttext;
int textColor;
float textSize;
private Paint paintlogo;
private Paint paintcircle;
private int number = 10;
private Paint txtPaint;
public Hexagon(Context context) {
this(context, null);
}
public Hexagon(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public Hexagon(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
TypedArray mArray = context.obtainStyledAttributes(attrs, R.styleable.Hexagonattrs);
Drawable areaBackground = mArray.getDrawable(R.styleable.Hexagonattrs_HexagonBackground);
if (null != areaBackground) {
// 设置了背景
if (areaBackground instanceof BitmapDrawable) {
// 设置了一张图片
mAreaBitmap = ((BitmapDrawable) areaBackground).getBitmap();
}
}
Drawable logoBackground = mArray.getDrawable(R.styleable.Hexagonattrs_logoBackground);
if (null != logoBackground) {
// 设置了背景
if (logoBackground instanceof BitmapDrawable) {
// 设置了一张图片
logobitmap = ((BitmapDrawable) logoBackground).getBitmap();
}
}
text = mArray.getString(R.styleable.Hexagonattrs_title);
textColor = mArray.getColor(R.styleable.Hexagonattrs_titleColor, Color.parseColor("#FFFFFF"));
textSize = mArray.getDimension(R.styleable.Hexagonattrs_titleSize, 90f);
init();
}
private void init() {
painttext = new Paint();
painttext.setColor(textColor);
painttext.setTextSize(textSize);
paintcircle = new Paint();
paintcircle.setAntiAlias(true);
paintcircle.setColor(Color.RED);
txtPaint = new Paint();
txtPaint.setAntiAlias(true);
txtPaint.setColor(Color.WHITE);
txtPaint.setTextSize(30);
// txtPaint.setStyle(Paint.Style.STROKE); //设置画笔为空心
// txtPaint.setStrokeWidth(1); //设置线宽
}
@Override
public void draw(Canvas canvas) {
super.draw(canvas);
//绘制背景
if (mAreaBitmap != null) {
Rect rect1 = new Rect(0, 0, mAreaBitmap.getWidth(), mAreaBitmap.getHeight());
Rect rect2 = new Rect(0, 0, getWidth(), getHeight());
canvas.drawBitmap(mAreaBitmap, rect1, rect2, null);
}
//绘制logo
if (logobitmap != null) {
Rect rect1 = new Rect(0, 0, logobitmap.getWidth(), logobitmap.getHeight());
Rect rect2 = new Rect(getWidth() / 3, getHeight() / 10 * 3, getWidth() / 3 * 2, getHeight() / 10 * 6);
canvas.drawBitmap(logobitmap, rect1, rect2, null);
}
//拿到字符串的宽度 X轴居中
float stringWidth = painttext.measureText(text);
float x = (getWidth() - stringWidth) / 2;
canvas.drawText(text, x, getHeight() / 10 * 7, painttext);
//绘制小圆点
canvas.drawCircle(getWidth() / 10 * 7, getHeight() / 10 * 3, 30, paintcircle);
//绘制小圆点中的文字
if (number != 0) {
canvas.drawText(number + "",
getWidth() / 10 * 7 - txtPaint.measureText(number + "") / 2,
getHeight() / 10 * 3 + (txtPaint.descent() - txtPaint.ascent()) / 2 - txtPaint.descent(),
txtPaint);
}
}
//设置圆点中的数字
public void setNumber(int number) {
if (number > 99) {
this.number = 99;
} else {
this.number = number;
}
invalidate();
}
}
Xml引用
<com.ac.myapplication.Hexagon
android:layout_below="@+id/rl"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:id="@+id/hex"
android:layout_width="100dp"
android:layout_height="100dp"
app:HexagonBackground="@mipmap/six"
app:logoBackground="@mipmap/ff"
app:title="未付款"
app:titleColor="#fff"
app:titleSize="10sp" />
attrs(通过自定义属性 将图片资源和文字大小通过XML设置将参数传进自定义六边形中)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="Hexagonattrs">
<attr name="HexagonBackground" format="reference" />
<attr name="logoBackground" format="reference" />
<attr name="title" format="string"/>
<attr name="titleColor" format="color" />
<attr name="titleSize" format="dimension" />
</declare-styleable>
</resources>
单个六边形的效果图
效果图
在MainActivity中的用法
public class MainActivity extends AppCompatActivity {
private int nume = 10;
private Hexagon hexagon;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
hexagon = (Hexagon) findViewById(R.id.hex);
//点击事件
hexagon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {、
//设置数据
hexagon.setNumber(++nume);
Toast.makeText(MainActivity.this, "点击了1", Toast.LENGTH_SHORT).show();
}
});
}
//自动隐藏虚拟按键和状态栏
@Override
protected void onResume() {
super.onResume();
View view = getWindow().getDecorView();
//自动隐藏虚拟按键和状态栏
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}
设置横屏
<activity android:name=".MainActivity"
android:screenOrientation="landscape">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
通过XML布局就会出现整体效果
效果图
Mainactivity的XML代码
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#fff"
tools:context="com.ac.myapplication.MainActivity">
<RelativeLayout
android:id="@+id/rl"
android:layout_width="match_parent"
android:layout_height="150dp"
android:background="#cb2f49">
<android.support.v7.widget.Toolbar
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#cb2f49">
<ImageView
android:id="@+id/civ_header"
android:layout_width="40dp"
android:layout_height="40dp"
android:src="@mipmap/blak"
android:transitionName="sheredheader" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="返回"
android:textColor="#fff"
android:textSize="20sp" />
<TextView
android:id="@+id/tv_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_horizontal"
android:background="@null"
android:text="本地管理"
android:textColor="#fff"
android:textSize="20sp" />
</android.support.v7.widget.Toolbar>
<RelativeLayout
android:layout_width="140dp"
android:layout_height="130dp"
android:layout_alignParentBottom="true"
android:layout_centerHorizontal="true">
<com.ac.myapplication.ImageViewCircle
android:id="@+id/im"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_centerVertical="true"
android:src="@mipmap/ss" />
<TextView
android:id="@+id/tx"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="20dp"
android:layout_marginTop="38dp"
android:layout_toRightOf="@+id/im"
android:text="张豪"
android:textColor="#fff"
android:textSize="20sp" />
<TextView
android:id="@+id/tx1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tx"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@+id/im"
android:text="Musrt"
android:textColor="#fff"
android:textSize="10sp" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/tx1"
android:layout_marginLeft="20dp"
android:layout_toRightOf="@+id/im"
android:text="1865656858"
android:textColor="#fff"
android:textSize="10sp" />
</RelativeLayout>
</RelativeLayout>
<com.ac.myapplication.Hexagon
android:id="@+id/hex"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/rl"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:HexagonBackground="@mipmap/six"
app:logoBackground="@mipmap/ff"
app:title="未付款"
app:titleColor="#fff"
app:titleSize="10sp" />
<com.ac.myapplication.Hexagon
android:id="@+id/hex1"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/rl"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:layout_toLeftOf="@+id/hex"
app:HexagonBackground="@mipmap/six"
app:logoBackground="@mipmap/ff"
app:title="未付款"
app:titleColor="#fff"
app:titleSize="10sp" />
<com.ac.myapplication.Hexagon
android:id="@+id/hex2"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_below="@+id/rl"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
android:layout_toRightOf="@+id/hex"
app:HexagonBackground="@mipmap/six"
app:logoBackground="@mipmap/ff"
app:title="未付款"
app:titleColor="#fff"
app:titleSize="10sp" />
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_below="@+id/rl"
android:layout_marginTop="55dp">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="horizontal">
<com.ac.myapplication.Hexagon
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:HexagonBackground="@mipmap/six"
app:logoBackground="@mipmap/ff"
app:title="未付款"
app:titleColor="#fff"
app:titleSize="10sp" />
<com.ac.myapplication.Hexagon
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_centerHorizontal="true"
android:layout_marginTop="10dp"
app:HexagonBackground="@mipmap/six"
app:logoBackground="@mipmap/ff"
app:title="未付款"
app:titleColor="#fff"
app:titleSize="10sp" />
</LinearLayout>
</RelativeLayout>
</RelativeLayout>
最后附上几张资源文件的图片
ss.jpg
six.png
ff
blak.png
