自定义组合控件

最新推荐文章于 2023-10-20 17:28:13 发布

gaowei_yb

最新推荐文章于 2023-10-20 17:28:13 发布

阅读量399

点赞数 1

分类专栏：自定义控件文章标签： Android 自定义控件控件

本文链接：https://blog.csdn.net/gaowei_yb/article/details/53910911

版权

自定义控件专栏收录该内容

8 篇文章 0 订阅

订阅专栏

之前看过一篇博客自定义组合控件，感觉比较有代表性，今天学习一下，也分享给大家，用自定义组合控件的方法写一个我们项目中常见的titlebar，首先写一个布局，很简单，就是左右各一个按钮，中间是标题，不过这里使用merge标签，因为我们还会去继承Relativelayout，为了不叠加嵌套使用Relativelayout，这里用merge。

如下title_bar布局：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    >
    <Button
        android:id="@+id/title_bar_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerVertical="true"
        android:layout_marginLeft="5dp"
        android:background="@null"
        android:minHeight="45dp"
        android:minWidth="45dp"
        android:textSize="14sp"
        />
    <TextView
        android:id="@+id/title_bar_title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:singleLine="true"
        android:textSize="17sp"
        />
    <Button
        android:id="@+id/title_bar_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerVertical="true"
        android:layout_marginRight="7dp"
        android:background="@null"
        android:minHeight="45dp"
        android:minWidth="45dp"
        android:textSize="14sp"
        />

</merge>

接下来自定义控件属性，在values目录下建一个attrs文件：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="CustomTitleBar">
        <attr name="title_background_color" format="color"></attr>
        <attr name="left_button_visible" format="boolean"/>
        <attr name="right_button_visible" format="boolean"/>
        <attr name="title_text" format="string"/>
        <attr name="title_text_color" format="color"/>
        <attr name="title_text_drawable" format="reference|integer"/>
        <attr name="right_button_text" format="string"/>
        <attr name="right_button_text_color" format="color"/>
        <attr name="right_button_drawable" format="reference|integer"/>
        <attr name="left_button_text" format="string"/>
        <attr name="left_button_text_color" format="color"/>
        <attr name="left_button_drawable" format="reference|integer"/>
    </declare-styleable>
</resources>

名称还算见名之意，这里定义的name后面使用就像我们用textview控件的setText一样。

接下来写一个类CustomTitleBar继承Relativelayout，直接把代码复制上来，很容易懂得：

/**
 * Created by GW on 16/12/28.
 */

public class CustomTitleBar extends RelativeLayout {

    private final Button titlebarleft;
    private final Button titlebarright;
    private final TextView titlebartitle;

    public CustomTitleBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        View view = LayoutInflater.from(context).inflate(R.layout.title_bar, this, true);
        titlebarleft = (Button) view.findViewById(R.id.title_bar_left);
        titlebarright = (Button) view.findViewById(R.id.title_bar_right);
        titlebartitle = (TextView) view.findViewById(R.id.title_bar_title);
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.CustomTitleBar);
        if (typedArray!=null){
            //处理titlebar背景色
            int titlebarbackground = typedArray.getColor(R.styleable.CustomTitleBar_title_background_color, Color.BLUE);
            view.setBackgroundColor(titlebarbackground);
            //处理左边按钮
            //获取是否需要显示左边按钮
            boolean leftbuttonvisible = typedArray.getBoolean(R.styleable.CustomTitleBar_left_button_visible, true);
            if (leftbuttonvisible){
                titlebarleft.setVisibility(VISIBLE);
            }else {
                titlebarleft.setVisibility(INVISIBLE);
            }
            //设置左边按钮文字
            String leftbuttontext = typedArray.getString(R.styleable.CustomTitleBar_left_button_text);
            if (!TextUtils.isEmpty(leftbuttontext)){
                titlebarleft.setText(leftbuttontext);
                //设置左边按钮文字颜色
                int leftbuttontextcolor = typedArray.getColor(R.styleable.CustomTitleBar_left_button_text_color, Color.BLUE);
                titlebarleft.setTextColor(leftbuttontextcolor);
            }else {
                //设置左边图片,注意这里只能文字图片二选一
                int leftbuttonpic = typedArray.getResourceId(R.styleable.CustomTitleBar_left_button_drawable, -1);
                if (leftbuttonpic!=-1){
                    titlebarleft.setBackgroundResource(leftbuttonpic);
                }
            }

            //处理标题,先获取标题看是否显示图片
            int titletextpic = typedArray.getResourceId(R.styleable.CustomTitleBar_title_text_drawable, -1);
            if (titletextpic!=-1){
                titlebartitle.setBackgroundResource(titletextpic);
            }else {
                //不是图片则获取文字标题
                String titlebartext = typedArray.getString(R.styleable.CustomTitleBar_title_text);
                titlebartitle.setText(titlebartext);
                int titlebartitletextcolor = typedArray.getColor(R.styleable.CustomTitleBar_title_text_color, Color.WHITE);
                titlebartitle.setTextColor(titlebartitletextcolor);
            }

            //处理右边按钮,先获取是否需要显示右边按钮
            boolean rightbuttonvisible = typedArray.getBoolean(R.styleable.CustomTitleBar_right_button_visible, true);
            if (rightbuttonvisible){
                titlebarright.setVisibility(VISIBLE);
            }else {
                titlebarright.setVisibility(INVISIBLE);
            }
            //设置右边按钮文字
            String rightbuttontext = typedArray.getString(R.styleable.CustomTitleBar_right_button_text);
            if (!TextUtils.isEmpty(rightbuttontext)){
                titlebarright.setText(rightbuttontext);
                //设置文字颜色
                int righttextcolor = typedArray.getColor(R.styleable.CustomTitleBar_right_button_text_color, Color.WHITE);
                titlebarright.setTextColor(righttextcolor);
            }else {
                //设置右边图片,此处只能二选一
                int rightbuttonpic = typedArray.getResourceId(R.styleable.CustomTitleBar_right_button_drawable, -1);
                if (rightbuttonpic!=-1){
                    titlebarright.setBackgroundResource(rightbuttonpic);
                }
            }
            typedArray.recycle();
        }
    }

    public Button getTitlebarleft(){
        return titlebarleft;
    }
    public TextView getTitlebartitle(){
        return titlebartitle;
    }
    public Button getTitlebarright(){
        return titlebarright;
    }
}

上面的注释都比较清楚，接下来就是使用了，相信大家都知道我们使用的第一步肯定是声明命名空间，我一般都是使用自动

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

下面是activity布局文件中的完整代码：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:gw="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

   <com.mfiji.test.CustomTitleBar
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_marginTop="10dp"
        gw:left_button_text="返回"
        gw:left_button_text_color="#ffffff"
        gw:title_text="头条"
        gw:right_button_visible="false"
        />
    <com.mfiji.test.CustomTitleBar
        android:layout_width="match_parent"
        android:layout_height="50dp"
        gw:title_background_color="@color/blue"
        android:layout_marginTop="10dp"
        gw:left_button_text="返回"
        gw:left_button_text_color="#ffffff"
        gw:title_text="头条"
        gw:right_button_text="添加"
        gw:right_button_text_color="#ff00"
        />
    <com.mfiji.test.CustomTitleBar
        android:id="@+id/cb_titlebar"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        gw:title_background_color="@color/colorAccent"
        android:layout_marginTop="10dp"
        gw:left_button_text_color="#ffffff"
        gw:left_button_drawable="@drawable/back"
        gw:title_text="头条"
        gw:right_button_text="添加"
        gw:right_button_text_color="#ff00"
        />

</LinearLayout>

效果如下：

这里注意左边右边均可为图标，左边图标切图切的好的话直接使用，如果尺寸不好可以代码设置大小，如下在activity中获取button:

CustomTitleBar mCbtitlebar = (CustomTitleBar) findViewById(R.id.cb_titlebar);
Button titlebarleft = mCbtitlebar.getTitlebarleft();
//设置button大小，使图片显示正常
ViewGroup.LayoutParams layoutParams = titlebarleft.getLayoutParams();
layoutParams.height=60;
layoutParams.width=80;
titlebarleft.setLayoutParams(layoutParams);
//设置返回按钮点击事件
titlebarleft.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View v) {
        finish();
    }
});
到此这个titlebar就开发完成了，当然可以自行扩展。