Android 仿微信全局字體大小調(diào)整

image

目錄
一、前言
二、效果預(yù)覽
三、實(shí)現(xiàn)步驟
1、自定義字體調(diào)整控件
2、滑動(dòng)按鈕改變當(dāng)前頁面預(yù)覽字體大小
3、返回時(shí)，保存放大倍數(shù)并重啟應(yīng)用
4、初始化應(yīng)用時(shí)配置字體放大倍數(shù)。
四、Demo地址
五、內(nèi)容推薦

一、前言

最近項(xiàng)目添加了一項(xiàng)調(diào)整應(yīng)用字體大小功能，做完后空閑之余總結(jié)一下。本功能仿照微信應(yīng)用“設(shè)置” - “通用” - “字體大小”功能，又有一點(diǎn)區(qū)別。據(jù)我所知，常見改變?nèi)肿煮w大小方法有兩種（若有更好的方案可以留言，互相學(xué)習(xí)），我把這兩種分為可控和不可控，為什么這么分呢，當(dāng)然不是為了方便記憶。那么簡單說下兩者方式的實(shí)現(xiàn)過程：

1、不可控：通過重寫Actiivity的getResources()方法更新應(yīng)用的字體倍數(shù)來調(diào)整全局字體大小

優(yōu)點(diǎn)：實(shí)現(xiàn)簡單

缺點(diǎn)：不可控制（所有字體放大倍數(shù)都是一致），無法跨進(jìn)程（項(xiàng)目中另一個(gè)進(jìn)程的字體不會(huì)改變，需要重新配置），只對sp字體單位有效果。....

2、可控：通過setTheme()方法，一開始就初始化設(shè)置不同風(fēng)格的字體樣式來更改全局字體大小。

優(yōu)點(diǎn)：隨意調(diào)節(jié)任意位置的字體大小

缺點(diǎn)：實(shí)現(xiàn)麻煩

而本文正式采用了第一種方案，主要是中途添加該功能，時(shí)間也不充裕，抽取字體大小又太過耗時(shí)。

微信字體大小個(gè)人猜測使用第二種方案，后者是更好的實(shí)現(xiàn)方式也不一定。

好了，扯得有點(diǎn)多。我要開始真正的表演了 ... 掌聲呢 鮮花呢 .....................人呢

image

二、效果預(yù)覽

image

三、實(shí)現(xiàn)步驟

1、自定義字體調(diào)整控件

網(wǎng)上找了一個(gè)相似的控件并加以完善，功能相對簡單，就不做介紹了。


import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Point;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
import blcs.lwb.lwbtool.R;
import blcs.lwb.lwbtool.utils.DensityUtils;

/**
 * TODO 仿微信字體大小調(diào)整
 * 自定義屬性：
 * lineWidth        線條粗細(xì)
 * lineColor        線條顏色
 * totalCount       線條格數(shù)
 * circleColor      球型顏色
 * circleRadius     球型顏色半徑
 * textFontColor    文字顏色
 * smallSize        小“A” 字體大小
 * standerSize      “標(biāo)準(zhǔn)” 字體大小
 * bigSize          大“A” 字體大小
 * defaultPosition  默認(rèn)位置
 */
public class FontSizeView extends View {

    private int defaultLineColor = Color.rgb(33, 33, 33);
    private int defaultLineWidth;
    private int defaultMax = 5;
    private int defaultCircleColor = Color.WHITE;
    private int defaultCircleRadius;
    // 當(dāng)前所在位置
    private int currentProgress;

    // 默認(rèn)位置
    private int defaultPosition = 1;

    // 一共有多少格
    private int max = 7;
    // 線條顏色
    private int lineColor = Color.BLACK;
    // 線條粗細(xì)
    private int lineWidth;

    //字體顏色
    private int textColor = Color.BLACK;
    //字體大小
    private int smallSize = 14;
    private int standerSize = 16;
    private int bigSize = 28;

    // 圓半徑
    private int circleRadius;
    private int circleColor = Color.WHITE;
    // 一段的寬度，根據(jù)總寬度和總格數(shù)計(jì)算得來
    private int itemWidth;
    // 控件的寬高
    private int height;
    private int width;
    // 畫筆
    private Paint mLinePaint;
    private Paint mTextPaint;
    private Paint mText1Paint;
    private Paint mText2Paint;
    private Paint mCirclePaint;
    // 滑動(dòng)過程中x坐標(biāo)
    private float currentX = 0;
    // 有效數(shù)據(jù)點(diǎn)
    private List<Point> points = new ArrayList<>();

    private float circleY;
    private float textScaleX;
    private float text1ScaleX;
    private float text2ScaleX;

    public FontSizeView(Context context) {
        this(context, null);
    }

    public FontSizeView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init(context, attrs);
    }

    private void init(Context context, AttributeSet attrs) {

        // initDefault
        defaultLineWidth = DensityUtils.dp2px(context, 2);
        defaultCircleRadius = DensityUtils.dp2px(context, 35);
        lineWidth = DensityUtils.dp2px(context, 1);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.FontSizeView);
        final int N = typedArray.getIndexCount();
        for (int i = 0; i < N; i++) {
            initCustomAttr(typedArray.getIndex(i), typedArray);
        }
        typedArray.recycle();
        // 初始化畫筆
        mLinePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mLinePaint.setColor(lineColor);
        mLinePaint.setStyle(Paint.Style.FILL_AND_STROKE);
        mLinePaint.setStrokeWidth(lineWidth);

        //文字畫筆
        mTextPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mTextPaint.setColor(textColor);
        mTextPaint.setStyle(Paint.Style.FILL_AND_STROKE);
//        mTextPaint.setStrokeWidth(DensityUtils.dp2px(context, 1));
        mTextPaint.setTextSize(DensityUtils.sp2px(context, smallSize));
        textScaleX = mTextPaint.measureText("A");
        //文字畫筆
        mText1Paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mText1Paint.setColor(textColor);
        mText1Paint.setStyle(Paint.Style.FILL_AND_STROKE);
        mText1Paint.setTextSize(DensityUtils.sp2px(context, bigSize));
        text1ScaleX = mText1Paint.measureText("A");

        //文字畫筆
        mText2Paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mText2Paint.setColor(textColor);
        mText2Paint.setStyle(Paint.Style.FILL_AND_STROKE);
        mText2Paint.setTextSize(DensityUtils.sp2px(context, standerSize));
        text2ScaleX = mText2Paint.measureText("標(biāo)準(zhǔn)");

        mCirclePaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mCirclePaint.setColor(circleColor);
        mCirclePaint.setStyle(Paint.Style.FILL);

        // 設(shè)置陰影效果
        setLayerType(LAYER_TYPE_SOFTWARE, null);
        mCirclePaint.setShadowLayer(2, 0, 0, Color.rgb(33, 33, 33));
    }

    private void initCustomAttr(int attr, TypedArray typedArray) {
        if (attr == R.styleable.FontSizeView_lineColor) {
            lineColor = typedArray.getColor(attr, defaultLineColor);
        } else if (attr == R.styleable.FontSizeView_circleColor) {
            circleColor = typedArray.getColor(attr, defaultCircleColor);
        } else if (attr == R.styleable.FontSizeView_lineWidth) {
            lineWidth = typedArray.getDimensionPixelSize(attr, defaultLineWidth);
        } else if (attr == R.styleable.FontSizeView_circleRadius) {
            circleRadius = typedArray.getDimensionPixelSize(attr, defaultCircleRadius);
        } else if (attr == R.styleable.FontSizeView_totalCount) {
            max = typedArray.getInteger(attr, defaultMax);
        } else if (attr == R.styleable.FontSizeView_textFontColor) {
            textColor = typedArray.getColor(attr, textColor);
        } else if (attr == R.styleable.FontSizeView_smallSize) {
            smallSize = typedArray.getInteger(attr, smallSize);
        } else if (attr == R.styleable.FontSizeView_standerSize) {
            standerSize = typedArray.getInteger(attr, standerSize);
        } else if (attr == R.styleable.FontSizeView_bigSize) {
            bigSize = typedArray.getInteger(attr, bigSize);
        }else if (attr == R.styleable.FontSizeView_defaultPosition) {
            defaultPosition = typedArray.getInteger(attr, defaultPosition);
        }
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        height = h;
        width = w;
        circleY = height / 2;
        // 橫線寬度是總寬度-2個(gè)圓的半徑
        itemWidth = (w - 2 * circleRadius) / max;
        // 把可點(diǎn)擊點(diǎn)保存起來
        for (int i = 0; i <= max; i++) {
            points.add(new Point(circleRadius + i * itemWidth, height / 2));
        }
        //初始刻度
        currentX = points.get(defaultPosition).x;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //畫字
        canvas.drawText("A", points.get(0).x - textScaleX / 2, height / 2 - 50, mTextPaint);

        //畫字
        canvas.drawText("標(biāo)準(zhǔn)", points.get(1).x - text2ScaleX / 2, height / 2 - 50, mText2Paint);

        //畫字
        canvas.drawText("A", points.get(points.size() - 1).x - text1ScaleX / 2, height / 2 - 50, mText1Paint);

        // 先畫中間的橫線
        canvas.drawLine(points.get(0).x, height / 2, points.get(points.size() - 1).x, height / 2, mLinePaint);
        // 繪制刻度
        for (Point point : points) {
            canvas.drawLine(point.x + 1, height / 2 - 20, point.x + 1, height / 2 + 20, mLinePaint);
        }

        // 畫圓
        if (currentX < circleRadius) {
            currentX = circleRadius;
        }
        if (currentX > width - circleRadius) {
            currentX = width - circleRadius;
        }

        // 實(shí)體圓
        canvas.drawCircle(currentX + 1, circleY, circleRadius, mCirclePaint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        currentX = event.getX();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                invalidate();
                break;
            case MotionEvent.ACTION_MOVE:
                invalidate();
                break;
            case MotionEvent.ACTION_UP:
                //回到最近的一個(gè)刻度點(diǎn)
                Point targetPoint = getNearestPoint(currentX);
                if (targetPoint != null) {
                    // 最終
                    currentX = points.get(currentProgress).x;
                    invalidate();
                }
                if (onChangeCallbackListener != null) {
                    onChangeCallbackListener.onChangeListener(currentProgress);
                }
                break;
        }
        return true;
    }

    /**
     * 獲取最近的刻度
     */
    private Point getNearestPoint(float x) {
        for (int i = 0; i < points.size(); i++) {
            Point point = points.get(i);
            if (Math.abs(point.x - x) < itemWidth / 2) {
                currentProgress = i;
                return point;
            }
        }
        return null;
    }

    public void setChangeCallbackListener(OnChangeCallbackListener listener) {
        this.onChangeCallbackListener = listener;
    }

    private OnChangeCallbackListener onChangeCallbackListener;

    public interface OnChangeCallbackListener {
        void onChangeListener(int position);
    }

    public void setDefaultPosition(int position){
        defaultPosition=position;
        if (onChangeCallbackListener != null) {
            onChangeCallbackListener.onChangeListener(defaultPosition);
        }
        invalidate();
    }
}
image.gif

xml使用方式：

   <blcs.lwb.lwbtool.View.FontSizeView
        android:id="@+id/fsv_font_size"
        android:layout_width="wrap_content"
        android:layout_height="120dp"
        android:layout_marginLeft="@dimen/space_line2"
        android:layout_marginRight="@dimen/space_line2"
        android:background="@color/white"
        app:circleRadius="11dp"
        app:lineColor="@color/round_corner_progress_bar_progress_default"
        app:standerSize="16" />
image.gif

2、滑動(dòng)按鈕改變當(dāng)前頁面預(yù)覽字體大小

    //備注
    <!--字體大小 及倍數(shù)-->
    <!--0.875=14/16 -->
    <dimen name="sp_small">14sp</dimen>
    <!--1  標(biāo)準(zhǔn)-->
    <dimen name="sp_stander">16sp</dimen>
    <!--1.125=18/16-->
    <dimen name="sp_big1">18sp</dimen>
    <!--1.25=20/16-->
    <dimen name="sp_big2">20sp</dimen>
    <!--1.375=22/16-->
    <dimen name="sp_big3">22sp</dimen>
    <!--1.5=24/16-->
    <dimen name="sp_big4">24sp</dimen>
    <!--1.625=26/16-->
    <dimen name="sp_big5">26sp</dimen>
    <!--1.75=28/16-->
    <dimen name="sp_big6">28sp</dimen>
image.gif
        //滑動(dòng)返回監(jiān)聽
        fsvFontSize.setChangeCallbackListener(new FontSizeView.OnChangeCallbackListener() {
            @Override
            public void onChangeListener(int position) {
                int dimension = getResources().getDimensionPixelSize(R.dimen.sp_stander);
                //根據(jù)position 獲取字體倍數(shù)
                fontSizeScale = (float) (0.875 + 0.125 * position);
                //放大后的sp單位
                double v = fontSizeScale * (int) DensityUtils.px2sp(FontSizeActivity.this, dimension);
                //改變當(dāng)前頁面大小
                changeTextSize((int) v);
            }
        });
image.gif
 /**
     * 改變textsize 大小
     */
    private void changeTextSize(int dimension) {
        tv_font_size1.setTextSize(dimension);
        tv_font_size2.setTextSize(dimension);
        tv_font_size3.setTextSize(dimension);
    }
image.gif

3、返回時(shí)，保存放大倍數(shù)并重啟應(yīng)用

  public void onClick(View view) {
      SPUtils.put(FontSizeActivity.this,Constants.SP_FontScale,fontSizeScale);
      //重啟應(yīng)用
      AppManager.getAppManager().finishAllActivity();
      IntentUtils.toActivity(FontSizeActivity.this, MainActivity.class,true);
  }
image.gif

4、初始化應(yīng)用時(shí)配置字體放大倍數(shù)。

改變?nèi)执笮〉年P(guān)鍵
res.updateConfiguration(config,res.getDisplayMetrics())

  //fontSizeScale = (float) SPUtils.get(this, Constants.SP_FontScale, 0.0f);
 @Override
    public Resources getResources() {
        Resources res =super.getResources();
        Configuration config = res.getConfiguration();
        if(fontSizeScale>0.5){//防止第一次獲取SP時(shí)得到默認(rèn)值0
            config.fontScale= fontSizeScale;//設(shè)置正常字體大小的倍數(shù)
        }
        res.updateConfiguration(config,res.getDisplayMetrics());
        return res;
    }
image.gif

就是這么簡單。。細(xì)節(jié)我就不寫了 ，貼出來代碼太長?？粗?，需要的大家可以去看我項(xiàng)目

image

四、Demo地址

https://github.com/DayorNight/BLCS

五、內(nèi)容推薦

CSDN：《Android 仿微信全局字體大小調(diào)整》

《Android JUnit單元測試》
《Android Log日志封裝》
《Android Rxjava+Retrofit網(wǎng)絡(luò)請求框架封裝》

如果你覺得我寫的不錯(cuò)或者對您有所幫助的話
不妨頂一個(gè)【微笑】，別忘了點(diǎn)贊、收藏、加關(guān)注哈
您的每個(gè)舉動(dòng)都是對我莫大的支持

image
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容