自定义TopBar和属性封装

最新推荐文章于 2021-12-06 22:18:52 发布

原创最新推荐文章于 2021-12-06 22:18:52 发布 · 460 阅读

0 ·

CC 4.0 BY-SA版权

Android 进阶专栏收录该内容

97 篇文章

订阅专栏

本文介绍了一种自定义Topbar视图的方法，通过定义属性、创建View并封装成组件，实现在不同界面上的复用。同时提供了使用示例及源码下载。

前言

在实际工作中，当我们接到boss要做一个如下界面时
此图为网上借鉴，如有意见请留言删除，谢谢

也许会有很多这样共同的界面，当然我们每个界面都写一个这样的Topbar，也是可以实现统一的效果，但是要修改的时候，那我们岂不是要废掉（what？）
我们我要写自定义基础的View封装起来使用，这样在修改的时候，我们就会省很多事。

那么我们就开始我们自己的View封装

第一步
定义自己的属性，在values文件夹中创建atts.xml文件内容如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!--第一步：定义属性-->
    <declare-styleable name="Topbar">
        <attr name="titleName" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleNameTextColor" format="color"/>
        <attr name="leftText" format="string"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="rightText" format="string"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightTextColor" format="color"/>
    </declare-styleable>

</resources>

第二步
我们自定义属于我们自己的View

/**
 * @author :huangxianfeng on 2017/3/14.
 * 第二步：创建自己的View
 * 自定义自己的View,TopBar的模板，不能在每个界面都修改此界面
 */
public class Topbar extends RelativeLayout {

    private Button leftButton,rightButton;
    private TextView tvTitle;

    private int leftTextColor;
    private Drawable leftBackground;
    private String leftText;

    private int rightTextColor;
    private Drawable rightBackground;
    private String rightText;

    private float titleTextSize;
    private int titleTextColor;
    private String title;

    private LayoutParams leftParams,rightParams,titleParams;

    private topbarClickListener listener;

    /**
     * 创建一个空外部调用的接口
     */
    public interface topbarClickListener{
        public void leftClick();
        public void rightClick();
    }

    public void setOnTopbarClickListener(topbarClickListener listener){
        this.listener = listener;
    }

    @TargetApi(Build.VERSION_CODES.JELLY_BEAN)
    public Topbar(final Context context, AttributeSet attrs) {
        super(context, attrs);


        //包含了自己所有的自定义的属性
        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.Topbar);
        //从属性中提取自定义的属性
        leftTextColor = ta.getColor(R.styleable.Topbar_leftTextColor, 0);
        leftBackground = ta.getDrawable(R.styleable.Topbar_leftBackground);
        leftText = ta.getString(R.styleable.Topbar_leftText);

        rightTextColor = ta.getColor(R.styleable.Topbar_rightTextColor, 0);
        rightBackground = ta.getDrawable(R.styleable.Topbar_rightBackground);
        rightText = ta.getString(R.styleable.Topbar_rightText);

        titleTextSize = ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
        titleTextColor = ta.getColor(R.styleable.Topbar_titleNameTextColor, 0);
        title = ta.getString(R.styleable.Topbar_titleName);

        ta.recycle();//进行回收

        //创建自定义的控件
        leftButton = new Button(context);
        rightButton = new Button(context);
        tvTitle = new TextView(context);

        //设置属性
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBackground);
        leftButton.setText(leftText);

        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBackground);
        rightButton.setText(rightText);

        tvTitle.setTextColor(titleTextColor);
        tvTitle.setTextSize(titleTextSize);
        tvTitle.setText(title);
        tvTitle.setGravity(Gravity.CENTER);

        setBackgroundColor(0xFFF59563);

        leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);//增加一个规则，让控件左边显示
        addView(leftButton, leftParams);//此时完成一个View控件的添加，添加到ViewGroup中去了

        rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);//增加一个规则，让控件右边显示
        addView(rightButton, rightParams);//此时完成一个View控件的添加，添加到ViewGroup中去了

        titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);//增加一个规则,让控件居中显示
        addView(tvTitle, titleParams);//此时完成一个View控件的添加，添加到ViewGroup中去了

        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //我们这边只进行调用这边的暴露的方法即可
                listener.leftClick();
            }
        });

        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });
    }

    /**
     * 设置左边按钮是否显示
     * @param flag
     */
    public void setLeftIsvisable(boolean flag){
        if (flag){
            leftButton.setVisibility(View.VISIBLE);
        }else{
            leftButton.setVisibility(View.GONE);
        }
    }

    /**
     * 设置右边按钮是否显示
     * @param flag
     */
    public void setRightIsvisable(boolean flag){
        if (flag){
            rightButton.setVisibility(View.VISIBLE);
        }else{
            rightButton.setVisibility(View.GONE);
        }
    }
}

此View很简单，只是一些简单的功能实现，有自己想要添加的方法，都可以自行更改。

第三步
如何使用我们以上的内容呢？其实简单，只要在我们activity_main.xml布局添加即可

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp"
    tools:context=".MainActivity">

    //在添加自己的自定义属性的时候，要先加入一个xmln:custom="http://schemas.android.com/apk/res-auto"
    //以便来引用自己的属性，以下scustom就是引用的自己的属性
    <com.zhjy.hxf.hzui.Topbar
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custom:leftBackground="#7CCE1C"
        custom:leftText="Back"
        custom:leftTextColor="#FFFFFF"
        custom:rightBackground="#7CCE1C"
        custom:rightText="More"
        custom:rightTextColor="#FFFFFF"
        custom:titleName="自定义标题"
        custom:titleNameTextColor="#123412"
        custom:titleTextSize="10sp"/>

</RelativeLayout>

在上面代码中，有custom这个包的依赖是为什么呢？其实就是自定义的属性依赖名称，为了和android区分开来，但是要在最外层父布局中添加

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

来依赖属性类别。

第四步
就可以在我们MainActivity中使用我们的Topbar了

public class MainActivity extends AppCompatActivity {

    private Topbar mTopbar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initUI();
    }

    private void initUI() {
        mTopbar = (Topbar)findViewById(R.id.topbar);
        mTopbar.setOnTopbarClickListener(new Topbar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this,"leftClick",Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightClick() {
                Toast.makeText(MainActivity.this,"rightClick",Toast.LENGTH_SHORT).show();
            }
        });
        mTopbar.setLeftIsvisable(true);
    }
}

以上就是demo的全部内容了。
源码下载：
http://download.youkuaiyun.com/download/huang3513/9780360
欢迎大家留言交流