android中角標的實現

如下圖，角標在移動裝置中是比較常見的ui元素。各種「最新」、「vip」、「最熱」之類的層出不窮。

在展現上最簡單的做法是讓ui同學ps一張角標輸入「最新」、「vip」、「最熱」等蓋在要特別醒目提醒的控制項上面即可。當然偷懶是沒有一勞永逸的做法的，實現帶文字的角標在當下android裝置如此繁榮的情形下，碼工們必然會為千奇百怪的適配而勞碌成大牛的，如果頻繁更換中的文字ui設計師也會煩滴。

下文**第一種角標的**實現方式，其他三種還有比較少見的右下角、左下角的角標也可以照著做了。

把第一種角標

而這個圖形我們可以看作是乙個小長方形旋轉某個角度後，底邊兩點剛好和大長方形左邊和頂邊鏈結疊加所成的直角三角形。

在android中textview、linearlayout是方形的控制項。那麼，如果我們用textview替代小長方形、linearlayout替代大長方形，在textview靠頂部左對齊的情況下，由下圖看到這個幾何圖形可從a->b->c變換而成。

最終的圖形那麼是

其中點d座標即是textview的位移點，而∠bah則是textview反方向旋轉的角度。

剩下的就是中學幾何計算了。忘了吧!我們複習下要用到的公式：

sina=對邊/斜邊

cosa=鄰邊/斜邊

a角角度=arcsina/π*180°

勾股定理 c^2=a^2+b^2

好了，這幾個公式夠我們用了。

根據ui同學的設計圖，那麼eb、ea兩三角邊是可以量出來滴(需要注意的是eb不一定=ea)。

通過垂直三角形、長方形的各種垂直、平衡關係

可得∠bah=∠ebf=∠deg=∠gad

ab=√(eb^2+ab^2)

ef=sin(∠ebf)*eb

dg=sin(∠gad)*da=sin(∠ebf)*ef

ga=cos(∠gad)*da=cos(∠ebf)*ef

eg=ea-ga

到這裡就是怎麼在**中對textview做移動和旋轉動作了。由於多次嘗試直接對canvas做移動旋轉失敗，所以我採用animation來完成這一系列動作。下面是實現控制項的**。

package com.droidwolf.superscript;
import android.content.context;
import android.graphics.matrix;
import android.util.attributeset;
import android.util.displaymetrics;
import android.util.typedvalue;
import android.view.view;
import android.view.animation.animation;
import android.view.animation.transformation;
import android.widget.textview;
public class superscriptview extends textview 
public superscriptview(context context, attributeset attrs) 
public superscriptview(context context, attributeset attrs, int defstyle) 
@override
public void setvisibility(int visibility) 
private void init(context context, attributeset attrs) 
@override
protected void onmeasure(int widthmeasurespec, int heightmeasurespec) else 
} @override
protected void onlayout(boolean changed, int left, int top, int right, int bottom) 
private void calc(int leftedge, int topedge) 
private animation manimation = new animation() 
matrix tran = t.getmatrix();
tran.settranslate(mx, my);
tran.postrotate(mdegress, mx, my);
} };
}

附件是實現的demo。我還實現了第一張圖的另外三種角標到乙個控制項，請移步到我的bitbucket。

android中角標的實現

Silverlight中如何實現上下標的顯示

Android圓形角標

標尺及游標的實現

android中角標的實現

Silverlight中如何實現上下標的顯示

Android圓形角標

標尺及游標的實現

相關推薦