Android 自定义控件之简单自定义一个TopBar

最新推荐文章于 2022-12-06 18:28:23 发布

BiggerChang

最新推荐文章于 2022-12-06 18:28:23 发布

阅读量3.3k

点赞数 1

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

本文链接：https://blog.youkuaiyun.com/chang_1134/article/details/51440448

版权

Android 专栏收录该内容

22 篇文章

订阅专栏

最近正在写一个项目，一开始写项目的时候，还不懂自定义控件是什么鬼，然后TopBar就是复制再复制，看到这么多的重复代码，有种想吐吐不出的感觉，心情很不爽，后来学习了一下自定义控件，为了方便看效果，把三个TopBar放到同一个界面中了，效果如图：

这里写图片描述

先看看主布局文件：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    注意这里后面的res-auto，默认是http://schemas.android.com/tools 所以需要手动改一下
    xmlns:tools="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <cn.demo.topbardemo.WidgetTopBar
        android:id="@+id/wtb_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:m_title="这是标题1"
        tools:m_left_text="返回"
        tools:m_right_image="@drawable/shared" />

    <cn.demo.topbardemo.WidgetTopBar
        android:layout_marginTop="10dp"
        android:id="@+id/wtb_two"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:m_title="这是标题2"
        tools:m_right_text="分享"
        tools:m_left_image="@drawable/back" />

    <cn.demo.topbardemo.WidgetTopBar
        android:layout_marginTop="10dp"
        android:id="@+id/wtb_three"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        tools:m_title="这是标题3"
        tools:m_left_image="@drawable/back" />
</LinearLayout>

然后是MainActivity.java中的数据

public class MainActivity extends Activity implements View.OnClickListener {

    private Context mContext = this;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //这是第一个标题
        WidgetTopBar wtbOne = (WidgetTopBar) findViewById(R.id.wtb_one);
        wtbOne.getLeftBtnText().setOnClickListener(this);
        wtbOne.getRightBtnImage().setOnClickListener(this);
        //这是第二个标题
        WidgetTopBar wtbTwo = (WidgetTopBar) findViewById(R.id.wtb_two);
        wtbTwo.getLeftBtnImage().setOnClickListener(this);
        wtbTwo.getRightBtnText().setOnClickListener(this);
        //这是第三个标题
        WidgetTopBar wtbThree = (WidgetTopBar) findViewById(R.id.wtb_three);
        wtbThree.getLeftBtnImage().setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(mContext, "第三个标题 左边按钮", Toast.LENGTH_SHORT).show();
            }
        });
    }

    @Override
    public void onClick(View v) {
        switch (v.getId()) {
            case R.id.ib_left_top_bar: {
                Toast.makeText(mContext, "第二个标题 左边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.ib_right_top_bar: {
                Toast.makeText(mContext, "第一个标题 右边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.btn_left_top_bar: {
                Toast.makeText(mContext, "第一个标题 左边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
            case R.id.btn_right_top_bar: {
                Toast.makeText(mContext, "第二个标题 右边按钮", Toast.LENGTH_SHORT).show();
                break;
            }
        }
    }
}

现在的代码量，比没有用自定义控件的代码量要少很多了

下面我们来看看这个自定义控件是怎么实现的

先看看res/values/attr.xml中的属性设置（没有attr.xml文件的话，请自行新建）

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <!--WidgetTopBar是自定义控件的类名-->
    <declare-styleable name="WidgetTopBar">
        <attr name="m_title" format="string" />
        <attr name="m_left_text" format="string" />
        <attr name="m_right_text" format="string" />
        <attr name="m_left_image" format="reference" />
        <attr name="m_right_image" format="reference" />
    </declare-styleable>
</resources>

再看看自定义控件的布局文件是怎么样的：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="#ff529bff"
    android:layout_height="44dp">

    <Button
        android:id="@+id/btn_left_top_bar"
        android:background="#0000"
        android:textColor="#fff"
        android:textSize="16sp"
        android:visibility="gone"
        android:layout_centerVertical="true"
        android:layout_marginStart="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <ImageButton
        android:id="@+id/ib_left_top_bar"
        android:background="#0000"
        android:visibility="gone"
        android:layout_centerVertical="true"
        android:layout_marginStart="20dp"
        android:layout_width="30dp"
        android:layout_height="30dp" />

    <TextView
        android:id="@+id/tv_title_top_bar"
        android:textSize="18sp"
        android:textColor="#fff"
        android:layout_centerInParent="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

    <Button
        android:id="@+id/btn_right_top_bar"
        android:visibility="gone"
        android:background="#0000"
        android:textColor="#fff"
        android:textSize="16sp"
        android:layout_marginEnd="10dp"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:ignore="RelativeOverlap" />

    <ImageButton
        android:id="@+id/ib_right_top_bar"
        android:visibility="gone"
        android:background="#0000"
        android:layout_marginEnd="20dp"
        android:layout_centerVertical="true"
        android:layout_alignParentEnd="true"
        android:layout_width="30dp"
        android:layout_height="30dp" />
</RelativeLayout>

其实这个布局文件的重复代码还是比较多的，大家可以用style简化代码了

接下来就是主菜了：WidgetTopBar.java

package cn.demo.topbardemo;

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.Button;
import android.widget.ImageButton;
import android.widget.RelativeLayout;
import android.widget.TextView;

/**
 * Created by Administrator on 2016/5/17.
 * Author jxc
 */
public class WidgetTopBar extends RelativeLayout {

    private ImageButton ibLeft;
    private ImageButton ibRight;
    private Button btnLeft;
    private Button btnRight;
    private TextView tvTitle;
    private String title;
    private String leftText;
    private String rightText;
    private Drawable leftDrawable;
    private Drawable rightDrawable;

    public WidgetTopBar(Context context, AttributeSet attrs) {
        super(context, attrs);
        //初始化属性
        initAttrs(context, attrs);
        //填充视图
        View.inflate(context, R.layout.widget_top_bar, this);
        btnLeft = (Button) findViewById(R.id.btn_left_top_bar);
        ibLeft = (ImageButton) findViewById(R.id.ib_left_top_bar);
        tvTitle = (TextView) findViewById(R.id.tv_title_top_bar);
        btnRight = (Button) findViewById(R.id.btn_right_top_bar);
        ibRight = (ImageButton) findViewById(R.id.ib_right_top_bar);

        //如果属性有值的话，那我们就需要给控件初始化数据了
        initData();
    }

    //初始化属性
    private void initAttrs(Context context, AttributeSet attrs) {
        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.WidgetTopBar);
        // WidgetTopBar_m_left这个名字很奇怪，我们明明没有定义，
        // 这是因为系统自动把我们定义的m_title加到WidgetTopBar后面去了
        //标题
        title = typedArray.getString(R.styleable.WidgetTopBar_m_title);
        //左边按钮的文字
        leftText = typedArray.getString(R.styleable.WidgetTopBar_m_left_text);
        //左边按钮的图片
        rightText = typedArray.getString(R.styleable.WidgetTopBar_m_right_text);
        //右边按钮的文字
        leftDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_left_image);
        //右边按钮的图片
        rightDrawable = typedArray.getDrawable(R.styleable.WidgetTopBar_m_right_image);
    }

    // 初始化数据,因为每个按钮，我都在布局文件中将其显示状态设置为GONE 了
    // 所以在填充数据的时候，要显示一下
    private void initData() {
        if (title != null) {
            tvTitle.setText(title);
        }
        if (leftText != null) {
            btnLeft.setVisibility(VISIBLE);
            btnLeft.setText(leftText);
        }
        if (rightText != null) {
            btnRight.setVisibility(VISIBLE);
            btnRight.setText(rightText);
        }
        if (leftDrawable != null) {
            ibLeft.setVisibility(VISIBLE);
            ibLeft.setBackground(leftDrawable);
        }
        if (rightDrawable != null) {
            ibRight.setVisibility(VISIBLE);
            ibRight.setBackground(rightDrawable);
        }
    }

    //获取左边文字按钮
    public Button getLeftBtnText() {
        return btnLeft;
    }

    //获取右边文字按钮
    public Button getRightBtnText() {
        return btnRight;
    }

    //获取左边图片按钮
    public ImageButton getLeftBtnImage() {
        return ibLeft;
    }

    //获取右边图片按钮
    public ImageButton getRightBtnImage() {
        return ibRight;
    }
}

现在心情舒畅多了，以后只要写一点必要的代码就可以显示一个TopBar了，而且如果你想改下TopBar的背景色，也可以随便改。

Demo链接：
http://download.youkuaiyun.com/detail/chang_1134/9523395