Android 自定義視圖總結(jié)

Android 自定義視圖總結(jié)

[TOC]

很多在開發(fā)的過程中，經(jīng)常會需要把某個UI視圖給單獨抽取出來，以便重復(fù)使用，下面舉個簡單例子，分析一下。

比如我們這邊有個這樣的視圖，如下所示，顯示一個訂單模塊中，經(jīng)常顯示一個商品的信息、數(shù)量以及價格。

上面的顯示商品的實體是這樣的。

public class GoodsItem implements Serializable {

    public String name;

    public int count;

    public double price;

    @Override
    public String toString() {
        return "GoodsItem{" +
                "name='" + name + '\'' +
                ", count=" + count +
                ", price=" + price +
                '}';
    }
}


GoodsItem goodsItem = new GoodsItem();
goodsItem.name = "可口可樂";
goodsItem.count = 123;
goodsItem.price = 321;

正常情況

正常情況下，我們?nèi)绻恍枰靡淮危敲次覀兌x好布局就好了，然后簡單的賦值就好，下面是代碼。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:gravity="center"
    android:orientation="horizontal"
    android:padding="10dp"
    tools:showIn="@layout/activity_main">

    <TextView
        android:id="@+id/tvName"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        tools:text="可口可樂" />

    <TextView
        android:id="@+id/tvCount"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="right"
        tools:text="x1" />

    <TextView
        android:id="@+id/tvPrice"
        android:layout_width="80dp"
        android:layout_height="wrap_content"
        android:gravity="right"
        tools:text="￥100" />
</LinearLayout>

// normal
TextView tvName = (TextView) findViewById(R.id.tvName);
TextView tvCount = (TextView) findViewById(R.id.tvCount);
TextView tvPrice = (TextView) findViewById(R.id.tvPrice);
tvName.setText(goodsItem.name);
tvCount.setText(String.format("x%s", goodsItem.count));
tvPrice.setText(String.format("￥%s", goodsItem.price));

上面是最簡單的方式，也是初學(xué)Android的時候常用的方式。

Databinding

Google官方給出了一個Databinding的方式，這樣我們代碼了里面就可以少些很多代碼，在對上面的代碼進行少許優(yōu)化后，就可以使用Databinding的方式。

<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp"
        tools:showIn="@layout/activity_main">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            tools:text="可口可樂" />

        <TextView
            android:id="@+id/tvCount"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            tools:text="x1" />

        <TextView
            android:id="@+id/tvPrice"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            tools:text="￥100" />
    </LinearLayout>
</layout>

// databind
binding.includeDatabinding.tvName.setText(goodsItem.name);
binding.includeDatabinding.tvCount.setText(String.format("x%s", goodsItem.count));
binding.includeDatabinding.tvPrice.setText(String.format("￥%s", goodsItem.price));

使用Databinding的最好好處，就不需要寫煩人的findViewById了。

Databinding升級

如果使用Databinding綁定的形式，那么賦值的方式就更加容易了，在定義xml的時候定義傳遞一個GoodsItem對象，然后在界面賦值一個對象就好了，簡單明了。

<?xml version="1.0" encoding="UTF-8"?>
<layout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools">

    <data>

        <variable
            name="good"
            type="cn.mycommons.goodsdemo.GoodsItem" />
    </data>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:gravity="center"
        android:orientation="horizontal"
        android:padding="10dp"
        tools:showIn="@layout/activity_main">

        <TextView
            android:id="@+id/tvName"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@{good.name}"
            tools:text="可口可樂" />

        <TextView
            android:id="@+id/tvCount"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text='@{"x"+good.count}'
            tools:text="x1" />

        <TextView
            android:id="@+id/tvPrice"
            android:layout_width="80dp"
            android:layout_height="wrap_content"
            android:gravity="right"
            android:text='@{"￥"+good.price}'
            tools:text="￥100" />
    </LinearLayout>
</layout>

// databind with param
binding.includeDatabindingWithParam.setGood(goodsItem);

自定義View

剛剛的示例比較，可以使用簡單復(fù)制就可以搞定，有時候，業(yè)務(wù)比較復(fù)制，可能還要處理手勢事件，如果使用Databinding就不怎么方便了。
所以自定義View是我們另外的一種方式。

首先我們頂一個自定義的View，這個view是專門用來顯示商品信息的。

public class GoodsItemView extends FrameLayout {

    private TextView tvName, tvCount, tvPrice;

    public GoodsItemView(Context context) {
        super(context);

        init();
    }

    public GoodsItemView(Context context, AttributeSet attrs) {
        super(context, attrs);

        init();
    }

    void init() {
        LayoutInflater.from(getContext()).inflate(R.layout.databinding, this);

        tvName = (TextView) findViewById(R.id.tvName);
        tvCount = (TextView) findViewById(R.id.tvCount);
        tvPrice = (TextView) findViewById(R.id.tvPrice);
    }

    public void updateUI(GoodsItem goodsItem) {
        tvName.setText(goodsItem.name);
        tvCount.setText(String.format("x%s", goodsItem.count));
        tvPrice.setText(String.format("￥%s", goodsItem.price));
    }
}

然在布局中引入就可以了，最好在Activity中找到所對應(yīng)的對象，最后賦值就可以了。

<cn.mycommons.goodsdemo.GoodsItemView
    android:id="@+id/goodsItemView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content" />
    
// custom view
GoodsItemView goodsItemView = (GoodsItemView) findViewById(R.id.goodsItemView);
goodsItemView.updateUI(goodsItem);

自定義Module

有時候一個自定義View會有所限制，比如，自定義View不能代碼混淆，而且自定義View會受到分類的限制。
有時候僅僅只是一處使用，單獨提取一個View代價太大，那么我們可以單獨自定義一個Module的方式，這樣做的話，可以減少Activity的代碼量。
話不多說，先看代碼。

首先商品展示界面還在定義在Activity的布局中。

<include
    android:id="@+id/includeModule"
    layout="@layout/databinding" />

然后我們定義一個通用的Module接口，以及實現(xiàn)類。

public interface IModule {

    void create();
    void destroy();
}

public class GoodsItemModule implements IModule {
    @NonNull
    private final View rootView;
    private TextView tvName, tvCount, tvPrice;

    public GoodsItemModule(@NonNull View rootView) {
        this.rootView = rootView;
    }

    @Override
    public void create() {
        tvName = (TextView) rootView.findViewById(R.id.tvName);
        tvCount = (TextView) rootView.findViewById(R.id.tvCount);
        tvPrice = (TextView) rootView.findViewById(R.id.tvPrice);
    }

    public void updateUI(GoodsItem goodsItem) {
        tvName.setText(goodsItem.name);
        tvCount.setText(String.format("x%s", goodsItem.count));
        tvPrice.setText(String.format("￥%s", goodsItem.price));
    }

    @Override
    public void destroy() {
        tvName = null;
        tvCount = null;
        tvPrice = null;
    }
}

然后我們在Activity中，把商品展示的接的根視圖傳入到Module中，這樣對商品展示的所有邏輯都是寫在了GoodsItemModule中了，
這樣就減少了耦合，Activity的代碼量也比較少，同時 Module中定義了簡單的生命周期，可以在Activity中調(diào)用，方便管理。

// module
goodsItemModule = new GoodsItemModule(findViewById(R.id.includeModule));
goodsItemModule.create();
goodsItemModule.updateUI(goodsItem);

// 這一段可以在Activity.onDestroy中執(zhí)行
goodsItemModule.destroy();

Fragment

看到上面了方法，是不是想到了Fragment，其實Fragment也是Google提供的自定義Module的一種實現(xiàn)。Fragment提供更加完善的生命周期，不過也是一個值得吐槽的地方。
導(dǎo)致很多實用Fragment的時候不知道怎么用，以及實用過于復(fù)雜。

下面展示下Fragment的使用。

public class GoodsItemFragment extends Fragment {

    static final String EXTRA_GOODS_ITEM = "goods_item";

    public static GoodsItemFragment newFragment(GoodsItem goodsItem) {
        GoodsItemFragment fragment = new GoodsItemFragment();
        Bundle args = new Bundle();
        args.putSerializable(EXTRA_GOODS_ITEM, goodsItem);
        fragment.setArguments(args);
        return fragment;
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater,
                             @Nullable ViewGroup container,
                             @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.databinding, container, false);
    }

    @Override
    public void onViewCreated(View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);

       TextView tvName = (TextView) view.findViewById(R.id.tvName);
       TextView tvCount = (TextView) view.findViewById(R.id.tvCount);
       TextView tvPrice = (TextView) view.findViewById(R.id.tvPrice);

        GoodsItem goodsItem = (GoodsItem) getArguments().getSerializable(EXTRA_GOODS_ITEM);
        if (goodsItem != null) {
            tvName.setText(goodsItem.name);
            tvCount.setText(String.format("x%s", goodsItem.count));
            tvPrice.setText(String.format("￥%s", goodsItem.price));
        }
    }
}

以及Activity中的調(diào)用方式。

// fragment
getSupportFragmentManager()
        .beginTransaction()
        .add(binding.fragmentContainer.getId(), GoodsItemFragment.newFragment(goodsItem))
        .commit();

總結(jié)

上面展示了Android中自定義視圖模塊的常用方式，下面進行比較和總結(jié)：

  • 正常情況 : 簡單明了，所有的開發(fā)人員都會，只不過代碼比較冗余，不利于解耦。
  • Databinding : 簡單明了，減少繁瑣的findViewById代碼，而且方便。
  • Databinding升級 : 更加簡單明了，不過有少許的學(xué)習(xí)成本，不過現(xiàn)在已經(jīng)是Android程序員的基本技能了。
  • 自定義View : 代碼稍微復(fù)雜，開發(fā)繁瑣，同時自定義View不能進行代碼混淆，可以根據(jù)View的名字，猜想邏輯。
  • 自定義Module : 這種方式，簡單粗暴，學(xué)習(xí)成本比較低，小項目內(nèi)可以自由使用，不過不利于推廣。
  • Fragment : 高級的自定義Module方式，有學(xué)習(xí)成本，利于推廣和維護。

上面的自定義View和自定義Module是兩種程序的實習(xí)方式，有句話叫做組合由于繼承，所以有時候，我會選擇后者。

個人的喜愛程度是這樣，當(dāng)然有時候會根據(jù)項目的實際情況進行選擇，也有時候會進行組合使用。

Databinding升級 = Databinding > Fragment > 自定義Module > 正常情況 > 自定義View

以上就是作者對Android自定義視圖總結(jié)，歡迎前來討論。

示例代碼地址

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容