第一次总是那么紧张，那么不知所措，虽然很LOW 但是也是弟弟辛苦花费两天时间写的啊。给大家弄一个自定义组合控件，80%流行app页面的title。虽然很简单，但是很实用啊（虽然很短小，但是时间长啊），啥都是有利有弊的，这自定义控件肯定还有比这还简单的方法，但是我不会啊，这是按照我自己的思想来写的。 因为我心里就秉承着一个思想，简易开发，速度开发，质量开发，批量开发。用最快的速度完成最质量的任务。腾出来的时间就可以写点实用的东西。顺便借着这简单的自定义控件，温习一下自定义控件的步骤吧。

下面来先看下效果图

2304.png

从图上可以很简单的看出来（图片大家可以忽略） 整体的title 里面就是4个view 。每个view的扩展性都被弟弟给写活了，可以灵活改变，方便维护。可以说现在大多输知名app ， 淘宝 ， 天猫 ， 秀阅 ...等等等等。 都用的是这种类型的title，

看完效果图看工程目录结构图

11.png

目录结构很简单， 一个activity 一个自定义的titleBarview 类 ， 分别对应的布局文件两个， 一张图片，一个资源文件

首先写自定义控件你必须要了解的几个步骤

1.写一个自定义控件类,这个类就是你的自定义控件的实现.

demo中的TitleBar_View继承相对布局 RelativeLayout

0645.png

2.在res/values目录下建立一个attrs.xml的文件,在这个文件中增加对控件的自定义属性的定义.

这里就对添加了一些Textview 需要的内容 和颜色属性

22.png

3.使用带AttributeSet参数的类的构造函数,并在构造函数中将自定义控件类中变量与attrs.xml中的属性连接起来.

041.png

4.在自定义控件类中使用这些已经连接的属性变量.

4434.png

5.将自定义的控件类定义到布局用的xml文件中去.

65165.png

6.在界面中生成此自定义控件类对象，就完成了自定义控件的创建和使用了.

0337.png

代码如下：

看完图了来看看布局文件

<RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:background="@color/colorRed"
        >
      //左边的返回按钮
        <ImageView
            android:id="@+id/iv_back"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:layout_marginLeft="10dp"
            android:src="@mipmap/back"
            />
     //左边的文字
        <TextView
            android:id="@+id/tv_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignTop="@+id/tv_right"
            android:layout_toEndOf="@+id/iv_back"
            android:layout_toRightOf="@+id/iv_back"
            android:text="个人中心"
            android:textColor="@color/colorwhite"
            android:textSize="12sp"/>
  //中间title的文字
        <TextView
            android:id="@+id/tv_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:layout_marginRight="10dp"
            android:text="分享"
            android:textColor="@color/colorwhite"
            android:textSize="14sp"
            />
 //右边的文字
        <TextView
            android:id="@+id/tv_title"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="我是冷场王"
            android:textColor="@color/colorwhite"
            android:textSize="25sp"
            />
    </RelativeLayout>

布局文件就是一个相对布局，里面包裹了几个view， 没什么难度，简单粗暴易懂。

看下自定义的关键代码

package xiuyue.xiuyuewang.com.my_titilebar;

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

/***
 * @author Created by bigsmile E-mail: 84251597@qq.com
 * @version 创建时间：2016/11/1 0001
 */
public class TitleBar_View extends RelativeLayout {

    /** titleBar 整个title的布局 **/
    private View title_view;

    /** titleBar中间的文字  **/
    private TextView title_tv;

    /** titleBar 右边的文字  **/
    private TextView right_tv;

    /** titleBar 右边的文字  **/
    private TextView left_tv;

    /** titleBar 左边的返回按钮  **/
    private ImageView iv_back;

   /**  textview 所需要的内容属性  **/
    private String title_text, left_text, right_text;
  /**  textview 所需要的颜色值 **/
    private int title_text_color, left_text_color, right_text_color;

    private Drawable imagedrawable;

  //回调监听
    private TitleBarClickListener titleBarClickListener;


    /**
     * 构造需要两个参数
     * @param context
     * @param attrs
     */
    public TitleBar_View(Context context, AttributeSet attrs) {
        super(context, attrs);


        TypedArray ta = context.obtainStyledAttributes(attrs,
                R.styleable.title_bar);
        //得到样式
        title_text = ta.getString(R.styleable.title_bar_title_text);
        left_text = ta.getString(R.styleable.title_bar_left_text);
        right_text = ta.getString(R.styleable.title_bar_right_text);

        //得到颜色
        title_text_color = ta.getColor(R.styleable.title_bar_title_text_color,
                0);
        left_text_color = ta.getColor(R.styleable.title_bar_left_text_color, 0);
        right_text_color = ta.getColor(R.styleable.title_bar_right_text_color,
                0);

//recycle()[垃圾回收]()机制是自动调用的，没有人去主动调用。它会自动判断对象是否不再被需要，然后去销毁该对象；如果内存够用，系统可能并不会立即释放某些垃圾，对系统性能影响也可忽略。一般如果希望系统回收该对象，将其设为null就可以了
        ta.recycle(); 

        title_view = inflate(context, R.layout.titleview_layout, null);  //找到view的布局
        left_tv = (TextView) title_view.findViewById(R.id.tv_left);  //右边的文字
        right_tv = (TextView) title_view.findViewById(R.id.tv_right); //左边的文字
        title_tv = (TextView) title_view.findViewById(R.id.tv_title); //中间的文字
        iv_back = (ImageView) title_view.findViewById(R.id.iv_back); //返回的按钮

        left_tv.setText(left_text);           //设置左边的文字
        left_tv.setTextColor(left_text_color);  //设置左边的颜色

        right_tv.setText(right_text);           //设置右边的文字
        right_tv.setTextColor(right_text_color); //设置右边的颜色

        title_tv.setText(title_text);           //设置中间title的文字
        title_tv.setTextColor(title_text_color);  //设置中间title的颜色

        //布局添加进去
        addView(title_view);

        //添加点击事件。 因为左边有个图片有个文字，所以为增强用户体验，两个都添加点击事件

        //左边的图片
        iv_back.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (titleBarClickListener != null) {
                    titleBarClickListener.leftClick();
                }
            }
        });
       //左边的文字
        left_tv.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (titleBarClickListener != null) {
                    titleBarClickListener.leftClick();
                }
            }
        });
        //右边的文字点击事件
        right_tv.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                if (titleBarClickListener != null) {
                    titleBarClickListener.rightClick();
                }
            }
        });

    }

    public TitleBarClickListener getTitleBarClickListener() {
        return titleBarClickListener;
    }
    public void setTitleBarClickListener(TitleBarClickListener titleBarClickListener) {
        this.titleBarClickListener = titleBarClickListener;
    }
    public int getRight_text_color() {
        return right_text_color;
    }

    /**
     * 设置右边文字的颜色
     * @param right_text_color 颜色值
     */
    public void setRight_text_color(int right_text_color) {
        this.right_text_color = right_text_color;

        right_tv.setTextColor(right_text_color); //设置颜色
    }
    public int getLeft_text_color() {
        return left_text_color;
    }
    /**
     * 设置左边文字的颜色
     * @param left_text_color 颜色值
     */
    public void setLeft_text_color(int left_text_color) {
        this.left_text_color = left_text_color;
        left_tv.setTextColor(left_text_color); //设置颜色
    }

    public int getTitle_text_color() {
        return title_text_color;
    }

    /**
     * 设置中间文字的颜色
     * @param title_text_color 颜色值
     */
    public void setTitle_text_color(int title_text_color) {
        this.title_text_color = title_text_color;
        title_tv.setTextColor(title_text_color); //设置颜色
    }

    public String getRight_text() {
        return right_text;
    }
    /**
     * 设置右边文字的内容
     * @param right_text
     */
    public void setRight_text(String right_text) {
        this.right_text = right_text;
        right_tv.setText(right_text); //设置内容
    }

    public String getLeft_text() {
        return left_text;
    }
    /**
     * 设置左边文字的内容
     * @param left_text
     */
    public void setLeft_text(String left_text) {
        this.left_text = left_text;
        left_tv.setText(left_text); //设置内容
    }

    public String getTitle_text() {
        return title_text;
    }
    /**
     * 设置title文字的内容
     * @param title_text
     */
    public void setTitle_text(String title_text) {
        this.title_text = title_text;
        title_tv.setText(title_text); //设置内容
    }
    public Drawable getImagedrawable() {
        return imagedrawable;
    }
    //设置图片
    public void setImagedrawable(Drawable imagedrawable) {
        this.imagedrawable = imagedrawable;
        iv_back.setImageDrawable(imagedrawable);
    }

    //两个是点击事件的回调监听接口
    public interface TitleBarClickListener {
        void leftClick();
        void rightClick();
    }
}

在来看看怎么使用吧

首先创建一个项目在mainActivity的布局文件里这样用

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:bigsmile="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >

    <xiuyue.xiuyuewang.com.my_titilebar.TitleBar_View
        android:id="@+id/titlebar_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        bigsmile:left_text="大爱"
        bigsmile:left_text_color="@color/colorwhite"
        bigsmile:right_text="有木有"
        bigsmile:right_text_color="@color/colorwhite"
        bigsmile:title_text="冷场王"
        bigsmile:title_text_color="@color/colorPrimary">
    </xiuyue.xiuyuewang.com.my_titilebar.TitleBar_View>


    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@mipmap/aaa"
        />

</LinearLayout>

看上面是不是使用很简单，文字内容， 文字颜色， 使用是不是非常方便。下面的imageview 就不用看了，不小心粘上去了，忘记删了。

然后在MainActivity类里面初始化控件

package xiuyue.xiuyuewang.com.my_titilebar;

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

/**
 * 自定义titleBar 方便开发，效率开发，集成即用
 */
public class MainActivity extends AppCompatActivity implements TitleBar_View.TitleBarClickListener {


    private TitleBar_View titlebar_view;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);

        setContentView(R.layout.activity_main);

        titlebar_view = (TitleBar_View) findViewById(R.id.titlebar_view);

//        titlebar_view.setImagedrawable();   //设置自己想用的图片

        titlebar_view.setTitleBarClickListener(this);

    }

    /**
     * 左边的返回按钮+textview的点击事件
     */
    @Override
    public void leftClick() {

        Toast.makeText(MainActivity.this, "左边", Toast.LENGTH_SHORT).show();

    }

    /**
     * 右边的textview的点击事件
     */
    @Override
    public void rightClick() {
        Toast.makeText(MainActivity.this, "右边", Toast.LENGTH_SHORT).show();
    }

}

只需要初始化我们的自定义view ， 然后让mainActivity 实现 TitleBar_View.TitleBarClickListener接口，需要重写两个方法，这样就可以轻松的实现点击事件了。

到这里一个普通实用耐用耐磨的自定义组合控件 就这么写完了。

demo CSDN下载地址

如果有什么好的建议请大家多多指出来，弟弟会改的！

好了是时候打一波广告了！！！！

大家可以关注下弟弟

新浪微博： 大微笑1992

新浪邮箱： dreamisleader@sina.com

CSDN 大微笑

431.png

QQ:84251597

微信：dreamisleader

微信二维码

Screenshot_2016-11-03-14-31-08.png

女神镇楼，不点赞别想跑！

苍1.jpg
苍2.jpg