Android自定义竖排TextView实现实例

 更新时间:2017年05月05日 16:28:28   投稿:lqh  
这篇文章主要介绍了Android自定义竖排TextView实现实例的相关资料,需要的朋友可以参考下

Android自定义竖排TextView实现实例

前言:

之前做联系人模块的时候遇到一个左侧索引控件,里面的字符都是竖直方向上排列的。当时这个控件是用一个图片代替的。现在想来如果索引的字符变更了,那么就得重新更换图片了,感觉很麻烦。今天通过一个自定义TextView实现类似的功能。先上效果图:


汉字和英文字符都可以竖直排列。结合联系人界面,可以将左侧的索引改成联系人的姓氏。

上代码:

测试用的Activity。

public class MainActivity extends Activity implements OnTouchListener { 
 
  private VerticalTextView mVerticalTextView; 
 
  private TextView mTextView; 
 
  private int mTextCount; 
 
  @Override 
  protected void onCreate(Bundle savedInstanceState) { 
    super.onCreate(savedInstanceState); 
    requestWindowFeature(Window.FEATURE_NO_TITLE); 
    setContentView(R.layout.activity_main); 
 
    mVerticalTextView = (VerticalTextView) findViewById(R.id.vertical_tv); 
    mTextView = (TextView) findViewById(R.id.content_tx); 
    mTextCount = mVerticalTextView.getText().length(); 
    mVerticalTextView.setOnTouchListener(this); 
    mTextView.setBackgroundColor(Color.LTGRAY); 
  } 
 
  @Override 
  public boolean onTouch(View v, MotionEvent event) { 
    float verticalTextViewHeight = mVerticalTextView.getHeight(); 
    float y = event.getY(); 
    int sectionPosition = (int) Math.ceil((y / verticalTextViewHeight) 
        / (1f / mTextCount)) - 1; 
    if (sectionPosition < 0) { 
      sectionPosition = 0; 
    } else if (sectionPosition >= mTextCount) { 
      sectionPosition = mTextCount - 1; 
    } 
    String sectionLetter = String.valueOf(mVerticalTextView.getText() 
        .charAt(sectionPosition)); 
    switch (event.getAction()) { 
    case MotionEvent.ACTION_DOWN: 
      mTextView.setVisibility(View.VISIBLE); 
      mTextView.setText(sectionLetter); 
      break; 
    case MotionEvent.ACTION_MOVE: 
      mTextView.setText(sectionLetter); 
      mTextView.setVisibility(View.VISIBLE); 
      break; 
 
    case MotionEvent.ACTION_UP: 
      mTextView.setVisibility(View.INVISIBLE); 
    default: 
      break; 
 
    } 
 
    return true; 
  } 
} 

这里主要说下如何通过点击或者滑动左侧的自定义TextView,将索引值取出来。主要的实现点在代码:

float verticalTextViewHeight = mVerticalTextView.getHeight(); 
float y = event.getY(); 
int sectionPosition = (int) Math.ceil((y / verticalTextViewHeight) 
    / (1f / mTextCount)) - 1; 
if (sectionPosition < 0) { 
  sectionPosition = 0; 
} else if (sectionPosition >= mTextCount) { 
  sectionPosition = mTextCount - 1; 
} 
String sectionLetter = String.valueOf(mVerticalTextView.getText() 
    .charAt(sectionPosition)); 

这里verticalTextViewHeight 是整个控件的高度,y按下控件后的y轴坐标,然后通过一个比例式将点击位置换算成竖排索引字符集中的对应字符位置,通过这个位置就可以判断出点击的是哪一个索引字符了。这里要注意比例式中的运算要转成浮点型计算,否则无法得到正确的索引值,楼主当时就在此深深的坑过。

下面是重点自定义TextView的实现代码:

public class VerticalTextView extends TextView { 
 
  /** 
   * 绘制整个VerticalTextView区域大小的画笔 
   */ 
  private Paint mPaint; 
  /** 
   * 绘制每个竖排字符间的间隔横线的画笔 
   */ 
  private Paint linePaint; 
  /** 
   * 绘制单个字符的画笔 
   */ 
  private Paint charPaint; 
 
  private char[] indexs; 
 
  private int textCount; 
 
  private String textString; 
 
  public VerticalTextView(Context context, AttributeSet attrs) { 
    this(context, attrs, 0); 
  } 
 
  public VerticalTextView(Context context, AttributeSet attrs, int defStyle) { 
    super(context, attrs, defStyle); 
 
    mPaint = new Paint(); 
 
    linePaint = new Paint(); 
 
    charPaint = new Paint(); 
 
    textString = getText().toString(); 
    indexs = getKeyChar(textString); 
    textCount = textString.toCharArray().length; 
  } 
 
  @Override 
  protected void onDraw(Canvas canvas) { 
    float childHeight = getHeight() / textCount; 
    if (TextUtils.isEmpty(textString)) 
      return; 
    canvas.drawRect(0, 0, getWidth(), getHeight(), mPaint); 
    canvas.drawColor(Color.GRAY); 
 
    linePaint.setColor(Color.BLACK); 
 
    charPaint.setTextSize((float) (getWidth() * 0.75)); 
    charPaint.setTextAlign(Paint.Align.CENTER); 
 
    FontMetrics fm = charPaint.getFontMetrics(); 
    for (int i = 0; i < textCount; i++) { 
      canvas.drawLine(0, i * childHeight, getWidth(), i * childHeight, 
          linePaint); 
      canvas.drawText( 
          String.valueOf(indexs[i]), 
          getWidth() / 2, 
          (float) (((i + 0.5) * childHeight) - (fm.ascent + fm.descent) / 2), 
          charPaint); 
    } 
  } 
 
  protected char[] getKeyChar(String str) { 
    char[] keys = new char[str.length()]; 
    for (int i = 0; i < keys.length; i++) { 
      keys[i] = str.charAt(i); 
    } 
    return keys; 
  } 
} 

代码也很简单,复写了onDraw函数。将要显示的字符串拆分成一个个字符放在一个数组中。通过一个循环遍历这个数组,挨个将他们绘制出来。精华只有一句:

canvas.drawText(String.valueOf(indexs[i]),getWidth() / 2,(float) (((i + 0.5) * childHeight) -  
 
(fm.ascent + fm.descent) / 2 
 
),charPaint); 

第一个参数是要绘制的字符,第二个参数绘制字符的x轴起始点,第三个参数比较复杂,重点说下前半部分

(i + 0.5) * childHeight 

表示每个字符区域高度的一办所在的y轴坐标,后半部分

(fm.ascent + fm.descent) / 2 

这个是个矫正值,如果不跟上它,绘制出来的字符会整体靠上。这里要参考字符的绘制原理,明白了后就很简单了。这里我就不在过多叙述。

最后是测试Activity的布局文件:

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" 
  xmlns:tools="http://schemas.android.com/tools" 
  android:layout_width="match_parent" 
  android:layout_height="match_parent" > 
<com.example.demoindextextview.widget.VerticalTextView 
    android:id="@+id/vertical_tv" 
    android:layout_width="20dp" 
    android:layout_height="match_parent" 
    android:layout_gravity="right" 
    android:text="ABCDEFGsdfsf你好吗sdfsdklmnopqrstuvwxyz" /> 
 
<TextView  
  android:id="@+id/content_tx" 
  android:layout_gravity="center" 
  android:gravity="center" 
  android:layout_height="50dp" 
  android:layout_width="50dp" 
  android:textSize="30sp" 
  android:visibility="invisible"/> 
   
</FrameLayout> 

当字符集变化后依然很好的适应,效果图:

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

相关文章

  • flutter底部弹出BottomSheet详解

    flutter底部弹出BottomSheet详解

    这篇文章主要为大家详细介绍了flutter底部弹出BottomSheet,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 从源码解析Android中View的容器ViewGroup

    从源码解析Android中View的容器ViewGroup

    这篇文章主要介绍了Android中View的容器ViewGroup,本文从源码解析ViewGroup的事件分发机制等,非常有深度,需要的朋友可以参考下
    2016-04-04
  • Android Studio连接MySql实现登录注册(附源代码)

    Android Studio连接MySql实现登录注册(附源代码)

    登录注册是常用的一个功能,正好今天用android studio 做一个类似于这样的登录软件,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • Android开发EditText实现密码显示隐藏

    Android开发EditText实现密码显示隐藏

    这篇文章主要为大家详细介绍了Android开发EditText实现密码显示隐藏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • Android版多线程下载 仿下载助手(最新)

    Android版多线程下载 仿下载助手(最新)

    我们都知道,下载助手,比如360,百度的 手机助手,下载APP的时候 ,都可以同时下载多个,所以下载肯定是多线程的,所以我们就需要一个线程工具类来管理我们的线程,这个工具类的核心,就是线程池。接下来给大家介绍Android版多线程下载 仿下载助手(最新)
    2015-08-08
  • 基于Flutter制作一个火箭发射动画

    基于Flutter制作一个火箭发射动画

    北京时间10月16日0时23分,神舟十三号飞船成功发射,为庆祝这一喜事,本文将用Flutter制作一个火箭发射动画,感兴趣的小伙伴可以动手试一试
    2022-03-03
  • Android 监听Notification 被清除实例代码

    Android 监听Notification 被清除实例代码

    本文主要介绍Android 监听Notification 事件,这里给大家提供实例代码进行参考,有需要的小伙伴可以参考下
    2016-07-07
  • android studio安装时 AVD出现问题如何快速解决

    android studio安装时 AVD出现问题如何快速解决

    这篇文章主要介绍了安装android studio时 AVD出现问题如何快速处理,其实解决方法也很简单,文中通过截图的形式给大家及时的非常详细,对大家的工作或学习具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-03-03
  • Android开发之删除项目缓存的方法

    Android开发之删除项目缓存的方法

    这篇文章主要介绍了Android开发之删除项目缓存的方法,结合实例形式分析了Android开发中关于缓存的设置与删除技巧,需要的朋友可以参考下
    2016-02-02
  • Android App中使用RatingBar实现星级打分功能的教程

    Android App中使用RatingBar实现星级打分功能的教程

    这篇文章主要介绍了Android App中使用RatingBar实现星级打分功能的教程,文中举了一个使用SeekBar与RatingBar制作的应用内打分条的功能,非常简单,需要的朋友可以参考下
    2016-04-04

最新评论