Android项目实战(二十三):仿QQ设置App全局字体大小

简介: 一、项目需求: 因为产品对象用于中老年人,所以产品设计添加了APP全局字体调整大小功能。 这里仿做QQ设置字体大小的功能。    QQ实现的效果是,滚动下面的seekbar,当只有seekbar到达某一个刻度的时候,这时候上部分的效果展示部分会改变文字大小, 但是在拖动过程中字体不会改变。

一、项目需求:

因为产品对象用于中老年人,所以产品设计添加了APP全局字体调整大小功能。

这里仿做QQ设置字体大小的功能。

  

QQ实现的效果是,滚动下面的seekbar,当只有seekbar到达某一个刻度的时候,这时候上部分的效果展示部分会改变文字大小,

但是在拖动过程中字体不会改变。关闭此界面,就可以看到改变文字后app整体的实际文字大小效果了。

 

-----------------------------------------------------------------------------------------------------------------------------

二、理清一下实现思路:

1、先将一个APP内所有的文本设置级别,大概3--5个级别(具体看项目需求),比如标题栏的TextView我们给他设置级别1(默认24sp)  ,类似设置 级别2(默认22sp)等等。

  这样做的目的可以方便的我们设置,如果每个Textview大小都乱乱的,那这个文字大小改变的功能也没什么意义了。

 

2、创建一个类Constant,类中创建一个静态变量,这个变量用于记录当我们拖动seekbar的时候 对应改变。取值范围就是我们seekbar的界点。

Demo我们限制文字大小有四个界点:小、标准、大、特大。

那么静态变量 TEXT_SIZE 取值就有0,1,2,3

 

 public static int TEXT_SIZE = 0;

 

3、滑动seekbar,当达到界点的时候,改变静态变量TEXT_SIZE的值,并且刷新列表适配器(这个列表是展示文字大小效果的,所以数据是我们自己写死的,

要求达到某个界点才会刷新适配器,绝不可能seekbar有滑动操作我们就执行刷新适配器的)

 

4、在退出设置字体界面的时候,用sharedPreferences保存,每次进入app的时候读取。

这样在每个Activity或者Fragment 创建View的过程中在 TextView创建的时候给控件动态设置文字的大小   

textview.setTextSize(级别默认文字大小+seekbar级别*3);

思路就是这么简单,看懂的可以自己去实现了,有点懵的看下面的例子来深入了解下。

 

整体思路就是:  一个标记变量,记录要显示文字大小的级别,sharedpreference保存。然后在每个要打开的新的界面创建View的过程中 给TextView动态设置文字大小

注意:不是我修改文字大小之后,整个APP所有界面的TextView都立马改变。

-----------------------------------------------------------------------------------------------------------------------------

 三、代码实现

1、首先就是这个SeekBar控件,上面需要有刻度,需要有文字,显然我们用android提供的自带的SeekBar控件已经不满足我们的需求了。

     但是,这里我找到了一个很好的自定义控件可以完美的实现这个问题:

     资料来源:   Android 自定义带刻度的seekbar   

  这里我加了一些注释

  1 public class CustomSeekbar extends View {
  2     private final String TAG = "CustomSeekbar";
  3     private int width;
  4     private int height;
  5     private int downX = 0;
  6     private int downY = 0;
  7     private int upX = 0;
  8     private int upY = 0;
  9     private int moveX = 0;
 10     private int moveY = 0;
 11     private float scale = 0;
 12     private int perWidth = 0;
 13     private Paint mPaint;
 14     private Paint mTextPaint;
 15     private Paint buttonPaint;
 16     private Canvas canvas;
 17     private Bitmap bitmap;
 18     private Bitmap thumb;
 19     private Bitmap spot;
 20     private Bitmap spot_on;
 21     private int hotarea = 100;//点击的热区
 22     private int cur_sections = 2;
 23     private ResponseOnTouch responseOnTouch;
 24     private int bitMapHeight = 38;//第一个点的起始位置起始,图片的长宽是76,所以取一半的距离
 25     private int textMove = 60;//字与下方点的距离,因为字体字体是40px,再加上10的间隔
 26     private int[] colors = new int[]{0xffdf5600,0x33000000};//进度条的橙色,进度条的灰色,字体的灰色
 27     private int textSize;
 28     private int circleRadius;
 29     private ArrayList<String> section_title;
 30     public CustomSeekbar(Context context) {
 31         super(context);
 32     }
 33     public CustomSeekbar(Context context, AttributeSet attrs) {
 34         this(context, attrs, 0);
 35     }
 36     public CustomSeekbar(Context context, AttributeSet attrs, int defStyleAttr) {
 37         super(context, attrs, defStyleAttr);
 38         cur_sections = 0;
 39         bitmap = Bitmap.createBitmap(900, 1100, Bitmap.Config.ARGB_8888);
 40         canvas = new Canvas();
 41         canvas.setBitmap(bitmap);
 42         thumb = BitmapFactory.decodeResource(getResources(), R.mipmap.img_setting_seekbar_thumbe_large);   //这个是滑动图标
 43         spot = BitmapFactory.decodeResource(getResources(),R.mipmap.img_setting_seekbar_thumbe);            //这个是未滑动到的界点的图标
 44         spot_on = BitmapFactory.decodeResource(getResources(),R.mipmap.img_setting_seekbar_thumbe);         //这个是已经滑动过的界点的图标
 45         bitMapHeight = thumb.getHeight()/2;   //这里影响点中的图标的位置  这个正好 不用改
 46         textMove = bitMapHeight+ 5;   //xqx  这里参数大小要改,不是固定的,具体看项目效果
 47         textSize = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 20, getResources().getDisplayMetrics());   //文字大小,第二个参数个人设置
 48         circleRadius = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3, getResources().getDisplayMetrics());
 49         mPaint = new Paint(Paint.DITHER_FLAG);
 50         mPaint.setAntiAlias(true);//锯齿不显示
 51         mPaint.setStrokeWidth(3);
 52         mTextPaint = new Paint(Paint.DITHER_FLAG);
 53         mTextPaint.setAntiAlias(true);
 54         mTextPaint.setTextSize(textSize);
 55         mTextPaint.setColor(0xffb5b5b4);
 56         buttonPaint = new Paint(Paint.DITHER_FLAG);
 57         buttonPaint.setAntiAlias(true);
 58 
 59     }
 60     /**
 61      * 实例化后调用,设置bar的段数和文字
 62      */
 63     public void initData(ArrayList<String> section){
 64         if(section != null){
 65             section_title = section;
 66         }else {
 67             //如果没有传入正确的分类级别数据,则默认使用“低”“中”“高”
 68             String[] str = new String[]{"", "", ""};
 69             section_title = new ArrayList<String>();
 70             for (int i = 0; i < str.length; i++) {
 71                 section_title.add(str[i]);
 72             }
 73         }
 74     }
 75 
 76     @Override
 77     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 78         super.onMeasure(widthMeasureSpec, heightMeasureSpec);
 79 
 80         int widthMode = MeasureSpec.getMode(widthMeasureSpec);
 81         int widthSize = MeasureSpec.getSize(widthMeasureSpec);
 82         int heightMode = MeasureSpec.getMode(heightMeasureSpec);
 83         int heightSize = MeasureSpec.getSize(heightMeasureSpec);
 84 
 85         width = widthSize;
 86         float scaleX = widthSize / 1080;
 87         float scaleY = heightSize / 1920;
 88         scale = Math.max(scaleX,scaleY);
 89         //控件的高度
 90         //height = 185;
 91         height = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 62, getResources().getDisplayMetrics());
 92         setMeasuredDimension(width, height);
 93         width = width-bitMapHeight/2;
 94         perWidth = (width - section_title.size()*spot.getWidth() - thumb.getWidth()/2) / (section_title.size()-1);
 95         hotarea = perWidth/2;
 96     }
 97 
 98     @Override
 99     protected void onDraw(Canvas canvas) {
100         super.onDraw(canvas);
101         mPaint.setColor(Color.WHITE);
102         mPaint.setStyle(Paint.Style.FILL);
103         mPaint.setAlpha(0);
104         canvas.drawRect(0, 0, getMeasuredWidth(), getMeasuredHeight(), mPaint);
105         canvas.drawBitmap(bitmap, 0, 0, null);
106         mPaint.setAlpha(255);
107         mPaint.setColor(colors[1]);
108         canvas.drawLine(bitMapHeight, height * 2 / 3, width - bitMapHeight - spot_on.getWidth() / 2, height * 2 / 3, mPaint);
109         int section = 0;
110         while(section < section_title.size()){
111             if(section < cur_sections) {
112                 mPaint.setColor(colors[0]);
113                 canvas.drawLine(thumb.getWidth()/2 + section * perWidth + (section+1) * spot_on.getWidth(),height * 2 / 3,
114                         thumb.getWidth()/2 + section * perWidth + (section+1) * spot_on.getWidth() + perWidth,height * 2 / 3,mPaint);
115                 canvas.drawBitmap(spot_on, thumb.getWidth()/2 + section * perWidth + section * spot_on.getWidth(),height * 2 / 3 - spot_on.getHeight()/2,mPaint);
116             }else{
117                 mPaint.setAlpha(255);
118                 if(section == section_title.size()-1){
119                     canvas.drawBitmap(spot,  width - spot_on.getWidth() - bitMapHeight/2, height * 2 / 3 - spot.getHeight() / 2, mPaint);
120                 }else {
121                     canvas.drawBitmap(spot, thumb.getWidth()/2 + section * perWidth + section * spot_on.getWidth(), height * 2 / 3 - spot.getHeight() / 2, mPaint);
122                 }
123             }
124 
125             if(section == section_title.size()-1) {
126                 canvas.drawText(section_title.get(section), width - spot_on.getWidth()- bitMapHeight/4 - textSize / 2, height * 2 / 3 - textMove, mTextPaint);
127             }else{
128                 canvas.drawText(section_title.get(section), thumb.getWidth()/2 + section * perWidth + section * spot_on.getWidth(), height * 2 / 3 - textMove, mTextPaint);
129             }
130             section++;
131         }
132         if(cur_sections == section_title.size()-1){
133             canvas.drawBitmap(thumb, width - spot_on.getWidth() - bitMapHeight/2 - thumb.getWidth() / 2,
134                     height * 2 / 3 - bitMapHeight, buttonPaint);
135         }else {
136             canvas.drawBitmap(thumb, thumb.getWidth()/2 + cur_sections * perWidth + cur_sections * spot_on.getWidth() - thumb.getWidth()/4 ,
137                     height * 2 / 3 - bitMapHeight, buttonPaint);
138         }
139     }
140 
141     @Override
142     public boolean onTouchEvent(MotionEvent event) {
143         super.onTouchEvent(event);
144         switch (event.getAction()) {
145             case MotionEvent.ACTION_DOWN:
146                 thumb = BitmapFactory.decodeResource(getResources(), R.mipmap.img_setting_seekbar_thumbe_large);
147                 downX = (int) event.getX();
148                 downY = (int) event.getY();
149                 responseTouch(downX, downY);
150                 break;
151             case MotionEvent.ACTION_MOVE:
152                 thumb = BitmapFactory.decodeResource(getResources(), R.mipmap.img_setting_seekbar_thumbe_large);
153                 moveX = (int) event.getX();
154                 moveY = (int) event.getY();
155                 responseTouch(moveX, moveY);
156                 break;
157             case MotionEvent.ACTION_UP:
158                 thumb = BitmapFactory.decodeResource(getResources(), R.mipmap.img_setting_seekbar_thumbe_large);
159                 upX = (int) event.getX();
160                 upY = (int) event.getY();
161                 responseTouch(upX, upY);
162                 responseOnTouch.onTouchResponse(cur_sections);
163                 break;
164         }
165         return true;
166     }
167     private void responseTouch(int x, int y){
168         if(x <= width-bitMapHeight/2) {
169             cur_sections = (x + perWidth / 3) / perWidth;
170         }else{
171             cur_sections = section_title.size()-1;
172         }
173         invalidate();
174     }
175 
176     //设置监听
177     public void setResponseOnTouch(ResponseOnTouch response){
178         //注意 ,这里是接口,实现你到达界点的监听事件,因为这个自定义控件继承的View而不是SeekBar,所以只能使用接口实现监听
179         responseOnTouch = response;
180     }
181 
182 
183     //设置进度
184     public void setProgress(int progress){
185         cur_sections = progress;
186         invalidate();
187     }
188 }
CustomSeekbar.class

 

2、根据这个自定义CustomSeekbar控件,我们首先要建一个接口

public interface ResponseOnTouch {
    public void onTouchResponse(int volume);
}

 

3、创建一个类。设置一个静态属性 

public class Constant {
public static int TEXT_SIZE = 0;
}

 

4、接下来写字体设置后的效果界面:qq的效果界面有两个,一个是聊天的界面,一个是列表的界面。

这里我们只展示列表的界面

列表代码就不展示了

直接看如何使用CustomSeekbar

 1         private CustomSeekbar seekBar;
 2         seekBar = (CustomSeekbar) findViewById(R.id.progressBar);
 3      //这个集合用于给自定义SeekBar设置界点级别,集合里有几个数据,就有几个界点
 4         ArrayList<String> volume_sections = new ArrayList<String>();      
 5         volume_sections.add("");
 6         volume_sections.add("标准");
 7         volume_sections.add("");
 8         volume_sections.add("特大");
 9         seekBar.initData(volume_sections);
10         seekBar.setProgress(0); //设置默认级别
11 
12 
13         seekBar.setResponseOnTouch(this);//activity实现了下面的接口ResponseOnTouch,每次touch会回调onTouchResponse

实现接口:

@Override
    public void onTouchResponse(int volume) {
        Toast.makeText(this,"volume-->"+volume,Toast.LENGTH_SHORT).show();
        //参数volume就是级别,如果我们集合有4个数据 那么volume的取值就为0、1、2、3
     Constant.TEXT_SIZE
= volume;
     //这里写sharedpreferences保存该静态变量
     //刷新列表 ,查看文字改变后的效果   adapter.notifyDataSetChanged(); }

 

列表适配器中对textview设置大小的代码:

 holder.community_doctor_name.setTextSize(该TextView控件级别默认文字大小+ Constant.TEXT_SIZE*5);

 

效果图:

后续补上。

 

个人思路,实现的局限性是有的,大家有修改意见欢迎提出。

相关文章
|
2月前
|
XML Java 数据库
安卓项目:app注册/登录界面设计
本文介绍了如何设计一个Android应用的注册/登录界面,包括布局文件的创建、登录和注册逻辑的实现,以及运行效果的展示。
165 0
安卓项目:app注册/登录界面设计
|
2月前
|
JavaScript 前端开发 UED
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
Vue与uni-app开发中通过@font-face巧妙引入自定义字体
101 9
|
3月前
|
Java 数据库 Android开发
一个Android App最少有几个线程?实现多线程的方式有哪些?
本文介绍了Android多线程编程的重要性及其实现方法,涵盖了基本概念、常见线程类型(如主线程、工作线程)以及多种多线程实现方式(如`Thread`、`HandlerThread`、`Executors`、Kotlin协程等)。通过合理的多线程管理,可大幅提升应用性能和用户体验。
136 15
一个Android App最少有几个线程?实现多线程的方式有哪些?
|
3月前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
227 2
|
3月前
|
XML Android开发 数据格式
🌐Android国际化与本地化全攻略!让你的App走遍全球无障碍!🌍
在全球化背景下,实现Android应用的国际化与本地化至关重要。本文以一款旅游指南App为例,详细介绍如何通过资源文件拆分与命名、适配布局与方向、处理日期时间及货币格式、考虑文化习俗等步骤,完成多语言支持和本地化调整。通过邀请用户测试并收集反馈,确保应用能无缝融入不同市场,提升用户体验与满意度。
117 3
|
3月前
|
Java 数据库 Android开发
一个Android App最少有几个线程?实现多线程的方式有哪些?
本文介绍了Android应用开发中的多线程编程,涵盖基本概念、常见实现方式及最佳实践。主要内容包括主线程与工作线程的作用、多线程的多种实现方法(如 `Thread`、`HandlerThread`、`Executors` 和 Kotlin 协程),以及如何避免内存泄漏和合理使用线程池。通过有效的多线程管理,可以显著提升应用性能和用户体验。
82 10
|
2月前
|
安全 网络安全 Android开发
深度解析:利用Universal Links与Android App Links实现无缝网页至应用跳转的安全考量
【10月更文挑战第2天】在移动互联网时代,用户经常需要从网页无缝跳转到移动应用中。这种跳转不仅需要提供流畅的用户体验,还要确保安全性。本文将深入探讨如何利用Universal Links(仅限于iOS)和Android App Links技术实现这一目标,并分析其安全性。
289 0
|
3月前
|
Android开发
Android经典实战之Textview文字设置不同颜色、下划线、加粗、超链接等效果
本文介绍了 `SpannableString` 在 Android 开发中的强大功能,包括如何在单个字符串中应用多种样式,如颜色、字体大小、风格等,并提供了详细代码示例,展示如何设置文本颜色、添加点击事件等,助你实现丰富文本效果。
279 3
|
3月前
|
XML 数据库 Android开发
10分钟手把手教你用Android手撸一个简易的个人记账App
该文章提供了使用Android Studio从零开始创建一个简单的个人记账应用的详细步骤,包括项目搭建、界面设计、数据库处理及各功能模块的实现方法。
|
3月前
|
图形学 iOS开发 Android开发
从Unity开发到移动平台制胜攻略:全面解析iOS与Android应用发布流程,助你轻松掌握跨平台发布技巧,打造爆款手游不是梦——性能优化、广告集成与内购设置全包含
【8月更文挑战第31天】本书详细介绍了如何在Unity中设置项目以适应移动设备,涵盖性能优化、集成广告及内购功能等关键步骤。通过具体示例和代码片段,指导读者完成iOS和Android应用的打包与发布,确保应用顺利上线并获得成功。无论是性能调整还是平台特定的操作,本书均提供了全面的解决方案。
156 0