android UI繪制加減號(hào)按鈕
更新時(shí)間：2021年06月29日 17:02:57 作者：夜輝疾風(fēng)
這篇文章主要為大家詳細(xì)介紹了android UI繪制加減號(hào)按鈕，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了android UI繪制加減號(hào)按鈕的具體代碼，供大家參考，具體內(nèi)容如下
在項(xiàng)目中我們常常會(huì)用到這么一個(gè)view。
這時(shí)候我們會(huì)選擇使用兩個(gè)圖片來相互切換。其實(shí)，只要會(huì)基本的2D繪圖這樣簡(jiǎn)單的圖片自己繪制出來不在話下。
先給出我做出來的效果圖：
接下來，我將給出加號(hào)減號(hào)繪制的代碼以供大家參考：
以下是關(guān)鍵代碼
/**
* +號(hào)
*/
public class AddView extends View {
protected Paint paint;
protected int HstartX, HstartY, HendX, HendY;//水平的線
protected int SstartX, SstartY, SsendX, SsendY;//垂直的線
protected int paintWidth = 2;//初始化加號(hào)的粗細(xì)為10
protected int paintColor = Color.BLACK;//畫筆顏色黑色
protected int padding = 3;//默認(rèn)3的padding
public int getPadding() {
return padding;
}
//讓外界調(diào)用，修改padding的大小
public void setPadding(int padding) {
SsendY = HendX = width - padding;
SstartY = HstartX = padding;
}
//讓外界調(diào)用，修改加號(hào)顏色
public void setPaintColor(int paintColor) {
paint.setColor(paintColor);
}
//讓外界調(diào)用，修改加號(hào)粗細(xì)
public void setPaintWidth(int paintWidth) {
paint.setStrokeWidth(paintWidth);
}
public AddView(Context context, AttributeSet attrs) {
super(context, attrs);
initView();
}
private void initView() {
paint = new Paint();
paint.setColor(paintColor);
paint.setStrokeWidth(paintWidth);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
int widthSize = MeasureSpec.getSize(widthMeasureSpec);
int widthMode = MeasureSpec.getMode(widthMeasureSpec);
int width;
if (widthMode == MeasureSpec.EXACTLY) {
// MeasureSpec.EXACTLY表示該view設(shè)置的確切的數(shù)值
width = widthSize;
} else {
width = 60;//默認(rèn)值
}
SstartX = SsendX = HstartY = HendY = width / 2;
SsendY = HendX = width - getPadding();
SstartY = HstartX = getPadding();
//這樣做是因?yàn)榧犹?hào)寬高是相等的，手動(dòng)設(shè)置寬高
setMeasuredDimension(width, width);
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
//水平的橫線
canvas.drawLine(HstartX, HstartY, HendX, HendY, paint);
//垂直的橫線
canvas.drawLine(SstartX, SstartY, SsendX, SsendY, paint);
}
}
/**
* -號(hào)
*/
public class RemoveView extends AddView {
public RemoveView(Context context, AttributeSet attrs) {
super(context, attrs);
}
@Override
protected void onDraw(Canvas canvas) {
//水平的橫線，減號(hào)不需要垂直的橫線了
canvas.drawLine(HstartX, HstartY, HendX, HendY, paint);
}
}
其中主要的是計(jì)算橫線和豎線的位置。獲得view的寬度后，將view設(shè)置成正方形，然后就如如所示：
這樣，最主要的加減號(hào)做完了，其他的都是小意思了。
我把主要的xml文件貼出來：
主視圖：layout_add_remove.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="3dp"
android:padding="2dp"
android:background="@drawable/bg_add_remove_view"
android:orientation="horizontal">
<com.android.ui.TextView.AddView
android:id="@+id/add_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="@drawable/bg_add_view" />
<EditText
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center_vertical"
android:layout_margin="3dp"
android:background="@null"
android:inputType="number"
android:text="0" />
<com.android.ui.TextView.RemoveView
android:id="@+id/remove_view"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_gravity="center_vertical"
android:background="@drawable/bg_remove_view" />
</LinearLayout>
主視圖背景：bg_add_remove_view.xml
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<!-- 設(shè)置圓角矩形 -->
<corners android:radius="5dp" />
<!-- 文本框里面的顏色 -->
<solid android:color="@android:color/white" />
<!-- 邊框的顏色 -->
<stroke
android:width="0.5dp"
android:color="@android:color/darker_gray" />
</shape>
加號(hào)背景：bg_add_view.xml
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/bg_add_true" android:state_pressed="true" /> <item android:drawable="@drawable/bg_add_false" android:state_pressed="false" /> </selector>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 邊框的顏色 -->
<item>
<shape>
<solid android:color="@android:color/darker_gray" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="0dp"
android:right="0.5dp"
android:top="0dp">
<!--設(shè)置只有底部有邊框-->
<shape>
<!-- 主體背景顏色值 -->
<solid android:color="@android:color/darker_gray" />
</shape>
</item>
</layer-list>
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<!-- 邊框的顏色 -->
<item>
<shape>
<solid android:color="@android:color/darker_gray" />
</shape>
</item>
<item
android:bottom="0dp"
android:left="0dp"
android:right="0.5dp"
android:top="0dp">
<!--設(shè)置只有底部有邊框-->
<shape>
<!-- 主體背景顏色值 -->
<solid android:color="@android:color/white" />
</shape>
</item>
</layer-list>
減號(hào)的背景色配置和加號(hào)一樣，只不過豎線的位置不同而已：
<item
android:bottom="0dp"
android:left="0.5dp"
android:right="0dp"
android:top="0dp">
我們可以在完全不用圖片的情況下完成這個(gè)ui。
當(dāng)然，還有很多可以優(yōu)化的地方。比如設(shè)置padding，修改加減號(hào)顏色，就該布局大小，這些都是可以通過代碼來實(shí)現(xiàn)的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android使用addView動(dòng)態(tài)添加組件的方法
這篇文章主要為大家詳細(xì)介紹了Android使用addView動(dòng)態(tài)添加組件的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
這篇文章主要為大家詳細(xì)介紹了Flutter自定義圓盤取色器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Android重寫TextView實(shí)現(xiàn)文字整齊排版的方法(附demo源碼下載)
這篇文章主要介紹了Android重寫TextView實(shí)現(xiàn)文字整齊排版的方法,結(jié)合實(shí)例形式分析了Android重寫TextView實(shí)現(xiàn)文字整齊排版的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-02-02
這篇文章主要為大家詳細(xì)介紹了flutter實(shí)現(xiàn)輪播圖效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-07-07
Android中判斷網(wǎng)絡(luò)連接是否可用的方法總結(jié)
這篇文章主要介紹了Android中判斷網(wǎng)絡(luò)連接是否可用的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04
Android樣式的開發(fā):layer-list實(shí)例詳解
本文主要介紹Android樣式開發(fā)layer-list，這里整理了詳細(xì)的資料，及簡(jiǎn)單示例代碼有興趣的小伙伴可以參考下2016-09-09
Android實(shí)現(xiàn)拍照、選擇相冊(cè)圖片并裁剪功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)拍照、選擇相冊(cè)圖片并裁剪功能的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要介紹了詳解Android使用@hide的API的方法的相關(guān)資料,希望通過本文大家能理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
Android自定義可點(diǎn)擊的ImageSpan并在TextView中內(nèi)置View
這篇文章主要為大家詳細(xì)介紹了Android自定義可點(diǎn)擊的ImageSpan并在TextView中內(nèi)置"View"，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-11-11
Android實(shí)現(xiàn)監(jiān)聽音量的變化
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)監(jiān)聽音量的變化，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05