自定义View----Android UI模板设计

自定义View—-Android UI模板设计

今天在慕课网上看徐老师讲的自定义View，收获比较多，就跟着老师的讲解把代码敲了一遍，这里我把代码黏贴上去，算是对学习的一个总结。
通过这次课程，学到了：1.了解为什么要使用模板开发。2.使用模板开发的好处。3.学会自定义属性。4.学会了自定义View。
步骤一：在values文件夹下面建一个名为atts的xml文件，自定义一些属性。

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <declare-styleable name="Topbar">
        <attr name="mtitle" format="string"></attr>
        <attr name="mtitleTextSize" format="dimension"></attr>
        <attr name="mtitleTextColor" format="color"></attr>

        <attr name="leftTextColor" format="color"></attr>
        <attr name="leftBackgroud" format="reference|color"></attr>
        <attr name="leftText" format="string"></attr>

        <attr name="rightTextColor" format="color"></attr>
        <attr name="rightBackgroud" format="reference|color"></attr>
        <attr name="rightText" format="string"></attr>
    </declare-styleable>
</resources>

步骤二：自定义一个Topbar类

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 String title;
        private float titleTextSize;
        private int titleTextColor;


        //布局的属性  把控件添加到Layout中
        private LayoutParams leftParames,rightParames,titleParames;


    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_leftBackgroud);
        leftText=ta.getString(R.styleable.Topbar_leftText);

        rightTextColor=ta.getColor(R.styleable.Topbar_rightTextColor, 0);
        rightBackground=ta.getDrawable(R.styleable.Topbar_rightBackgroud);
        rightText=ta.getString(R.styleable.Topbar_rightText);

        title=ta.getString(R.styleable.Topbar_mtitle);
        titleTextSize=ta.getDimension(R.styleable.Topbar_titleTextSize, 0);
        titleTextColor=ta.getColor(R.styleable.Topbar_mtitleTextColor, 0);
        //回收
        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(title);
        tvTitle.setTextColor(titleTextColor);
        tvTitle.setTextSize(titleTextSize);
        //文字居中
        tvTitle.setGravity(Gravity.CENTER);

        setBackgroundColor(0xFFF59563);
        //左按钮的宽高属性。
        leftParames=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        //左Button居左对齐。
        leftParames.addRule(RelativeLayout.ALIGN_PARENT_LEFT, TRUE);

        addView(leftButton, leftParames);


        //右按钮的宽高属性。
        rightParames=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT);
        //右Button居左对齐。
        rightParames.addRule(RelativeLayout.ALIGN_PARENT_RIGHT,TRUE);
        addView(rightButton,rightParames);

        //文字的宽高属性。
        titleParames=new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, LayoutParams.MATCH_PARENT);
        //文字居中对齐。
        titleParames.addRule(RelativeLayout.CENTER_IN_PARENT,TRUE);
        addView(tvTitle, titleParames);

        leftButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.leftClick();
            }
        });
        //接口回调机制。
        rightButton.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                listener.rightClick();
            }
        });
    }
        public void setLeftIsvisable(boolean flag){
            if(flag){
                leftButton.setVisibility(View.VISIBLE);
            }else{
                leftButton.setVisibility(View.GONE);
            }
    }
}

步骤三：在主xml文件中，自定义View

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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"
    tools:context=".MainActivity">

    <com.example.administrator.mytopbar.Topbar  //自定义View，包名类名
        android:id="@+id/topbar"
        android:layout_width="match_parent"
        android:layout_height="40dp"

        custom:leftBackgroud="@drawable/code"
        custom:leftText="Back"
        custom:leftTextColor="#FFFFFF"

        custom:title="自定义标题"
        custom:titleTextSize="10sp"
        custom:titleTextColor="#000000"

        custom:rightBackgroud="@drawable/code"
        custom:rightText="Back"
        custom:rightTextColor="#FFFFFF"
       >

    </com.example.administrator.mytopbar.Topbar>

</RelativeLayout>

步骤四：在主Activity中调用自定义的View。

Topbar topbar= (Topbar) findViewById(R.id.topbar);
 topbar.setOnTopbarClickListener(new Topbar.topbarClickListener() {
     @Override
     public void leftClick() {
         Toast.makeText(MainActivity.this,"left",Toast.LENGTH_LONG).show();
     }

     @Override
     public void rightClick() {
         Toast.makeText(MainActivity.this,"right",Toast.LENGTH_LONG).show();
     }
 });

注：本案例中用到了接口回调机制；自定义View。
具体的讲解请看徐老师的视频：http://www.imooc.com/learn/247
希望和大家一起学习，共同解决问题。