2. 程式人生 > >android自定義view之地圖（一）

android自定義view之地圖（一）

阿新 • • 發佈：2019-01-31

最近參加了一個比賽，要用到自己做一個自定義的小地圖，所以在網上查找了一些關於自定義view的有關資料，也瞭解了自定義控制元件的初步知識。

效果圖

第一階段的效果圖
第一階段我畫了一個自制的網格圖，點哪個網格就會哪個網格就會顯示。

工作環境圖

這裡寫圖片描述

程式碼介紹

1。我們都知道當使用android的原始控制元件時，每個控制元件都可以定義屬性，比如android:id ，android:layout_width等等大家並不陌生的屬性，有些屬性是每個控制元件都有的比如上面兩個，還有一些是控制元件自己有的。我們自定義的控制元件可以定義自己想要的屬性，方便我們以後自己使用。

那就是在values目錄下建立一個attrs.xml檔案。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="MapView">
        <attr name="border_color" format="color" />
        <attr name="border_width" format="dimension" />
    </declare-styleable>
</resources>

這樣就給我們的我們就給控制元件加了 border_color 和border_width 兩個屬性，在這裡的format裡定義的是我們的屬性的值是什麼型別，比如border_color是color，border_width是dimension，每個不同的資料型別對應不同的型別。

2.第二部分也是最重要的自定義控制元件的類。

首先我們的自定義類要繼承View

public class CustomView extends View {
}

接下來我們完成view要實現的三個不同引數的建構函式，其中init是我們自己寫的初始化資訊的函式。在第二個建構函式中，我們獲取了我們在attrs.xml中定義的值。

public CustomView(Context context) {
        super(context);
        //初始化資訊
        init();
}

public CustomView(Context context, AttributeSet attrs) {
        super
 
(context, attrs);

//獲取我們自己的屬性
        TypedArray typedArray = context.getTheme().obtainStyledAttributes(
                attrs, R.styleable.MapView, 0, 0);

        try {
            mBorderColor = typedArray.getColor(
                    R.styleable.MapView_border_color, 0xff000000);
            mBorderWidth = typedArray.getDimension(
                    R.styleable.MapView_border_width, 2);
        } finally {
            typedArray.recycle();
        }

        init();
    }
public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

然後是覆些view中這幾個函式
onSizeChanged(int w, int h, int oldw, int oldh) {}這個函式是獲取我們view的設定的大小
onDraw(Canvas canvas){}是設定view中的繪畫，也是view中最重要的函式
onTouchEvent(MotionEvent event){}是設定點選事件

package com.example.myview;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.PointF;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;

public class CustomView extends View {

    private float mBorderWidth;
    private int mBorderColor;
    private Paint mPaint;
    private RectF mBounds;
    private float width;
    private float height;
    float radius;
    // 格子的數量
    private int boxnum = 50;
    // 每個方塊的長度
    float lenOfWidth;
    float lenOfHeight;

    PointF pointF;

    public CustomView(Context context) {
        super(context);
        init();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        MyPoint point = getMyPoint(event.getX(), event.getY());
        if (point == null)
            return false;
        pointF = getPointF(point.getX(), point.getY());

        invalidate();
        return true;
    }

    // 把xy的座標轉換我座標
    public MyPoint getMyPoint(float eventX, float eventY) {
        // 注意觸碰的x，y座標軸與計算機的陣列相反- -
        int y = (int) ((eventX - (mBounds.centerX() - (float) 0.9 * width / 2)) / lenOfWidth);
        int x = (int) ((eventY - (mBounds.centerY() - (float) 0.9 * height / 2)) / lenOfHeight);
        if (x < 0 || x >= boxnum || y < 0 || y >= boxnum)
            return null;
        return new MyPoint(x, y);
    }

    // 把座標轉換成螢幕座標
    public PointF getPointF(int x, int y) {
        // 注意觸碰的x，y座標軸與計算機的陣列相反- -
        float temp_x = y * lenOfWidth
                + (mBounds.centerX() - (float) 0.9 * width / 2);
        float temp_y = x * lenOfHeight
                + (mBounds.centerY() - (float) 0.9 * height / 2);
        PointF pointF = new PointF(temp_x, temp_y);
        return pointF;
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray typedArray = context.getTheme().obtainStyledAttributes(
                attrs, R.styleable.MapView, 0, 0);

        try {
            mBorderColor = typedArray.getColor(
                    R.styleable.MapView_border_color, 0xff000000);
            mBorderWidth = typedArray.getDimension(
                    R.styleable.MapView_border_width, 2);
        } finally {
            typedArray.recycle();
        }

        init();
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mBorderWidth);
        mPaint.setColor(mBorderColor);
        mPaint.setAlpha(255);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        mBounds = new RectF(getLeft(), getTop(), getRight(), getBottom());

        width = mBounds.right - mBounds.left;
        height = mBounds.bottom - mBounds.top;

        if (width < height) {
            radius = width / 4;
        } else {
            radius = height / 4;
        }
        lenOfWidth = (float) 0.9 * width / boxnum;
        lenOfHeight = (float) 0.9 * height / boxnum;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mPaint.setColor(0x66555555);
        canvas.drawRoundRect(
                new RectF(mBounds.centerX() - (float) 0.9 * width / 2, mBounds
                        .centerY() - (float) 0.9 * height / 2, mBounds
                        .centerX() + (float) 0.9 * width / 2, mBounds.centerY()
                        + (float) 0.9 * height / 2), 30, 30, mPaint);

        float lenOfWidth = (float) 0.9 * width / boxnum;
        float lenOfHeight = (float) 0.9 * height / boxnum;
        // 畫豎線
        for (int i = 0; i < boxnum; i++) {
            canvas.drawLine(mBounds.centerX() - (float) 0.9 * width / 2 + i
                    * lenOfWidth, mBounds.centerY() - (float) 0.9 * height / 2,
                    mBounds.centerX() - (float) 0.9 * width / 2 + i
                            * lenOfWidth, mBounds.centerY() + (float) 0.9
                            * height / 2, mPaint);
            canvas.drawLine(mBounds.centerX() - (float) 0.9 * width / 2,
                    mBounds.centerY() - (float) 0.9 * height / 2 + i
                            * lenOfHeight, mBounds.centerX() + (float) 0.9
                            * width / 2, mBounds.centerY() - (float) 0.9
                            * height / 2 + i * lenOfHeight, mPaint);
        }

        if (pointF != null) {
            // 畫出自己在哪裡
            mPaint.setColor(Color.BLUE);
            canvas.drawRect(new RectF(pointF.x, pointF.y,
                    pointF.x + lenOfWidth, pointF.y + lenOfHeight), mPaint);
        }
    }
}

3.最後是我們acitivity檔案和xml佈局檔案

package com.example.myview;

import android.app.Activity;
import android.os.Bundle;

public class MainActivity extends Activity {

    private CustomView view;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        view=(CustomView) findViewById(R.id.view1);
    }

}

佈局檔案

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >
<FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">
        <com.example.myview.CustomView

            android:id="@+id/view1"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:border_color="#ff1ff41f"
            app:border_width="1dp"/>
    </FrameLayout>

</LinearLayout>

相關推薦

android自定義view之地圖（一）

最近參加了一個比賽，要用到自己做一個自定義的小地圖，所以在網上查找了一些關於自定義view的有關資料，也瞭解了自定義控制元件的初步知識。 效果圖 第一階段我畫了一個自制的網格圖，點哪個網格就會哪個網格就會顯示。 工作環境圖 程式碼介紹

Android 自定義View--ProgressBar篇（一）

1、概述 1.1 目的 ： 在我們的日常開發中，有很多Android UI介面上有一些特殊或者特別的控制元件與介面，是Android自帶的控制元件所不能滿足的，需要我們自己定製一些適合的控制元件來完成。 1.2 Android自定義View步驟 ： 自定

Android自定義view之屬性動畫一

Android 裡動畫是有一些分類的：動畫可以分為兩類：Animation 和 Transition；其中 Animation 又可以再分為 View Animation 和 Property Animation 兩類： View Animation 是純粹基於 framew

Android自定義View之FairySearchView（靈活的通用搜索控制元件）

1.概述 FairySearchView是經過封裝的通用搜索控制元件，可以根據需求切換不同的佈局模式。內建多種事件監聽器，可以滿足不同場景的業務需求，使用方式非常靈活。 2.效果預覽 顯示所有控制元件（無輸入內容） 顯示所有控制元件（有輸

自定義View之Paint（畫筆）的詳解

Android提供了2D圖形繪製的各種工具，如Canvas(畫布)、Point(點)、Paint(畫筆)、Rectangles(矩形)等，利用這些工具可以直接在介面上進行繪製。 在自定義View中，我們經常用到的Canvas(畫布)和Paint(畫筆)，像我們

自定義ImageView實現地圖（一）

  現在一提到地圖很多人就會想到百度地圖高德地圖等SDK，但是公司遇到個專案要做到室內導航，現在的第三方用GPS定位又不準，所以使用了一個自定義的ImageView去實現地圖的功能。該地圖有導航、定位、分級顯示、點選檢視位置詳細資訊的功能。今天我們先說下基礎地圖資料的顯示及

View的體系和自定義View的流程（一）

前言： 最近學習了View的體系與自定義View，並且看了android進階之光這部書，記錄一下學習心得 一、View與ViewGroup 其實，平時我們開發用的各種控制元件（TextView，Button）和佈局（LinearLayout，Rela

Android自定義視訊播放器（一）

一、引言 我們在開發Android多媒體應用時，有兩種方式來播放多媒體資源。第一種是使用隱式的Intent，來使用系統或者手機已經安裝的第三方播放器應用來播放音視訊，第二種是使用Android自帶的、我們自定義的播放器來播放，這種主要是採用Android提供的

網路測速全解析之一：自定義View基礎知識（一）

效果如圖： 一、基礎知識： 基礎知識，也就是最基本的自定義view需要掌握的知識，我這裡主要是學習了GcsSloop大佬的view自定義系列部落格（這裡是部落格地址） 1.自定義view繪製流程呼叫鏈 2.android自定義座標系（向右向下為正）

android自定義View之自定義EditText（新增刪除功能）

           忙忙碌碌20天，新的專案終於接近尾聲了。今天公司召集幾個使用者體驗師和美工一起吐糟這20天做的這個新產品，對於產品提出了很多建議，這幾天就改介面了。在這個專案中大量的使用了EditText元件，並且添加了刪除功能。這裡面都是用RelativeLayou

從零開始學Android自定義View之動畫系列——屬性動畫（3）

屬性動畫對補間動畫進行了很大幅度的改進，之前補間動畫可以做到的屬性動畫也能做到，補間動畫做不到的現在屬性動畫也可以做到了。因此，今天我們就來學習一下屬性動畫的高階用法，看看如何實現一些補間動畫所無法實現的功能。 ValueAnimator的高階用法 補間

Android 自定義View之View的繪製流程(一)

View繪製流程網上已經有很多詳細介紹的文章，這裡權當給自己最近在這方面的學習的一個記錄，另外本文主要是記錄自己在實際程式碼的一些寫法，一來記錄基礎知識方便自己後面複習二來在開發中可以參考這段時間的程式碼記錄多作參考，一般遇到問題都會在網上找答案，如果自己多記錄參考自己的文章

android 自定義View之View的測量（onMeasure()方法）

       在自定義控制元件的過程中，系統在繪製View前，必須對View進行測量，已使後面的onLayout(設定View的放置位置）能夠順利進行。而對VIew的測量的過程則是在onMeasure()中進行的。可能這時有的同學就發現問題了，說，自己以前自定義的View沒

自定義View之指南針（反編譯別人的程式碼實現）

一、說明        偶爾點開魅族手機內建的工具箱應用，發現其指南針做的還不錯，就想模擬做一個類似的效果，在這裡我們不準備自己從頭開始編寫程式碼，而是採用一點黑科技，首先，我們從魅族系統中匯出工具箱應用的apk，然後反編譯apk，結合

Android自定義View之分貝儀

一、說明        最近在整理自定義View方面的知識，偶爾看到meizu工具箱的分貝儀效果，感覺它的實效效果還挺好的，遂想自己模擬實現練練手，廢話不多說，直接開擼。 二、效果圖 首先看一下效果圖： 看效果還挺炫酷

Android自定義View之Canvas

https://www.jianshu.com/p/fb18c28d6627 用繼承View的方式來自定義View，我們就需要重寫onDraw方法，也就是得咱自己來畫圖了。畫圖就得用到畫筆和畫布，也就是Paint和Canvas。我們來了解下Canvas。 Canvas Canvas我們可

Android 自定義View之Canvas詳解

自定義View的相關文章： Android 實現一個簡單的自定義View Android 自定義View步驟 Android Paint詳解 Android 自定義View之Canvas相關方法說明 Android 自定義View例項之 “京東跑”

Android : 自定義View之流式佈局

寫了一個很簡單的佈局 這是周圍圓框的drawable <?xml version="1.0" encoding="utf-8"?> <shape xmlns:android="http://schemas.android.com/apk/res/android">

android自定義View之仿通訊錄側邊欄滑動，實現A-Z字母檢索

我們的手機通訊錄一般都有這樣的效果，如下圖： OK，這種效果大家都見得多了，基本上所有的android手機通訊錄都有這樣的效果。那我們今天就來看看這個效果該怎麼實現。 一.概述 1.頁面功能分析 整體上來說，左邊是一個ListView，右邊是一個自定義View，但

Android自定義View之getTextBounds()

在Android自定義View的過程中一定會用到Paint，而paint屬性中有一個方法getTextBounds(String text,int start,int end,Rext bounds),它的中文解釋是：返回一個包含中文的矩形邊界，位置為(start,end) 英文解釋：Retur