1. 程式人生 > >Button控制元件+自定義Button控制元件

Button控制元件+自定義Button控制元件

首先第一步就是往佈局檔案裡拖一個Button控制元件,當然自己碼出來也可以。XML佈局如下

  1. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
  2.     xmlns:tools="http://schemas.android.com/tools"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.      > 
  6.     <Button 
  7.         android:id="@+id/button1"
                 <!-- button按鈕的id號,程式通過這個id號來查詢相應的控制元件 --> 
  8.         android:layout_width="wrap_content"   <!-- button按鈕的寬度 當前意思是 根據內容自動拉伸,其他的還有match_parent,表示根據父控制元件來調整大小--> 
  9.         android:layout_height="wrap_content"  <!-- button按鈕的長度--> 
  10.         android:layout_alignParentTop="true"  <!-- RelativeLayout佈局中,將控制元件的上邊緣和父控制元件的上邊緣對齊 --> 
  11.         android:layout_centerHorizontal="true"<!-- RelativeLayout佈局中,水平居中的意思 --> 
  12.         android:layout_marginTop="150dp"      <!-- RelativeLayout佈局中,距離父控制元件頂端的距離 --> 
  13.         android:text="Button" />              <!-- button按鈕上顯示的文字資訊 --> 
  14. </RelativeLayout> 

當然,一個控制元件的佈局屬性還有很多,這些都是需要我們多用多熟悉才行。

然後再在程式中呼叫它

  1. publicclass MainActivity extends Activity { 
  2.     private Button myButton; 
  3.     @Override
  4.     protectedvoid onCreate(Bundle savedInstanceState) { 
  5.         super.onCreate(savedInstanceState); 
  6.         setContentView(R.layout.activity_main); 
  7.         //通過id尋找控制元件,記得尋找控制元件前一定要先設定好佈局檔案
  8.         myButton = (Button)findViewById(R.id.button1); 
  9.         myButton.setOnClickListener(new OnClickListener() { 
  10.             @Override
  11.             publicvoid onClick(View v) { 
  12.                 // TODO Auto-generated method stub
  13.                 //這裡填寫單擊按鈕後要執行的事件
  14.             } 
  15.         }); 
  16.         myButton.setOnTouchListener(new OnTouchListener(){...});//設定觸碰到按鈕的監聽器
  17.         myButton.setOnLongClickListener(new OnLongClickListener(){...});//設定長按按鈕的監聽器
  18.         myButton.setOnHoverListener(new OnHoverListener(){...});//設定介面覆蓋按鈕時的監聽器
  19.         //還有其它的的監聽器,我們可以根據不同的需求來呼叫相應的監聽器
  20.     } 

或者這樣設定監聽器

  1. publicclass MainActivity extends Activity implements OnClickListener{ 
  2.     private Button myButton; 
  3.     @Override
  4.     protectedvoid onCreate(Bundle savedInstanceState) { 
  5.         super.onCreate(savedInstanceState); 
  6.         setContentView(R.layout.activity_main); 
  7.         //尋找控制元件,記得尋找控制元件前一定要先設定好佈局檔案
  8.         myButton = (Button)findViewById(R.id.button1); 
  9.         myButton.setOnClickListener(this); 
  10.     } 
  11.     @Override
  12.     publicvoid onClick(View v) { 
  13.         // TODO Auto-generated method stub
  14.         //獲取點選的View
  15.         switch(v.getId()){ 
  16.         //根據View的id來進行相關操作
  17.         case R.id.button1: 
  18.             //按鈕點選時處理相關的事件
  19.             break
  20.         } 
  21.     } 

這樣一個基礎功能的button控制元件就完成了。但當然,這不是我們今天要講的重點,重點是我們如何自定義一個按鈕,而不是使用系統給我們的按鈕。

二、自定義按鈕

我們先來看看效果圖吧

這是一個自帶進度條的按鈕,它可以顯示非同步任務的進度,當完成後結束操作。我們來看看具體是怎麼實現的吧。

  1. 拆分這個按鈕。仔細觀察上面的效果圖,我們可以把這個按鈕分成3個部分,首先是 最簡單的外面一圈圓,基本上畫出個圓放在那裡就行了。接著是中間的三角形,正方形以及完成的勾,這個我們可以使用view裡的畫圖類勾勒出來,再使用簡單 的動畫Animation來切換。最後的一部分是覆蓋在圓圈上的不斷在表示進度的圓圈,這個我們可以不斷呼叫這個view的ondraw來重新整理進度。這就 是整個按鈕的設計思路。我們來看看實際的程式碼吧。
  2. 首先是表示進度的圓圈,我們來新建一個CusImage繼承view類,實時的傳入進度引數。
  1. package com.example.mybutton; 
  2. import android.annotation.SuppressLint; 
  3. import android.content.Context; 
  4. import android.graphics.Canvas; 
  5. import android.graphics.Color; 
  6. import android.graphics.Paint; 
  7. import android.graphics.RectF; 
  8. import android.util.AttributeSet; 
  9. import android.util.DisplayMetrics; 
  10. import android.util.Log; 
  11. import android.view.View; 
  12. @SuppressLint("ViewConstructor")  
  13. publicclass CusImage extends View { 
  14.     private ButtonLayout b; 
  15.     private Paint myPaint; 
  16.     privatefloat startAngle, sweepAngle; 
  17.     private RectF rect; 
  18.     // 預設控制元件大小
  19.     privateint pix = 160
  20.     public CusImage(Context context, ButtonLayout b) { 
  21.         super(context); 
  22.         this.b = b; 
  23.         init(); 
  24.         // TODO Auto-generated constructor stub
  25.     } 
  26.     public CusImage(Context context, AttributeSet attrs, ButtonLayout b) { 
  27.         super(context, attrs); 
  28.         this.b = b; 
  29.         init(); 
  30.         // TODO Auto-generated constructor stub
  31.     } 
  32.     privatevoid init() { 
  33.         myPaint = new Paint(); 
  34.         DisplayMetrics metrics = getContext().getResources() 
  35.                 .getDisplayMetrics(); 
  36.         int width = metrics.widthPixels; 
  37.         int height = metrics.heightPixels; 
  38.         Log.d("TAG", width + ""); 
  39.         Log.d("TAG", height + ""); 
  40.         float scarea = width * height; 
  41.         pix = (int) Math.sqrt(scarea * 0.0217); 
  42.         //抗鋸齒
  43.         myPaint.setAntiAlias(true); 
  44.         //stroke表示空心,Fill表示實心
  45.         myPaint.setStyle(Paint.Style.STROKE); 
  46.         //顏色
  47.         myPaint.setColor(Color.rgb(0161234)); 
  48.         

    相關推薦

    Button控制元件+定義Button控制元件

    首先第一步就是往佈局檔案裡拖一個Button控制元件,當然自己碼出來也可以。XML佈局如下 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    xmlns:

    Android定義控制元件——定義組合控制元件

           前面幾篇博文介紹了Android如何自定義控制元件,其實就是講一下如何“從無到有”的自定義一個全新的控制元件,繼承View或者繼承ViewGroup,複寫其相關方法,這種自定義控制元件的方式相對來說難度較大,而且並不是所有需要新控制元件的情況下,都要這樣進行

    WPF程式設計之定義Button控制元件樣式

    自.NET Framework 3.0 以後,WPF程式設計框架可使開發人員開發出更加令人耳目一新的桌面應用程式。它使開發工作更加方便快捷,它將設計人員和程式設計人員的工作分離開來。至於WPF的背景歷史、框架特點、框架結構這裡就不再贅述。有興趣的同袍可在百度搜索關於WPF的相

    WinForm中使用定義Tooltip控制元件

    private ToolTip tooltipCtr; 建構函式中: 隱藏預設的Tooltip:this.ShowCellToolTips = false; this.tooltipCtr = new ToolTip(); 設定停留時間(還有許多其他時間設定):thi

    定義控制元件 實現一個繞圓圈的箭頭

    自定義的類 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Color; import

    Android UI-定義日曆控制元件

    分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

    定義titilbar控制元件

    自定義titilbar控制元件 自定義佈局 <?xml version="1.0" encoding="utf-8"?> <ImageView android:id="@+id/imageView1" android:layout_width=

    android開發:定義組合控制元件

    內容介紹 本文記錄,自定義組合控制元件,為了可以程式碼複用,減少程式碼量 配置控制元件屬性檔案 開啟res/values/目錄下的arss.xml檔案,新增下面屬性程式碼,如果沒有建立arrs.xml檔案。 <?xml version="1.0" enc

    android定義開關控制元件-SlideSwitch

    分享一下我老師大神的人工智慧教程!零基礎,通俗易懂!http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識,造福人民,實現我們中華民族偉大復興!        

    android 多功能定義畫板控制元件(用於解決特定需求)

    在專案中需要做一個可以自定義軌跡,但始終只有一條線,並且支援撤銷(撤銷單位為MotionEvent的down事件到up事件),還要支援動畫預覽等功能,最重要的是能夠按照間隔畫素來獲取所有點的座標,用於專案的其他功能。 整體的思路 1.專案中的應用場景需要畫板是一個圓形的,這個好實現用canv

    (轉)C# 定義使用者控制元件

    C# 自定義使用者控制元件   轉:https://blog.csdn.net/xiongxuanwen/article/details/2605109 本例是製作一個簡單的自定義控制元件,然後用一個簡單的測試程式,對於初學者來說,本例子比較簡單,只能起到拋石引玉的效

    定義View控制元件

    xml裡面的 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="

    定義FlowLayout控制元件實現定義寬度並換行

    最近的需求是實現新增購物車頁面,展示規格的時候會出現顯示不全,資料會自動剪下掉,後邊重新自定義了FlowLayout問題得到解決,下面直接上程式碼 public class FlowLayoutView extends ViewGroup { private final int DE

    android-定義組合控制元件(EditText+選項)

    一.前言 在開發中,或許一個業務需求中會出現很多系統控制元件組合成的佈局,並且經常需要複用。比如在一個表單中,裡面有個編輯框EditText右側還需要有個選項卡按鈕,需要有編輯框的輸入功能也需要有右側選項卡的點選事件,同時這兩個控制元件也存在一定關聯,且在一個介

    定義控制元件 實現一個繞圓圈的箭頭

    自定義的類 import android.content.Context; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphic

    【轉】WPF定義控制元件與樣式(5)-Calendar/DatePicker日期控制元件定義樣式及擴充套件

    一.前言   申明:WPF自定義控制元件與樣式是一個系列文章,前後是有些關聯的,但大多是按照由簡到繁的順序逐步釋出的等。 本文主要內容: 日曆控制元件Calendar自定義樣式; 日期控制元件DatePicker自定義樣式,及Label標籤、水印、清除日期功能擴充套件; 二.Calend

    定義UIPageControl 控制元件

                    大家都見過iPhone上的那幾個小點點了。那就是iPhone用來控制翻頁的UIPageControl控制元件,但是許多人不會用UIPageControl,又不願意去看Apple的文件和例子。所以首先我們來講講這個控制元件的使用。1、新建專案UsingPageControl。刪除

    Android定義複合控制元件

           在Android中,複合控制元件是非常常見的,下面以建立一個標題欄為例,講解建立自定義複合控制元件的過程。        以下圖為例:我們要建立一個標題欄,這個標題欄是由左邊的Button、右邊的Button以及中間的TextView複合而成的,而我們希望能夠

    QML定義控制元件(TreeView 的style加上節點可拖動)

    背景:          前段時間工作需要使用QML的TreeView,要通過拖動節點,對應節點執行對應的操作,查了很多的資料,沒有看到關於節點可拖動的資料,檢視TreeView的原始碼,貌似存在關於節點拖動的地方,但是始終沒有看到可以使用的介面,只好自己動手造輪子了

    定義組合控制元件:Banner、輪播圖、廣告欄控制元件

    1. 專案概述 這裡,我們使用自定義組合控制元件實現一個自動輪播的廣告條,也叫輪播圖,完整版的效果圖如下圖所示。其實,這就是我們經常見到的滾動廣告,預設情況下每隔N 秒會自動滾動,用手指左右滑動時也會切換到上一張或者下一張。當介面切換時,對應廣告圖片的標題也會