Android教程網
設為首頁|加入收藏
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> Android開發 >> 關於android開發 >> android組合控件Titlebar的定制過程

android組合控件Titlebar的定制過程

編輯：關於android開發

android組合控件Titlebar的定制過程


前言：我相信”天生我才必有用”這句話，每個人都有他的作用，也許他的作用相對其他人來不是很明顯，也許他的作用也就是取悅別人，但是請不要忘記，可以通過不斷努力來發揮自己的作用，使自己的價值得到提升。

在平時的android開發中你是否遇到一個問題，那就是每次都要自己寫一個布局，或者是引入一個布局但每次都要為了給布局中的控件初始化。對於這個問題，谷歌官方推出了ActionBar，以及隨後的取代ActionBar的ToolBar來使我們的開發更加簡單，如：使用ToolBar+DrawLayout就非常容易實現推酷app的那種菜單效果。這樣的一個控件的出現極大地減少了程序員的負擔，使得android開發越來越簡單，相信以後將會有更多類似的好的控件的出現來簡化我們app的開發，呵呵，滿期待的~。

這篇文章將介紹一個自己組合的控件Titlebar來簡化我們的開發，這個組合控件的實現是個體力活（無技術含量），所以先看一下要實現的效果，如果覺得閉著眼睛就能寫出來的，可以直接跳到本篇文章結尾為我辛勤的勞動點個贊，哈哈。

效果圖：

這裡寫圖片描述 這裡寫圖片描述

這裡寫圖片描述 這裡寫圖片描述

實現這個組合控件需要我們自定義屬性，寫一個類繼承ViewGroup並在構造方法中用代碼添加子View。所以，下面先自定義我們的屬性。

1. 自定義屬性

通過觀察上面的效果圖，我們發現我們共需要以下11個屬性：

leftButtonText leftButtonTextColor leftButtonTextSize leftButtonImage：左側按鈕的圖片 titleText titleColor titleSize rightButtonText rightButtonTextColor rightButtonTextSize rightButtonImage：右側按鈕的圖片

各個屬性的意思根據名稱就知道是什麼意思，所以，我們就在資源文件attrs.xml來定義我們的屬性：

注意：

我們可以attrs.xml的節點下面直接定義我們的屬性而不必在節點下面定義或引用，然後在布局文件中直接使用，但這種做法不推薦，因為將一些屬性添加到一個屬性集中便於管理和使用。如果自定義屬性和系統屬性重名的時候，如果我們要定義屬性的類型和系統定義的一樣，那麼我們可以直接在節點中引用系統的屬性，即添加一個節點但不要format屬性；

2. 繼承ViewGroup，完成控件的組合

?觀察我們要實現的效果，發現使用ViewGroup的子類RelativeLayout可以很好和方便地完成。所以，新建一個類繼承RelativeLayout，重寫三個構造方法，在構造方法中先獲取布局中自定義屬性的值。

private void init(Context context,AttributeSet attrs) {
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.Titlebar);
    mLeftButtonText = typedArray.getString(R.styleable.Titlebar_leftButtonText);
    mLeftButtonTextColor = typedArray.getColor(R.styleable.Titlebar_leftButtonTextColor, Color.GRAY);
    mLeftButtonSize = typedArray.getDimension(R.styleable.Titlebar_leftButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
    mLeftButtonImage = typedArray.getDrawable(R.styleable.Titlebar_leftButtonImage);

    mTitleButtonText = typedArray.getString(R.styleable.Titlebar_titleText);
    mTitleButtonTextColor = typedArray.getColor(R.styleable.Titlebar_titleColor, Color.GRAY);
    mTitleButtonSize = typedArray.getDimension(R.styleable.Titlebar_titleSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));

    mRightButtonText = typedArray.getString(R.styleable.Titlebar_rightButtonText);
    mRightButtonTextColor = typedArray.getColor(R.styleable.Titlebar_rightButtonTextColor, Color.GRAY);
    mRightButtonSize = typedArray.getDimension(R.styleable.Titlebar_rightButtonTextSize, TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_SP, 16, getResources().getDisplayMetrics()));
    mRightButtonImage = typedArray.getDrawable(R.styleable.Titlebar_rightButtonImage);

    typedArray.recycle();
}

這裡使用完TypedArray這個資源後要記得回收資源，就像使用完數據庫後要記得關閉連接和使用完IO流要記得關閉一樣。

獲取到了自定義屬性的值，那麼，我們還需要通過代碼構建左側按鈕，中間標題，右側按鈕這三個控件：

private void initView(Context context) {
    if(mLeftButtonImage == null & mLeftButtonText != null){
        // 當用戶沒有設置左側按鈕圖片並設置了左側的按鈕文本屬性時--添加左側文本按鈕
        mLeftTextView = new TextView(context);
        mLeftTextView.setText(mLeftButtonText);
        mLeftTextView.setTextColor(mLeftButtonTextColor);
        mLeftTextView.setTextSize(mLeftButtonSize);
        RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
        addView(mLeftTextView, leftParams);
    }else if(mLeftButtonImage != null){
        // 添加左側圖片按鈕
        RelativeLayout.LayoutParams leftParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL);
        mLeftButton = new ImageView(context);
        mLeftButton.setImageDrawable(mLeftButtonImage);
        addView(mLeftButton, leftParams);
    }

    if(mTitleButtonText!=null){
        // 添加中間標題
        TextView titleTextView = new TextView(context);
        titleTextView.setText(mTitleButtonText);
        titleTextView.setTextColor(mTitleButtonTextColor);
        titleTextView.setTextSize(mTitleButtonSize);
        RelativeLayout.LayoutParams titleTextViewParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        titleTextViewParams.addRule(RelativeLayout.CENTER_IN_PARENT);
        addView(titleTextView,titleTextViewParams);
    }

    if(mRightButtonImage == null & mRightButtonText != null){
        // 當用戶沒有設置右側按鈕圖片並設置了左側的按鈕文本屬性時--添加右側文本按鈕
        mRightTextView = new TextView(context);
        mRightTextView.setText(mRightButtonText);
        mRightTextView.setTextColor(mRightButtonTextColor);
        mRightTextView.setTextSize(mRightButtonSize);
        RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
        addView(mRightTextView,rightParams);
    }else if(mRightButtonImage != null){
        // 添加右側圖片按鈕
        RelativeLayout.LayoutParams rightParams = new RelativeLayout.LayoutParams(LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL);
        mRightButton = new ImageView(context);
        mRightButton.setImageDrawable(mRightButtonImage);
        addView(mRightButton, rightParams);
    }
}

說明：由於左側和右側的按鈕既可以使用文字也可以使用圖片，所以，這裡我使用了兩個控件代表這兩種情況，當用戶設置了左側按鈕圖片後就不會添加左側按鈕文本。

接下來我們還需要為左側和右側按鈕添加事件監聽，所以，我們先定義一個接口：

/**
 * 在button點擊事件接口
 */
public interface OnButtonClickListener{
    void onLeftClick();
    void onRightClick();
}

設置按鈕監聽：

/**
 * 設置點擊事件
 * @param onButtonClickListener
 */
public void setOnButtonClickListener(final OnButtonClickListener onButtonClickListener) {
    if(onButtonClickListener !=null){
        if(mLeftTextView != null){
            mLeftTextView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onLeftClick();
                }
            });
        }
        if(mLeftButton != null){
            mLeftButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onLeftClick();
                }
            });
        }
        if(mRightTextView != null){
            mRightTextView.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onRightClick();
                }
            });
        }
        if(mRightButton != null){
            mRightButton.setOnClickListener(new OnClickListener() {
                @Override
                public void onClick(View v) {
                    onButtonClickListener.onRightClick();
                }
            });
        }
    }
}

布局中使用我們的組合控件：

include_titlebar.xml

注意：

命名空間的引入;

使用我們自定義的屬性可以使用4種情況的組合：

左側為文本按鈕，右側為文本按鈕；左側為文本按鈕，右側為圖片按鈕；左側為圖片按鈕，右側為文本按鈕；左側為圖片按鈕，右側為圖片按鈕。在需要上面類似的標題欄的時候，直接在布局中include引入這個布局文件即可，然後在activity或fragment或其他使用這個控件的地方在初始化這個控件並設置接口監聽即可。

在activity中初始化並設置接口監聽：

Titlebar titlebar = (Titlebar) findViewById(R.id.titlebar);
titlebar.setOnButtonClickListener(new Titlebar.OnButtonClickListener() {
    @Override
    public void onLeftClick() {
        Toast.makeText(MainActivity.this,"左側按鈕被點擊了",0).show();
    }

    @Override
    public void onRightClick() {
        Toast.makeText(MainActivity.this,"右側按鈕被點擊了",0).show();
    }
});

就是個體力活，鍛煉使用代碼創建並布局控件的能力，沒什麼可總結的~

demo下載：http://download.csdn.net/detail/ydxlt/9453262

   

  1. 上一頁:
  2. 下一頁:
關於android開發
開發入門初級開發中級開發高級開發關於android開發
相關文章
熱門文章
Android 系統常用的權限，android權限 Mixer音量調節 Win2008配置FTP服務 Android進程通信之兩種序列化方式分析 最全面的Android Intent機制講解 RecyclerView 結合 CardView 使用（二），recyclerview使用
Android消息處理機制(Handler、Looper、MessageQueue與Message)

Android消息處理機制(Handler、Looper、Message
［Android開發］使用XUtils框架出現的問題記錄

［Android開發］使用XUtils框架出現的問題記錄 1、首先出現了
重拾Android

重拾Android 從2012年自學Android開始，到現在第4個年頭
【React Native開發】React Native控件之ViewPagerAndroid講解以及美團首頁頂部效果實例(17)

【React Native開發】React Native控件之ViewP
閱讀排行版
Copyright © Android教程網 All Rights Reserved