android UI繪制加減號按鈕
本文實(shí)例為大家分享了android UI繪制加減號按鈕的具體代碼,供大家參考,具體內(nèi)容如下
在項(xiàng)目中我們常常會用到這么一個view。
這時候我們會選擇使用兩個圖片來相互切換。其實(shí),只要會基本的2D繪圖這樣簡單的圖片自己繪制出來不在話下。
先給出我做出來的效果圖:
接下來,我將給出加號減號繪制的代碼以供大家參考:
以下是關(guān)鍵代碼
/** * +號 */ public class AddView extends View { protected Paint paint; protected int HstartX, HstartY, HendX, HendY;//水平的線 protected int SstartX, SstartY, SsendX, SsendY;//垂直的線 protected int paintWidth = 2;//初始化加號的粗細(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)用,修改加號顏色 public void setPaintColor(int paintColor) { paint.setColor(paintColor); } //讓外界調(dià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)榧犹枌捀呤窍嗟鹊?,手動設(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); } }
/** * -號 */ public class RemoveView extends AddView { public RemoveView(Context context, AttributeSet attrs) { super(context, attrs); } @Override protected void onDraw(Canvas canvas) { //水平的橫線,減號不需要垂直的橫線了 canvas.drawLine(HstartX, HstartY, HendX, HendY, paint); } }
其中主要的是計算橫線和豎線的位置。獲得view的寬度后,將view設(shè)置成正方形,然后就如如所示:
這樣,最主要的加減號做完了,其他的都是小意思了。
我把主要的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>
加號背景: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>
減號的背景色配置和加號一樣,只不過豎線的位置不同而已:
<item android:bottom="0dp" android:left="0.5dp" android:right="0dp" android:top="0dp">
我們可以在完全不用圖片的情況下完成這個ui。
當(dāng)然,還有很多可以優(yōu)化的地方。比如設(shè)置padding,修改加減號顏色,就該布局大小,這些都是可以通過代碼來實(shí)現(xiàn)的。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android使用addView動態(tài)添加組件的方法
這篇文章主要為大家詳細(xì)介紹了Android使用addView動態(tài)添加組件的方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-09-09Android重寫TextView實(shí)現(xiàn)文字整齊排版的方法(附demo源碼下載)
這篇文章主要介紹了Android重寫TextView實(shí)現(xiàn)文字整齊排版的方法,結(jié)合實(shí)例形式分析了Android重寫TextView實(shí)現(xiàn)文字整齊排版的相關(guān)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-02-02Android中判斷網(wǎng)絡(luò)連接是否可用的方法總結(jié)
這篇文章主要介紹了Android中判斷網(wǎng)絡(luò)連接是否可用的方法總結(jié)的相關(guān)資料,需要的朋友可以參考下2017-04-04Android樣式的開發(fā):layer-list實(shí)例詳解
本文主要介紹Android樣式開發(fā)layer-list,這里整理了詳細(xì)的資料,及簡單示例代碼有興趣的小伙伴可以參考下2016-09-09Android實(shí)現(xiàn)拍照、選擇相冊圖片并裁剪功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)拍照、選擇相冊圖片并裁剪功能的相關(guān)資料,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12Android自定義可點(diǎn)擊的ImageSpan并在TextView中內(nèi)置View
這篇文章主要為大家詳細(xì)介紹了Android自定義可點(diǎn)擊的ImageSpan并在TextView中內(nèi)置"View",具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-11-11Android實(shí)現(xiàn)監(jiān)聽音量的變化
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)監(jiān)聽音量的變化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2021-05-05