Android 自定义组合控件（页面顶部）

开发项目时发现页面顶部都是高度一致的，直接上图

都是一个返回键，加一个文本框后边一坨textview和图标。

最开始时候是把这个布局文件抽取出来了，在页面中用include方式引入。但是这样还是需要处理返回键逻辑和链接WiFi逻辑。于是决定自定义组合控件

步骤如下：

先建一个topview类，继承LinearLayout

public class TopView extends LinearLayout

创建构造方法，把布局文件引进来

public TopView(Context context, AttributeSet attrs) {
    super(context, attrs);
    LayoutInflater.from(context).inflate(R.layout.top_views, this);
}

编写布局文件

<?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="match_parent"
    android:background="@color/black"
    android:id="@+id/top_view"
    android:orientation="horizontal">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/iconback">
    </ImageView>

    <TextView
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="返回"
        android:layout_gravity="center_vertical"
        android:textColor="@color/Yellow">
    </TextView>

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_gravity="center_vertical"
        android:gravity="center_horizontal"
        android:layout_weight="1"
        android:textColor="@color/white">
    </TextView>

    <TextView
        android:id="@+id/connect_wifi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="连接WiFi "
        android:textColor="@color/white">
    </TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text="通讯 : "
        android:textColor="@color/white">
    </TextView>

    <TextView
        android:id="@+id/communication_among"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_vertical"
        android:text=""
        android:textColor="@color/white">
    </TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        android:layout_gravity="center_vertical"
        android:textColor="@color/white">
    </TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="uBox : "
        android:layout_gravity="center_vertical"
        android:textColor="@color/white">
    </TextView>

    <TextView
        android:id="@+id/ubox_condition"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=""
        android:layout_gravity="center_vertical"
        android:textColor="@color/white">
    </TextView>

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text=" "
        android:layout_gravity="center_vertical"
        android:textColor="@color/white">
    </TextView>

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/iconmenu">
    </ImageView>
</LinearLayout>

说明：这里采用线性布局，横向排列的，用到 android:orientation="horizontal属性，中间标题文本框设置权重为1填满剩余空间，另外加上

android:layout_gravity="center_vertical" android:gravity="center_horizontal"

这两个属性，文字上下左右都居中。大家可以看到有两个地方我是写了空的textview这里主要是让跟上个文本框有间隔，textview的text属性字符串后边加空格可以显示，前面直接空格是不显示的，又不想在Java代码中处理这个故采用这种方式。

在topview中初始化控件

private void init() {
    back = findViewById(R.id.back);
    back.setOnClickListener(this);
    connectWifi = findViewById(R.id.connect_wifi);
    connectWifi.setOnClickListener(this);
    title = findViewById(R.id.title);
    communicationAmong = findViewById(R.id.communication_among);
    uboxCondition = findViewById(R.id.ubox_condition);
}

编写给文本框设置text方法

public void setTitle(String s) {
    title.setText(s);
}

处理点击事件

@Override
public void onClick(View view) {
    switch (view.getId()) {
        case R.id.back:
            ((Activity)getContext()).finish();
            break;
        case R.id.connect_wifi:
            Intent in = new Intent();
            in.setAction("android.net.wifi.PICK_WIFI_NETWORK");
            getContext().startActivity(in);
            break;
        default:
            break;
    }

}

完整代码如下

package com.example.recanapp;

import android.app.Activity;
import android.content.Context;
import android.content.Intent;
import android.media.Image;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;

public class TopView extends LinearLayout implements View.OnClickListener {

    private TextView back;
    private TextView title;
    private TextView connectWifi;
    private TextView communicationAmong;
    private TextView uboxCondition;

    public TopView(Context context, AttributeSet attrs) {
        super(context, attrs);
        LayoutInflater.from(context).inflate(R.layout.top_views, this);
        init();
    }

    private void init() {
        back = findViewById(R.id.back);
        back.setOnClickListener(this);
        connectWifi = findViewById(R.id.connect_wifi);
        connectWifi.setOnClickListener(this);
        title = findViewById(R.id.title);
        communicationAmong = findViewById(R.id.communication_among);
        uboxCondition = findViewById(R.id.ubox_condition);
    }

    public void setTitle(String s) {
        title.setText(s);
    }

    public void setCommunicationAmong(String s) {
        communicationAmong.setText(s);
    }

    public void setUboxCondition(String s) {
        uboxCondition.setText(s);
    }

    @Override
    public void onClick(View view) {
        switch (view.getId()) {
            case R.id.back:
                ((Activity)getContext()).finish();
                break;
            case R.id.connect_wifi:
                Intent in = new Intent();
                in.setAction("android.net.wifi.PICK_WIFI_NETWORK");
                getContext().startActivity(in);
                break;
            default:
                break;
        }

    }
}

自定义组合控件就好了，直接在activity里面引入使用就ok

在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="match_parent">

    <com.example.recanapp.TopView
        android:id="@+id/top_view"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>

</LinearLayout>

在activity里面初始化该空间调用topView.setTitle("cyc");给文本框赋值

package com.example.recanapp.sjjk;

import android.os.Bundle;

import com.example.recanapp.BaseActivity;
import com.example.recanapp.R;
import com.example.recanapp.TopView;

public class BightPatternActivity extends BaseActivity {

    private TopView topView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.bight_pattern_activity);
        topView = findViewById(R.id.top_view);
        topView.setTitle("cyc");
        topView.setCommunicationAmong("cyc");
        topView.setUboxCondition("cyc");
    }
}

效果图如下

Android 自定义组合控件（页面顶部）

猜你喜欢