自定义特效VIew第一弹之竖直TextView
别的不说,先给出效果
再给出代码
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent" >
<com.example.empty.VerticalTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:text="Happy"
android:textSize="24dp"
android:textColor="#00FF00" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="top|left"
android:text="Happy"
android:textSize="24dp"
android:textColor="#00FF00" />
<com.example.empty.VerticalTextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="Today"
android:textSize="24dp"
android:textColor="#0000FF" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="bottom|right"
android:text="Today"
android:textSize="24dp"
android:textColor="#0000FF" />
</FrameLayout>
再给出我的VerticalTextView
package com.example.empty;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.widget.TextView;
public class VerticalTextView extends TextView{
public VerticalTextView(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
}
@Override
protected void onDraw(Canvas canvas) {
canvas.rotate(-90);
canvas.translate(-getHeight(), 0);
super.onDraw(canvas);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(getMeasuredWidth() >= getMeasuredHeight()){
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
}else if(getMeasuredWidth() < getMeasuredHeight()){
setMeasuredDimension(getMeasuredHeight(), getMeasuredHeight());
}
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(h, w, oldh, oldw);
}
}
只想Copy代码的,到这里就结束了。百分百有效
下面再给大家讲述一下我的设计思路
//***********************************文字竖直显示特效**************************************
这个先和大家说我们的核心思路在这里
@Override
protected void onDraw(Canvas canvas) {
canvas.rotate(-90);
canvas.translate(-getHeight(), 0);
super.onDraw(canvas);
}
很明显,这里我们什么都没做,只将我们的Canvas画布先旋转逆时针90度,然后再将我们的
Canvas画布像下移动了我们整个View的高度。理论就是这么简单。
这里提醒一下,如果你对Canvas不理解,这个就要自己去百度了,不然往下看也是白看
重点提示一下,你可以直接理解为画布就是你的TextView所占用的区域
这里,我画了两张图来帮助大家理解
其实我觉得我这张图已经几乎说明了一切
但还是给大家说明一下吧
所谓的Canvas就是我图上的橙色区域(至于不明白为什么是的,请百度)
那么 我们来看一下rotate这个函数
void android.graphics.Canvas.rotate(float arg0)
很明显,它的目的是将我们的画布旋转一定的角度,这里我强调一下,旋转一定会有中心。那么我们的中心在哪呢
网上有很多种说法,我们不置可否,大家请按照我的解释来就可以了
这里要记住,我们的旋转中心一不会是我们手机屏幕的中心,二不会是我们手机的原点(左上角)(网上的基本上都不靠谱)
这里既然是要旋转我们的画布,那么中心肯定在画布上的,那么是原点还是中心
这里要记住我们的中心是画布的原点
这里一定要记住,是画布的原点(不管它位于我们屏幕的什么位置)
旋转完成之后,剩下的就只要把我们的画布向下移动画布的高度就可以了
很多人问为什么要移动,其实这个问题我在图上已经标记出来了。如果不移动我们的相对的位置就变了
那么我们的TextView就不会出现在我们希望他出现的位置
//*********************************特效实现结束******************************
如果我的读者你足够细心的话,你会发现我最开始给你的案例图片上其实是同一样的效果(蓝色狂标记的画布)
但是我把它拿出来给你做了对比。
那么他们的差别在哪呢
android:layout_width="wrap_content"
android:layout_height="wrap_content"
区别在这里,为什么同样是wrap_content,他们的画布不一样
因为
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
if(getMeasuredWidth() >= getMeasuredHeight()){
setMeasuredDimension(getMeasuredWidth(), getMeasuredWidth());
}else if(getMeasuredWidth() < getMeasuredHeight()){
setMeasuredDimension(getMeasuredHeight(), getMeasuredHeight());
}
}
代码很简单,但是如果你不理解onMeasure函数,我又要很为难。
简单理解就是它是用来测量我们的View(我们的View要经过先测量(onMeasure)在绘制(onLayout)的过程)
那么我这样做的母的是什么。
这里我强行让我们的View宽和高都等于他们之间最大的那个。那么为什么呢。其实理由很简单。因为旋转之后,如果我们下移的getHeight()不够的话我么会有一部分视图显示不出来
//同理我们还可以通过比较getHeight 和getWidth从而向下移动一个比较大的也可以
同理,我们需要
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(h, w, oldh, oldw);
}
怎么样是不是很简单。
这里,我再给出大家一个竖直SeekBar的案例
<com.jeason.mediaplayer.view.VerticalSeekBar
android:id="@+id/light_vertical_seekbar"
android:layout_width="wrap_content"
android:layout_height="160dp"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
android:layout_marginLeft="10dp"
android:layout_marginRight="10dip"
android:paddingLeft="6dip"
android:paddingRight="6dip"
android:progressDrawable="@drawable/progress_holo_light"
android:thumb="@drawable/detail_icon_schedule_ball"
android:visibility="gone" />
package com.jeason.mediaplayer.view;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.content.Context;
import android.graphics.Canvas;
import android.util.AttributeSet;
import android.view.Display;
import android.view.MotionEvent;
import android.widget.SeekBar;
public class VerticalSeekBar extends SeekBar{
@SuppressWarnings("unused")
private int ScreenHeight;
@SuppressWarnings("deprecation")
public VerticalSeekBar(Context context, AttributeSet attrs) {
super(context, attrs);
// TODO Auto-generated constructor stub
Activity mContext =(Activity)context;
Display display = mContext.getWindowManager().getDefaultDisplay();
ScreenHeight = display.getHeight();
}
protected void onDraw(Canvas c) {
//将SeekBar转转90度
c.rotate(-90);
//将旋转后的视图移动回来
c.translate(-getHeight(),0);
super.onDraw(c);
}
@Override
protected synchronized void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(heightMeasureSpec, widthMeasureSpec);
setMeasuredDimension(getMeasuredHeight(), getMeasuredWidth());
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(h, w, oldh, oldw);
}
@SuppressLint("ClickableViewAccessibility")
@Override
public boolean onTouchEvent(MotionEvent event) {
if (!isEnabled()) {
return false;
}
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
case MotionEvent.ACTION_MOVE:
case MotionEvent.ACTION_UP:
int i=0;
//获取滑动的距离
i=getMax() - (int) (getMax() * event.getY() / getHeight());
//设置进度
setProgress(i);
onSizeChanged(getWidth(), getHeight(), 0, 0);
break;
case MotionEvent.ACTION_CANCEL:
break;
}
return true;
}
@Override
public void setProgress(int progress){
super.setProgress(progress);
onSizeChanged(getWidth(), getHeight(), 0, 0);
}
}
怎么样是不是 很帅气
转载,请注明出处