AndroidUI模板设计

我们所用的所有控件都是直接或间接继承自View的，所用的所有布局都是直接或间接继承自ViewGroup的，View是Android中的一种最基本的UI组件，它可以在屏幕上绘制一块矩形区域，并能响应这块区域的各种事件，因此，我们使用各种控件其实就是在View的基础之上又添加了各自的功能。而ViewGroup则是一种特殊的View，它可以包含很多的子View和子ViewGroup，是一个放置控件和布局的容器。

• 掌握如何自定义控件属性
• 掌握如何动态创建组件
• 掌握如何设计动态模板
• 体会模板化开发的便利之处
• 体会接口回调机制的思想

系统是怎么做的呢

<LinearLayout     xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity">
</LinearLayout>

public class LinearLayout extends ViewGroup {}

可以看出LinearLayout继承自ViewGroup。

步骤

• 设计需要的属性
• 实现自定义View
• 引用自定义View

下面我们来具体看一下实现：
首先我们定义attrs.xml文件来设计我们需要的属性

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="TopBar">
        <attr name="titleContent" format="string"/>
        <attr name="titleTextSize" format="dimension"/>
        <attr name="titleTextColor" format="color"/>
        <attr name="leftTextColor" format="color"/>
        <attr name="leftBackground" format="reference|color"/>
        <attr name="leftText" format="string"/>
        <attr name="rightTextColor" format="color"/>
        <attr name="rightBackground" format="reference|color"/>
        <attr name="rightText" format="string"/>
    </declare-styleable>
</resources>

format：表示我们在布局文件中引用属性时所需要数据的类型。

接下来我们来实现自定义的View：

package com.timosang.titlebar;

import android.content.Context;
import android.content.res.TypedArray;
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 android.widget.Toast;

/**
 * Created by Administrator on 2015/7/7 0007.
 */
public class TopBar extends RelativeLayout {
    //声明所需要的控件
    private Button leftButton, rightButton;
    private TextView tvTitle;

    private int leftTextColor;
    private Drawable leftBackground;
    private String leftText;

    private int rightTextColor;
    private Drawable rightBackground;
    private String rightText;

    private float titleTextSize;
    private int titleTextColor;
    private String titleContext;

    //设置布局参数
    private LayoutParams leftParams, rightParams, titleParams;

    private topbarClickListener listener;
    //定义接口回调

    public interface topbarClickListener {
        public void leftClick();

        public void rightCLick();

    }

    public void setOnTopbarClickListener(topbarClickListener listener) {
        this.listener = listener;
    }

    public TopBar(final Context context, AttributeSet attrs) {
        super(context, attrs);
        //获取我们定义的属性

        TypedArray ta = context.obtainStyledAttributes(attrs, R.styleable.TopBar);

        leftTextColor = ta.getColor(R.styleable.TopBar_leftTextColor, 0);
        leftBackground = ta.getDrawable(R.styleable.TopBar_leftBackground);
        leftText = ta.getString(R.styleable.TopBar_leftText);

        rightTextColor = ta.getColor(R.styleable.TopBar_rightTextColor, 0);
        rightBackground = ta.getDrawable(R.styleable.TopBar_rightBackground);
        rightText = ta.getString(R.styleable.TopBar_rightText);

        titleContext = ta.getString(R.styleable.TopBar_titleContent);
        titleTextSize = ta.getDimension(R.styleable.TopBar_titleTextSize, 0);
        titleTextColor = ta.getColor(R.styleable.TopBar_titleTextColor, 0);

        //注意要回收TypedArray

        ta.recycle();
        //实例化控件
        leftButton = new Button(context);
        rightButton = new Button(context);
        tvTitle = new TextView(context);

        //设置控件的属性
        leftButton.setTextColor(leftTextColor);
        leftButton.setBackground(leftBackground);
        leftButton.setText(leftText);

        rightButton.setTextColor(rightTextColor);
        rightButton.setBackground(rightBackground);
        rightButton.setText(rightText);

        tvTitle.setText(titleContext);
        tvTitle.setTextColor(titleTextColor);
        tvTitle.setTextSize(titleTextSize);
        tvTitle.setGravity(Gravity.CENTER);

        setBackgroundColor(0xFFF09563);

        leftParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        leftParams.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);
        //把leftButton以leftParams的形式添加到ViewGroup
        addView(leftButton, leftParams);

        rightParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        rightParams.addRule(RelativeLayout.ALIGN_PARENT_RIGHT, TRUE);
        //把rightButton以rightParams的形式添加到ViewGroup
        addView(rightButton, rightParams);

        titleParams = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.MATCH_PARENT);
        titleParams.addRule(RelativeLayout.CENTER_IN_PARENT);

        addView(tvTitle, titleParams);

        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //Toast.makeText(context, "left Button", Toast.LENGTH_SHORT).show();
                listener.leftClick();
            }
        });
        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                //Toast.makeText(context, "right Button", Toast.LENGTH_SHORT).show();
                listener.rightCLick();
            }
        });


    }

    public void setLeftIsVisiable(boolean flag) {
        if (flag){
            leftButton.setVisibility(View.VISIBLE);
        }else {
            leftButton.setVisibility(View.GONE);
        }
    }
}

引用我们定义的View：

<LinearLayout 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">

    <com.timosang.titlebar.TopBar
        android:id="@+id/top_bar"
        android:layout_width="wrap_content"
        android:layout_height="50dp"
        custom:leftText="back"
        custom:leftBackground="#111111"
        custom:leftTextColor="#FFFFFF"
        custom:rightText="more"
        custom:rightBackground="#111111"
        custom:rightTextColor="#FFFFFF"
        custom:titleContent="自定义标题"
        custom:titleTextColor="#FFFFFF"
        custom:titleTextSize="10sp">

    </com.timosang.titlebar.TopBar>
</LinearLayout>

Activity的实现:

package com.timosang.titlebar;

import android.app.Activity;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.Window;
import android.widget.LinearLayout;
import android.widget.Toast;

public class MainActivity extends Activity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_main);
        TopBar topBar = (TopBar) findViewById(R.id.top_bar);
        topBar.setOnTopbarClickListener(new TopBar.topbarClickListener() {
            @Override
            public void leftClick() {
                Toast.makeText(MainActivity.this, "left Button", Toast.LENGTH_SHORT).show();
            }

            @Override
            public void rightCLick() {
                Toast.makeText(MainActivity.this, "right Button", Toast.LENGTH_SHORT).show();
            }
        });
        topBar.setLeftIsVisiable(false);


    }


}