Android自定義控件RatingBar調整字體大小
更新時間:2020年04月18日 09:22:30 作者:rome753
這篇文章主要為大家詳細介紹了Android自定義控件RatingBar調整字體大小的相關資料,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
項目需要,做一個可以調整字體大小的控件,能在滑動或點擊時改變選中的位置,效果圖如下:

這是一個類似于RatingBar的控件,然而配置RatingBar的樣式難以實現(xiàn)這樣的效果,如選中的圖案和上面的文字對齊。因此,有必要寫一個自定義View來實現(xiàn)。
思路如下:
- 新建一個TextRatingBar繼承View類
- 在onDraw()方法中繪制元素:文字、橫線、短豎線和圓形標記
- 重寫onMeasure()方法,控制整體大小和邊界
- 在onTouchEvent()方法中處理ACTION_DOWN和ACTION_MOVE事件,調用invalidate()方法引起View的重繪,以更新視圖
- 定義一個用戶選中某個字體的回調接口,以通知外部處理,比如去設置字體大小。
TextRatingBar類代碼如下:
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;
//當前rating
private int mRating;
//總raring數(shù)
private int mCount;
//rating文字
private String[] texts = {"小","中","大","超大"};
//相鄰raring的距離
private int mUnitSize;
//bar到底部的距離
private int mYOffset;
//小豎條的一半長度
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);
}
}
幾個要點:
- onDraw()中的繪制要注意周圍的預留空間,防止最左邊的字體只顯示一半,或滑動條下面沒有一點空白的預留空間,導致用戶不好劃。因此在計算每一個繪制坐標時額外加上這些。
- 觸摸事件是判斷當前觸摸點離哪個rating點最近,要加上左右臨界值Math.abs(distance),用戶點擊或劃動在distance范圍內就算發(fā)生了onRating()事件。
沒有用到自定義屬性,使用時直接放到布局中,周圍加上padding就行了。
<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" />
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
另外兩種Android沉浸式狀態(tài)欄實現(xiàn)思路
這篇文章主要為大家介紹了另外兩種Android沉浸式狀態(tài)欄實現(xiàn)思路,android5.0及以后版本都支持給狀態(tài)欄著色,而目前android主流版本還是4.4,想要深入了解的朋友可以參考一下2016-01-01
Flutter WillPopScope攔截返回事件原理示例詳解
這篇文章主要為大家介紹了Flutter WillPopScope攔截返回事件原理示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-09-09

