Android View标签LabelView（电商、商城类APP常用）



Android View标签LabelView（电商、商城类APP常用）

LabelView是在github上一个开源的标签库。其项目主页是：https://github.com/linger1216//labelview
LabelView为一个TextView，ImageView或者为ListView中适配器getView返回的View，增加一个左上角或者右上角的标签，要实现的效果如图所示：

这种需求设计在商城类APP、电商类APP中比较常用，这些APP展示的商品，通常会增加一些促销或者该类商品的特征。
LabelView集成自Android TextView，可以像使用Android TextView一样使用LabelView，LabelView使用简单，如代码所示：

package zhangphil.demo;

import com.lid.lib.LabelView;

import android.app.Activity;
import android.os.Bundle;
import android.view.View;

public class MainActivity extends Activity {

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);

		// 为一个普通的Android TextView增加标签
		LabelView label1 = new LabelView(this);
		label1.setText("HOT");
		label1.setBackgroundColor(0xffff5722);
		label1.setTargetView(findViewById(R.id.textView1), 5, LabelView.Gravity.LEFT_TOP);

		// 为一个普通的Android TextView增加标签
		// 点击则删除LabelView
		final LabelView label2 = new LabelView(this);
		label2.setText("HOT");
		label2.setBackgroundColor(0xffff5722);
		label2.setTargetView(findViewById(R.id.textView2), 5, LabelView.Gravity.RIGHT_TOP);
		label2.setOnClickListener(new View.OnClickListener() {

			@Override
			public void onClick(View v) {
				// 删除标签
				label2.remove();
			}
		});

		// 为一个Android ImageView增加标签
		LabelView label3 = new LabelView(this);
		label3.setText("HOT");
		label3.setBackgroundColor(0xffff5722);
		label3.setTargetView(findViewById(R.id.imageView), 5, LabelView.Gravity.RIGHT_TOP);

		// 为一个Android View增加标签
		LabelView label4 = new LabelView(this);
		label4.setText("HOT");
		label4.setBackgroundColor(0xffff5722);
		label4.setTargetView(findViewById(R.id.view), 5, LabelView.Gravity.RIGHT_TOP);
	}
}

布局文件则很简单，就使用Android自身的基础View：

<LinearLayout 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"
    android:orientation="vertical"
    tools:context="zhangphil.demo.MainActivity" >

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="100dip"
        android:background="#e0e0e0"
        android:gravity="center"
        android:text="Zhang Phil" >
    </TextView>

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="100dip"
        android:layout_marginTop="5dip"
        android:background="#e0e0e0"
        android:gravity="center"
        android:text="Zhang Phil" >
    </TextView>

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_marginTop="5dip"
        android:background="#e0e0e0"
        android:src="@drawable/ic_launcher" >
    </ImageView>

    <View
        android:id="@+id/view"
        android:layout_width="100dip"
        android:layout_height="100dip"
        android:layout_marginTop="5dip"
        android:background="#e0e0e0" >
    </View>

</LinearLayout>

代码运行结果就是上文中所示效果。

LabelView的distance和设置的text代表涵义如图所示：