打造一个通用的TitleView

2017-12-02 本文已影响97人一本未写完的书

在开发应用的过程中，大部分应用应该都是有标题栏的。通常情况下，我们所使用的标题栏的高度什么其他设置之类的基本上都是相同。so，为了节省开发的效率，今天我们共同打造一个通用的标题栏。

一般刚开发的时候，我们会有好几种情况去写标题栏，感觉刚入行的话，可能会在每个布局里面都去复制重复的布局，升级一点的话，应该会用include去把这个同样的布局，引入的主布局中。但是我感觉上面的方法都麻烦了。现在用一个自定义布局，只需要在布局中设置自己想要的东西就可以。那现在就让我们一起开始吧。
首先展示一下我们经常的使用布局的一个样式，一般情况下都是有三个主要部分组成，第一个是返回按钮，一般都是有的，然后中间是说明这个页面的大概描述，最后一个是点击这个按钮可以跳转其他的页面之类的。这里写图片描述
自定义View的话，有很多种情况，在这里我们使用继承原有的View实现自定义(其实是很简单的自定义了)。首先需要写一个布局，其实这个布局很简单的，就是我们平常用xml写的布局，不作具体介绍了。代码如下

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

              android:layout_width="match_parent"
              android:layout_height="wrap_content"
              android:background="@color/main_color"
              android:orientation="vertical">


    <RelativeLayout
        android:id="@+id/ll_root"
        android:layout_width="match_parent"
        android:layout_height="@dimen/common_title_height"
        android:background="@color/main_color">

        <LinearLayout
            android:clickable="true"
            android:id="@+id/btn_left"
            android:layout_width="@dimen/common_title_height"
            android:layout_height="match_parent"
            android:background="@drawable/selector_btn_back"
            android:gravity="center"
            android:padding="10dp">

            <ImageView
                android:id="@+id/left_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/ic_back_white"/>
        </LinearLayout>


        <TextView
            android:id="@+id/title_name"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:maxLength="20"
            android:maxLines="1"
            android:text="标题"
            android:textColor="@color/white"
            android:textSize="@dimen/title_text_size"/>

        <LinearLayout
            android:clickable="true"
            android:id="@+id/btn_right"
            android:layout_width="@dimen/common_title_height"
            android:layout_height="match_parent"
            android:layout_alignParentRight="true"
            android:background="@drawable/selector_btn_back"
            android:gravity="center"
            android:padding="10dp">

            <ImageView
                android:id="@+id/right_icon"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@mipmap/actionbar_menu"/>
        </LinearLayout>

    </RelativeLayout>

</LinearLayout>

接下来就要自定义布局了，在这里我们继承LinearLayout来实现自定义View。只需要把下面属性复制到attrs.xml里面就行。这里面可能有点难的主要有两点吧，一个自定义属性，第二个就是点击事件之类的。
1. 自定义属性：这里的话，我一共设置了九个自定义属性。其中要说的明的是最后两个属性里面有一个逻辑就是当左边的icon不显示的时候，不响应点击事件。同理右边的也是。
  | name| format| 意义 |
  | ------------- |:-------------:| :-----:|
  | title_color | color | 标题的背景颜色|
  | title_text_size | dimension |标题字体的大小|
  | title_text_color | color |标题字体的颜色|
  | title_text| string| 标题字体的内容|
  | title_left_icon | reference|标题左边的icon|
  | title_right_icon | reference |标题右边的icon|
  | title_high| dimension| 标题栏的高度|
  | left_isVisable | boolean | 是否显示左边的icon|
  | right_isVisable | boolean |是否显示右边的icon |

<!--自定义标题栏-->
    <declare-styleable name="MyTitle">
        <attr name="title_color" format="color" />
        <attr name="title_text_size" format="dimension" />
        <attr name="title_text_color" format="color" />
        <attr name="title_text" format="string" />
        <attr name="title_left_icon" format="reference" />
        <attr name="title_right_icon" format="reference" />
        <attr name="title_high" format="dimension" />
        <attr name="left_isVisable" format="boolean" />
        <attr name="right_isVisable" format="boolean" />
    </declare-styleable>

好了自定义属性设定好了，接下来就要写自定义view了。其实下面这段代码很简单，主要就是获取自定义属性，然后在代码里面设置就好了，感觉没什么好说的。

package com.mars.community.widget;

import android.content.Context;
import android.content.res.TypedArray;
import android.support.annotation.Nullable;
import android.support.v4.content.ContextCompat;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.RelativeLayout;
import android.widget.TextView;

import com.mars.community.R;


/**
 * @date 创建时间: 2017/12/2  21:46
 * @author zh_legendd
 * @Description 自定义的titleView
 * @Email code_legend@163.com
 * @Version 1.0
 */

public class TitleView extends LinearLayout {

    //标题的颜色
    private int title_color;
    //字体的大小
    private float title_text_size;
    //字体的颜色
    private int title_text_color;
    //字体内容
    private String title_text;
    //标题左边的icon


    private int title_left_icon;
    //标题右边的icon
    private int title_right_icon;
    //标题栏的高度
    private float title_high;
    //是否显示左边的icon
    private boolean left_isvisalbe;
    //是否显示右边的icon
    private boolean right_isvisalbe;
    //标题
    private TextView titleName;
    // 返回按钮控件
    private LinearLayout btnLeft;
    // 更多按钮控件
    private LinearLayout btnRight;
    // 返回按钮图标
    private ImageView leftIcon;
    // 更多按钮图标
    private ImageView rightIcon;
    //设置背景颜色
    private RelativeLayout ll_root;

    public TitleView(Context context) {
        this(context, null);
    }

    public TitleView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public TitleView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.common_titile, this);
        //初始化视图
        initView();
        TypedArray typedArray = getContext().obtainStyledAttributes(attrs, R.styleable.MyTitle, defStyleAttr, 0);
        try {
            title_color = typedArray.getColor(R.styleable.MyTitle_title_color, ContextCompat.getColor(context, R.color.main_color));
            title_text_color = typedArray.getColor(R.styleable.MyTitle_title_text_color, ContextCompat.getColor(context, R.color.white));
            title_high = typedArray.getDimension(R.styleable.MyTitle_title_high, getResources().getDimension(R.dimen.common_title_height));
            title_text = typedArray.getString(R.styleable.MyTitle_title_text);
            title_left_icon = typedArray.getResourceId(R.styleable.MyTitle_title_left_icon, R.mipmap.ic_back_white);
            title_right_icon = typedArray.getResourceId(R.styleable.MyTitle_title_right_icon, 0);
//            title_text_size = typedArray.getDimension(R.styleable.MyTitle_title_text_size,getResources().getDimension(R.dimen.title_text_size));
            left_isvisalbe = typedArray.getBoolean(R.styleable.MyTitle_left_isVisable, true);
            right_isvisalbe = typedArray.getBoolean(R.styleable.MyTitle_right_isVisable, false);
            //设置内容
            titleName.setText(title_text);
//            titleName.setTextSize(dp2px(title_text_size));
            titleName.setTextColor(title_text_color);
            ll_root.setBackgroundColor(title_color);
            if (left_isvisalbe) {
                leftIcon.setVisibility(View.VISIBLE);
                leftIcon.setImageResource(title_left_icon);
            } else {
                leftIcon.setVisibility(View.GONE);
                btnLeft.setEnabled(false);
            }
            if (right_isvisalbe) {
                rightIcon.setImageResource(title_right_icon);
                rightIcon.setVisibility(View.VISIBLE);
            } else {
                rightIcon.setVisibility(View.GONE);
                btnRight.setEnabled(false);
            }
            LinearLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) title_high);
            ll_root.setLayoutParams(params);


        } finally {
            typedArray.recycle();
        }

    }

    public void setLeftClickListener(OnClickListener listener) {
        btnLeft.setOnClickListener(listener);
    }

    public void setRightClickListener(OnClickListener listener) {
        btnRight.setOnClickListener(listener);
    }

    public int getTitle_color() {
        return title_color;
    }

    public void setTitle_color(int title_color) {
        this.title_color = title_color;
        ll_root.setBackgroundColor(title_color);
    }

    public float getTitle_text_size() {
        return title_text_size;
    }

    public void setTitle_text_size(float title_text_size) {
        this.title_text_size = title_text_size;
        titleName.setTextSize(title_text_size);
    }

    public int getTitle_text_color() {
        return title_text_color;
    }

    public void setTitle_text_color(int title_text_color) {
        this.title_text_color = title_text_color;
        titleName.setText(title_text_color);
    }

    public String getTitle_text() {
        return title_text;
    }

    public void setTitleName(String title_text) {
        this.title_text = title_text;
        titleName.setText(title_text);
    }

    public int getTitle_left_icon() {
        return title_left_icon;
    }

    public void setTitle_left_icon(int title_left_icon) {
        this.title_left_icon = title_left_icon;
        leftIcon.setImageResource(title_left_icon);
    }

    public int getTitle_right_icon() {
        return title_right_icon;
    }

    public void setTitle_right_icon(int title_right_icon) {
        this.title_right_icon = title_right_icon;
        rightIcon.setImageResource(title_right_icon);
    }

    public float getTitle_high() {
        return title_high;
    }

    public void setTitle_high(float title_high) {
        this.title_high = title_high;
        LinearLayout.LayoutParams params = new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, (int) title_high);
        ll_root.setLayoutParams(params);
    }

    private void initView() {
        titleName = (TextView) findViewById(R.id.title_name);
        btnLeft = (LinearLayout) findViewById(R.id.btn_left);
        btnRight = (LinearLayout) findViewById(R.id.btn_right);
        leftIcon = (ImageView) findViewById(R.id.left_icon);
        rightIcon = (ImageView) findViewById(R.id.right_icon);
        ll_root = (RelativeLayout) findViewById(R.id.ll_root);
    }
    protected int dp2px(float dp) {
        final float scale = getContext().getResources().getDisplayMetrics().density;
        return (int) (dp * scale + 0.5f);
    }

}

接下了就是怎么使用了，使用的话真的很简单。根据自己的需求可以任意设定即可。需要在根布局中引入匿名约束即这一行代码xmlns:app="http://schemas.android.com/apk/res-auto"。

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

<com.zh.connent.widget.TitleView
        android:id="@+id/tlv"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:left_isVisable="false"
        app:right_isVisable="true"
        app:title_right_icon="@mipmap/discovery_right_icon"
        app:title_text="标题栏"
        />

打造一个通用的TitleView

在开发应用的过程中，大部分应用应该都是有标题栏的。通常情况下，我们所使用的标题栏的高度什么其他设置之类的基本上都是相同。so，为了节省开发的效率，今天我们共同打造一个通用的标题栏。

好了，就是这么简单，直接拿来用就好，有什么问题可以给我留言。

猜你喜欢

热点阅读