《第一行代码》学习笔记-- 基础的自定义标题控件的定义和使用

<span style="font-size:18px;">今天看了郭霖老师《第一行代码》中的关于动态布局的知识：Android中实现仿iPhone风格标题栏的自定义控件。自己对着书敲了一遍，郭霖老师只介绍了如何自定义控件，</span>

<span style="font-size:18px;">可能觉得简单，没有介绍如何使用控件，自己加了一点新的东西：使用自定义控件。给自己布局好的的TextView控件上加入自定义标题控件。</span>

<span style="font-size:18px;">总结一下自定义控件以及使用大体思路：</span>

<span style="font-size:18px;">1）创建自定义控件的布局文件title.xml: 来布局自定义控件；</span>

<span style="font-size:18px;">2) 创建一个类TitleLayout来继承LinearLayout(RelativeLayout)，添加自定义布局文件中控件的监听事件；</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:18px;">3）布局主布局文件，添加自定义控件和添加系统自带控件方法一样，但必须包含自定义控件的完整包名和类名。具体参考代码如下：</span></span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;">
</span>

<span style="font-family: Arial, Helvetica, sans-serif;"><span style="font-size:18px;">自定义布局文件title.xml,实现类似iPhone风格的标题栏：</span></span>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@drawable/title_bg"
    >

    <Button
        android:id="@+id/btn_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/back_bg"
        android:textColor="#fff"
        android:text="Back"
        android:layout_gravity="center"
        />

    <TextView
        android:id="@+id/tv_title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:textSize="20sp"
        android:textColor="#fff"
        android:text="This is a title"
        android:layout_gravity="center"
        />

    <Button
        android:id="@+id/btn_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dp"
        android:background="@drawable/edit_bg"
        android:textColor="#fff"
        android:text="Edit"
        android:layout_gravity="center"
        />

</LinearLayout>

自定义控件类TitleLayout，给自定义布局文件title.xml添加监听事件：

package com.steven.customtitlewidget;

import android.app.Activity;
import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.Toast;

/**
 * Created by Steven on 2016/9/9.
 */
public class TitleLayout extends LinearLayout {
    public TitleLayout(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.title, this);  //动态加载一个title.xml的布局文件，this给TitleLayout布局添加一个父布局
        Button btnTitleBack = (Button)findViewById(R.id.btn_back);
        Button btnTitleEdit = (Button)findViewById(R.id.btn_edit);

        btnTitleBack.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Activity)getContext()).finish();  //销毁该Activity
            }
        });

        btnTitleEdit.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getContext(), "You clicked Edit Button", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

主布局文件activity_main.xml：给想要实现的TextView控件，添加自定义标题控件：

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

    <com.steven.customtitlewidget.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
    </com.steven.customtitlewidget.TitleLayout>

    <TextView
        android:text="This is MainActivity "
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center_horizontal"
        android:textSize="30sp" />

</LinearLayout>

Demo演示效果如下：

点击BACK按钮，则会调用finish()，销毁该Activity，点击EDIT按钮，则会弹出一个Toast提醒。本文是一个很基础的自定义布局示例，后续继续深入学习。