自定义特效VIew第一弹之竖直TextView

时间：2015-05-05 19:45:39 阅读：123 评论：0 收藏：0 [点我收藏+]

标签：竖直textview 竖直seekbar 竖直view 自定义特效view 竖直

自定义特效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);
    }
}

怎么样是不是很帅气

转载，请注明出处

自定义特效VIew第一弹之竖直TextView

标签：竖直textview 竖直seekbar 竖直view 自定义特效view 竖直

原文地址：http://blog.csdn.net/jaysong2012/article/details/45504289

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行