Android自定義控件RatingBar調(diào)整字體大小
項(xiàng)目需要,做一個(gè)可以調(diào)整字體大小的控件,能在滑動(dòng)或點(diǎn)擊時(shí)改變選中的位置,效果圖如下:
這是一個(gè)類(lèi)似于RatingBar的控件,然而配置RatingBar的樣式難以實(shí)現(xiàn)這樣的效果,如選中的圖案和上面的文字對(duì)齊。因此,有必要寫(xiě)一個(gè)自定義View來(lái)實(shí)現(xiàn)。
思路如下:
- 新建一個(gè)TextRatingBar繼承View類(lèi)
- 在onDraw()方法中繪制元素:文字、橫線(xiàn)、短豎線(xiàn)和圓形標(biāo)記
- 重寫(xiě)onMeasure()方法,控制整體大小和邊界
- 在onTouchEvent()方法中處理ACTION_DOWN和ACTION_MOVE事件,調(diào)用invalidate()方法引起View的重繪,以更新視圖
- 定義一個(gè)用戶(hù)選中某個(gè)字體的回調(diào)接口,以通知外部處理,比如去設(shè)置字體大小。
TextRatingBar類(lèi)代碼如下:
package cc.rome753.demo.view; import android.content.Context; import android.graphics.Canvas; import android.graphics.Color; import android.graphics.Paint; import android.util.AttributeSet; import android.util.Log; import android.view.MotionEvent; import android.view.View; /** * Created by rome753 on 2017/3/10 */ public class TextRatingBar extends View{ //paddingLeft private int mLeft; //paddingTop private int mTop; //當(dāng)前rating private int mRating; //總raring數(shù) private int mCount; //rating文字 private String[] texts = {"小","中","大","超大"}; //相鄰raring的距離 private int mUnitSize; //bar到底部的距離 private int mYOffset; //小豎條的一半長(zhǎng)度 private int mMarkSize; Paint paint = new Paint(); public TextRatingBar(Context context) { this(context, null); } public TextRatingBar(Context context, AttributeSet attrs) { this(context, attrs, 0); } public TextRatingBar(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); mCount = 4; mRating = 0; mMarkSize = 3; } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); Log.i("test", getMeasuredWidth() + " " + getMeasuredHeight()); mLeft = (getPaddingLeft()+getPaddingRight())/2; mTop = getPaddingTop(); int barWidth = getMeasuredWidth() - 2 * mLeft; mUnitSize = barWidth/(mCount - 1); mYOffset = getMeasuredHeight() - getPaddingBottom(); } @Override protected void onDraw(Canvas canvas) { paint.setStrokeWidth(2); paint.setColor(Color.RED); canvas.drawLine(mLeft,mYOffset,mLeft+mRating*mUnitSize,mYOffset,paint); for(int i=0;i<mCount;i++){ paint.setColor(Color.RED); canvas.drawLine(mLeft+i*mUnitSize,mYOffset-mMarkSize,mLeft+i*mUnitSize,mYOffset+mMarkSize,paint); paint.setColor(mRating == i ? Color.RED : Color.BLACK); paint.setTextSize(30); paint.setTextAlign(Paint.Align.CENTER); canvas.drawText(texts[i],mLeft+i*mUnitSize,mTop,paint); } paint.setColor(Color.GRAY); canvas.drawLine(mLeft+mRating*mUnitSize,mYOffset,mLeft+(mCount-1)*mUnitSize,mYOffset,paint); canvas.drawCircle(mLeft+mRating*mUnitSize,mYOffset,10,paint); } @Override public boolean onTouchEvent(MotionEvent event) { if(event.getAction() == MotionEvent.ACTION_DOWN || event.getAction() == MotionEvent.ACTION_MOVE){ float x = event.getX(); for(int i=0;i<mCount;i++){ float distance = mLeft+i*mUnitSize - x; if(Math.abs(distance) < 100){ setRating(i); if(onRatingListener != null){ onRatingListener.onRating(mRating); } break; } } } return true; } public void setRating(int rating) { mRating = rating; invalidate(); } private OnRatingListener onRatingListener; public void setOnRatingListener(OnRatingListener onRatingListener) { this.onRatingListener = onRatingListener; } interface OnRatingListener{ void onRating(int rating); } }
幾個(gè)要點(diǎn):
- onDraw()中的繪制要注意周?chē)念A(yù)留空間,防止最左邊的字體只顯示一半,或滑動(dòng)條下面沒(méi)有一點(diǎn)空白的預(yù)留空間,導(dǎo)致用戶(hù)不好劃。因此在計(jì)算每一個(gè)繪制坐標(biāo)時(shí)額外加上這些。
- 觸摸事件是判斷當(dāng)前觸摸點(diǎn)離哪個(gè)rating點(diǎn)最近,要加上左右臨界值Math.abs(distance),用戶(hù)點(diǎn)擊或劃動(dòng)在distance范圍內(nèi)就算發(fā)生了onRating()事件。
沒(méi)有用到自定義屬性,使用時(shí)直接放到布局中,周?chē)由蟨adding就行了。
<cc.rome753.demo.view.TextRatingBar android:paddingTop="20dp" android:paddingLeft="40dp" android:paddingRight="40dp" android:paddingBottom="35dp" android:layout_width="match_parent" android:layout_height="70dp" />
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
Android實(shí)現(xiàn)帶頭像的用戶(hù)注冊(cè)頁(yè)面
這篇文章主要介紹了Android實(shí)現(xiàn)帶頭像的用戶(hù)注冊(cè)頁(yè)面的相關(guān)資料,介紹的非常詳細(xì),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06

Android 中ListView和GridView賦值錯(cuò)位

Android徹底清除APP數(shù)據(jù)的兩種方案總結(jié)

Android文字基線(xiàn)Baseline算法的使用講解

android如何添加桌面圖標(biāo)和卸載程序后自動(dòng)刪除圖標(biāo)

Android SDK Manager無(wú)法更新問(wèn)題解決辦法