《第一行代码》笔记1-创建自定义控件

2017-09-17  本文已影响67人  忧郁的小码仔

新建一个工程,实现一个类iOS系统导航条样式的菜单
1.在res layout目录下新建一个title.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="#8F6D6D">

    <Button
        android:id="@+id/title_back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="#59B08F"
        android:text="Back"
        android:textColor="#ffffff"/>

    <TextView
        android:id="@+id/title_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_weight="1"
        android:gravity="center"
        android:text="Title Text"
        android:textColor="#ffffff"
        android:textSize="24sp"/>

    <Button
        android:id="@+id/title_edit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:layout_margin="5dp"
        android:background="#CB2B2B"
        android:text="edit"
        android:textColor="#ffffff"/>
</LinearLayout>
  1. 直接在activity_main.xml布局文件中通过include的方式把title布局引入:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <include layout="@layout/title" />
</LinearLayout>
  1. 将系统自带的菜单隐藏掉:
package com.example.customtitle;

import android.support.v7.app.ActionBar;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class MainActivity extends AppCompatActivity {

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

        // 隐藏掉系统自带的标题栏
        ActionBar actionBar = getSupportActionBar();
        if (actionBar != null) {
            actionBar.hide();
        }

    }
}

运行:

Screenshot_2017-09-17-10-24-48-657_CustomTitle.png

这样就实现了一个菜单栏,只需要在需要的布局中引入即可。
但是这种include的方式有一个缺陷,一般菜单栏都是要响应一些事件的,比如返回按钮负责返回上一个activity等等。如果在每个引入的activity里都单独去实现这些方法会比较冗余。

这种时候就需要自定义一个控件了。
新建一个TitleLayout类继承自LinearLayout,并在该布局中加载title.xml资源,并定义相关的事件即可.

package com.example.customtitle;

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

/**
 * Created by archerlj on 2017/9/17.
 */

public class TitleLayout extends LinearLayout {

    public TitleLayout(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        // this 表示R.layout.title的父布局,就是TitleLayout
        LayoutInflater.from(context).inflate(R.layout.title, this);

        // 返回按钮事件
        findViewById(R.id.title_back).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                ((Activity)getContext()).finish();
            }
        });

        // 编辑按钮事件,这里弹出一个toast即可。
        findViewById(R.id.title_edit).setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View view) {
                Toast.makeText(getContext(), "Eidt clicked", Toast.LENGTH_SHORT).show();
            }
        });
    }
}

2.定义好layout之后,只需要在需要的activity布局中像普通控件一样使用即可。打开activity_main.xml文件:

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

    <!--<include layout="@layout/title" />-->

    <com.example.customtitle.TitleLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"></com.example.customtitle.TitleLayout>
</LinearLayout>

运行:
点击back按钮即可退出程序,点击edit按钮可弹出一个toast。

这样每当我们需要一个菜单栏的时候,直接在布局文件中引入即可,并且菜单中的事件也会自动实现了。

上一篇下一篇

猜你喜欢

热点阅读