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繪圖這樣簡單的圖片自己繪制出來不在話下。
先給出我做出來的效果圖：
接下來，我將給出加號(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)的。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Android仿QQ個(gè)人標(biāo)簽添加與刪除功能
這篇文章主要為大家詳細(xì)介紹了Android仿QQ個(gè)人標(biāo)簽添加與刪除功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
這篇文章主要介紹了詳解Android代碼混淆實(shí)戰(zhàn)，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了Android中Dialog自定義上下文花式菜單，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10
Android仿360市場下載按鈕的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于利用Android實(shí)現(xiàn)360市場下載按鈕效果的方法，文中給出了詳細(xì)的示例代碼供大家參考學(xué)習(xí)，并在文末給出了源碼供大家下載，需要的朋友們下面跟著小編一起來學(xué)習(xí)學(xué)習(xí)吧。2017-05-05
Android 讓自定義TextView的drawableLeft與文本一起居中
本文主要介紹Android 自定義控件TextView顯示居中問題,在開發(fā)過程中經(jīng)常會(huì)遇到控件的重寫,這里主要介紹TextView的drawableLeft與文本一起居中的問題2016-07-07
這篇文章主要為大家詳細(xì)介紹了Android帶進(jìn)度的圓形進(jìn)度條，實(shí)現(xiàn)自定義View，自定義屬性，感興趣的小伙伴們可以參考一下2016-02-02
這篇文章主要為大家詳細(xì)介紹了Android ImageSelector微信圖片選擇器，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-06-06
Android實(shí)現(xiàn)自動(dòng)變換大小的ViewPager
ViewPager使用適配器類將數(shù)據(jù)和view的處理分離，ViewPager的適配器叫PagerAdapter，這是一個(gè)抽象類，不能實(shí)例化，所以它有兩個(gè)子類：FragmentPagerAdapter 和 FragmentStatePagerAdapter，這兩個(gè)都是處理頁面為Fragment的情況2022-11-11
Flutter質(zhì)感設(shè)計(jì)之列表項(xiàng)
這篇文章主要為大家詳細(xì)介紹了Flutter質(zhì)感設(shè)計(jì)之列表項(xiàng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-08-08
Android 拍照并對(duì)照片進(jìn)行裁剪和壓縮實(shí)例詳解
這篇文章主要介紹了Android 拍照并對(duì)照片進(jìn)行裁剪和壓縮實(shí)例詳解的相關(guān)資料,這里提供實(shí)例代碼，需要的朋友可以參考下2017-07-07