Android学习之自定义view——TopBar

最新推荐文章于 2022-01-23 12:54:48 发布

jiapeng991

最新推荐文章于 2022-01-23 12:54:48 发布

阅读量974

点赞数

本文链接：https://blog.csdn.net/jiapeng2b/article/details/48199199

版权

学习记录专栏收录该内容

37 篇文章 1 订阅

订阅专栏

每个软件都有属于自的TopBar，比如QQ，微信。。。。。
今天我们就来简单讲解一下自定义的TopBar的做法。
首先先来一张效果图：
这里写图片描述
一般的TopBar都有三个属性，一个左Button、右Button，还有就是中间的标题。
然后每个文字都会有各自的属性，字体大小，字体颜色，背景等等。。。
所以这次，我们先把最基础的属性将他配置上
先在value文件下新建attrs.xml文件

<declare-styleable name="TopBar">
        <!-- 标题属性 -->
        <attr name="titleText" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>
        <attr name="titleBackground" format="reference|color"/>
        <!-- 左按钮属性 -->
        <attr name="leftText" format="string"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftTextCloor" format="color"/>
        <!-- 右按钮属性 -->
        <attr name="rightText" format="string"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightTextColor" format="color"/>


    </declare-styleable>

format是值该属性的取值类型,一共有：
string,color,demension,integer,enum,reference,float,boolean,fraction,flag;
基础的属性弄好之后，想想一般的button还是需要点击事件的处理，所以下面的代码已经做了处理，对外暴露出左右按钮的点击事件：

package com.jp.view;

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.util.AttributeSet;
import android.view.Gravity;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Button;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.jp.activity.R;

/**
 * Created by Administrator on 2015/9/3.
 */
public class TopBar extends RelativeLayout
{
    /**
     * torbar的左右两个按钮
     */
    private Button leftButton;
    private Button rightButton;
    /**
     * torbar的标题
     */
    private TextView title;

    /**
     * torbar的左按钮的字体颜色
     */
    private int leftTextColor;
    /**
     * torbar的左按钮的背景
     */
    private Drawable leftDrawable;
    /**
     * torbar的左按钮的标题
     */
    private String leftText;

    /**
     * torbar的右按钮的字体颜色
     */
    private int rightTextColor;
    /**
     * torbar的右按钮的背景
     */
    private Drawable rightDrawable;
    /**
     * torbar的右按钮的标题
     */
    private String rightText;

    /**
     * torbar的标题字体大小
     */
    private float titleTextSize;
    /**
     * torbar的标题字体贪色
     */
    private int titleTextColor;
    /**
     * torbar的标题
     */
    private String titleText;

    private Drawable titleBrackgroud;

    private RelativeLayout.LayoutParams leftParams, rightParams, titleParams;

    private TopBarClickListener listener;

    //点击事件监听器接口
    public interface TopBarClickListener
    {

        public void leftclick();

        public void rightclick();
    }

    public TopBar(Context context, AttributeSet attrs)
    {
        super(context, attrs);
        //获取自定义属性和值的映射集合
        TypedArray td = context.obtainStyledAttributes(attrs, R.styleable.TopBar);
        //取出自定义属性 - 左侧
        leftTextColor = td.getColor(R.styleable.TopBar_leftTextCloor, Color.WHITE);
        leftDrawable = td.getDrawable(R.styleable.TopBar_leftBackground);
        leftText = td.getString(R.styleable.TopBar_leftText);
        //取出自定义属性 - 右侧
        rightTextColor = td.getColor(R.styleable.TopBar_rightTextColor, Color.BLACK);
        rightDrawable = td.getDrawable(R.styleable.TopBar_rightBackground);
        rightText = td.getString(R.styleable.TopBar_rightText);
        //取出自定义属性 - 标题
        titleTextSize = td.getDimension(R.styleable.TopBar_titleTextSize, 12);
        titleText = td.getString(R.styleable.TopBar_titleText);
        titleTextColor = td.getColor(R.styleable.TopBar_titleTextColor, Color.BLACK);
        titleBrackgroud = td.getDrawable(R.styleable.TopBar_titleBackground);

        //回收TypedArray（避免浪费资源，避免因为缓存导致的错误）
        td.recycle();

        leftButton = new Button(context);
        rightButton = new Button(context);
        title = new Button(context);
        //设置属性 - 左侧
        leftButton.setText(leftText);
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftDrawable);
//设置属性 - 右侧
        rightButton.setText(rightText);
        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightDrawable);
//设置属性 - 标题
        title.setText(titleText);
        title.setTextColor(titleTextColor);
        title.setTextSize(titleTextSize);
        title.setBackground(titleBrackgroud);
        title.setGravity(Gravity.CENTER);
//设置整体背景颜色
        setBackgroundColor(0xffeb933e);
//设置布局 - 左
        leftParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        leftParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(leftButton, leftParams);
        //设置布局 - 右
        rightParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        rightParams.addRule(RelativeLayout.CENTER_VERTICAL, TRUE);
        addView(rightButton, rightParams);
        //设置布局 - 标题
        titleParams = new RelativeLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT, TRUE);
        addView(title, titleParams);

//设置监听器
        leftButton.setOnClickListener(new OnClickListener()
        {

            @Override
            public void onClick(View v)
            {

                listener.leftclick();
            }
        });
        rightButton.setOnClickListener(new OnClickListener()
        {

            @Override
            public void onClick(View v)
            {

                listener.rightclick();
            }
        });
    }

    //是否显示左右按钮
    public void setLeftIsVisible(boolean visible)
    {
        if (visible) {
            leftButton.setVisibility(View.VISIBLE);
        } else {
            leftButton.setVisibility(View.GONE);
        }
    }

    public void setRightIsVisible(boolean visible)
    {
        if (visible) {
            rightButton.setVisibility(View.VISIBLE);
        } else {
            rightButton.setVisibility(View.GONE);
        }
    }
}

接下来看布局文件，这里有一点是要提一下
android studio一定要引入
xmlns:custom=”http://schemas.android.com/apk/res-auto”
而ecplice一定要引入
xmlns:custom=”http://schemas.android.com/apk/res/com.example.customview01”我们的命名空间，后面的包路径指的是项目的package

<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:background="#ffffff"
tools:context=".MainActivity">

    <com.jp.view.TopBar
        android:background="#eb933e"
        android:id="@+id/topbar_title"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        custom:leftText="左菜单"
        custom:leftBackground="#eb933e"
        custom:rightBackground="#00eb933e"
        custom:leftTextCloor="#ffffff"
        custom:rightText="右菜单"
        custom:rightTextColor="#ffffff"
        custom:titleText="我是自定义的"
        custom:titleTextColor="#000000"
        custom:titleTextSize="10sp"
        />
        </RelativeLayout>

最后在MainActivity中使用的方法：

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState){

        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        TopBar topBar = (TopBar) findViewById(R.id.topbar);
/*      topBar.setLeftIsVisible(false);
        topBar.setRightIsVisible(false);*/
        topBar.setOnTopBarClickListener(new TopBarClickListener() {

            @Override
            public void rightclick(){
                Toast.makeText(MainActivity.this, "Right Clicked", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void leftclick(){
                Toast.makeText(MainActivity.this, "Left Clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }

}