android自定義View之復(fù)合控件

更新時間：2021年06月10日 13:51:31 作者：Labi1993

這篇文章主要為大家詳細(xì)介紹了android自定義View之復(fù)合控件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

復(fù)合控件可以很好地創(chuàng)建出具有重用功能的控件集合。

很多的APP都有一些共通的UI界面，為了統(tǒng)一應(yīng)用程序的風(fēng)格，下面我們就以一個Topbar為實(shí)例講解復(fù)合控件。
實(shí)現(xiàn)效果如圖：

第一步：定義屬性

在res資源目錄的values目錄下創(chuàng)建一個attrs.xml屬性定義文件，為一個View提供可自定義的屬性。
代碼中，通過標(biāo)簽聲明了自定義屬性，并通過name屬性來確定引用的名稱。

<?xml version="1.0" encoding="utf-8"?> <resources>
    <declare-styleable name="TopBar">
        <attr name="titleText" format="string"/>
        <attr name="titleSize" format="dimension"/>
        <attr name="titleTextColor2" format="color"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackground" format="reference|color"/>
       <!--按鈕的背景可以指定為具體顏色，也可以一張圖片，所以使用“|”來分隔不同的屬性-->
        <attr name="leftText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>
</declare-styleable> </resources>

第二步：創(chuàng)建自定義控件—-創(chuàng)建類CompositControlDemo01，并讓其繼承RelativeLayout

package com.wjc.customwidget_0502;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;


/**
 * Created by admin on 2016/5/2.
 */
public class CompositControlDemo01 extends RelativeLayout {

    //定義與attrs.xml中的自定義屬性對應(yīng)的屬性
    private int mLeftTextColor;
    private String mLeftText;
    private Drawable mLeftBackground;
    private int mRightTextColor;
    private String mRightText;
    private Drawable mRightBackgound;
    private String mTitle;
    private float mTitleTextSize;
    private int mTitleTextColor;
    //布局參數(shù)
    private LayoutParams mLeftParame;
    private LayoutParams mRightParame;
    private LayoutParams mTitleParame;
    //定義顯示的布局
    private Button mLeftButton;
    private Button mRightButton;
    private TextView mTitleView;
    //定義一個公共接口
    private topbarClickListener mListener;


    //構(gòu)造函數(shù)，attrs就是布局文件傳過來的對應(yīng)的屬性
    public CompositControlDemo01(Context context, AttributeSet attrs) {
        super(context, attrs);
        initAttrs(context, attrs);
        initView(context);
    }

    //將attrs.xml中定義的屬性值存入typedArray中
    public void initAttrs(Context context, AttributeSet attrs) {
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        mLeftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);
        mLeftText = ta.getString(R.styleable.TopBar_leftText);
        mLeftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);

        mRightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        mRightText = ta.getString(R.styleable.TopBar_rightText);
        mRightBackgound = ta.getDrawable(R.styleable.TopBar_rightBackground);

        mTitle = ta.getString(R.styleable.TopBar_titleText);
        mTitleTextSize = ta.getDimension(R.styleable.TopBar_titleSize, 10);
        mTitleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor2, 0);
        ta.recycle();//避免重新創(chuàng)建時的錯誤
    }

    //組合控件，并將屬性分配給他們,并設(shè)置監(jiān)聽事件
    public void initView(Context context) {
        mLeftButton = new Button(context);
        mRightButton = new Button(context);
        mTitleView = new TextView(context);

        mLeftButton.setTextColor(mLeftTextColor);
        mLeftButton.setText(mLeftText);
        mLeftButton.setBackground(mLeftBackground);

        mRightButton.setTextColor(mRightTextColor);
        mRightButton.setText(mRightText);
        mRightButton.setBackground(mRightBackgound);

        mTitleView.setTextColor(mTitleTextColor);
        mTitleView.setText(mTitle);
        mTitleView.setTextSize(mTitleTextSize);
        mTitleView.setGravity(Gravity.CENTER);

        //為元素設(shè)定相應(yīng)的布局參數(shù)
        mLeftParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mLeftParame.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        addView(mLeftButton, mLeftParame);

        mRightParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mRightParame.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        addView(mRightButton, mRightParame);

        mTitleParame = new LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        mTitleParame.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(mTitleView, mTitleParame);


        //按鈕的點(diǎn)擊事件，不需要具體的實(shí)現(xiàn)
        //只需調(diào)用者接口的方法，回調(diào)的時候，會有具體的實(shí)現(xiàn)
        mLeftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.leftClick();
            }
        });
        mRightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                mListener.rightClick();
            }
        });
    }

    //定義接口
    //接口對象，實(shí)現(xiàn)回調(diào)機(jī)制，在回調(diào)方法中，通過映射的接口對象調(diào)用接口的方法
    //而不用去考慮如何實(shí)現(xiàn)，具體的實(shí)現(xiàn)由調(diào)用者去創(chuàng)建
    public interface topbarClickListener {
        void leftClick();
        void rightClick();
    }

    //暴露一個方法給調(diào)用者來注冊接口回調(diào)
    //通過接口來獲取回調(diào)者對接口方法的實(shí)現(xiàn)
    public void setOnTopbarClickListener(topbarClickListener mListener) {
        this.mListener = mListener;
    }

    /**
     * 設(shè)置按鈕的顯示與否通過id區(qū)分按鈕，flag區(qū)分是否顯示
     *
     * @param id   id
     * @param flag is Visable？
     */
    public void setButtonVisable(int id, boolean flag) {
        if (flag) {
            if (id == 0) {
                mLeftButton.setVisibility(View.VISIBLE);
            } else {
                mRightButton.setVisibility(View.VISIBLE);
            }
        } else {
            if (id == 0) {
                mLeftButton.setVisibility(View.GONE);
            } else {
                mRightButton.setVisibility(View.GONE);
            }
        }
    }
}

第三步：引用UI模板—創(chuàng)建topbar.xml文件

<?xml version="1.0" encoding="utf-8"?>
   <com.wjc.customwidget_0502.CompositControlDemo01
       xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:custom="http://schemas.android.com/apk/res-auto"
       android:id="@+id/topBar"
       android:layout_width="wrap_content"
       android:layout_height="50dp"
       android:padding="5dp"
      android:background="#3F7EA4"

       custom:leftBackground="@drawable/chevron_left"
       custom:leftTextColor="#ff00"
       custom:leftText="返回"

        custom:rightText="更多"
        custom:rightTextColor="#ff00"
        custom:rightBackground="#ffccff"

        custom:titleText="自定義標(biāo)題"
        custom:titleTextColor2="#555555"
        custom:titleSize="10sp"
       >
</com.wjc.customwidget_0502.CompositControlDemo01>

注：代碼中

xmlns:android=http://schemas.android.com/apk/res/android

表示：引用android系統(tǒng)的屬性，而

xmlns:custom=http://schemas.android.com/apk/res-auto

表示：引用第三方控件的屬性，即引用自定義的屬性

通過如上的代碼，我們就可以在其他的布局文件中，直接帶調(diào)用標(biāo)簽來引用這個UI模板View，代碼如下

<include layout="@layout/topbar"/>

第四步：實(shí)現(xiàn)接口回調(diào)——即寫一個activity引用此布局

package com.wjc.customwidget_0502;

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {
    CompositControlDemo01 mTopbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mTopbar=(CompositControlDemo01)findViewById(R.id.topBar);//初始化組合控件
        //為topBar中的按鈕注冊監(jiān)聽事件 
        mTopbar.setOnTopbarClickListener(new CompositControlDemo01.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "back", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"more",Toast.LENGTH_LONG).show();
            }
        });
        /*  //是否顯示相應(yīng)的按鈕
        mTopbar.setButtonVisable(0,true);//只顯示左邊按鈕*/
    }


}

這是本人的第一篇博客，如有錯漏，請留言指教！

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: