1. 程式人生 > >3、自定義view初體驗:設定列表頁展示(組合控制元件)

3、自定義view初體驗:設定列表頁展示(組合控制元件)

漆可的部落格

1、 前言

當我們拿到設計圖,看到有多個佈局比較類似的地方如下圖中的微信設定列表頁,每一個列表都相類似,我們就可以考慮採用組合控制元件自定義view來展示,這樣做的好處是,可以簡化佈局,便於統一管理,後期維護修改更加方便簡單。
這裡寫圖片描述

組合控制元件是自定義view中入門功夫,也是一項常用的基本技能。使用也非常簡單,只要自己理解需求做好封裝及擴充套件性就好。

2、佈局展示

先分析下我們的自定義view,他包含一個ico圖示,一個文字標題,另外還有新訊息提示的小紅點。佈局很簡單,程式碼也一目瞭然。

自定義view佈局檔案view_set_home_line.xml:

<?xml version="1.0"
encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="44dp" android:orientation="horizontal" > <TextView android:id="@+id/tv_title_set_home_line" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_gravity="center_vertical" android:drawableLeft="@drawable/set_line_album" android:drawablePadding="10dp" android:gravity="center_vertical" android:text="收藏" android:textSize="16sp" /> <View android:id="@+id/v_dot_set_home_line"
android:layout_width="10dp" android:layout_height="10dp" android:layout_marginLeft="12dp" android:layout_marginBottom="4dp" android:layout_gravity="center_vertical" android:background="@drawable/dot_hit_shap" /> </LinearLayout>

3、自定義屬性

自定義屬性是自定義view的很重要的一部分。
我們在res/values 目錄下新建attr檔案。在這裡我們需要定義三個屬性:

  • 標題:titile
  • 圖示:ico
  • 是否顯示提示點:dot_visiable

相關程式碼如下:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- 設定主頁行view -->
    <declare-styleable name="SetHomeLineView">
        <attr name="title" format="string" />
        <attr name="ico" format="reference" />
        <attr name="dot_visiable" format="boolean" />
    </declare-styleable>

</resources>

解釋下上面的程式碼:
<declare-styleable name="SetHomeLineView">表示什麼的屬性名叫SetHomeLineView,同時,在R檔案的styleable內部類中會自動生成一個叫“SetHomeLineView”的int陣列,陣列元素就是下面attr中屬性名在R檔案中的常量值(每一個自定義屬性在styleable中都有一個對應的常量值)。

另外在“attr”中,那麼欄位表示改屬性嗎,format表示屬性的型別,有以下八大型別:

format 含義
reference 引用
color 顏色
boolean 布林值
dimension 尺寸值
float 浮點值
integer 整型值
string 字串
enum 列舉值

4、自定義View

我們自定義繼承自FrameLayout的Viewgroup,在初始化的時候呼叫程式碼
View.inflate(getContext(), R.layout.view_set_home_line, this)
將寫好的佈局檔案載入到本view中。這樣就將佈局檔案與我們的自定義view結合在一起了。

在構造方法SetHomeLineView(Context context, AttributeSet attrs, int defStyle)中,引數AttributeSet attrs已經將佈局檔案中的自定義屬性儲存在集合中了,我們通過程式碼直接取出來就行:

TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SetHomeLineView);

這樣ta中就包含了所有的屬性,我們再通過對應的get程式碼就可以獲取到指定屬性在佈局檔案中設定的值,獲取完值後記得呼叫 ta.recycle()。

ta.getString(R.styleable.SetHomeLineView_title);

將獲取的值再通過java程式碼設定給對應的控制元件即可,完整程式碼如下:

public class SetHomeLineView extends FrameLayout
{
    private View mRootView;

    private TextView tv_title;// 標題
    private View v_dot;// 用於提示的小紅點

    private String mTitle;// 標題
    private Drawable mIco;// 圖示
    private boolean mIsDotShow = false;// 小紅點是否顯示

    public SetHomeLineView(Context context, AttributeSet attrs)
    {
        this(context, attrs, 0);
    }

    public SetHomeLineView(Context context)
    {
        this(context, null);
    }

    public SetHomeLineView(Context context, AttributeSet attrs, int defStyle)
    {
        super(context, attrs, defStyle);

        init();

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.SetHomeLineView);

        mTitle = ta.getString(R.styleable.SetHomeLineView_title);
        mIco = ta.getDrawable(R.styleable.SetHomeLineView_ico);
        mIsDotShow = ta.getBoolean(R.styleable.SetHomeLineView_dot_visiable, mIsDotShow);

        ta.recycle();

        // 設定標題
        tv_title.setText(mTitle);

        // 設定圖示
        if (mIco != null)
        {
            mIco.setBounds(0, 0, mIco.getMinimumWidth(), mIco.getMinimumWidth());
            tv_title.setCompoundDrawables(mIco, null, null, null);
        }

        // 設定小紅點顯示
        v_dot.setVisibility(mIsDotShow ? View.VISIBLE : View.GONE);
    }

    private void init()
    {
        // 將佈局檔案載入到當前view中
        mRootView = View.inflate(getContext(), R.layout.view_set_home_line, this);

        tv_title = (TextView) mRootView.findViewById(R.id.tv_title_set_home_line);
        v_dot = mRootView.findViewById(R.id.v_dot_set_home_line);
    }

    /**
     * 設定標題
     * @author 漆可
     * @date 2016-5-18 下午8:24:20  
     * @param title
     */
    public void setTitle(String title)
    {
        tv_title.setText(title);
    }
}

5、使用

首先在需要使用自定義屬性的佈局檔案中申明我們自定義的名稱空間,申明語句以下倆種都可以

xmlns:app=”http://schemas.android.com/apk/res-auto”
xmlns:app1=”http://schemas.android.com/apk/res/com.qike.fragmentpractice”>

以下是自定義屬性的使用
`
<com.qike.fragmentpractice.widget.SetHomeLineView
android:id="@+id/fl_sysset_setting_home"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textSize="16sp"
app:ico="@drawable/set_line_set"
app:title="設定" />

最後奉上完整程式碼下載地址
敬請期待我的下一篇部落格,fragment的封裝技巧