自定义控件

Android 适配时,自定义控件textview中,canva

2018-08-13  本文已影响168人  蘑菇v5

【声明:】本文是作者(蘑菇v5)原创,版权归作者 蘑菇v5所有,侵权必究。本文首发在简书。如若转发,请注明作者和来源地址!未经授权,严禁私自转载!

问题:因为安卓手机型号比较多,一些组件可以通过github中的开源代码适配,作者用的是鸿洋的,库地址是’com.zhy:autolayout:1.4.5’,适配组件没问题,但是问题出现在我自定义的组件中的文字大小,
因为文字这块是通过自己的画笔在画布绘制上去的,所以文字大小并没有适配。

思路:作者给自定义控件添加自定义属性(默认手机屏幕宽高),获取到自定义的属性值,设置默认的百分比,根据计算出来的最小纵横比来确定字体的大小,最后通过paint.setTextSize(textSize) ,实现动态适配自绘文字的大小。

实现过程:

1.首先,先写attrs.xml
<declare-styleable name="PercentTextView">
<attr name="baseScreenHeight" format="integer"/>
<attr name="baseScreenWidth" format="integer"/>
</declare-styleable>
2.设置好属性文件后,在使用的布局中写相关配置:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:PercentTextView="http://schemas.android.com/apk/res-auto"
android:orientation="vertical"
android:gravity="center"
android:layout_width="wrap_content"
android:layout_height="match_parent">

<com.xxx.view.MyTextView
android:id="@+id/item_txt"
android:background="@drawable/tv_back"
android:layout_width="0dp"
android:layout_height="match_parent"
PercentTextView:baseScreenWidth="1280"
PercentTextView:baseScreenHeight="800"
/>
</LinearLayout>
3.在自定义控件的构造方法中获取你配置的属性值:
/**
* 得到自定义的属性值
*
* @param context
* @param attrs
*/
private void getAttrs(Context context, AttributeSet attrs) {
TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.PercentTextView);
baseScreenHeight = ta.getInt(R.styleable.PercentTextView_baseScreenHeight, baseScreenHeight);
baseScreenWidth = ta.getInt(R.styleable.PercentTextView_baseScreenWidth, baseScreenWidth);
ta.recycle();
}

4.设置默认的百分比(mTextSizePercent):

/**
* 设置默认的百分比
*/
private void setDefaultPercent() {
int screenHeight = ScreenUtils.getScreenHeight();
int screenWidth = ScreenUtils.getScreenWidth();
float ratioWidth = (float) screenWidth / baseScreenWidth;
float ratioHeight = (float) screenHeight / baseScreenHeight;
mTextSizePercent = Math.min(ratioWidth, ratioHeight);
}

5.根据计算出来的最小纵横比来确定字体的大小(假定在屏幕下字体大小设定为24):

int textSize = Math.round(24 * mTextSizePercent);

6.给画笔设置字体大小:

paint.setTextSize(textSize);

效果图片:(红色部分)

效果图
上一篇下一篇

猜你喜欢

热点阅读