android自定義View之復合控件
復合控件可以很好地創建出具有重用功能的控件集合。
很多的APP都有一些共通的UI界面,為了統一應用程序的風格,下面我們就以一個Topbar為實例講解復合控件。實現效果如圖:
第一步:定義屬性
在res資源目錄的values目錄下創建一個attrs.xml屬性定義文件,為一個View提供可自定義的屬性。代碼中,通過標簽聲明了自定義屬性,并通過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>
第二步:創建自定義控件—-創建類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中的自定義屬性對應的屬性 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; //布局參數 private LayoutParams mLeftParame; private LayoutParams mRightParame; private LayoutParams mTitleParame; //定義顯示的布局 private Button mLeftButton; private Button mRightButton; private TextView mTitleView; //定義一個公共接口 private topbarClickListener mListener; //構造函數,attrs就是布局文件傳過來的對應的屬性 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();//避免重新創建時的錯誤 } //組合控件,并將屬性分配給他們,并設置監聽事件 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);//為元素設定相應的布局參數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);//按鈕的點擊事件,不需要具體的實現//只需調用者接口的方法,回調的時候,會有具體的實現mLeftButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) {mListener.leftClick(); }});mRightButton.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) {mListener.rightClick(); }}); } //定義接口 //接口對象,實現回調機制,在回調方法中,通過映射的接口對象調用接口的方法 //而不用去考慮如何實現,具體的實現由調用者去創建 public interface topbarClickListener {void leftClick();void rightClick(); } //暴露一個方法給調用者來注冊接口回調 //通過接口來獲取回調者對接口方法的實現 public void setOnTopbarClickListener(topbarClickListener mListener) {this.mListener = mListener; } /** * 設置按鈕的顯示與否通過id區分按鈕,flag區分是否顯示 * * @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模板—創建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: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='自定義標題'custom:titleTextColor2='#555555'custom:titleSize='10sp' ></com.wjc.customwidget_0502.CompositControlDemo01>
注:代碼中
xmlns:android=http://schemas.android.com/apk/res/android
表示:引用android系統的屬性,而
xmlns:custom=http://schemas.android.com/apk/res-auto
表示:引用第三方控件的屬性,即引用自定義的屬性
通過如上的代碼,我們就可以在其他的布局文件中,直接帶調用標簽來引用這個UI模板View,代碼如下
<include layout='@layout/topbar'/>
第四步:實現接口回調——即寫一個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中的按鈕注冊監聽事件 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(); }});/* //是否顯示相應的按鈕mTopbar.setButtonVisable(0,true);//只顯示左邊按鈕*/ }}
這是本人的第一篇博客,如有錯漏,請留言指教!
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網。
相關文章:
