Ui圖
說明
當(dāng)拿到這張UI的時(shí)候就有寫個(gè)自定義控件的沖動，其中六邊形稍加復(fù)制，經(jīng)過分析得知可以自定義一個(gè)控制俱恶，只用給背景圖、圖標(biāo)范舀、和文字就可以合是，讓后加入點(diǎn)擊事件和帶圓點(diǎn)的控件就可以了。
正文
可以說重載onMeasure()锭环，onLayout()聪全，onDraw()三個(gè)函數(shù)構(gòu)建了自定義View的外觀形象。再加上onTouchEvent()等重載視圖的行為辅辩，可以構(gòu)建任何我們需要的可感知到的自定義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) {
// 設(shè)置了背景
if (areaBackground instanceof BitmapDrawable) {
// 設(shè)置了一張圖片
mAreaBitmap = ((BitmapDrawable) areaBackground).getBitmap();
}
}
Drawable logoBackground = mArray.getDrawable(R.styleable.Hexagonattrs_logoBackground);
if (null != logoBackground) {
// 設(shè)置了背景
if (logoBackground instanceof BitmapDrawable) {
// 設(shè)置了一張圖片
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); //設(shè)置畫筆為空心
// txtPaint.setStrokeWidth(1); //設(shè)置線寬
}
@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);
//繪制小圓點(diǎn)
canvas.drawCircle(getWidth() / 10 * 7, getHeight() / 10 * 3, 30, paintcircle);
//繪制小圓點(diǎn)中的文字
if (number != 0) {
canvas.drawText(number + "",
getWidth() / 10 * 7 - txtPaint.measureText(number + "") / 2,
getHeight() / 10 * 3 + (txtPaint.descent() - txtPaint.ascent()) / 2 - txtPaint.descent(),
txtPaint);
}
}
//設(shè)置圓點(diǎn)中的數(shù)字
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設(shè)置將參數(shù)傳進(jìn)自定義六邊形中)
<?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>
單個(gè)六邊形的效果圖
效果圖
在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);
//點(diǎn)擊事件
hexagon.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {吱七、
//設(shè)置數(shù)據(jù)
hexagon.setNumber(++nume);
Toast.makeText(MainActivity.this, "點(diǎn)擊了1", Toast.LENGTH_SHORT).show();
}
});
}
//自動隱藏虛擬按鍵和狀態(tài)欄
@Override
protected void onResume() {
super.onResume();
View view = getWindow().getDecorView();
//自動隱藏虛擬按鍵和狀態(tài)欄
view.setSystemUiVisibility(View.SYSTEM_UI_FLAG_HIDE_NAVIGATION |
View.SYSTEM_UI_FLAG_FULLSCREEN | View.SYSTEM_UI_FLAG_IMMERSIVE_STICKY);
}
}
設(shè)置橫屏
<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布局就會出現(xiàn)整體效果
效果圖
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
