一起學android之自訂控制項一起製作自訂標籤（39），android39

一起學android之自訂控制項一起製作自訂標籤（39），android39

今天我們要實現的效果如下：

當然列表中的標籤顯示的個數是可控的，實現個數可控的標籤的話，我們就需要自訂View。

我們自訂一個抽象類別繼承LinearLayout並實現我們定義的介面：

BaseTagView:

/** * 標籤，繼承此抽象類別 * @author LinHai Gu * * @param <T> */public abstract class BaseTagView<T> extends LinearLayout implements SelectTag<T>{private Context mContext;public BaseTagView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);mContext = context;initView();}public BaseTagView(Context context, AttributeSet attrs) {super(context, attrs);mContext = context;initView();}public BaseTagView(Context context) {super(context);mContext = context;initView();}private void initView() {setOrientation(LinearLayout.HORIZONTAL);}/** * 添加標籤，可配 * @param datas 資料來源 * @param num 顯示的標籤數 */public void addTag(List<T> datas,int num) {removeAllViews();LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(LinearLayout.LayoutParams.WRAP_CONTENT,LinearLayout.LayoutParams.WRAP_CONTENT);params.setMargins(0, 0, 10, 0);if (datas.size() > num) {for (int i = 0; i < num; i++) {T data = datas.get(i);TextView textView = (TextView) LayoutInflater.from(mContext).inflate(R.layout.tagtext_view, null);textView.setText(getTag(data));textView.setLayoutParams(params);addView(textView);}} else {for (int i = 0; i < datas.size(); i++) {T data = datas.get(i);TextView textView = (TextView) LayoutInflater.from(mContext).inflate(R.layout.tagtext_view, null);textView.setText(getTag(data));textView.setLayoutParams(params);addView(textView);}}}}

定義介面SelectTag：

/** *  * @author LinHai Gu * * @param <T> */public interface SelectTag<T> {/** * 擷取標籤內容 * @param data * @return */public abstract String getTag(T data);}

在這裡為什麼用到了泛型，這是因為我們需要的是一個公用的控制項，而不是為某一個介面而寫的。

在BaseTagView抽象類別中的addTag方法中需要匯入一個TextView布局檔案:

tagtext_view:

<?xml version="1.0" encoding="utf-8"?><TextView xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:background="@drawable/text_line"     android:textSize="12dp"    android:textColor="#999999"    android:padding="2dp"      ></TextView>

text_line:是專門給TextView外部添加標籤的邊框,當然你可以根據需要製作一些好看的標籤樣式

<?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android">       <solid android:color="@android:color/transparent" />       <corners android:topLeftRadius="1dp"               android:topRightRadius="1dp"                android:bottomRightRadius="1dp"               android:bottomLeftRadius="1dp"/>    <stroke android:width="1dp"        android:color="#999999"/>   </shape>

以上我們的公用控制項基本完成。

這時候假設有一個項目第一個頁面從伺服器擷取到了標籤列表，並顯示在列表中，標籤的值存放在一個PageObject對象中：

PageObject:

/** * 假設這是某頁面請求到的標籤資料 * @author LinHai Gu * */public class PageObject implements Serializable{private static final long serialVersionUID = 100230230204204021L;public String tagName;}

接著我們就要顯示這些標籤，因此我們可以為不同的模組去建立不同的標籤，假設第一個介面的標籤View是這樣的：

public class PageOneTagView extends BaseTagView<PageObject>{public PageOneTagView(Context context, AttributeSet attrs, int defStyle) {super(context, attrs, defStyle);}public PageOneTagView(Context context, AttributeSet attrs) {super(context, attrs);}public PageOneTagView(Context context) {super(context);}public void setTagList(ArrayList<PageObject> list,int num){addTag(list,num);}@Overridepublic String getTag(PageObject data) {return data.tagName;}}

通過子類定義setTagList方法傳入我們想要顯示的標籤列表，並顯示的個數就行了。

以下使我們的主布局：

MainActivity:

public class MainActivity extends Activity {private Datapter datapter=new Datapter();private ArrayList<PageObject> list=new ArrayList<PageObject>();private ListView lv_tag;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_main);initData();initView();}/** * 假設這邊是從服務擷取到的標籤列表 */private void initData(){for(int i=0;i<10;i++){PageObject obj=new PageObject();obj.tagName="標籤"+i;list.add(obj);}}private void initView(){lv_tag=(ListView)findViewById(R.id.lv_list);lv_tag.setAdapter(datapter);}class Datapter extends BaseAdapter {@Overridepublic int getCount() {return 23;}@Overridepublic Object getItem(int position) {return position;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic View getView(int position, View convertView, ViewGroup parent) {viewHolder viewh;if (convertView == null) {viewh = new viewHolder();convertView = LayoutInflater.from(MainActivity.this).inflate(R.layout.list_item, parent, false);viewh.tag = (PageOneTagView) convertView.findViewById(R.id.page_tag);convertView.setTag(viewh);} else {viewh = (viewHolder) convertView.getTag();}/* * 添加標籤,並顯示4個標籤 */viewh.tag.setTagList(list, 4);return convertView;}}class viewHolder {public PageOneTagView tag;}}

activity_main:

<RelativeLayout 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:paddingBottom="@dimen/activity_vertical_margin"    android:paddingLeft="@dimen/activity_horizontal_margin"    android:paddingRight="@dimen/activity_horizontal_margin"    android:paddingTop="@dimen/activity_vertical_margin"    tools:context="com.bill.MainActivity" >    <ListView        android:id="@+id/lv_list"        android:layout_width="fill_parent"        android:layout_height="fill_parent" >    </ListView></RelativeLayout>

list_item:(匯入我們繼承BaseTagView的類)

<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent" >    <ImageView        android:id="@+id/iv_logo"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:src="@drawable/ic_launcher" />    <com.bill.page1.PageOneTagView        android:id="@+id/page_tag"        android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_centerVertical="true"        android:layout_marginLeft="10dp"        android:layout_toRightOf="@id/iv_logo" >    </com.bill.page1.PageOneTagView></RelativeLayout>

                                                          個人GitHub項目地址：https://github.com/LinhaiGu/TabView

                                                          轉載請註明出處：http://blog.csdn.net/hai_qing_xu_kong/article/details/45919871情緒控_