快捷導(dǎo)航

Android 實(shí)現(xiàn)帶角標(biāo)的ImageView(微博,QQ消息提示)

更新時(shí)間：2018年01月17日 11:07:53 作者：Si-Kang

下面小編就為大家分享一篇Android 實(shí)現(xiàn)帶角標(biāo)的ImageView(微博,QQ消息提示)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

角標(biāo)繪制過(guò)程：用畫(huà)筆量出一個(gè)字符的寬度作為角標(biāo)背景的半徑（R），然后判斷傳入字符串的總長(zhǎng)度

如果只有一位字符：那么就以 R 為半徑，畫(huà)一個(gè)圓，然后在圓中寫(xiě)上數(shù)字

如果有兩位以上的字符，就不能單純用一個(gè)圓了，用畫(huà)筆測(cè)量字符串的完整長(zhǎng)度( len )，然后在右上角畫(huà)一個(gè)圓，在這個(gè)圓的圓心左邊 len 長(zhǎng)度的位置作為圓心再畫(huà)一個(gè)圓，最后以這個(gè)兩個(gè)圓的上下頂點(diǎn)（一共四個(gè)）構(gòu)成一個(gè)矩形，進(jìn)行填充

源碼地址：https://github.com/SiKang123/AndroidToolBox

效果如下：

集成方法

在Project的 build.gradle 下添加

allprojects {
  repositories {
    ...
    maven { url 'https://jitpack.io' }
  }
}

在Module的 build.gradle 下添加

dependencies {
    compile 'com.github.SiKang123:AndroidToolBox:1.0'
}

使用方法

圖片中的效果，Layout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:gravity="center_horizontal"
  android:orientation="vertical"
  android:paddingTop="50dp">

  <android.simple.toolbox.widget.CornerImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="20dp"
    android:src="@mipmap/ic_launcher"
    app:cornerBackground="@color/red"
    app:cornerText="9"
    app:cornerTextColor="@color/white"
    app:cornerTextSize="11dp" />

  <android.simple.toolbox.widget.CornerImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="20dp"
    android:src="@mipmap/ic_launcher"
    app:cornerBackground="@color/red"
    app:cornerText="99"
    app:cornerTextColor="@color/white"
    app:cornerTextSize="11dp" />

  <android.simple.toolbox.widget.CornerImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_margin="20dp"
    android:src="@mipmap/ic_launcher"
    app:cornerBackground="@color/red"
    app:cornerText="999"
    app:cornerTextColor="@color/white"
    app:cornerTextSize="11dp" />

  <android.simple.toolbox.widget.CornerImageView
    android:id="@+id/progress_imageview"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:layout_margin="20dp"
    android:src="@mipmap/ic_launcher"
    app:cornerBackground="@mipmap/shanchu"
    app:cornerLoadColor="@color/alpha_black_35"
    app:cornerRadius="7dp" />
</LinearLayout>

Activtiy:

@Override
  protected void onCreate(@Nullable Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_cornerimage);
    //設(shè)置最后一個(gè)圖片的加載進(jìn)度為20%，并添加點(diǎn)擊事件
    CornerImageView imageView = (CornerImageView) findViewById(R.id.progress_imageview);
    imageView.progress(20);
    imageView.setOnCornerClickListener(new CornerImageView.OnCornerClickListener() {
      @Override
      public void onCornerClickListener(View view) {
        Toast.makeText(SimpleCornerImageActivity.this, "角標(biāo)被點(diǎn)擊", Toast.LENGTH_SHORT).show();
      }
    });
  }

以上這篇Android 實(shí)現(xiàn)帶角標(biāo)的ImageView(微博,QQ消息提示)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: