2. 程式人生 > >自定義View系列-滑動選擇分數或者刻度

自定義View系列-滑動選擇分數或者刻度

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

效果圖

效果圖

寫在最前面

  • 導進你的工程中直接使用：compile 'jack.view:gradelayout:1.0'
  • 上傳到github中的已進行過拓展，可以動態更改一些屬性，詳見github的README.md。

實現前的分析

我們可以把整個佈局分為兩部分，一部分是上面的分數顯示，一部分是下面的滑塊顯示。對於分數的顯示我選擇使用一個水平佈局的LinearLayout，使用addView新增TextView的方式來實現；對於滑塊，可以使用Button或者ImageView來實現，那根黑色的線可以使用drawLine來實現。整體來說，沒什麼難度，唯一要注意的地方是滑動衝突的解決。

實現步驟

1、編寫屬性檔案attrs.xml程式碼

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="GradeLayout">
        <!--刻度被選中時候的顏色-->
        <attr name="grade_color_chosen" format="color" />
        <!--刻度未被選中時候的顏色-->
        <attr name="grade_color_unchosen"
 
 format="color" />
        <!--刻度被選中後刻度的圖示-->
        <attr name="grade_ico_chosen" format="reference" />
        <!--刻度未被選中時刻度的圖示-->
        <attr name="grade_ico_unchosen" format="reference" />
        <!--刻度圖示的寬高-->
        <attr name="grade_ico_size" format="dimension"
 
 />
        <!--刻度文字大小-->
        <attr name="grade_text_size" format="dimension" />
        <!--導航線未被選中部分的顏色-->
        <attr name="nav_line_unchosen_color" format="color" />
        <!--導航線被選中部分的顏色-->
        <attr name="nav_line_chosen_color" format="color" />
        <!--導航button的背景圖片-->
        <attr name="nav_button_ico" format="reference" />
        <!--導航button的寬高-->
        <attr name="nav_button_size" format="dimension" />
        <!--刻度的數量-->
        <attr name="max_grade" format="integer" />
        <!--刻度圖示和導航線之間的距離-->
        <attr name="gap" format="dimension" />
        <!--刻度圖示和刻度文字之間的距離-->
        <attr name="grade_ico_padding" format="dimension" />
        <!--導航線被選中部分的寬度-->
        <attr name="nav_line_chosen_width" format="dimension" />
        <!--導航線未被選中部分的寬度-->
        <attr name="nav_line_unchosen_width" format="dimension" />
    </declare-styleable>
</resources>

2、自定義view類GradeLayout的編碼實現

首先，我們需要在建構函式裡對佈局屬性進行載入，當然我們也為一些屬性設定了預設值，當用戶沒有指定屬性的具體值得時候，就直接採用預設值。這部分程式碼如下：

private void loadAttrs(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.GradeLayout);
        mMaxGrade = ta.getInt(R.styleable.GradeLayout_max_grade, DEFAULT_MAX_GRADE);
        mGradeChosenColor =
                ta.getColor(R.styleable.GradeLayout_grade_color_chosen, DEFAULT_CHOSEN_COLOR);
        mGradeUnchosenColor =
                ta.getColor(R.styleable.GradeLayout_grade_color_unchosen, DEFAULT_UNCHOSEN_COLOR);
        mGradeChosenIcoId = ta.getResourceId(
                R.styleable.GradeLayout_grade_ico_chosen, R.drawable.redpoint_icon);
        mGradeUnchosenIcoId = ta.getResourceId(
                R.styleable.GradeLayout_grade_ico_unchosen, R.drawable.graypoint_icon);
        mGradeIcoSize = ta.getDimension(
                R.styleable.GradeLayout_grade_ico_size, dip2px(context, DEFAULT_GRADE_ICO_SIZE));
        mNavLineChosenColor = ta.getColor(
                R.styleable.GradeLayout_nav_line_chosen_color, DEFAULT_CHOSEN_COLOR);
        mNavLineUnchosenColor = ta.getColor(
                R.styleable.GradeLayout_nav_line_unchosen_color, DEFAULT_UNCHOSEN_COLOR);
        mNavButtonIcoId = ta.getResourceId(
                R.styleable.GradeLayout_nav_button_ico, R.drawable.nav_button_icon);
        mNavButtonSize = ta.getDimension(
                R.styleable.GradeLayout_nav_button_size, dip2px(context, DEFAULT_NAV_BUTTON_SIZE));
        mGap = ta.getDimension(R.styleable.GradeLayout_gap, dip2px(context, DEFAULT_GAP));
        mGradeIcoPadding = ta.getDimension(R.styleable.GradeLayout_grade_ico_padding,
                dip2px(context, DEFAULT_GRADE_ICO_PADDING));
        mNavLineChosenWidth = ta.getDimension(R.styleable.GradeLayout_nav_line_chosen_width,
                dip2px(context, DEFAULT_NAV_LINE_CHOSEN_WIDTH));
        mNavLineUnchosenWidth = ta.getDimension(R.styleable.GradeLayout_nav_line_unchosen_width,
                dip2px(context, DEFAULT_NAV_LINE_UNCHOSEN_WIDTH));
        mGradeTextSize = ta.getDimension(R.styleable.GradeLayout_grade_text_size,
                dip2px(context, DEFAULT_GRADE_TEXT_SIZE));
        ta.recycle();
    }

接下來，到了構造分數佈局和滑塊佈局的時候了，實現程式碼如下：

        //構建分數佈局
        LayoutParams params = new LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        LinearLayout gradeLy = new LinearLayout(context);
        gradeLy.setLayoutParams(params);
        gradeLy.setOrientation(HORIZONTAL);

        try {
            for (int i = 1; i <= mMaxGrade; i++) {
                CharSequence str = mGradeTexts.get(i - 1);
                TextView tv = buildTextView(context, str);
                mTextViews.add(tv);
                gradeLy.addView(tv);
            }
        } catch (NullPointerException e) {
            Log.e(TAG, "Maybe mGradeTexts.size() != mMaxGrade", e);
        }
        addView(gradeLy);

        //構建滑塊佈局
        mPullButton = new ImageView(context);
        mPullButton.setBackgroundDrawable(
                context.getResources().getDrawable(mNavButtonIcoId));
        mPullButtonParams
                = new LayoutParams((int) mNavButtonSize, (int) mNavButtonSize);
        mPullButtonParams.topMargin = (int) 
        addView(mPullButton, mPullButtonParams);
private TextView buildTextView(Context context, CharSequence grade) {
        TextView textView = new TextView(context);
        textView.setText(grade);
        textView.setTextSize(px2dip(context, mGradeTextSize));
        textView.setGravity(Gravity.CENTER_HORIZONTAL);
        textView.setTextColor(mGradeUnchosenColor);
        textView.setCompoundDrawables(null, null, null, mGradeUnchosenIco);
        textView.setCompoundDrawablePadding((int) mGradeIcoPadding);
        LayoutParams params =
                new LayoutParams(0, ViewGroup.LayoutParams.WRAP_CONTENT);
        params.weight = 1;
        textView.setLayoutParams(params);
        return textView;
    }

最後需要畫出下面的那根線，我們叫它導航線。要畫出那根線，就必須要進行一些簡單的計算，要保證導航線要和上面的文字對齊。另外需要注意的是，Android中的ViewGroup是預設不呼叫onDraw()方法的，因此我們需要在建構函式中呼叫setWillNotDraw(false)方法迫使ViewGroup呼叫onDraw(),否則我們沒有辦法在onDraw()裡面進行劃線。下面是詳細程式碼。

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        mCanvas = canvas;
        TextView first = mTextViews.get(0);
        TextView last = mTextViews.get(mMaxGrade - 1);
        int startX = first.getLeft() + (first.getRight() - first.getLeft()) / 2;
        int startY = (mPullButton.getBottom() - mPullButton.getTop()) / 2 + mPullButton.getTop();
        int grayEndX = last.getRight() - (last.getRight() - last.getLeft()) / 2;
        int redEndX = mPullButton.getRight() - (mPullButton.getRight() - mPullButton.getLeft()) / 2;
        //繪製滑動線段
        drawLine(startX, startY, grayEndX, startY, mUnchosenPaint);
        drawLine(startX, startY, redEndX, startY, mChosenPaint);
        //繪製線段兩端的圓弧
        canvas.drawCircle(startX, startY, mNavLineChosenWidth / 2, mChosenPaint);
        canvas.drawCircle(grayEndX, startY, mNavLineUnchosenWidth / 2, mUnchosenPaint);

        //一開始只是在建構函式裡使用addView將滑塊加入了整體佈局中，
        //這樣的話，滑塊和最左邊的分數是對不齊的，因此當走完onLayout方法後，
        //選擇在onDraw方法裡對滑塊的佈局重新優化，達到與最左邊分數對齊的效果。
        //當然，實現的時候不一定非要選擇在onDraw方法裡實現。
        if (isFirstDraw) {
            isFirstDraw = false;
            mExtraLeftMargin = startX - mPullButton.getRight() / 2;
            mPullButtonParams.leftMargin = mExtraLeftMargin;
            mPullButton.requestLayout();

            MAX_LEFT_MARGIN = last.getLeft() + mExtraLeftMargin;
        }
    }

佈局差不多都畫完了，接下來要對滑塊設定滑動監聽，來處理滑動事件以及滑動衝突。建構函式中為滑塊設定滑動監聽：

mPullButton.setOnTouchListener(this);

onTouch裡處理滑動事件：

    private int mLastX = 0;

    @Override
    public boolean onTouch(View v, MotionEvent event) {
        requestDisallowInterceptTouchEvent(true);//處理滑動衝突,讓父控制元件把滑動事件交給自己處理。
        int x = (int) event.getRawX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                mLastX = x;
                break;
            case MotionEvent.ACTION_MOVE:
                int deltaX = x - mLastX;
                mPullButtonParams.leftMargin += deltaX;
                if (mPullButtonParams.leftMargin < mExtraLeftMargin) {//左邊界的限定
                    mPullButtonParams.leftMargin = mExtraLeftMargin;
                }
                if (mPullButtonParams.leftMargin > MAX_LEFT_MARGIN) {//右邊界的限定
                    mPullButtonParams.leftMargin = MAX_LEFT_MARGIN;
                }
                mPullButton.requestLayout();
                mLastX = x;
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                int nowMargin = mPullButtonParams.leftMargin;
                //根據mPullButtonParams的leftMargin來計算出當前分數的index。
                int index = (nowMargin * (mMaxGrade - 1) * 2 + MAX_LEFT_MARGIN)
                        / (2 * MAX_LEFT_MARGIN) + 1;
                updateUI(index - 1);//對UI進行更新
                notifyGradeHasChanged(mTextViews.get(index - 1).getText().toString());//內部實現是通過介面通知當前選擇的分數。
                break;
            default:
                break;
        }
        return true;
    }

當分數選擇完成後我們通過介面來通知呼叫者：

    public interface OnGradeUpdateListener {
        void onGradeUpdate(GradeLayout view, String grade);
    }

在Activity裡實現此介面，並且設定監聽即可。

Demo

詳細的demo，已上傳到了github中，demo資料夾下就是。點我直達

相關推薦

自定義View系列-滑動選擇分數或者刻度

效果圖 寫在最前面 導進你的工程中直接使用：compile 'jack.view:gradelayout:1.0' 上傳到github中的已進行過拓展，可以動態更改一些屬性，詳見github的README.md。 實現前的分析 我們

自定義View系列教程08--滑動衝突的產生及其處理

PS：如果覺得文章太長，那就直接看視訊吧 在之前的幾篇文章中，我們已經分析了View對於Touch的處理以及ViewGroup對於Touch事件的分發。 但在開發中時常遇到一個棘手的問題：Touch事件的滑動衝突。比如List

Android 自定義View 系列文章目錄 Canvas篇

一、基礎 Android 畫筆 Paint  基本操作API：https://blog.csdn.net/huangliniqng/article/details/82588824 Android 畫布 Canvas 基本操作API：https://blog.csdn.net/

Android自定義View系列：標籤LabelView實戰篇

前言部分 本文主要介紹如何自定義一個常見的labels標籤，功能上主要支援，單選、多選、點選三種模式。因為這個使用率很高，並且這個是比較典型學習自定義ViewGroup的例子，所以特意動手實踐，加深對Android的認識。這個專案主要是為了自己學習使用，所以並不是很完善，先上一個效果

帶你玩轉自定義view系列

View 的簡介 View是Android所有控制元件的基類，接下來借鑑網上的一張圖片讓大家一目瞭然（圖片出自：http://blog.51cto.com/wangzhaoli/1292313）   Android 的相關座標系 圖片內容有點多，自定義 View 做得

自定義view系列(5)--99.99%實現QQ側滑刪除效果

首先宣告本文是基於GitHub上"baoyongzhang"的SwipeMenuListView修改而來, 可以說這個側滑刪除效果是我見過效果最好且比較靈活的專案,沒有之一!!! 但是在使用它之前需要給大家提兩點注意事項: 1,該專案支援Gradle dependence

Android 自定義View實現城市選擇列表

使用自定義View的方法,實現一個城市選擇列表 手指滑動時 自定義View實現側邊欄,並提供回撥介面 /** * Created by shixi_tianrui1 on 16-9-18. * 城市選擇列表側邊欄 */ public

自定義view系列(3)--給自定義View新增點選事件

這幾天一直在看《android開發藝術探索》和《android群英傳》中關於自定義view的章節，結合著網上大神的一些心得分享，感覺自定義view這一塊受益匪淺，這裡做個心得筆記，主要記錄一下view與使用者互動的一些知識。 自定義view與使用者互動用的最多的就是單擊事件

【自定義view系列】View的measure過程

  View的測量過程是三大流程中最複雜的。 在現實生活中，如果我們要去畫一個圖形，就必須知道他的大小和位置。測量（測量view的寬和高），知道view的大小。 一.LayoutParams   LayoutParams繼承於Android.View.

自定義View系列：高仿“淘寶頭條”

先來看一下今天我們要完成的效果圖吧：自定義View效果圖不要在意細節，別管它是淘寶頭條還是京東頭條，我們只需要知道，這個效果很炫就行了。另外，這個控制元件是可以點選的，點選效果就是進入指定介面，製作Gif的時候手抖，忘記去點選了，你們將就著看吧。首先看一下，這個控制元件是一個

Android自定義View年齡範圍選擇器

先看下實現效果 看效果圖分析 1 個是進度的背景，背景上面左右兩個圓角按鈕，下面是一個text顯示進度用的 2 整體的高度用QQ截圖簡單的量下尺寸，畢竟顯示到螢幕上的也都是畫素，算完後，可根據2倍圖，3倍圖來具體的做下適配，這都是細節的處理了，測量後，從按鈕的頂部到

自定義View系列(8)--越界回彈ScrollView

難度 中等 效果說明 越界回彈的效果不用多說了吧，大家應該都知道， 不知道的看下方效果圖。 效果圖 特性說明 支援阻尼係數 支援多指觸控 支援上拉回彈、下拉回彈 支援設定開啟/關閉回彈：ENABLED_ALL、ENABLED_TOP、ENA

自定義View解決滑動衝突

最近在讀Android開發藝術探索,本文作為自己對view的滑動衝突的理解和實踐記錄 而滑動衝突,需要了解Android的事件分發機制,如果這個還有些疑惑的地方,請參考這篇文章,以及其中的參考文章 還需要View的Measure和Layout的相關知識Vie

Android從零開搞系列：自定義View（9）事件分發+事件攔截（滑動衝突）

我和一幫應屆生同學維護了一個公眾號：IT面試填坑小分隊。旨在幫助應屆生從學生過度到開發者，並且每週樹立學習目標，一同進步！ 寫在前面 今天用了一天的時間去再一次梳理了一遍，事件分發和事件攔截。用了這麼長時間倒不是因為理解深刻，，而是順便看了3

Android從零擼美團(三) - Android多標籤tab滑動切換 - 自定義View快速實現高度定製封裝

這是【從零擼美團】系列文章第三篇 【從零擼美團】是一個高仿美團的開源專案，旨在鞏固 Android 相關知識的同時，幫助到有需要的小夥伴。 GitHub 原始碼地址：github.com/cachecats/L… Android從零擼美團(一) - 統一管理 Gradle 依賴 提取到單獨檔案中 Andr

仿新浪微博首頁具有泥鰍蚯蚓滑動效果的可自定義View的Android ViewPager指示器

說到蚯蚓滑動效果的指示器，市面上很常見 也許是普通的控制元件習以為常了，刷微博的時候看到微博首頁的設計覺得很有意思 於是在公司的蚯蚓滑動指示器的基礎上進行了加工，寫了這麼一個指示器，效果如下所示 程式碼不多，正當我竊喜的時候我突然發現遇到個坑，點選popupwindo

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

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

自定義View之仿ios分段選擇器

一：效果 1.1 可動態新增或刪除tab，更改指定tab的文字。 二：實現思路 自定義view，實現效果 動態建立textview，有幾個tab建立幾個textview 第一個tab和最後一個tab為圓角矩形，其餘的為直角矩形，通過shape檔案完成 預設選

解讀ASP.NET 5 & MVC6系列（16）：自定義View檢視檔案查詢邏輯

之前MVC5和之前的版本中，我們要想對View檔案的路徑進行控制的話，則必須要對IViewEngine介面的FindPartialView或FindView方法進行重寫，所有的檢視引擎都繼承於該IViewEngine介面，比如預設的RazorViewEngine。但新版本MVC6中，對檢視檔案的路徑方式卻不太

自定義View之彈性滑動的LockView

本篇文章已授權微信公眾號 guolin_blog （郭霖）獨家釋出 本篇文章我們來實現一個帶有彈性滑動效果的自定義View。當然，文章的側重點是自定義View但也會涉及到View的事件分發以及一些其他方面的知識，例如使用Scroller實現帶有阻尼效果的彈性滑